/* global React */
const { useState: useState4 } = React;

/* ============================================
   FAQ
   ============================================ */
function FAQ() {
  const items = [
    { q: "¿Jethro sustituye a un mentor humano?", a: "No. Jethro es el sistema operativo que faltaba entre tus mentorías. Entrega dirección, plan y gobierno todos los días, algo que ningún mentor humano puede hacer 24/7. Los mentores humanos siguen haciendo lo que los humanos hacen mejor: presencia, intuición, momentos decisivos." },
    { q: "Ya tengo consultor / coach. ¿Tiene sentido?", a: "Sí. Los clientes que más aprovechan Jethro ya tienen acompañamiento. Jethro garantiza la ejecución entre las sesiones, no sustituye las sesiones. Piensa en él como el CFO + jefe de gabinete que cabe en tu bolsillo." },
    { q: "¿Necesito ser cristiano para usarlo?", a: "No. Los principios bíblicos aplicados al negocio son opcionales, los activas o desactivas. Pero si eres un emprendedor cristiano y querías un producto que respetara tu fe sin caer en un lenguaje superficial, este es." },
    { q: "¿Dónde descargo la app?", a: "En la App Store (iOS) y en Google Play (Android). Es la misma cuenta en las dos plataformas." },
    { q: "¿Cómo funciona la suscripción?", a: "La suscripción es procesada por la tienda (App Store o Google Play), sin permanencia. En iPhone, cancela en Ajustes → tu nombre → Suscripciones; en Android, en Google Play → Suscripciones. La cancelación entra en vigor al final del ciclo ya pagado." },
    { q: "¿Puedo usarlo en más de un dispositivo?", a: "Sí. La misma cuenta funciona en cualquier iPhone, iPad o dispositivo Android y mantiene todo sincronizado." }
  ];
  const [open, setOpen] = useState4(0);
  return (
    <section className="section section--ice" id="faq">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow eyebrow--light">08 / Preguntas</span>
          <h2 className="title">Todo lo que <em>ibas a preguntar</em>.</h2>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? "is-open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-q__icon">+</span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Final CTA
   ============================================ */
function FinalCTA() {
  return (
    <section className="final-cta" id="cta">
      <img src="/assets/jethro-symbol.png" alt="" className="final-cta__symbol" />
      <div className="container final-cta__inner">
        <span className="eyebrow" style={{marginBottom: 24, justifyContent: "center", display: "inline-flex"}}>09 / Decisión</span>
        <h2 className="display" style={{marginTop: 24}}>
          El próximo lunes llega <em>con o sin plan</em>.
        </h2>
        <p className="lede" style={{margin: "32px auto 40px"}}>
          Puedes entrar en él una vez más a ciegas, o abrir Jethro
          y saber exactamente qué mover primero.
        </p>
        <div style={{display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap"}}>
          <a href="https://apps.apple.com/br/app/jethro/id6768756480" target="_blank" rel="noopener" className="btn btn--primary btn--lg">
            Descargar en la App Store <span className="btn-arrow"><Icon.Arrow /></span>
          </a>
          <a href="https://play.google.com/store/apps/developer?id=Jethroapp" target="_blank" rel="noopener" className="btn btn--primary btn--lg">
            Descargar en Google Play <span className="btn-arrow"><Icon.Arrow /></span>
          </a>
          <a href="#faq" className="btn btn--ghost btn--lg">Todavía tengo dudas</a>
        </div>
        <p className="mono-label" style={{marginTop: 36, justifyContent: "center", display: "block"}}>
          Empieza por el diagnóstico, es gratis · Disponible en la App Store y en Google Play
        </p>
      </div>
    </section>
  );
}

/* ============================================
   Footer
   ============================================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__inner">
          <div>
            <div className="footer__brand">
              <img src="/assets/jethro-symbol.png" alt="" />
              <span>Jethro</span>
            </div>
            <p className="footer__tag">La primera IA especializada en el emprendedor cristiano. Dirección, ejecución y gobierno, en un solo lugar.</p>
          </div>
          <div className="footer__col">
            <h5>Producto</h5>
            <a href="#como">Cómo funciona</a>
            <a href="#recursos">Funciones</a>
            <a href="#baixar">Descargar</a>
            <a href="#faq">FAQ</a>
          </div>
          <div className="footer__col">
            <h5>Contacto</h5>
            <a href="mailto:suporte@jethroapp.com">suporte@jethroapp.com</a>
            <a href="https://wa.me/5521980911540?text=Hola%2C%20visit%C3%A9%20el%20sitio%20de%20Jethro%20y%20me%20gustar%C3%ADa%20recibir%20m%C3%A1s%20informaci%C3%B3n." target="_blank" rel="noopener">WhatsApp +55 21 98091-1540</a>
            <a href="https://instagram.com/orogerioteixeira" target="_blank" rel="noopener">@orogerioteixeira</a>
          </div>
          <div className="footer__col">
            <h5>Legal</h5>
            <a href="/es/termos-de-uso">Términos de Uso</a>
            <a href="/es/politica-privacidade">Política de Privacidad</a>
            <a href="/es/excluir-conta">Eliminar cuenta</a>
            <a href="/" onClick={() => { try { localStorage.setItem("jethro.site.lang", "pt"); } catch (e) {} }}>Português</a>
          </div>
        </div>
        <div className="footer__bar">
          <span>© 2026 Jethro · Rogério Teixeira. Todos los derechos reservados.</span>
          <span>BUILT WITH DISCIPLINE · NOT WITH NOISE</span>
        </div>
      </div>
    </footer>
  );
}

/* ============================================
   Tweaks
   ============================================ */
function JethroTweaks({ tweaks, setTweak }) {
  if (!window.TweaksPanel) return null;
  const { TweaksPanel, TweakSection, TweakRadio } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Headline del hero">
        <TweakRadio
          value={tweaks.heroVariant}
          onChange={(v) => setTweak("heroVariant", v)}
          options={[
            { value: "direction", label: "Dirección 24h" },
            { value: "execution", label: "Deja de consumir" },
            { value: "wisdom", label: "Sabiduría aplicada" }
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ============================================
   App
   ============================================ */
function App() {
  const defaults = /*EDITMODE-BEGIN*/{
    "heroVariant": "direction"
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = window.useTweaks(defaults);

  return (
    <>
      <Nav />
      <Hero tweaks={tweaks} />
      <LogoStrip />
      <Problem />
      <Solution />
      <HowItWorks />
      <Features />
      <FounderPlan />
      <ForWhom />
      <Authority />
      <FAQ />
      <FinalCTA />
      <Footer />
      <JethroTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);