// Guarantee.jsx + FAQ.jsx + FinalCTA.jsx + Footer.jsx
function Guarantee() {
  return (
    <section className="section guarantee" data-reveal>
      <div className="container container-narrow">
        <div className="seal">
          <svg className="seal-svg" viewBox="0 0 200 200" width="180" height="180" aria-hidden="true">
            <defs>
              <path id="seal-circle" d="M 100,100 m -78,0 a 78,78 0 1,1 156,0 a 78,78 0 1,1 -156,0" />
            </defs>
            <circle cx="100" cy="100" r="88" className="seal-ring-svg" />
            <g className="seal-spin">
              <text className="seal-text-svg">
                <textPath href="#seal-circle" startOffset="0">
                  7 DIAS · GARANTIA TOTAL · 7 DIAS · GARANTIA TOTAL ·&#160;
                </textPath>
              </text>
            </g>
            <text x="100" y="118" textAnchor="middle" className="seal-center-svg">7</text>
          </svg>
        </div>
        <h2 className="h2 center">7 dias pra sentir se é o seu caminho.</h2>
        <p className="lead center" style={{maxWidth: 620, margin: "16px auto"}}>
          Entra, assiste os módulos 1 e 2, tenta aplicar a Fase 1 no próximo atendimento. Se em até 7 dias você sentir que não é pra você, devolvo 100%. <strong>Sem pergunta, sem formulário, sem constrangimento.</strong>
        </p>
        <p className="center" style={{fontStyle:"italic",color:"var(--fg-muted)"}}>
          Eu trabalho com verdade. E verdade não precisa de trava pra prender ninguém dentro.
        </p>
      </div>
    </section>
  );
}

const FAQS = [
  { q: "Eu nunca atendi ninguém. Esse curso serve pra mim?", a: "Serve, com condição. Se você já tira cartas (pra si, pra amigas) e quer começar a atender, o método te dá a espinha desde o primeiro atendimento. Mas se você nunca nem abriu um baralho, o Módulo 1 te coloca no ponto — contanto que você topa entrar na prática, não só assistir." },
  { q: "Eu já atendo há anos. Vou aprender coisa nova?", a: "A leitura da carta, talvez não — você já domina. O que quase ninguém ensina (e é onde mora 80% da formação) é como ler a pessoa antes da carta, como ir da queixa à raiz em 40 minutos, como montar protocolo de intervenção e como filtrar cliente muleta." },
  { q: "Eu sinto as coisas no corpo e fico confusa se é meu ou do cliente. Isso se resolve aqui?", a: "Sim — e é uma das partes mais importantes do curso (Módulo 4 e Manual do Terapeuta). Você aprende a Somatização Empática Diagnóstica e o Filtro de Referência Interna." },
  { q: "Não sou umbandista. Posso fazer mesmo assim?", a: "Pode. O método não exige que você seja da casa. Exige que você respeite as ferramentas espirituais que ele usa (ervas, banhos, pemba, trabalhos) — porque é parte do que faz funcionar." },
  { q: "Consigo cobrar mais depois do curso?", a: "Você consegue cobrar com argumento. Quem entrega diagnóstico em camadas + protocolo de intervenção + acompanhamento não cobra preço de tarólogo de internet. O Módulo 10 trabalha posicionamento e precificação." },
  { q: "Tenho medo de atender e absorver a energia dos outros.", a: "Esse medo é legítimo e é o motivo do Módulo 9 e do Manual do Terapeuta existirem. Antes de você atender com responsabilidade, você aprende a se proteger com responsabilidade." },
  { q: "E se em 7 dias não for pra mim?", a: "Devolvo integral, sem burocracia. Você fica com o que consumiu." },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section faq">
      <div className="container container-narrow">
        <h2 className="h2 center">FAQ</h2>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
              <button
                type="button"
                className="faq-q"
                aria-expanded={open === i}
                aria-controls={`faq-answer-${i}`}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <span>{f.q}</span>
                <span className="faq-tog">{open === i ? "−" : "+"}</span>
              </button>
              {open === i && <div className="faq-a" id={`faq-answer-${i}`}><p>{f.a}</p></div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="section final" data-reveal>
      <div className="container container-narrow center">
        <div className="divider">◆</div>
        <h2 className="h2" style={{marginTop: 0}}>Você já tem a sensibilidade.</h2>
        <p className="lead" style={{maxWidth: 620, margin: "12px auto 28px"}}>
          O que falta é o método. Quem fica lendo carta, dá resposta — e a vida da pessoa continua igual. Quem aprende a ler energia com sistema, transforma.
        </p>
        <p className="final-pull">Você não chegou até aqui por acaso.</p>
        <a className="btn btn-primary btn-lg" href="#offer" onClick={(e)=>{e.preventDefault();document.getElementById('offer').scrollIntoView({behavior:'smooth',block:'start'});}}>[ Sim, quero entrar no Método ]</a>
        <div className="micro center">12× de R$ 51,40 no cartão · ou R$ 497 à vista · Acesso imediato · 7 dias de garantia</div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" data-reveal>
      <div className="container center">
        <div className="foot-mark">PAI ◆ BRUNO</div>
        <div className="foot-line">Terreiro São Miguel · Método Destrava Vida</div>
        <div className="foot-mc">© {new Date().getFullYear()} · Todos os direitos reservados</div>
      </div>
    </footer>
  );
}

