/* global React, CTA */
const { useState: useStateB4 } = React;

// ====== BLOCO 11 — Cost of inaction ======
function CostInaction() {
  return (
    <section id="b11" className="dark grain">
      <style>{`
        .ci-h {
          font-family: var(--font-sans);
          font-size: clamp(36px, 5.6vw, 68px);
          line-height: 1.05;
          letter-spacing: -0.03em;
          font-weight: 600;
          color: var(--ipgs-paper);
          margin: 18px 0 40px;
          max-width: 22ch;
          text-wrap: balance;
        }
        .ci-h em {
          font-family: var(--font-display);
          font-style: italic;
          color: var(--ipgs-mint);
          font-weight: 400;
        }
        .ci-table {
          border-top: 1px solid rgba(241,241,241,.16);
        }
        .ci-row {
          display: grid;
          grid-template-columns: 1fr auto;
          gap: 20px;
          align-items: center;
          padding: 22px 0;
          border-bottom: 1px solid rgba(241,241,241,.16);
        }
        .ci-label {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: rgba(241,241,241,.7);
          max-width: 28ch;
        }
        .ci-val {
          font-family: var(--font-display);
          font-style: italic;
          font-size: clamp(36px, 5.4vw, 68px);
          line-height: 1;
          color: var(--ipgs-paper);
          font-weight: 400;
          letter-spacing: -0.03em;
          text-align: right;
        }
        .ci-val.warn { color: var(--ipgs-gold); }
        .ci-val.accent { color: var(--ipgs-mint); }
        .ci-val small {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.16em;
          color: rgba(241,241,241,.6);
          font-style: normal;
          margin-left: 8px;
          vertical-align: middle;
        }
        .ci-quote {
          margin: 48px 0 36px;
          padding-left: 22px;
          border-left: 2px solid var(--ipgs-gold);
          font-family: var(--font-display);
          font-style: italic;
          font-size: clamp(19px, 2vw, 24px);
          line-height: 1.45;
          color: rgba(241,241,241,.92);
          max-width: 56ch;
        }
        .ci-cta-row { text-align: left; }
      `}</style>
      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <span className="eyebrow">O verdadeiro custo</span>
        <h2 className="ci-h reveal">
          R$ 300 não é o preço do teste.<br/>
          É o preço de <em>não recomeçar do zero.</em>
        </h2>
        <div className="ci-table reveal">
          <div className="ci-row">
            <span className="ci-label">1 ano de faculdade abandonada</span>
            <span className="ci-val warn">R$ 8–25 mil<small>+</small></span>
          </div>
          <div className="ci-row">
            <span className="ci-label">2–3 anos até trocar de curso</span>
            <span className="ci-val">tempo + frustração</span>
          </div>
          <div className="ci-row">
            <span className="ci-label">Mapeamento de aptidões IPGS <span style={{ color: "var(--ipgs-mint)" }}>(uma vez)</span></span>
            <span className="ci-val accent">R$ 300</span>
          </div>
        </div>
        <blockquote className="ci-quote reveal">
          O custo de uma escolha errada não é apenas emocional. É o peso financeiro de investir anos em uma faculdade que será abandonada.
        </blockquote>
        <div className="ci-cta-row">
          <CTA size="lg" position="b11">Investir R$ 300 agora — evitar perder R$ 25.000 amanhã</CTA>
        </div>
      </div>
    </section>
  );
}

