/* global React, Reveal, Eyebrow, GenesisLogo */
const { useState } = React;

/* ============================================================
   SEÇÃO 7 — COMPARATIVO
   ============================================================ */
function Comparativo() {
  const rows = [
    { f: "Lucratividade real por cadeira", sub: "com custos embutidos", outros: false },
    { f: "Ociosidade em tempo real", sub: "cadeiras e horários mortos", outros: false },
    { f: "Resumo executivo no WhatsApp", sub: "todo fim de expediente", outros: false },
    { f: "Antivazamento de caixa", sub: "alerta de exclusão sem senha", outros: false },
    { f: "Calendário de recebíveis", sub: "projeção de assinaturas", outros: false },
    { f: "Custo de oportunidade", sub: "por assinante inativo", outros: false },
    { f: "Agendamento e comanda digital", sub: "o básico, bem feito", outros: true },
    { f: "Exportação livre dos dados", sub: "seus dados são seus", outros: false },
    { f: "Onboarding de governança", sub: "implantação assistida", outros: false },
  ];
  const genCount = rows.length;
  const otherCount = rows.filter((r) => r.outros).length;
  return (
    <section className="gen-section" id="comparativo" data-screen-label="07 Comparativo">
      <div className="gen-container">
        <div style={{ maxWidth: "min(1100px, 94%)", margin: "0 auto 56px", textAlign: "center" }}>
          <Reveal><Eyebrow>Diferença Operacional</Eyebrow></Reveal>
          <Reveal stagger={1}>
            <h2 className="gen-h2" style={{ marginTop: 0, textWrap: "balance" }}>
              Os outros mostram <span style={{ color: "var(--fg-dim)" }}>o que aconteceu.</span><br />
              O <span style={{ color: "var(--accent)" }}>GÊNESIS</span> mostra <span style={{ color: "var(--accent)" }}>o que fazer.</span>
            </h2>
          </Reveal>
        </div>

        <Reveal stagger={2}>
          <div className="duel">
            {/* ---- OUTROS ---- */}
            <div className="duel-col duel-col--others">
              <div className="duel-head">
                <span className="duel-tag">Outros sistemas</span>
                <div className="duel-score">
                  <span className="duel-score-n">{otherCount}</span>
                  <span className="duel-score-d">/ {genCount}</span>
                </div>
                <span className="duel-sub">Você fica no escuro.</span>
              </div>
              <ul className="duel-list">
                {rows.map((r) => (
                  <li className={"duel-li" + (r.outros ? " has" : "")} key={r.f}>
                    <span className={"duel-mk " + (r.outros ? "duel-mk--ok-dim" : "duel-mk--x")}>
                      {r.outros
                        ? <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="5 13 10 18 19 6" /></svg>
                        : <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></svg>}
                    </span>
                    <span className="duel-ft">{r.f}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* ---- VS ---- */}
            <div className="duel-vs" aria-hidden="true"><span>VS</span></div>

            {/* ---- GÊNESIS ---- */}
            <div className="duel-col duel-col--gen">
              <span className="duel-glow" aria-hidden="true" />
              <span className="duel-grid" aria-hidden="true" />
              <span className="duel-b duel-b--tl" aria-hidden="true" />
              <span className="duel-b duel-b--tr" aria-hidden="true" />
              <span className="duel-b duel-b--bl" aria-hidden="true" />
              <span className="duel-b duel-b--br" aria-hidden="true" />
              <div className="duel-head">
                <span className="duel-tag duel-tag--gen">
                  <img src={(window.__resources && window.__resources.genesisG) || "genesis-g.png"} alt="" className="duel-g" /> GÊNESIS S/A
                </span>
                <div className="duel-score">
                  <span className="duel-score-n duel-score-n--gen">{genCount}</span>
                  <span className="duel-score-d">/ {genCount}</span>
                </div>
                <span className="duel-sub duel-sub--gen">Você no controle.</span>
              </div>
              <ul className="duel-list">
                {rows.map((r) => (
                  <li className="duel-li" key={r.f}>
                    <span className="duel-mk duel-mk--on">
                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="5 13 10 18 19 6" /></svg>
                    </span>
                    <span className="duel-ft duel-ft--gen">
                      {r.f}
                      <span className="duel-ft-sub">{r.sub}</span>
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </Reveal>

        <style>{`
          .duel {
            display: grid; grid-template-columns: 1fr 1.18fr; gap: 0;
            align-items: stretch; position: relative;
          }
          .duel-col { border-radius: 22px; padding: 34px 30px; position: relative; }
          /* OUTROS — apagado, recuado */
          .duel-col--others {
            background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
            border: 1px solid var(--line);
            filter: saturate(0.5); opacity: 0.74;
            margin: 26px 0; margin-right: -22px; padding-right: 44px;
          }
          /* GÊNESIS — elevado, dominante, brilhando */
          .duel-col--gen {
            background:
              radial-gradient(120% 80% at 100% 0%, rgba(var(--accent-rgb),0.16), transparent 55%),
              linear-gradient(180deg, var(--bg-elev), var(--bg-elev-2));
            border: 1px solid rgba(var(--accent-rgb), 0.5);
            box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb),0.18), 0 40px 90px -30px rgba(var(--accent-rgb),0.5);
            overflow: hidden; z-index: 2;
          }
          .duel-glow { position: absolute; top: -30%; right: -10%; width: 60%; height: 70%; z-index: 0; pointer-events: none;
            background: radial-gradient(circle, rgba(var(--accent-rgb),0.22), transparent 65%); filter: blur(24px); }
          .duel-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
            background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
            background-size: 32px 32px;
            -webkit-mask-image: radial-gradient(120% 80% at 100% 0%, #000, transparent 65%);
            mask-image: radial-gradient(120% 80% at 100% 0%, #000, transparent 65%); }
          .duel-col--gen > * { position: relative; z-index: 1; }
          .duel-b { position: absolute; width: 20px; height: 20px; border: 1px solid var(--accent); opacity: 0.6; z-index: 2; pointer-events: none; }
          .duel-b--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
          .duel-b--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
          .duel-b--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
          .duel-b--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

          .duel-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 14px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
          .duel-tag { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dim); }
          .duel-tag--gen { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
          .duel-g { width: 22px; height: 22px; object-fit: contain; }
          .duel-score { grid-row: 1 / 3; align-self: center; justify-self: end; display: flex; align-items: baseline; gap: 4px; }
          .duel-score-n { font-family: var(--ff-display); font-weight: 700; font-size: 46px; line-height: 1; color: var(--fg-dim); }
          .duel-score-n--gen { color: var(--accent); text-shadow: 0 0 30px rgba(var(--accent-rgb),0.6); }
          .duel-score-d { font-family: var(--ff-mono); font-size: 13px; color: var(--fg-dim); }
          .duel-sub { font-family: var(--ff-body); font-size: 12.5px; color: var(--fg-muted); }
          .duel-sub--gen { color: var(--accent); }

          .duel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
          .duel-li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
          .duel-li:last-child { border-bottom: 0; }
          .duel-mk { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; }
          .duel-mk--x { border: 1px solid var(--line-strong); color: var(--fg-dim); }
          .duel-mk--ok-dim { border: 1px solid var(--fg-dim); color: var(--fg-muted); }
          .duel-mk--on { background: var(--accent); color: var(--bg); box-shadow: 0 0 18px -2px rgba(var(--accent-rgb),0.75); }
          .duel-ft { font-size: 14.5px; color: var(--fg-muted); }
          .duel-col--others .duel-li:not(.has) .duel-ft { color: var(--fg-dim); text-decoration: line-through; text-decoration-color: var(--line-strong); }
          .duel-ft--gen { display: flex; flex-direction: column; gap: 2px; color: var(--fg); font-weight: 600; }
          .duel-ft-sub { font-family: var(--ff-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.04em; color: var(--fg-dim); }
          .duel-col--gen .duel-li { transition: background 220ms ease, padding-left 220ms ease; border-radius: 10px; }
          .duel-col--gen .duel-li:hover { background: rgba(var(--accent-rgb),0.07); padding-left: 10px; }

          /* VS pílula */
          .duel-vs {
            position: absolute; top: 50%; left: calc(45.8% ); transform: translate(-50%, -50%);
            z-index: 4; width: 64px; height: 64px; border-radius: 50%;
            display: grid; place-items: center;
            background: var(--bg); border: 1px solid rgba(var(--accent-rgb),0.5);
            box-shadow: 0 0 0 6px var(--bg), 0 0 30px -6px rgba(var(--accent-rgb),0.6);
          }
          .duel-vs span { font-family: var(--ff-display); font-weight: 700; font-size: 18px; color: var(--accent); letter-spacing: 0.02em; }

          @media (max-width: 860px) {
            .duel { grid-template-columns: 1fr; gap: 18px; }
            .duel-col--others { margin: 0; margin-right: 0; padding-right: 30px; }
            .duel-vs { position: static; transform: none; margin: -4px auto; }
          }
          @media (max-width: 520px) {
            .duel-col { padding: 26px 20px; border-radius: 18px; }
            .duel-col--others { padding-right: 20px; }
            .duel-ft { font-size: 13.5px; }
            .duel-li { gap: 11px; }
          }
        `}</style>
      </div>
    </section>
  );
}

/* ============================================================
   SEÇÃO 8 — DEPOIMENTO
   ============================================================ */
function Depoimento() {
  const cases = [
    {
      q: ['"Eu sabia que minha barbearia faturava bem. O GÊNESIS me mostrou que ', "eu lucrava 38% menos", ' do que eu pensava. Em 60 dias corrigi a operação."'],
      metric: "−38%", metricLabel: "lucro oculto revelado",
      name: "Rafael Coutinho", initials: "RC", role: "Dono · Coutinho Barber Club", meta: "3 unidades · São Paulo",
    },
    {
      q: ['"Eu perdia 4 horas todo domingo fechando comissão na planilha. Agora é ', "1 clique", ' e a equipe confia no número, sem briga."'],
      metric: "4h→0", metricLabel: "fechamento semanal",
      name: "Paulo Style", initials: "PS", role: "Sócia · Studio MS Hair", meta: "2 unidades · Curitiba",
    },
    {
      q: ['"O resumo no WhatsApp mudou meu jogo. Eu durmo sabendo exatamente ', "quanto entrou e o que vazou", ', sem abrir o sistema."'],
      metric: "22h14", metricLabel: "diagnóstico diário",
      name: "Duda Navalha", initials: "DN", role: "Dono · Navalha de Ouro", meta: "1 unidade · Rio de Janeiro",
    },
    {
      q: ['"Descobri que ', "23% das cadeiras", ' ficavam ociosas na terça. Remanejei a agenda e recuperei o faturamento de um barbeiro inteiro."'],
      metric: "+23%", metricLabel: "ociosidade recuperada",
      name: "Virginia Premium", initials: "VP", role: "Dona · Premium Grooming", meta: "4 unidades · Belo Horizonte",
    },
    {
      q: ['"O sistema antivazamento travou uma exclusão sem senha no caixa. Em um mês, ', "R$ 3.400 que sumiriam", ' ficaram no lugar."'],
      metric: "R$ 3,4k", metricLabel: "caixa protegido / mês",
      name: "Bruno Costa", initials: "BC", role: "Dono · BC Barbearia", meta: "2 unidades · Porto Alegre",
    },
    {
      q: ['"Minhas assinaturas viraram previsão real. O calendário de recebíveis me mostra ', "o caixa dos próximos 90 dias", ' como um banco."'],
      metric: "90 dias", metricLabel: "recebíveis projetados",
      name: "Carla Mendes", initials: "CM", role: "Sócia · Mendes & Co.", meta: "3 unidades · Salvador",
    },
    {
      q: ['"Implantação em 7 dias, sem dor. A IA já recuperou ', "18 clientes sumidos", ' no primeiro mês — pagou o ano inteiro."'],
      metric: "18", metricLabel: "clientes reativados",
      name: "Felipe Lima", initials: "FL", role: "Dono · Lima Barbershop", meta: "1 unidade · Recife",
    },
  ];
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = cases.length;
  const DUR = 6500;
  React.useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setI((x) => (x + 1) % n), DUR);
    return () => clearTimeout(t);
  }, [i, paused, n]);
  const go = (d) => setI((x) => (x + d + n) % n);
  const c = cases[i];

  return (
    <section className="gen-section" id="depoimento" data-screen-label="08 Depoimento">
      <div className="gen-container">
        <div style={{ maxWidth: "62ch", margin: "0 auto 48px", textAlign: "center" }}>
          <Reveal><Eyebrow>Prova Real</Eyebrow></Reveal>
          <Reveal stagger={1}>
            <h2 className="gen-h2" style={{ marginTop: 0, textWrap: "balance" }}>
              Donos que pararam de operar <span style={{ color: "var(--accent)" }}>no escuro.</span>
            </h2>
          </Reveal>
        </div>

        <div className="tst" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
          <span className="tst-grid" aria-hidden="true" />
          <span className="tst-glow" aria-hidden="true" />
          <span className="tst-b tst-b--tl" aria-hidden="true" />
          <span className="tst-b tst-b--tr" aria-hidden="true" />
          <span className="tst-b tst-b--bl" aria-hidden="true" />
          <span className="tst-b tst-b--br" aria-hidden="true" />

          <div className="tst-split">
            {/* ---- FOTO ---- */}
            <div className="tst-photo">
              {cases.map((cc, k) => (
                <div className={"tst-photo-layer" + (k === i ? " is-on" : "")} key={k}>
                  <image-slot
                    id={"caso-foto-" + (k + 1)}
                    src={(window.__resources && window.__resources["caseFoto" + (k + 1)]) || ("case-photo-" + (k + 1) + ".png")}
                    shape="rect"
                    fit="cover"
                    placeholder={"Foto de " + cc.name}
                    style={{ width: "100%", height: "100%", display: "block" }}
                  ></image-slot>
                </div>
              ))}
              <span className="tst-photo-grad" aria-hidden="true" />
              <div className="tst-photo-tag" key={"tag" + i}>
                <span className="tst-photo-metric">{c.metric}</span>
                <span className="tst-photo-metric-l">{c.metricLabel}</span>
              </div>
            </div>

            {/* ---- PROVA ---- */}
            <div className="tst-body">
              <div className="tst-top">
                <span className="tst-eyebrow"><span className="tst-dot" /> Caso real</span>
                <span className="tst-count"><b>{String(i + 1).padStart(2, "0")}</b> / {String(n).padStart(2, "0")}</span>
              </div>

              <blockquote className="tst-quote" key={"q" + i}>
                <span className="tst-mark" aria-hidden="true">“</span>
                {c.q[0]}<span className="tst-hl">{c.q[1]}</span>{c.q[2]}
              </blockquote>

              <div className="tst-author" key={"a" + i}>
                <span className="tst-avatar">{c.initials}</span>
                <div>
                  <div className="tst-name">{c.name}</div>
                  <div className="tst-role">{c.role} · {c.meta}</div>
                </div>
                <span className="tst-stars" aria-hidden="true">★★★★★</span>
              </div>

              <div className="tst-nav">
                <button className="tst-arrow" onClick={() => go(-1)} aria-label="Anterior">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6" /></svg>
                </button>
                <div className="tst-rail">
                  {cases.map((_, k) => (
                    <button key={k} className={"tst-tick" + (k === i ? " is-on" : "")} onClick={() => setI(k)} aria-label={"Caso " + (k + 1)}>
                      <span className="tst-tick-fill" style={{ animationDuration: paused ? "0s" : DUR + "ms", animationPlayState: k === i && !paused ? "running" : "paused" }} />
                    </button>
                  ))}
                </div>
                <button className="tst-arrow" onClick={() => go(1)} aria-label="Próximo">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6" /></svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .tst {
          position: relative; overflow: hidden;
          border: 1px solid var(--line-strong); border-radius: 26px;
          background:
            radial-gradient(120% 80% at 100% 0%, rgba(var(--accent-rgb),0.10), transparent 55%),
            linear-gradient(180deg, var(--bg-elev), var(--bg-elev-2));
          box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05);
        }
        .tst-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
          background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
          background-size: 38px 38px;
          -webkit-mask-image: radial-gradient(120% 80% at 100% 0%, #000, transparent 62%);
          mask-image: radial-gradient(120% 80% at 100% 0%, #000, transparent 62%); }
        .tst-glow { position: absolute; top: -30%; right: -8%; width: 50%; height: 70%; z-index: 0; pointer-events: none;
          background: radial-gradient(circle, rgba(var(--accent-rgb),0.18), transparent 65%); filter: blur(26px); }
        .tst-b { position: absolute; width: 22px; height: 22px; border: 1px solid var(--accent); opacity: 0.5; z-index: 4; pointer-events: none; }
        .tst-b--tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
        .tst-b--tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
        .tst-b--bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
        .tst-b--br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }

        /* split layout */
        .tst-split { position: relative; z-index: 1; display: grid; grid-template-columns: 0.82fr 1fr; align-items: stretch; }
        .tst-photo { position: relative; min-height: 520px; border-right: 1px solid var(--line); overflow: hidden; }
        .tst-photo-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms cubic-bezier(0.22,0.61,0.36,1); }
        .tst-photo-layer.is-on { opacity: 1; }
        .tst-photo-layer image-slot { width: 100%; height: 100%; }
        .tst-photo-grad { position: absolute; inset: 0; z-index: 2; pointer-events: none;
          background: linear-gradient(180deg, transparent 40%, rgba(6,11,20,0.82) 100%), linear-gradient(90deg, transparent 70%, rgba(6,11,20,0.4)); }
        .tst-photo-tag { position: absolute; left: 26px; bottom: 24px; z-index: 3; display: flex; flex-direction: column; gap: 2px;
          animation: tst-fade 640ms cubic-bezier(0.22,0.61,0.36,1) both; }
        .tst-photo-metric { font-family: var(--ff-display); font-weight: 700; font-size: clamp(36px, 4vw, 58px); line-height: 1; color: var(--accent); text-shadow: 0 0 32px rgba(var(--accent-rgb),0.6); letter-spacing: -0.02em; }
        .tst-photo-metric-l { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); }

        .tst-body { position: relative; padding: clamp(30px, 3.4vw, 54px); display: flex; flex-direction: column; }
        .tst-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
        .tst-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
        .tst-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: tst-blink 1.6s ease-in-out infinite; }
        @keyframes tst-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
        .tst-count { font-family: var(--ff-mono); font-size: 12px; color: var(--fg-dim); letter-spacing: 0.12em; }
        .tst-count b { color: var(--accent); }

        .tst-quote {
          position: relative; margin: 0; flex: 1;
          font-family: var(--ff-condensed); font-size: clamp(22px, 2.5vw, 38px);
          line-height: 1.18; color: var(--fg); text-transform: uppercase; letter-spacing: -0.01em;
          text-wrap: balance; animation: tst-fade 640ms cubic-bezier(0.22,0.61,0.36,1) both;
        }
        .tst-mark { color: var(--accent); opacity: 0.5; font-size: 1.1em; margin-right: 4px; }
        .tst-hl { color: var(--accent); }
        .tst-author { display: flex; align-items: center; gap: 16px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); animation: tst-fade 640ms 80ms cubic-bezier(0.22,0.61,0.36,1) both; }
        .tst-avatar {
          width: 50px; height: 50px; border-radius: 50%; flex: 0 0 auto;
          display: grid; place-items: center;
          font-family: var(--ff-condensed); font-size: 18px; color: var(--accent);
          background: rgba(var(--accent-rgb),0.10); border: 1px solid rgba(var(--accent-rgb),0.4);
          box-shadow: 0 0 22px -6px rgba(var(--accent-rgb),0.6);
        }
        .tst-name { font-family: var(--ff-condensed); font-size: 18px; color: var(--fg); text-transform: uppercase; letter-spacing: 0.02em; }
        .tst-role { font-family: var(--ff-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.05em; }
        .tst-stars { margin-left: auto; color: var(--accent); font-size: 13px; letter-spacing: 2px; align-self: flex-start; }

        .tst-nav { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
        .tst-arrow {
          width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
          border: 1px solid var(--line-strong); background: transparent; color: var(--fg-muted);
          display: grid; place-items: center; cursor: pointer;
          transition: border-color 240ms ease, color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
        }
        .tst-arrow:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: 0 0 22px -8px rgba(var(--accent-rgb),0.7); }
        .tst-rail { flex: 1; display: flex; gap: 8px; }
        .tst-tick { flex: 1; height: 4px; border-radius: 3px; border: 0; padding: 0; cursor: pointer; background: var(--line-strong); position: relative; overflow: hidden; }
        .tst-tick-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--accent); box-shadow: 0 0 10px var(--accent); border-radius: 3px; }
        .tst-tick.is-on .tst-tick-fill { animation-name: tst-prog; animation-timing-function: linear; animation-fill-mode: forwards; }
        @keyframes tst-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        @keyframes tst-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

        @media (max-width: 820px) {
          .tst-split { grid-template-columns: 1fr; }
          .tst-photo { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--line); }
        }
      `}</style>
    </section>
  );
}

/* ============================================================
   SEÇÃO 8.5 — PLANOS / PREÇOS
   ============================================================ */
function planGlyph(i) {
  const g = [
    (<g><circle cx="6" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><line x1="20" y1="4" x2="8.12" y2="15.88" /><line x1="14.47" y1="14.48" x2="20" y2="20" /><line x1="8.12" y1="8.12" x2="12" y2="12" /></g>),
    (<g><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></g>),
    (<g><path d="M3 7l3.5 3.5L12 4l5.5 6.5L21 7l-2 12H5L3 7z" /><circle cx="12" cy="13" r="1.4" /></g>),
    (<g><circle cx="12" cy="5" r="2.4" /><circle cx="5" cy="19" r="2.4" /><circle cx="19" cy="19" r="2.4" /><line x1="11" y1="7" x2="6" y2="16.8" /><line x1="13" y1="7" x2="18" y2="16.8" /><line x1="7.4" y1="19" x2="16.6" y2="19" /></g>),
  ];
  return (
    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{g[i] || g[0]}</svg>
  );
}

function Planos() {
  const plans = [
    {
      tier: "Starter", seats: "1-2 cadeiras",
      price: "247", unit: "/mês", save: "Economiza R$ 555+/mês",
      features: ["Caixa que fecha sozinho", "Estoque sem furos", "NF-e em segundos", "DRE pronto todo mês", "App próprio do barbeiro"],
      cta: "Começar", featured: false,
    },
    {
      tier: "Pro", seats: "3-5 cadeiras",
      price: "397", unit: "/mês", save: "Economiza R$ 405+/mês",
      features: ["Tudo do Starter", "CRM que traz o cliente de volta", "Disparos no WhatsApp em massa", "NPS automático pós-corte", "Assinaturas recorrentes"],
      cta: "Quero esse", featured: false,
    },
    {
      tier: "Elite", seats: "6+ cadeiras",
      price: "597", unit: "/mês", save: "Economiza R$ 803+/mês",
      features: ["Tudo do Pro", "Agente de IA que atende e vende", "Fluxos de automação ilimitados", "Instagram e Direct no automático", "Consultoria de IA dedicada"],
      cta: "Quero esse", featured: true,
    },
    {
      tier: "Rede", seats: "Multi-unidades",
      price: "397", unit: "/unid/mês", save: "Setup único R$ 997",
      features: ["Tudo do Elite", "Dashboard consolidado da rede", "Comparativo entre unidades", "Split de receita automático"],
      cta: "Falar com vendas", featured: false,
    },
  ];
  return (
    <section className="gen-section" id="planos" data-screen-label="08b Planos">
      <span className="planos-atmos" aria-hidden="true" />
      <span className="planos-atmos-glow" aria-hidden="true" />
      <div className="gen-container">
        <div style={{ maxWidth: "60ch", margin: "0 auto 50px", textAlign: "center" }}>
          <Reveal><Eyebrow>Planos</Eyebrow></Reveal>
          <Reveal stagger={1}>
            <h2 className="gen-h2" style={{ marginTop: 0, textWrap: "balance" }}>
              Um preço que <span style={{ color: "var(--accent)" }}>cabe na cadeira.</span>
            </h2>
          </Reveal>
          <Reveal stagger={2}>
            <p className="gen-lead" style={{ marginTop: 18, marginBottom: 0 }}>
              Sem fidelidade. Sem letra miúda. Cancele quando quiser.
            </p>
          </Reveal>
        </div>

        <div className="planos-fx">
          {plans.map((p, idx) => (
            <Reveal key={p.tier} stagger={idx + 1} as="div" className={"pcard" + (p.featured ? " pcard--hot" : "")}>
              {p.featured && <span className="pcard-ribbon">Mais vendido</span>}
              <span className="pcard-top" aria-hidden="true" />
              <span className="pcard-grid" aria-hidden="true" />
              <span className="pcard-scan" aria-hidden="true" />
              <span className="pcard-sheen" aria-hidden="true" />
              <span className="pcard-corner pcard-corner--tl" aria-hidden="true" />
              <span className="pcard-corner pcard-corner--br" aria-hidden="true" />
              <div className="pcard-h">
                <span className="pcard-emblem" aria-hidden="true">
                  <span className="pcard-emblem-ring" />
                  {planGlyph(idx)}
                </span>
                <span className="pcard-kicker">Plano</span>
                <h3 className="pcard-tier">{p.tier}</h3>
                <span className="pcard-seats">{p.seats}</span>
              </div>
              <div className="pcard-price">
                <span className="pcard-cur">R$</span>
                <span className="pcard-val">{p.price}</span>
                <span className="pcard-unit">{p.unit}</span>
              </div>
              <span className="pcard-save">{p.save}</span>
              <a href="#cta" className={"pcard-cta" + (p.featured ? " is-solid" : "")}>
                {p.cta} <span className="pcard-arrow">→</span>
              </a>
              <ul className="pcard-list">
                <li className="pcard-list-h" aria-hidden="true">O que você ganha</li>
                {p.features.map((f) => (
                  <li key={f}>
                    <span className="pcard-check"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="5 13 10 18 19 6" /></svg></span>
                    {f}
                  </li>
                ))}
              </ul>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=Chakra+Petch:wght@400;500;600;700&display=swap');
.planos-fx {
  --ff-fut: 'Orbitron', var(--ff-display);
  --ff-tech: 'Chakra Petch', var(--ff-body);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; position: relative;
}
.planos-fx::before { content: ''; position: absolute; inset: -16% -10% 0; z-index: 0; pointer-events: none; background: radial-gradient(50% 55% at 50% 38%, rgba(var(--accent-rgb),0.05), transparent 72%); filter: blur(46px); }
.planos-fx::after { display: none; }
#planos { position: relative; overflow: hidden; }
#planos > .gen-container { position: relative; z-index: 1; }
.planos-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7; background-image: radial-gradient(circle at center, rgba(var(--accent-rgb),0.13) 1px, transparent 1.6px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(80% 70% at 50% 42%, #000, transparent 82%); mask-image: radial-gradient(80% 70% at 50% 42%, #000, transparent 82%); }
.planos-atmos-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(46% 42% at 50% 40%, rgba(var(--accent-rgb),0.10), transparent 72%), radial-gradient(34% 38% at 12% 78%, rgba(var(--accent-rgb),0.06), transparent 70%), radial-gradient(34% 38% at 88% 78%, rgba(var(--accent-rgb),0.06), transparent 70%); filter: blur(34px); }
.pcard { position: relative; z-index: 1; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, var(--bg-elev), var(--bg-elev-2)); padding: 34px 26px 30px; overflow: hidden; box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -30px 60px -40px rgba(var(--accent-rgb),0.18); transition: transform 360ms cubic-bezier(0.22,0.61,0.36,1), border-color 360ms ease, box-shadow 360ms ease; }
.pcard-top { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: 0.45; }
.pcard:hover { transform: translateY(-6px); border-color: rgba(var(--accent-rgb),0.5); box-shadow: var(--shadow-lg), 0 24px 50px -26px rgba(var(--accent-rgb),0.5); }
.pcard > *:not(.pcard-top):not(.pcard-ribbon):not(.pcard-grid):not(.pcard-scan):not(.pcard-sheen):not(.pcard-corner) { position: relative; z-index: 1; }
.pcard::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(82% 46% at 50% -12%, rgba(255,255,255,0.07), transparent 62%); }
.pcard-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 62%; z-index: 0; pointer-events: none; background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.08) 47%, rgba(var(--accent-rgb),0.07) 53%, transparent 68%); transform: translateX(-170%) skewX(-12deg); animation: pcard-sheen 7.5s ease-in-out infinite; }
@keyframes pcard-sheen { 0% { transform: translateX(-170%) skewX(-12deg); } 52% { transform: translateX(270%) skewX(-12deg); } 100% { transform: translateX(270%) skewX(-12deg); } }
.planos-fx .pcard:nth-child(2) .pcard-sheen { animation-delay: 1.7s; }
.planos-fx .pcard:nth-child(3) .pcard-sheen { animation-delay: 0.9s; }
.planos-fx .pcard:nth-child(4) .pcard-sheen { animation-delay: 2.5s; }
.pcard-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(120% 70% at 50% 0%, #000, transparent 62%); mask-image: radial-gradient(120% 70% at 50% 0%, #000, transparent 62%); }
.pcard-scan { position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--accent-rgb),0.14), transparent); mix-blend-mode: screen; transform: translateY(-80px); }
.pcard:hover .pcard-scan { animation: pcard-scan 1.5s ease-out; }
@keyframes pcard-scan { 0% { transform: translateY(-80px); } 100% { transform: translateY(640px); } }
.pcard-corner { position: absolute; width: 15px; height: 15px; z-index: 2; pointer-events: none; border: 1px solid rgba(var(--accent-rgb),0.6); opacity: 0; transition: opacity 300ms ease; }
.pcard-corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.pcard-corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.pcard:hover .pcard-corner { opacity: 1; }
.pcard--hot .pcard-corner { opacity: 0.6; }
.pcard--hot .pcard-grid { opacity: 0.55; }
.pcard--hot .pcard-top { background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 200% 100%; animation: pcard-flow 2.6s linear infinite; }
@keyframes pcard-flow { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.pcard--hot { border-color: rgba(var(--accent-rgb),0.7); background: radial-gradient(120% 60% at 50% 0%, rgba(var(--accent-rgb),0.16), transparent 55%), linear-gradient(180deg, var(--bg-elev), var(--bg-elev-2)); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb),0.35), 0 30px 70px -28px rgba(var(--accent-rgb),0.6); transform: translateY(-12px); animation: pcard-breathe 3.6s ease-in-out infinite; }
@keyframes pcard-breathe { 0%,100% { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb),0.35), 0 30px 70px -28px rgba(var(--accent-rgb),0.55); } 50% { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb),0.6), 0 38px 92px -22px rgba(var(--accent-rgb),0.9); } }
.pcard--hot:hover { transform: translateY(-18px); }
.pcard--hot .pcard-top { opacity: 1; height: 3px; }
.pcard-ribbon { position: absolute; top: 0; right: 0; z-index: 3; font-family: var(--ff-tech); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bg); background: var(--accent); padding: 7px 14px; border-bottom-left-radius: 12px; box-shadow: 0 6px 18px -4px rgba(var(--accent-rgb),0.7); }
.pcard--hot .pcard-h { margin-top: 8px; }
.pcard-h { display: flex; flex-direction: column; gap: 5px; padding-bottom: 22px; }
.pcard-emblem { position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 14px; color: var(--accent); background: rgba(var(--accent-rgb),0.10); border: 1px solid rgba(var(--accent-rgb),0.3); box-shadow: inset 0 0 18px -6px rgba(var(--accent-rgb),0.5), 0 8px 22px -10px rgba(var(--accent-rgb),0.5); }
.pcard-emblem svg { position: relative; z-index: 1; }
.pcard-emblem-ring { position: absolute; inset: -5px; border-radius: 17px; border: 1px dashed rgba(var(--accent-rgb),0.32); opacity: 0; transition: opacity 360ms ease; }
.pcard:hover .pcard-emblem-ring { opacity: 1; animation: pcard-ring 12s linear infinite; }
@keyframes pcard-ring { to { transform: rotate(360deg); } }
.pcard--hot .pcard-emblem { background: rgba(var(--accent-rgb),0.16); border-color: rgba(var(--accent-rgb),0.5); box-shadow: inset 0 0 22px -5px rgba(var(--accent-rgb),0.7), 0 10px 28px -8px rgba(var(--accent-rgb),0.75); }
.pcard--hot .pcard-emblem-ring { opacity: 1; animation: pcard-ring 12s linear infinite; }
.pcard-kicker { font-family: var(--ff-tech); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); }
.pcard-tier { font-family: var(--ff-fut); font-weight: 800; font-size: 27px; line-height: 1; margin: 5px 0 0; color: var(--fg); letter-spacing: 0.02em; text-transform: uppercase; }
.pcard-seats { font-family: var(--ff-tech); font-size: 12.5px; font-weight: 500; color: var(--fg-muted); letter-spacing: 0.04em; }
.pcard-price { display: flex; align-items: baseline; gap: 5px; padding-top: 20px; border-top: 1px solid var(--line); }
.pcard-cur { font-family: var(--ff-tech); font-weight: 600; font-size: 20px; color: var(--fg-muted); }
.pcard-val { font-family: var(--ff-fut); font-weight: 800; font-size: clamp(44px, 4.4vw, 58px); line-height: 0.9; letter-spacing: 0.005em; background: linear-gradient(170deg, var(--fg), var(--fg-muted)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pcard--hot .pcard-val { background: linear-gradient(100deg, var(--accent) 28%, #ffffff 50%, var(--accent) 72%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 26px rgba(var(--accent-rgb),0.55)); animation: pcard-shine 3.4s linear infinite; }
@keyframes pcard-shine { 0% { background-position: 210% 0; } 100% { background-position: -210% 0; } }
.pcard-unit { font-family: var(--ff-tech); font-size: 13px; font-weight: 500; color: var(--fg-dim); }
.pcard-save { font-family: var(--ff-tech); font-size: 12.5px; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; margin-top: 10px; }
.pcard-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; padding: 14px 20px; border-radius: 11px; font-family: var(--ff-tech); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; border: 1px solid rgba(var(--accent-rgb),0.45); color: var(--accent); transition: background 240ms ease, transform 240ms ease, box-shadow 240ms ease; }
.pcard-cta:hover { background: rgba(var(--accent-rgb),0.10); transform: translateY(-2px); }
.pcard-cta.is-solid { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: 0 16px 38px -12px rgba(var(--accent-rgb),0.7); }
.pcard-cta.is-solid:hover { box-shadow: 0 22px 48px -14px rgba(var(--accent-rgb),0.9); }
.pcard-arrow { transition: transform 240ms ease; }
.pcard-cta:hover .pcard-arrow { transform: translateX(4px); }
.pcard-list { list-style: none; margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pcard-list-h { font-family: var(--ff-tech); font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 2px; }
.pcard-list li:not(.pcard-list-h) { display: flex; align-items: center; gap: 11px; font-family: var(--ff-tech); font-size: 14px; font-weight: 500; color: var(--fg); line-height: 1.3; }
.pcard-check { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: rgba(var(--accent-rgb),0.14); color: var(--accent); }
.pcard--hot .pcard-check { box-shadow: 0 0 12px -3px rgba(var(--accent-rgb),0.6); }
@media (max-width: 1080px) { .planos-fx { grid-template-columns: repeat(2, 1fr); } .pcard--hot, .pcard--hot:hover { transform: none; } }
@media (max-width: 560px) { .planos-fx { grid-template-columns: 1fr; } .pcard { padding: 28px 22px 26px; } .pcard-tier { font-size: 26px; } }
`}</style>
    </section>
  );
}