function RitualEffects() {
  React.useEffect(() => {
    const elements = Array.from(document.querySelectorAll("[data-reveal]"));
    if (!elements.length) return undefined;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("is-visible");
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.16, rootMargin: "0px 0px -8% 0px" }
    );

    elements.forEach((element) => observer.observe(element));
    return () => observer.disconnect();
  }, []);

  return null;
}

function OfferRail() {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const sync = () => {
      const mechanism = document.getElementById("mechanism");
      const offer = document.getElementById("offer");

      if (!mechanism || !offer) return;

      const mechanismBottom = mechanism.getBoundingClientRect().bottom;
      const offerTop = offer.getBoundingClientRect().top;
      const shouldShow = window.innerWidth > 720 && mechanismBottom <= 100 && offerTop > 180;
      setVisible(shouldShow);
    };

    sync();
    window.addEventListener("scroll", sync, { passive: true });
    window.addEventListener("resize", sync);
    return () => {
      window.removeEventListener("scroll", sync);
      window.removeEventListener("resize", sync);
    };
  }, []);

  return (
    <div className={"offer-rail" + (visible ? " is-visible" : "")} aria-hidden={!visible}>
      <div className="offer-rail-inner">
        <div>
          <div className="offer-rail-title">Método Destrava Vida</div>
          <div className="offer-rail-copy">12× de R$ 51,40 · 7 dias de garantia</div>
        </div>
        <a href="#offer" className="btn btn-primary btn-sm">Entrar agora</a>
      </div>
    </div>
  );
}

function StickyCTA() {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const sync = () => {
      const scrollRoot = document.documentElement;
      const maxScroll = scrollRoot.scrollHeight - window.innerHeight;
      const progress = maxScroll > 0 ? window.scrollY / maxScroll : 0;
      setVisible(window.innerWidth <= 720 && progress >= 0.4);
    };

    sync();
    window.addEventListener("scroll", sync, { passive: true });
    window.addEventListener("resize", sync);
    return () => {
      window.removeEventListener("scroll", sync);
      window.removeEventListener("resize", sync);
    };
  }, []);

  return (
    <div className={"sticky-cta" + (visible ? " is-visible" : "")} aria-hidden={!visible}>
      <div className="sticky-inner">
        <div>
          <div className="sticky-title">Método Destrava Vida</div>
          <div className="sticky-price">12× de R$ 51,40</div>
        </div>
        <a href="#offer" className="btn btn-primary btn-sm" onClick={(e)=>{e.preventDefault();document.getElementById('offer').scrollIntoView({behavior:'smooth',block:'start'});}}>Entrar</a>
      </div>
    </div>
  );
}

Object.assign(window, { Guarantee, FAQ, FinalCTA, Footer, OfferRail, RitualEffects, StickyCTA });