// ====== BLOCO 12 — Redução de risco ======
function RiskReduction() {
  const items = [
    { t: "Revisão humana", d: "Cada laudo passa pela equipe IPGS antes de ser enviado.", icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="9" cy="9" r="3"/><circle cx="17" cy="11" r="2.5"/><path d="M3 20a6 6 0 0 1 12 0"/></svg>) },
    { t: "Suporte direto", d: "Dúvidas no resultado? Fale direto com nossa equipe pelo WhatsApp.", icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M21 12a9 9 0 1 1-3.4-7L21 4v5h-5"/></svg>) },
    { t: "Sessão extra disponível", d: "Pré-agendamento de sessão com orientador para aprofundar o laudo.", icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>) },
  ];
  return (
    <section id="b12" className="grain" style={{ background: "var(--ipgs-paper)" }}>
      <style>{`
        .rr-grid { display: grid; gap: 18px; }
        @media (min-width: 720px) { .rr-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
        .rr-card {
          background: white;
          border: 1px solid rgba(6,41,71,.08);
          border-radius: var(--r-lg);
          padding: 28px 24px;
          box-shadow: var(--shadow-sm);
        }
        .rr-icon {
          width: 44px; height: 44px;
          border-radius: 12px;
          background: rgba(198,156,80,.14);
          color: var(--gold-700);
          display: grid; place-items: center;
          margin-bottom: 18px;
        }
        .rr-t {
          font-family: var(--font-sans);
          font-weight: 600;
          font-size: 19px;
          color: var(--ipgs-deep);
          margin: 0 0 8px;
          letter-spacing: -0.01em;
        }
        .rr-t::before {
          content: "✓ ";
          color: var(--gold-700);
          font-weight: 700;
        }
        .rr-d { font-size: 15px; color: var(--deep-800); line-height: 1.55; margin: 0; }
      `}</style>
      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <span className="eyebrow">Redução de risco</span>
        <h2 className="display reveal" style={{ marginTop: 14, marginBottom: 32, maxWidth: "20ch" }}>
          Sua segurança vem da <em>qualidade da análise.</em>
        </h2>
        <div className="rr-grid">
          {items.map((r) => (
            <article key={r.t} className="rr-card reveal">
              <span className="rr-icon">{r.icon}</span>
              <h3 className="rr-t">{r.t}</h3>
              <p className="rr-d">{r.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ====== BLOCO 13 — FAQ ======
function FAQ() {
  const faqs = [
    { q: "É só mais um quiz da internet?", a: "Não. Cruzamos RIASEC + DISC e o laudo é revisado por psicólogos com CRP ativo. Quiz da internet entrega resultado em 30 segundos. Aqui leva até 48h justamente porque há análise humana." },
    { q: "R$ 300 não é caro?", a: "O custo médio de 1 semestre de faculdade é R$ 4–12 mil. Trocar de curso significa perder esse investimento e recomeçar. R$ 300 evita isso." },
    { q: "Quanto tempo meu filho leva pra responder?", a: "15–20 minutos. São 40 perguntas objetivas, sem certo ou errado." },
    { q: "Quando recebo o laudo?", a: "Em até 48h. Conforme nosso fluxo se otimiza, deve cair pra 24h." },
    { q: "O laudo é gerado por IA?", a: "A IA estrutura os dados, mas a análise é revisada por nossos psicólogos antes do envio. Não vai chegar nada automatizado." },
    { q: "E se ele tiver dúvida no resultado?", a: "Pode agendar uma sessão extra com um orientador da equipe (opcional)." },
    { q: "Tem garantia/reembolso?", a: "Não trabalhamos com reembolso. Trabalhamos com revisão humana antes do envio e suporte direto pela equipe pós-laudo — sua segurança vem da qualidade da análise, não da promessa de devolução." },
    { q: "Como recebo o laudo?", a: "PDF por e-mail + acesso à página de resultados online." },
    { q: "Para qual idade serve?", a: "16 a 21 anos — momento de escolha de carreira ou transição inicial." },
    { q: "Vocês são realmente psicólogos?", a: "Sim. Natália (CRP 12/23884), Karoline (CRP 12/24994) e Breno (CRP 12/25023). Fundadores do Instituto Geny Soares — registro verificável no site do CRP-SC." },
  ];
  const [open, setOpen] = useStateB4(0);
  return (
    <section id="b13" className="grain" style={{ background: "var(--paper-100)" }}>
      <style>{`
        .fq-head { margin-bottom: 32px; }
        .fq-list { border-top: 1px solid rgba(198,156,80,.40); }
        .fq-item { border-bottom: 1px solid rgba(198,156,80,.40); }
        .fq-q {
          width: 100%;
          background: transparent;
          border: none;
          padding: 22px 0;
          text-align: left;
          font-family: var(--font-display);
          font-style: italic;
          font-size: clamp(18px, 2vw, 22px);
          color: var(--ipgs-deep);
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 20px;
          font-weight: 400;
        }
        .fq-q:hover { color: var(--gold-700); }
        .fq-q .ic {
          flex-shrink: 0;
          width: 30px; height: 30px;
          border: 1px solid rgba(6,41,71,.22);
          border-radius: 50%;
          display: grid; place-items: center;
          font-family: var(--font-sans);
          font-style: normal;
          font-size: 18px;
          color: var(--ipgs-deep);
          transition: transform .3s, background .3s, color .3s, border-color .3s;
        }
        .fq-item.open .fq-q .ic {
          background: var(--ipgs-deep);
          color: var(--ipgs-paper);
          transform: rotate(45deg);
          border-color: var(--ipgs-deep);
        }
        .fq-a {
          max-height: 0; overflow: hidden;
          transition: max-height .35s ease, padding .35s ease;
          color: var(--deep-800);
          font-size: 15.5px;
          line-height: 1.6;
          max-width: 64ch;
        }
        .fq-item.open .fq-a { max-height: 360px; padding: 0 0 22px; }
      `}</style>
      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <div className="fq-head">
          <span className="eyebrow">Perguntas frequentes</span>
          <h2 className="display reveal" style={{ marginTop: 14, maxWidth: "16ch" }}>
            Tudo que <em>você</em> quer saber.
          </h2>
        </div>
        <div className="fq-list">
          {faqs.map((f, i) => (
            <div className={`fq-item ${open === i ? "open" : ""}`} key={i}>
              <button className="fq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{f.q}</span>
                <span className="ic" aria-hidden="true">+</span>
              </button>
              <div className="fq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ====== BLOCO 14 — CTA Final ======
function FinalCTA() {
  return (
    <section id="b14" className="dark grain" style={{
      background: "linear-gradient(170deg, #062947 0%, #062947 55%, #1a4a78 100%)",
      textAlign: "center",
      overflow: "hidden",
    }}>
      <style>{`
        .fc-bg {
          position: absolute; inset: 0;
          background:
            radial-gradient(50% 60% at 50% 100%, rgba(198,156,80,.32), transparent 60%),
            radial-gradient(40% 50% at 20% 30%, rgba(171,249,198,.10), transparent 60%);
          pointer-events: none;
        }
        .fc-h {
          font-family: var(--font-sans);
          font-weight: 700;
          font-size: clamp(38px, 6.4vw, 76px);
          line-height: 1.0;
          letter-spacing: -0.035em;
          color: var(--ipgs-paper);
          margin: 18px auto 22px;
          max-width: 18ch;
          text-wrap: balance;
        }
        .fc-h em {
          font-family: var(--font-display);
          font-style: italic;
          color: var(--ipgs-gold);
          font-weight: 400;
        }
        .fc-sub {
          font-size: 17px;
          color: rgba(241,241,241,.78);
          line-height: 1.5;
          max-width: 50ch;
          margin: 0 auto 36px;
        }
        .fc-trust {
          margin-top: 26px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: rgba(241,241,241,.6);
          line-height: 1.7;
        }
        .fc-trust .dot { color: var(--ipgs-gold); margin: 0 8px; }
        .fc-seals {
          display: inline-flex; gap: 14px; flex-wrap: wrap;
          justify-content: center;
          margin-top: 18px;
        }
        .fc-seals span {
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: rgba(241,241,241,.7);
          padding: 6px 12px;
          border: 1px solid rgba(241,241,241,.20);
          border-radius: 999px;
        }
      `}</style>
      <div className="fc-bg"></div>
      <div className="container-x" style={{ position: "relative", zIndex: 2 }}>
        <span className="eyebrow">O momento da decisão</span>
        <h2 className="fc-h reveal">
          20 minutos hoje.<br/>
          <em>Anos economizados amanhã.</em>
        </h2>
        <p className="fc-sub">
          Você está dando ao seu filho a certeza de que o esforço dele tem um destino certo.
        </p>
        <CTA size="lg" position="b14_final">Iniciar mapeamento agora — R$ 300</CTA>
        <div className="fc-trust">
          pagamento seguro<span className="dot">·</span>resposta em 15–20 min<span className="dot">·</span>laudo em até 48h<span className="dot">·</span>revisão humana
        </div>
        <div className="fc-seals">
          <span>🔒 SSL</span>
          <span>🛡 LGPD</span>
          <span>CRP ativo</span>
          <span>Stripe / Pagar.me</span>
        </div>
      </div>
    </section>
  );
}

// ====== BLOCO 15 — Footer mínimo ======
function MinimalFooter() {
  return (
    <footer style={{ background: "var(--ipgs-deep)", color: "rgba(241,241,241,.7)", padding: "28px 0", borderTop: "1px solid rgba(241,241,241,.10)" }}>
      <style>{`
        .fmin { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; line-height: 1.9; }
        .fmin a { color: rgba(241,241,241,.86); text-decoration: underline; text-underline-offset: 3px; }
        .fmin a:hover { color: var(--ipgs-gold); }
        .fmin .ln1 { color: rgba(241,241,241,.86); }
        .fmin .ln3 { color: rgba(241,241,241,.5); }
      `}</style>
      <div className="container-x fmin">
        <div className="ln1">
          Instituto de Psicologia Geny Soares
        </div>
        <div>
          <a href="/legal.html#privacidade" target="_blank" rel="noopener">Política de Privacidade</a>
          <span style={{ margin: "0 10px", color: "rgba(241,241,241,.4)" }}>·</span>
          <a href="/legal.html#termos" target="_blank" rel="noopener">Termos de Uso</a>
          <span style={{ margin: "0 10px", color: "rgba(241,241,241,.4)" }}>·</span>
          <a href="/legal.html#cookies" target="_blank" rel="noopener">Cookies</a>
        </div>
        <div className="ln3">
          desenvolvido por Profit Pró Marketing · Florianópolis–SC
        </div>
      </div>
    </footer>
  );
}

window.CostInaction = CostInaction;
window.RiskReduction = RiskReduction;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.MinimalFooter = MinimalFooter;
