// components-rest.jsx — What's inside, FAQ, Final CTA, Footer

function WhatsInside() {
  const items = [
    { e: '🔥', t: 'Amadores explícitos e sem censura — todo dia' },
    { e: '🍑', t: 'Fotos e vídeos que o Instagram jamais deixaria' },
    { e: '💬', t: 'Respondo todo mundo — sou bem atenciosa haha' },
    { e: '⚡', t: 'Acesso imediato assim que assinar' },
    { e: '🔒', t: 'Canal fechado e privado — só assinantes entram' },
  ];
  return (
    <section className="section">
      <h2 className="section__title section__title--center">O que você não vê no Instagram</h2>
      <ul className="bullets">
        {items.map((it, i) => (
          <li key={i}>
            <span className="emoji">{it.e}</span>
            <span>{it.t}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

function FAQItem({ q, a, open, onToggle }) {
  return (
    <div className="faq__item" data-open={open ? '1' : '0'}>
      <button className="faq__head" onClick={onToggle} aria-expanded={open}>
        <span>{q}</span>
        <span className="faq__icon" aria-hidden />
      </button>
      <div className="faq__body">
        <div><p>{a}</p></div>
      </div>
    </div>
  );
}

function FAQ() {
  const items = [
    { q: 'O conteúdo é realmente explícito?', a: 'Sim! Todo o conteúdo é 100% explícito e sem censura. Você terá acesso ao que mais deseja ver.' },
    { q: 'O pagamento é seguro e discreto?', a: 'Totalmente! Seu pagamento é discreto e ninguém saberá do que se trata.' },
    { q: 'Posso cancelar quando quiser?', a: 'Sim, você pode cancelar a qualquer momento, sem complicação.' },
    { q: 'Meu acesso é imediato?', a: 'Sim. Assim que o pagamento é confirmado, você já entra direto no canal.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section">
      <h2 className="section__title section__title--small">Perguntas frequentes</h2>
      <div>
        {items.map((it, i) => (
          <FAQItem
            key={i}
            q={it.q}
            a={it.a}
            open={open === i}
            onToggle={() => setOpen(open === i ? -1 : i)}
          />
        ))}
      </div>
    </section>
  );
}

function FinalCTA({ variant, scrollToOffer, total, openCheckout }) {
  const onCta = openCheckout || scrollToOffer;
  if (variant === 'simple') {
    return (
      <section className="final">
        <div className="final__avatar" />
        <h2 className="final__title">Tô te esperando lá dentro 🫦</h2>
        <p className="final__sub">R$ 17,90. Entra agora.</p>
        <div style={{ padding: '0 16px' }}>
          <button className="btn btn--primary btn--full" data-plano="mensal" onClick={onCta}>Quero entrar</button>
        </div>
      </section>
    );
  }
  if (variant === 'urgent') {
    return (
      <section className="final">
        <div className="final__avatar" />
        <h2 className="final__title">Última chance — não fica de fora</h2>
        <p className="final__sub">7 vagas. Depois disso, o valor sobe.</p>
        <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <button className="btn btn--primary btn--full" data-plano="mensal" onClick={onCta}>Garantir minha vaga</button>
          <span style={{ fontSize: 11, color: 'var(--muted)' }}>Pagamento discreto · cancele quando quiser</span>
        </div>
      </section>
    );
  }
  return (
    <section className="final">
      <div className="final__avatar" />
      <h2 className="final__title font-display" style={{ fontSize: 26, fontWeight: 400 }}>
        Tô te esperando<br />lá dentro <span style={{ fontFamily: 'Outfit' }}>🫦</span>
      </h2>
      <p className="final__sub">{total ? `${formatBRL(total)} no checkout` : 'R$ 17,90. Entra agora.'}</p>
      <div style={{ padding: '0 16px' }}>
        <button className="btn btn--primary btn--full" data-plano="mensal" onClick={onCta}>Quero entrar</button>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      © 2025 Gabriela Rosa · Conteúdo destinado a maiores de 18 anos
      <div className="footer__links">
        <a href="#">Termos de Uso</a>
        <span className="sep">·</span>
        <a href="#">Política de Privacidade</a>
        <span className="sep">·</span>
        <a href="#">Contato</a>
      </div>
    </footer>
  );
}

Object.assign(window, { WhatsInside, FAQ, FinalCTA, Footer });