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

/* ============================================
   FAQ
   ============================================ */
function FAQ() {
  const items = [
    { q: "Jethro substitui um mentor humano?", a: "Não. Jethro é o sistema operacional que faltava entre as suas mentorias. Ele entrega direção, plano e governo todos os dias — algo que nenhum mentor humano consegue fazer 24/7. Mentores humanos continuam fazendo o que humanos fazem melhor: presença, intuição, momentos de virada." },
    { q: "Eu já tenho consultor / coach. Faz sentido?", a: "Sim. Os clientes que mais aproveitam Jethro já têm acompanhamento. Jethro garante execução entre as sessões, não substitui as sessões. Pense nele como o CFO + chefe de gabinete que cabe no seu bolso." },
    { q: "Preciso ser cristão para usar?", a: "Não. Os princípios bíblicos aplicados ao negócio são opcionais — você liga ou desliga. Mas se você é empreendedor cristão e queria um produto que respeitasse sua fé sem cair em linguagem rasa, esse é." },
    { q: "Quando o produto é entregue?", a: "O lançamento será no dia 15/05/2026. As funcionalidades completas são liberadas em ondas até agosto/2026." },
    { q: "Funciona em qualquer dispositivo?", a: "iOS e Android. Mesma conta. Estado 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 / Perguntas</span>
          <h2 className="title">Tudo que <em>você ia perguntar</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 / Decisão</span>
        <h2 className="display" style={{marginTop: 24}}>
          A próxima segunda-feira chega <em>com ou sem plano</em>.
        </h2>
        <p className="lede" style={{margin: "32px auto 40px"}}>
          Você pode entrar nela mais um vez no escuro — ou abrir o Jethro
          e saber exatamente o que mover primeiro.
        </p>
        <div style={{display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap"}}>
          <a href="#founder" className="btn btn--primary btn--lg">
            Escolher meu plano <span className="btn-arrow"><Icon.Arrow /></span>
          </a>
          <a href="#faq" className="btn btn--ghost btn--lg">Ainda tenho dúvida</a>
        </div>
        <p className="mono-label" style={{marginTop: 36, justifyContent: "center", display: "block"}}>
          Pré-lançamento · 30 dias de garantia · 296 vagas restantes
        </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">Mentoria com IA para empreendedores cristãos. Direção, execução e governo — em um só lugar.</p>
          </div>
          <div className="footer__col">
            <h5>Produto</h5>
            <a href="#como">Como funciona</a>
            <a href="#recursos">Recursos</a>
            <a href="#founder">Plano de pré-lançamento</a>
            <a href="#faq">FAQ</a>
          </div>
          <div className="footer__col">
            <h5>Empresa</h5>
            <a href="#">Manifesto</a>
            <a href="#">Roadmap</a>
            <a href="#">Contato</a>
          </div>
          <div className="footer__col">
            <h5>Legal</h5>
            <a href="#">Termos</a>
            <a href="#">Privacidade</a>
            <a href="#">Reembolso</a>
          </div>
        </div>
        <div className="footer__bar">
          <span>© 2026 Jethro Labs. Todos os direitos 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 do hero">
        <TweakRadio
          value={tweaks.heroVariant}
          onChange={(v) => setTweak("heroVariant", v)}
          options={[
            { value: "direction", label: "Direção 24h" },
            { value: "execution", label: "Pare de consumir" },
            { value: "wisdom", label: "Sabedoria 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 />
      <Stats />
      <Solution />
      <HowItWorks />
      <Features />
      <FounderPlan />
      <ForWhom />
      <Authority />
      <FAQ />
      <FinalCTA />
      <Footer />
      <JethroTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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