/* ============================================================
   SEÇÃO 9 — FAQ
   ============================================================ */
function FAQ() {
  const items = [
    {
      q: "Em quanto tempo o GÊNESIS é implantado na minha barbearia?",
      a: "A implantação leva em média 7 dias úteis. Nossa equipe especializada faz o onboarding passo a passo, configurando produtos, equipe, comissões e metas conforme a sua realidade. Você não fica sozinho com um login na mão."
    },
    {
      q: "Preciso trocar o meu sistema de agendamento atual?",
      a: "Sim. O GÊNESIS é um sistema completo de governança — agendamento, comanda, financeiro, assinaturas e BI estão integrados. Essa unificação é o que permite calcular a lucratividade real por cadeira e o custo de oportunidade dos assinantes."
    },
    {
      q: "E se eu quiser cancelar? Meus dados ficam reféns?",
      a: 'Não. O GÊNESIS opera sob o princípio S/A — Segurança, Auditoria, Autonomia. Você pode exportar 100% dos seus dados, históricos e relatórios em CSV/PDF a qualquer momento, com um clique. Sem burocracia.'
    },
    {
      q: "Funciona pra barbearia com uma só unidade?",
      a: "Funciona. O GÊNESIS é desenhado para barbearias profissionais que tratam o negócio como negócio — independente do tamanho. Os controles de ociosidade, lucratividade e antivazamento valem desde a primeira cadeira."
    },
    {
      q: "Como funciona o Resumo Executivo no WhatsApp?",
      a: "Ao final do expediente, a IA do GÊNESIS consolida automaticamente os dados do dia e envia um resumo no WhatsApp do dono: faturamento, lucro líquido, ociosidade, alertas e top performers. Você não precisa abrir o sistema."
    },
    {
      q: "Quanto custa?",
      a: "O investimento é apresentado na demonstração, após entender o porte e a operação da sua barbearia. Nossa proposta inclui setup, onboarding especializado e suporte. Agende uma conversa de 30 minutos."
    },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="gen-section" id="faq" data-screen-label="09 FAQ">
      <div className="gen-container">
        <div style={{ maxWidth: "60ch", margin: "0 auto 50px", textAlign: "center" }}>
          <Reveal><Eyebrow>Perguntas Frequentes</Eyebrow></Reveal>
          <Reveal stagger={1}>
            <h2 className="gen-h2" style={{ marginTop: 0 }}>
              Você pergunta. Nós<br />
              <span style={{ color: "var(--accent)" }}>respondemos</span> direto.
            </h2>
          </Reveal>
        </div>
        <div className="faq-wrap">
          <div className="faq-list">
              {items.map((item, i) => {
                const isOpen = open === i;
                return (
                  <div key={i} className={"faq-item" + (isOpen ? " is-open" : "")}>
                    <span className="faq-item-bar" aria-hidden="true" />
                    <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                      <span className="faq-num">{String(i + 1).padStart(2, "0")}</span>
                      <span className="faq-q-text">{item.q}</span>
                      <span className="faq-toggle" aria-hidden="true"><i /><i /></span>
                    </button>
                    <div className="faq-a" style={{ maxHeight: isOpen ? 460 : 0 }}>
                      <p>{item.a}</p>
                    </div>
                  </div>
                );
              })}
            </div>
        </div>
      </div>

      <style>{`
        .faq-wrap { max-width: 860px; margin: 0 auto; }
        .faq-list { display: flex; flex-direction: column; gap: 14px; }
        .faq-item { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, var(--bg-elev), var(--bg-elev-2)); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.04); transition: border-color 360ms ease, box-shadow 360ms ease, background 360ms ease; }
        .faq-item:hover { border-color: var(--line-strong); }
        .faq-item.is-open { border-color: rgba(var(--accent-rgb),0.55); background: radial-gradient(120% 100% at 0% 0%, rgba(var(--accent-rgb),0.07), transparent 58%), linear-gradient(180deg, var(--bg-elev), var(--bg-elev-2)); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb),0.20), 0 26px 64px -32px rgba(var(--accent-rgb),0.55); }
        .faq-item-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), transparent); transform: scaleY(0); transform-origin: top; transition: transform 460ms cubic-bezier(0.22,0.61,0.36,1); }
        .faq-item.is-open .faq-item-bar { transform: scaleY(1); }
        .faq-q { width: 100%; display: flex; align-items: center; gap: 18px; padding: 22px 24px; background: transparent; border: 0; cursor: pointer; text-align: left; }
        .faq-num { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--fg-dim); flex: 0 0 auto; transition: color 300ms ease; }
        .faq-item.is-open .faq-num, .faq-q:hover .faq-num { color: var(--accent); }
        .faq-q-text { flex: 1; font-family: var(--ff-condensed); font-size: clamp(18px, 1.5vw, 23px); text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.15; color: var(--fg); transition: color 300ms ease; }
        .faq-item.is-open .faq-q-text { color: var(--accent); }
        .faq-toggle { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); flex: 0 0 auto; display: grid; place-items: center; transition: border-color 300ms ease, background 300ms ease, transform 300ms ease; }
        .faq-q:hover .faq-toggle { transform: rotate(90deg); }
        .faq-toggle i { position: absolute; background: var(--fg-muted); border-radius: 2px; transition: transform 360ms cubic-bezier(0.22,0.61,0.36,1), background 300ms ease; }
        .faq-toggle i:nth-child(1) { width: 12px; height: 1.6px; }
        .faq-toggle i:nth-child(2) { width: 1.6px; height: 12px; }
        .faq-item.is-open .faq-toggle { border-color: var(--accent); background: rgba(var(--accent-rgb),0.12); transform: none; }
        .faq-item.is-open .faq-toggle i { background: var(--accent); }
        .faq-item.is-open .faq-toggle i:nth-child(2) { transform: scaleY(0); }
        .faq-a { overflow: hidden; max-height: 0; transition: max-height 440ms cubic-bezier(0.22,0.61,0.36,1); }
        .faq-a p { margin: 0; padding: 0 26px 26px 62px; color: var(--fg-muted); font-size: 16px; line-height: 1.65; max-width: 64ch; }
        @media (max-width: 560px) { .faq-a p { padding-left: 26px; } }
      `}</style>
    </section>
  );
}

/* ============================================================
   SEÇÃO 10 — CTA FINAL
   ============================================================ */
function CTAFinal() {
  return (
    <section className="gen-section gen-cta-final" id="cta" data-screen-label="10 CTA Final">
      <div className="gen-container">
        <Reveal>
          <div className="cta-panel">
            <span className="cta-bar" aria-hidden="true" />
            <span className="cta-grid" aria-hidden="true" />
            <span className="cta-glow" aria-hidden="true" />
            <span className="cta-b cta-b--tl" aria-hidden="true" />
            <span className="cta-b cta-b--tr" aria-hidden="true" />
            <span className="cta-b cta-b--bl" aria-hidden="true" />
            <span className="cta-b cta-b--br" aria-hidden="true" />

            <div className="cta-inner">
              <div className="cta-eyebrow">
                <span className="cta-live-dot" />
                <span className="cta-term">root@genesis</span>
                <span className="cta-term-sep">:~$</span>
                <span className="cta-term-cmd">iniciar_operacao</span>
                <span className="cta-caret" />
              </div>

              <h2 className="cta-title">
                <span className="cta-title-line">Pare de operar</span>
                <span className="cta-title-accent">no escuro.</span>
              </h2>

              <p className="cta-lead">
                Agende uma demonstração de 30 minutos. Mostramos o sistema rodando com dados reais da sua barbearia.
                Sem compromisso, sem script de vendas. Você decide se faz sentido.
              </p>

              <div className="cta-actions">
                <a className="cta-btn cta-btn--primary" href="#agendar">
                  <span>Agendar demonstração</span>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                </a>
                <a className="cta-btn cta-btn--ghost" href="#faq">Tenho mais dúvidas</a>
              </div>

              <div className="cta-chips">
                {[
                  ["7d", "Setup em 7 dias"],
                  ["24/7", "Suporte humano"],
                  ["1-clique", "Exportação livre"],
                  ["0", "Sem fidelidade abusiva"],
                ].map(([k, t]) => (
                  <span className="cta-chip" key={t}>
                    <span className="cta-chip-k">{k}</span>
                    <span className="cta-chip-t">{t}</span>
                  </span>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        .gen-cta-final { background: var(--bg) !important; }
        .gen-theme-dark .gen-cta-final, .gen-theme-light .gen-cta-final { background: #060B16 !important; }
        .gen-theme-glass .gen-cta-final { background: linear-gradient(158deg, #0a2330 0%, #050d12 100%) !important; }

        .cta-panel {
          position: relative; overflow: hidden;
          border: 1px solid var(--cta-line, rgba(255,255,255,0.12));
          border-radius: 28px;
          padding: clamp(48px, 7vw, 110px) clamp(24px, 5vw, 90px);
          background:
            radial-gradient(120% 90% at 50% -10%, rgba(var(--accent-rgb),0.16), transparent 55%),
            linear-gradient(180deg, #0c1626, #070d18);
          box-shadow: 0 50px 120px -40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
          text-align: center;
          --cta-fg: #FFFFFF; --cta-muted: rgba(255,255,255,0.66); --cta-line: rgba(255,255,255,0.12);
        }
        .cta-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); }
        .cta-grid {
          position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
          background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
          background-size: 44px 44px;
          -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 72%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 72%);
        }
        .cta-glow { position: absolute; bottom: -40%; left: 50%; transform: translateX(-50%); width: 70%; height: 80%; z-index: 0; pointer-events: none;
          background: radial-gradient(circle, rgba(var(--accent-rgb),0.18), transparent 65%); filter: blur(20px); }
        .cta-b { position: absolute; width: 26px; height: 26px; border: 1px solid var(--accent); opacity: 0.5; z-index: 2; pointer-events: none; }
        .cta-b--tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
        .cta-b--tr { top: 18px; right: 18px; border-left: 0; border-bottom: 0; }
        .cta-b--bl { bottom: 18px; left: 18px; border-right: 0; border-top: 0; }
        .cta-b--br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }
        .cta-inner { position: relative; z-index: 1; }

        .cta-eyebrow {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 8px 16px; border-radius: 999px;
          border: 1px solid rgba(var(--accent-rgb),0.4); background: rgba(var(--accent-rgb),0.08);
          font-family: var(--ff-mono); font-size: 12px; color: var(--accent);
          margin-bottom: 34px;
        }
        .cta-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: cta-blink 1.6s ease-in-out infinite; }
        @keyframes cta-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
        .cta-term { color: var(--accent); }
        .cta-term-sep { color: rgba(255,255,255,0.4); }
        .cta-term-cmd { color: #fff; }
        .cta-caret { width: 8px; height: 15px; background: var(--accent); display: inline-block; animation: cta-caret 1s steps(2) infinite; }
        @keyframes cta-caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

        .cta-title {
          font-family: var(--ff-display); font-weight: 700;
          font-size: clamp(52px, 8.5vw, 150px); line-height: 0.92;
          letter-spacing: -0.03em; text-transform: uppercase;
          margin: 0; color: var(--cta-fg);
          display: flex; flex-direction: column; align-items: center; gap: 4px;
        }
        .cta-title-line { display: block; }
        .cta-title-accent {
          color: var(--accent); font-style: italic; font-weight: 400;
          text-shadow: 0 0 50px rgba(var(--accent-rgb),0.5);
        }
        .cta-lead { color: var(--cta-muted); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; max-width: 56ch; margin: 32px auto 44px; }

        .cta-actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
        .cta-btn {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 17px 30px; border-radius: 999px;
          font-family: var(--ff-body); font-size: 15px; font-weight: 600;
          transition: transform 280ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 280ms ease, background 280ms ease;
        }
        .cta-btn--primary { background: var(--accent); color: #061018; box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.5), 0 18px 44px -12px rgba(var(--accent-rgb),0.7); }
        .cta-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.6), 0 26px 60px -14px rgba(var(--accent-rgb),0.85); }
        .cta-btn--primary svg { transition: transform 280ms ease; }
        .cta-btn--primary:hover svg { transform: translateX(4px); }
        .cta-btn--ghost { color: var(--cta-fg); border: 1px solid var(--cta-line); }
        .cta-btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }

        .cta-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 56px; }
        .cta-chip {
          display: inline-flex; align-items: center; gap: 9px;
          padding: 9px 16px; border-radius: 12px;
          border: 1px solid var(--cta-line); background: rgba(255,255,255,0.03);
        }
        .cta-chip-k { font-family: var(--ff-mono); font-size: 12px; font-weight: 700; color: var(--accent); }
        .cta-chip-t { font-size: 13px; color: var(--cta-muted); }

        @media (max-width: 600px) {
          .cta-panel { border-radius: 20px; }
          .cta-b { width: 18px; height: 18px; }
          .cta-eyebrow { font-size: 10px; padding: 7px 12px; margin-bottom: 26px; flex-wrap: wrap; justify-content: center; }
          .cta-lead { margin: 24px auto 32px; }
          .cta-actions { display: flex; width: 100%; }
          .cta-btn { width: 100%; justify-content: center; min-height: 54px; }
          .cta-chips { gap: 8px; margin-top: 40px; }
          .cta-chip { padding: 8px 12px; }
          .cta-chip-t { font-size: 12px; }
        }
      `}</style>
    </section>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  const cols = [
    { t: "Plataforma", items: [
      { l: "Governança da equipe", h: "#governanca" },
      { l: "Fechamento diário", h: "#fechamento" },
      { l: "Assinaturas", h: "#assinaturas" },
      { l: "IA no WhatsApp", h: "#ia-atendimento" },
      { l: "Feedback semanal", h: "#feedback-rh" },
      { l: "Metas diárias", h: "#metas" },
    ]},
    { t: "Decisão", items: [
      { l: "Comparativo", h: "#comparativo" },
      { l: "Planos", h: "#planos" },
      { l: "Casos reais", h: "#depoimento" },
      { l: "Perguntas frequentes", h: "#faq" },
    ]},
  ];
  return (
    <footer className="gen-footer gen-footer--v2">
      <div className="gen-container">
        <div className="gen-foot-cta">
          <div>
            <div className="gen-foot-eyebrow">Próximo passo</div>
            <h3 className="gen-foot-cta__h">
              Assuma o controle da sua operação<br />
              <span style={{ color: "var(--accent)" }}>ainda este mês.</span>
            </h3>
          </div>
          <a href="#planos" className="gen-btn gen-btn--primary gen-foot-cta__btn">
            Falar com a GÊNESIS
            <span aria-hidden="true" style={{ marginLeft: 10 }}>→</span>
          </a>
        </div>

        <div className="gen-foot-main">
          <div className="gen-foot-brand">
            <GenesisLogo size={88} variant="full" />
            <p className="gen-foot-brand__p">
              Sistema de governança financeira para barbearias profissionais que decidiram
              tratar o negócio como negócio.
            </p>
          </div>

          {cols.map(col => (
            <nav className="gen-foot-col" key={col.t} aria-label={col.t}>
              <div className="gen-foot-eyebrow">{col.t}</div>
              <ul className="gen-foot-list">
                {col.items.map(it => (
                  <li key={it.l}><a href={it.h} className="gen-foot-link">{it.l}</a></li>
                ))}
              </ul>
            </nav>
          ))}

          <div className="gen-foot-col">
            <div className="gen-foot-eyebrow">Contato</div>
            <div className="gen-foot-social">
              <a className="gen-foot-ico" href="https://wa.me/5562994987799" target="_blank" rel="noreferrer" aria-label="WhatsApp +55 62 99498-8799" title="+55 62 9949-8799">
                <svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor" aria-hidden="true"><path d="M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.95 1.17-.17.2-.35.22-.65.07-.3-.15-1.23-.45-2.34-1.44-.86-.77-1.44-1.72-1.62-2.02-.17-.3-.02-.47.13-.62.13-.13.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.62-.92-2.2-.24-.58-.49-.5-.67-.5h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.06 2.88 1.21 3.08c.15.2 2.08 3.32 5.06 4.52 2.98 1.2 3.28.98 3.87.92.6-.05 1.93-.79 2.2-1.55.27-.77.27-1.42.2-1.55-.08-.13-.28-.2-.58-.35Z"/><path d="M12.04 2C6.6 2 2.18 6.42 2.18 11.86c0 1.94.56 3.75 1.53 5.28L2 22l4.99-1.66a9.83 9.83 0 0 0 5.05 1.38c5.44 0 9.86-4.42 9.86-9.86C21.9 6.42 17.48 2 12.04 2Zm0 17.86c-1.6 0-3.1-.44-4.38-1.2l-.31-.19-3.07 1.02 1.03-3-.2-.32a7.94 7.94 0 0 1-1.2-4.31c0-4.4 3.58-7.98 8.13-7.98 4.4 0 7.98 3.58 7.98 7.98 0 4.4-3.58 8-8 8Z"/></svg>
              </a>
              <a className="gen-foot-ico" href="https://www.instagram.com/genesis.sa_sistema/" target="_blank" rel="noreferrer" aria-label="Instagram @genesis.sa_sistema" title="@genesis.sa_sistema">
                <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="1.7" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="3.8"/><circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" stroke="none"/></svg>
              </a>
              <a className="gen-foot-ico" href="mailto:contato@genesis-sa.com.br" aria-label="E-mail contato@genesis-sa.com.br" title="contato@genesis-sa.com.br">
                <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="1.7" aria-hidden="true"><rect x="2.8" y="5" width="18.4" height="14" rx="2.6"/><path d="m3.6 7.2 8.4 6 8.4-6"/></svg>
              </a>
            </div>
            <ul className="gen-foot-list" style={{ marginTop: 22 }}>
              <li><a href="https://wa.me/5562994987799" target="_blank" rel="noreferrer" className="gen-foot-link gen-foot-link--strong">+55 62 9949-8799</a></li>
              <li><a href="https://www.instagram.com/genesis.sa_sistema/" target="_blank" rel="noreferrer" className="gen-foot-link">@genesis.sa_sistema</a></li>
            </ul>
            <div className="gen-foot-hours">
              Suporte humano<br />
              <strong>seg a sáb · 08h às 20h</strong>
            </div>
          </div>
        </div>

        <div className="gen-foot-bottom">
          <span>© 2025 GÊNESIS S/A · Governança com inteligência operacional</span>
        </div>
      </div>

      <style>{`
        .gen-footer--v2 { position: relative; overflow: hidden; padding-top: 0; }
        .gen-footer--v2::before { content: ""; position: absolute; inset: 0;
          background-image: linear-gradient(rgba(var(--accent-rgb),0.055) 1px, transparent 1px),
            linear-gradient(90deg, rgba(var(--accent-rgb),0.055) 1px, transparent 1px);
          background-size: 64px 64px; pointer-events: none; mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 70%); }
        .gen-footer--v2 .gen-container { position: relative; }

        .gen-foot-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
          padding: 40px 0 48px; border-bottom: 1px solid var(--line); }
        .gen-foot-cta__h { font-family: var(--ff-display); font-weight: 700; letter-spacing: -0.02em;
          font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; margin: 12px 0 0; color: var(--fg); text-wrap: balance; }
        .gen-foot-cta__btn { flex: 0 0 auto; }

        .gen-foot-eyebrow { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.24em;
          text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }

        .gen-foot-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 48px; padding: 56px 0 48px; }
        .gen-foot-brand__p { margin: 22px 0 24px; color: var(--fg-muted); font-size: 15px; line-height: 1.6; max-width: 42ch; text-wrap: pretty; }
        .gen-foot-badges { display: flex; flex-wrap: wrap; gap: 8px; }
        .gen-foot-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
          border: 1px solid var(--line-strong); font-family: var(--ff-mono); font-size: 9.5px;
          letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-muted); }
        .gen-foot-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

        .gen-foot-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
        .gen-foot-link { color: var(--fg-muted); text-decoration: none; font-size: 14.5px; position: relative;
          transition: color 200ms ease, padding-left 200ms ease; }
        .gen-foot-link::before { content: "→"; position: absolute; left: -16px; opacity: 0;
          transition: opacity 200ms ease, left 200ms ease; color: var(--accent); font-size: 12px; }
        .gen-foot-link:hover { color: var(--accent); padding-left: 4px; }
        .gen-foot-link:hover::before { opacity: 1; left: -14px; }
        .gen-foot-link--strong { color: var(--fg); font-weight: 500; }

        .gen-foot-hours { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--line-strong);
          font-family: var(--ff-mono); font-size: 10.5px; line-height: 1.9; letter-spacing: 0.1em;
          text-transform: uppercase; color: var(--fg-dim); }
        .gen-foot-hours strong { color: var(--fg-muted); }

        .gen-foot-bottom { padding: 26px 0 8px; border-top: 1px solid var(--line);
          display: flex; justify-content: center; align-items: center; text-align: center;
          font-family: var(--ff-mono); font-size: 10.5px; color: var(--fg-dim); letter-spacing: 0.14em; text-transform: uppercase; }

        .gen-foot-social { display: flex; gap: 10px; }
        .gen-foot-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
          border: 1px solid var(--line-strong); color: var(--fg-muted); text-decoration: none;
          transition: color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease, background 200ms ease; }
        .gen-foot-ico:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px);
          background: rgba(var(--accent-rgb),0.08); box-shadow: 0 0 18px -6px rgba(var(--accent-rgb),0.7); }

        @media (max-width: 1000px) {
          .gen-foot-main { grid-template-columns: 1fr 1fr; gap: 40px; }
          .gen-foot-brand { grid-column: 1 / -1; }
        }
        @media (max-width: 620px) {
          .gen-foot-main { grid-template-columns: 1fr; gap: 34px; padding: 44px 0 36px; }
          .gen-foot-cta { padding: 32px 0 36px; }
          .gen-foot-cta__btn { width: 100%; justify-content: center; }
          .gen-foot-bottom { line-height: 1.7; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Comparativo, Depoimento, FAQ, CTAFinal, Footer });
