// sections.jsx, Major LP sections.

const Nav = ({ t }) => (
  <nav className="nav">
    <div className="nav-inner">
      <div className="brand">
        <a href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }} aria-label="Voltar ao topo">
          <img src="assets/logo-metrik.png" className="brand-logo" alt="Metrik" />
        </a>
      </div>
      <div className="nav-links">
        <a href="#dor">O que resolvemos</a>
        <a href="#processo">O processo</a>
        <a href="#casos">Prova real</a>
        <a href="#oferta">Diagnóstico</a>
        <a href="#faq">FAQ</a>
      </div>
      <div className="nav-cta">
        <a className="btn btn--ghost" href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("open-apply")); }}>Diagnóstico</a>
        <a className="btn btn--primary" href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("open-apply")); }}>Aplicar</a>
      </div>
    </div>
  </nav>
);

const HEADLINES = {
  A: {
    line1: (<span>NÃO é um <span className="strike">robô de WhatsApp</span></span>),
    line2: (<span>isso não te <span className="script" style={{ fontSize: "1.05em" }}>salva</span>.</span>),
  },
  B: {
    line1: (<span>O que falta no seu escritório</span>),
    line2: (<span>não é <span className="script" style={{ fontSize: "1.05em" }}>ferramenta</span>.</span>),
  },
  C: {
    line1: (<span>Você perde cliente todo dia,</span>),
    line2: (<span>e nem <span className="script" style={{ fontSize: "1.05em" }}>vê</span>.</span>),
  },
};

const Hero = ({ t, setTweak }) => {
  const h = HEADLINES[t.headline] || HEADLINES.A;
  const ctaLabel = t.ctaVariant === "1" ? "Aplicar para uma vaga" : "Quero o processo no meu escritório";
  return (
    <section className="hero">
      <div className="hero-bg" />
      <div className="wrap hero-inner">
        <div style={{ position: "relative", display: "inline-block" }}>
          <div className="eyebrow">O futuro para escritórios de advocacia</div>
        </div>
        <h1 className="display" style={{ marginTop: 28 }}>
          <span className="line">{h.line1}</span>
          <span className="line">{h.line2}</span>
        </h1>

        {/* Decorative script flourish, top-right */}
        {t.flourish && (
          <div style={{ position: "absolute", right: "10%", top: 96, transform: "rotate(-6deg)" }}>
            <ScriptFlourish />
          </div>
        )}

        <p className="hero-sub">
          O mercado te vende <strong>mais um sistema</strong> e <strong>mais uma "IA que responde rápido"</strong>.
          Quem realmente cresce instalou outra coisa: um <strong>processo comercial</strong> que conduz o lead do primeiro "oi" ao contrato assinado, sem depender de sorte, de memória, ou da secretária que chega às 9h.
        </p>
        <div className="hero-cta">
          <a className="btn btn--primary btn--lg" href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("open-apply")); }}>
            {ctaLabel}
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
          </a>
          <a className="btn btn--ghost btn--lg" href="#processo">Ver o processo</a>
        </div>
        <div className="hero-meta">
          <span>Diagnóstico gratuito</span>
          <span className="hero-meta-dot" />
          <span>Vagas limitadas por mês</span>
          <span className="hero-meta-dot" />
          <span>Para advogados de todas as áreas</span>
        </div>

        <HeroFunnel />

        <div className="proof-strip">
          <div className="proof-item">
            <div className="proof-item-num"><em>+500</em></div>
            <div className="proof-item-lbl">empresas atendidas</div>
          </div>
          <div className="proof-item">
            <div className="proof-item-num"><em>3</em></div>
            <div className="proof-item-lbl">países: Brasil, EUA e Portugal</div>
          </div>
          <div className="proof-item">
            <div className="proof-item-num"><em>30</em><small style={{ fontFamily: "Geist, sans-serif", fontSize: 18, color: "var(--ink-dim)", marginLeft: 4 }}>dias</small></div>
            <div className="proof-item-lbl">do diagnóstico ao comercial rodando</div>
          </div>
          <div className="proof-item">
            <div className="proof-item-num"><em>Top 5%</em></div>
            <div className="proof-item-lbl">parceiros Kommo</div>
          </div>
        </div>
      </div>
    </section>
  );
};

const PainSection = () => {
  const items = [
    { icon: "target", h: "O atendimento virou gargalo.", p: "Você atende bem, mas tudo passa por você, e o que era diferencial agora é o teto da operação." },
    { icon: "magnet", h: "Lead entra, lead esquece.", p: "O contato chega, alguém promete retornar e some. A maioria evapora no follow-up que ninguém faz." },
    { icon: "chart", h: "Quer escalar, depende do manual.", p: "A operação ainda mora em planilha, na cabeça de alguém e em ‘depois eu vejo’. Crescer dói." },
    { icon: "hourglass", h: "Nenhuma previsibilidade.", p: "Tem demanda. Mas mês a mês é loteria: às vezes entra bem, às vezes não entra. Sem motivo claro." },
    { icon: "megaphone", h: "Marketing crescendo, comercial parado.", p: "Você já paga tráfego, conteúdo, agência, mas o funil interno trava antes da reunião." },
    { icon: "bolt", h: "Resposta rápida sem padrão.", p: "Quando o time responde rápido, responde diferente. Sem roteiro, sem qualificação, sem ritmo." },
  ];
  return (
    <section className="section" id="dor">
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow">A real do dia a dia</div>
          <h2 className="display">
            Se você vive <span className="script">isso</span>,
            <br/>o furo é no <em style={{ fontStyle: "normal", color: "var(--accent)" }}>processo</em>, não na ferramenta.
          </h2>
          <p>Não importa a área. Seis meses comprando "mais uma coisa" deixa o caos do mesmo tamanho, só mais caro.</p>
        </div>
        <div className="pain-grid">
          {items.map((it, i) => (
            <div className="pain-card" key={i}>
              <div className="pain-card-glyph"><PainIcon kind={it.icon} /></div>
              <h3>{it.h}</h3>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const SolutionSection = () => {
  const [lb, setLb] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = lb ? "hidden" : "";
    const onKey = (e) => { if (e.key === "Escape") setLb(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [lb]);
  return (
  <section className="section">
    <div className="wrap">
      <div className="sol">
        <div className="sol-left">
          <div className="eyebrow">A solução</div>
          <h2 className="display">
            Eu não vendo <span className="strike" style={{ color: "var(--ink-faint)" }}>ferramenta</span>.<br/>
            Eu instalo um <span className="script" style={{ fontSize: "1.05em" }}>processo comercial</span>.
          </h2>
          <p>
            <strong>A diferença é brutal.</strong> Ferramenta você liga e reza pra dar certo. Processo é uma máquina desenhada, onde cada lead tem um caminho, cada etapa tem um responsável, e nada cai no esquecimento.
          </p>
          <p>
            Eu mapeio como seu escritório deveria vender, monto essa estrutura por dentro e a coloco pra rodar, do primeiro "oi" ao contrato assinado.
            <br/><br/>
            <strong>Você fica com o resultado. A complexidade fica comigo.</strong>
          </p>
          <div className="compare">
            <div className="compare-card bad">
              <div className="lbl">Ferramenta sozinha</div>
              <h4>Login + boa sorte</h4>
              <p>Mais uma tela pra olhar. Mais um custo no fim do mês. Mesmo lead escapando.</p>
            </div>
            <div className="compare-card good">
              <div className="lbl">Processo instalado</div>
              <h4>Carro andando</h4>
              <p>Lead conduzido, etapa por etapa, até o contrato, operado pela minha equipe.</p>
            </div>
          </div>
        </div>
        <div className="sol-right">
          <a className="diagram" href="assets/jornada-sistema.webp" onClick={(e) => { e.preventDefault(); setLb(true); }}>
            <img src="assets/jornada-sistema.webp" alt="O processo comercial mapeado de ponta a ponta" loading="lazy" />
            <span className="diagram-hint">Clique para ampliar</span>
          </a>
        </div>
      </div>
    </div>
    {lb && (
      <div className="lightbox" onClick={() => setLb(false)}>
        <button className="lightbox-close" onClick={() => setLb(false)} aria-label="Fechar">×</button>
        <img src="assets/jornada-sistema.webp" alt="O processo comercial mapeado de ponta a ponta" onClick={(e) => e.stopPropagation()} />
      </div>
    )}
  </section>
  );
};

const ProcessSection = () => {
  const steps = [
    { n: "01", lbl: "Diagnóstico & desenho", h: "Seu processo ideal sai da sua cabeça e vira mapa claro.", p: "A gente mapeia como seu escritório deveria vender: cada etapa, cada gatilho, cada decisão. Você sai do diagnóstico com o desenho na mão, e enxergando exatamente onde está perdendo cliente hoje.", V: Step1Visual },
    { n: "02", lbl: "Estruturação", h: "Sai do papel. Vira operação real.", p: "Tudo organizado, padronizado e pronto pra rodar. Pipeline montado, scripts no lugar, responsabilidades definidas. Nenhum lead solto, nenhuma etapa perdida.", V: Step2Visual },
    { n: "03", lbl: "Operação que não dorme", h: "Cada lead atendido, qualificado e acompanhado, sempre.", p: "Sem depender de alguém lembrar, sem fila, sem horário comercial. De madrugada, no almoço, no domingo. A operação roda; você só recebe quem chega pronto pra fechar.", V: Step3Visual },
    { n: "04", lbl: "Clareza & previsibilidade", h: "Decisão por número, não por achismo.", p: "De onde vem cada cliente, onde o funil trava, quanto vai entrar. Você abre o painel e enxerga o comercial inteiro, pela primeira vez.", V: Step4Visual },
  ];
  return (
    <section className="section" id="processo">
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow">Como eu resolvo</div>
          <h2 className="display">
            O processo que coloca seu<br/>comercial <span className="script">pra funcionar</span>.
          </h2>
          <p>Quatro etapas. Do caos ao previsível, sem você botar a mão na massa.</p>
        </div>
        <div className="process">
          {steps.map((s, i) => {
            const V = s.V;
            return (
              <div className="step" key={i}>
                <div className="step-text">
                  <div className="step-num">
                    <span className="step-num-big">{s.n}</span>
                    <span className="step-num-lbl">{s.lbl}</span>
                  </div>
                  <h3 className="display">{s.h}</h3>
                  <p>{s.p}</p>
                </div>
                <V />
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const BenefitsSection = () => {
  const items = [
    ["Nenhum lead esquecido", "Todo contato vira oportunidade conduzida até o fim."],
    ["Previsibilidade no caixa", "Você sabe quanto entra. Acaba o mês bom / mês ruim."],
    ["Agenda só com quem tem caso", "Acabou o tempo perdido com curioso e bate-papo."],
    ["Time para de apagar incêndio", "A operação roda, eles cuidam do que importa."],
    ["Você volta a advogar", "O comercial deixa de ser o seu problema diário."],
    ["Escala sem inchar a folha", "Mais volume, mesma estrutura, mesmo time."],
    ["Imagem de escritório grande", "Atendimento impecável desde o primeiro segundo."],
    ["Crescimento sem caos", "Você cresce porque tem processo, não porque corre mais."],
  ];
  return (
    <section className="section" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow">O que você ganha</div>
          <h2 className="display">Você fica com o <span className="script">resultado</span>.</h2>
          <p>A complexidade some do seu dia. Sobra clareza, agenda e dinheiro entrando.</p>
        </div>
        <div className="bens">
          {items.map(([h, p], i) => (
            <div className="ben" key={i}>
              <div className="ben-mark"><CheckMark /></div>
              <div>
                <h4>{h}</h4>
                <p>{p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const SocialProofSection = () => {
  const [hovered, setHovered] = React.useState(null);
  const [lightbox, setLightbox] = React.useState(null);
  React.useEffect(() => {
    document.body.style.overflow = lightbox ? "hidden" : "";
    const onKey = (e) => { if (e.key === "Escape") setLightbox(null); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [lightbox]);
  const authority = [
    { n: "+500", l: "empresas atendidas" },
    { n: "3", l: "países: Brasil, EUA e Portugal" },
    { n: "Top 5%", l: "parceiros Kommo" },
    { n: "+500", l: "alunos na nossa academy" },
    { n: "3 anos", l: "pioneiros em IA no CRM" },
  ];
  const prints = [
    { src: "assets/depoimento-1.jpeg", cls: "g-tall", h: "ROI de 14.527%", p: "relato de cliente" },
    { src: "assets/depoimento-2.png", cls: "g-wide", h: "Operação rodando", p: "implementação em ação" },
    { src: "assets/depoimento-3.png", cls: "g-tall", h: "Qualifica os leads sozinho", p: "no próprio CRM" },
    { src: "assets/depoimento-4.png", cls: "g-wide", h: "IA 100% no esperado", p: "feedback de cliente" },
    { src: "assets/depoimento-5.png", cls: "g-wide", h: "Resultado real", p: "cliente satisfeito" },
    { src: "assets/depoimento-6.png", cls: "g-wide", h: "ROI absurdo", p: "relato de cliente" },
  ];
  return (
    <section className="section" id="casos">
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow">Autoridade</div>
          <h2 className="display">Mais de <span className="script">500 empresas</span><br/>já confiam no nosso processo.</h2>
          <p>De todas as áreas e de vários países: Brasil, Estados Unidos e Portugal.</p>
        </div>

        <div className="auth-feature">
          <img src="assets/kommo-night.png" alt="Equipe premiada no Kommo Night" loading="lazy" />
          <div>
            <div className="eyebrow">Reconhecimento</div>
            <h3>Top 5% Kommo. Pioneiros no Brasil.</h3>
            <p>Fomos os primeiros a integrar IA ao CRM no Brasil, no Kommo, há 3 anos. E criamos a maior comunidade que ensina Kommo CRM + IA, com mais de 500 alunos.</p>
            <div className="auth-stats">
              {authority.map((a, i) => (
                <div className="auth-stat" key={i}>
                  <span className="n">{a.n}</span>
                  <span className="l">{a.l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="sec-head" style={{ marginBottom: 32 }}>
          <h2 className="display" style={{ fontSize: 34 }}>O que os clientes <span className="script">dizem</span>.</h2>
        </div>
        <div className="gallery">
          {prints.map((p, i) => (
            <a
              className={"gallery-item " + p.cls + (hovered !== null && hovered !== i ? " dim" : "")}
              href={p.src} key={i}
              onClick={(e) => { e.preventDefault(); setLightbox(p.src); }}
              onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)}
            >
              <img src={p.src} alt={p.h} loading="lazy" />
              <div className="g-cap"><h4>{p.h}</h4><p>{p.p}</p></div>
            </a>
          ))}
        </div>

        {lightbox && (
          <div className="lightbox" onClick={() => setLightbox(null)}>
            <button className="lightbox-close" onClick={() => setLightbox(null)} aria-label="Fechar">×</button>
            <img src={lightbox} alt="Depoimento de cliente" onClick={(e) => e.stopPropagation()} />
          </div>
        )}
      </div>
    </section>
  );
};

const OfferSection = () => (
  <section className="section" id="oferta">
    <div className="wrap">
      <div className="sec-head">
        <div className="eyebrow">A oferta</div>
        <h2 className="display">Você não paga por <span className="strike">software</span>.<br/>Paga por um <span className="script">comercial inteiro</span> funcionando.</h2>
      </div>
      <div className="offer">
        <div className="offer-left">
          <div className="eyebrow" style={{ color: "var(--ink-dim)" }}>O que você leva</div>
          <h2 className="display">Resultado, não ferramenta.</h2>
          <ul className="offer-list">
            <li>Seu processo comercial desenhado sob medida</li>
            <li>Toda a estrutura montada e operada por nós</li>
            <li>Atendimento, qualificação e follow-up sem falha</li>
            <li>Clareza total: de onde vem o cliente e quanto entra</li>
            <li>Acompanhamento próximo, a cada 15 dias</li>
            <li>Implementação em 30 dias, primeira semana já roda</li>
            <li>Um time inteiro cuidando do comercial (você não contrata)</li>
          </ul>
        </div>
        <div className="offer-right">
          <div className="offer-price-lbl">Próximo passo</div>
          <h3 style={{ fontFamily: "'Poppins',sans-serif", fontWeight: 600, fontSize: 24, letterSpacing: "-.02em", margin: "14px 0 10px", lineHeight: 1.18 }}>Diagnóstico gratuito do seu comercial</h3>
          <p className="offer-price-sub">Em ~30 min eu te mostro onde seu escritório perde cliente hoje, e como o processo resolve. Sem custo, sem compromisso.</p>
          <a className="btn btn--primary btn--lg" href="#" style={{ width: "100%" }} onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("open-apply")); }}>
            Aplicar para diagnóstico
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
          </a>
          <div className="offer-divider" />
          <p className="offer-note">
            <strong>Operado por quem já fez +250 vezes.</strong> Vale menos que um SDR júnior, que faz 8h, tira férias e ainda depende de você treinar. Aqui é um time inteiro, do diagnóstico ao acompanhamento.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const ObjectionsSection = () => {
  const objs = [
    { q: "Eu já tenho um robô de WhatsApp / um sistema.", a: "E ele te deu processo? Ou só te deu mais uma tela pra olhar? Ferramenta sem processo é caro e não converte. Eu não somo mais uma, eu organizo o todo." },
    { q: "Tá caro.", a: "Caro é o que você já perde todo mês em lead que escapa. O processo se paga nos clientes que hoje fecham com o escritório do lado." },
    { q: "Vou tentar resolver internamente.", a: "Pode. Mas enquanto você testa e erra, o lead continua entrando e sumindo. Eu entrego rodando em 30 dias, sem curva de aprendizado sua." },
    { q: "Minha área é diferente.", a: "Por isso começa com diagnóstico. O processo é desenhado pro seu nicho. O que não muda é o problema: demanda maior que a capacidade de atender." },
    { q: "Isso fere o Código de Ética da OAB?", a: "Não. É organização do seu processo interno, não publicidade. Tudo dentro do que o Provimento permite." },
    { q: "Já tentei isso antes e não funcionou.", a: "Quase sempre era ferramenta vendida como processo. Aqui você não compra acesso, recebe um comercial montado e operado, com acompanhamento quinzenal." },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow">As objeções honestas</div>
          <h2 className="display">O que você já pensou<br/>enquanto lia <span className="script">tudo isso</span>.</h2>
        </div>
        <div className="objs">
          {objs.map((o, i) => (
            <div className="obj" key={i}>
              <h4>{o.q}</h4>
              <p>{o.a}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const GuaranteeSection = () => (
  <section className="section section--tight">
    <div className="wrap">
      <div className="guarantee">
        <div className="guarantee-seal">Sem risco<br/>na primeira<br/>conversa</div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Garantia</div>
          <h3>Começa com o diagnóstico, gratuito.</h3>
          <p>Eu te mostro exatamente onde seu escritório perde cliente hoje e como o processo resolve. Você decide depois, com tudo na mesa. E a entrega é em <strong>30 dias</strong>, com avanços toda semana, você não espera meses pra ver de pé.</p>
        </div>
        <a className="btn btn--ghost btn--lg" href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("open-apply")); }}>Quero o diagnóstico</a>
      </div>
    </div>
  </section>
);

const UrgencySection = () => (
  <section className="urgency">
    <div className="wrap">
      <div className="eyebrow">Pra quem é</div>
      <h2 className="display">Eu não atendo <span className="script">todo mundo</span>.</h2>
      <p style={{ maxWidth: 680, margin: "0 auto", color: "var(--ink-dim)", fontSize: 16.5, lineHeight: 1.7 }}>
        Cada processo é montado à mão pela minha equipe, então eu não pego qualquer escritório.
        Eu trabalho com quem já decidiu escalar o comercial e parou de aceitar ver o investimento em tráfego virar lead esquecido.
        Quem entende que o tempo do dono não é pra ficar pensando em quem não foi atendido. Esse tempo vale muito mais investido onde só você pode atuar.
        Atender, qualificar e dar follow-up, isso você delega pra mim e ganha mais.
      </p>
      <p style={{ maxWidth: 680, margin: "22px auto 0", color: "var(--ink)", fontSize: 18, fontWeight: 500 }}>
        Por isso abro poucas vagas por mês.
      </p>
    </div>
  </section>
);

const FAQSection = () => {
  const [openIdx, setOpenIdx] = React.useState(0);
  const qs = [
    ["Preciso instalar ou aprender alguma coisa?", "Não. Eu monto e opero. Você usa o resultado."],
    ["Isso é mais um sistema/robô?", "Não. É um processo comercial completo, operado pela minha equipe. A ferramenta é detalhe, o que importa é o processo funcionando."],
    ["Funciona pra minha área?", "Sim, previdenciário, trabalhista, família, criminal, tributário, cível. Desenhado sob medida no diagnóstico."],
    ["Quanto tempo até estar rodando?", "30 dias, com avanços semanais. Você sente a diferença na primeira semana."],
    ["Vou precisar mexer no meu jeito de trabalhar?", "O mínimo. O peso da operação fica comigo; você recebe o cliente pronto."],
    ["Quanto custa?", "O investimento é definido no diagnóstico, conforme o tamanho da sua operação. A primeira conversa é gratuita e sem compromisso."],
    ["Como começo?", "Preenche a aplicação. Se houver vaga e fizer sentido, marcamos o diagnóstico."],
  ];
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow">Perguntas frequentes</div>
          <h2 className="display">Antes de aplicar.</h2>
        </div>
        <div className="aud">
          <div className="aud-col aud-yes">
            <div className="aud-h">É pra você se</div>
            <ul>
              <li>Você quer escalar o comercial, não só "responder mais rápido"</li>
              <li>Você já investe em tráfego e quer cada real virando reunião</li>
              <li>Você entende que o seu tempo vale mais do que apagar incêndio</li>
              <li>Você está pronto pra delegar o comercial e cobrar resultado</li>
            </ul>
          </div>
          <div className="aud-col aud-no">
            <div className="aud-h">Não é pra você se</div>
            <ul>
              <li>Você quer testar "uma ferramentinha" por curiosidade</li>
              <li>Você acha que o seu tempo vale o mesmo que o do estagiário</li>
              <li>Você não está disposto a investir pra crescer</li>
            </ul>
          </div>
        </div>
        <div className="faq">
          {qs.map(([q, a], i) => (
            <div className={"faq-item" + (openIdx === i ? " open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpenIdx(openIdx === i ? -1 : i)}>
                <span>{q}</span>
                <span className="faq-icon"><Plus /></span>
              </button>
              <div className="faq-a">{a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCTASection = ({ t }) => {
  const ctaLabel = t.ctaVariant === "1" ? "Aplicar para uma vaga" : "Quero o processo no meu escritório";
  return (
    <section className="final" id="cta">
      <div className="wrap final-inner">
        <div className="eyebrow">Última chamada</div>
        <h2 className="display">
          Você pode comprar <span className="strike-alt" style={{ color: "var(--ink-faint)" }}>mais um robô</span>.
          <br/>Ou pode finalmente ter um <span className="script">processo</span>.
        </h2>
        <p>
          Um responde mensagem. O outro enche sua agenda de cliente qualificado e te devolve a previsibilidade que você nunca teve. As vagas do mês são limitadas. Aplica e descubra, no diagnóstico, quanto seu escritório está deixando na mesa agora mesmo.
        </p>
        <a className="btn btn--primary btn--xl" href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("open-apply")); }}>
          {ctaLabel}
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
        </a>
        <div className="hero-meta" style={{ marginTop: 28 }}>
          <span>Diagnóstico gratuito</span>
          <span className="hero-meta-dot" />
          <span>Vagas limitadas</span>
          <span className="hero-meta-dot" />
          <span>+250 operações estruturadas</span>
        </div>

        <div className="ps">
          <strong>P.S.</strong>, Todo mundo no seu mercado está comprando a mesma ferramenta e tendo o mesmo resultado: nenhum. Quem sai na frente não é quem tem o robô mais novo, é quem tem processo. Eu instalo esse processo, rodando em 30 dias. Mas só abro poucas vagas por mês. Quando fecha, fecha.
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer>
    <div className="wrap foot-inner">
      <div className="brand">
        <img src="assets/logo-metrik.png" className="brand-logo" alt="Metrik" />
      </div>
      <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
        <a href="#">Diagnóstico</a>
        <a href="#">Privacidade</a>
        <a className="soc" href="https://www.instagram.com/metriksales/" target="_blank" rel="noopener" aria-label="Instagram da Metrik">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1"/></svg>
        </a>
        <a className="soc" href="https://www.youtube.com/@metrik_sales" target="_blank" rel="noopener" aria-label="YouTube da Metrik">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="5" width="20" height="14" rx="4"/><path d="M10 9l5 3-5 3z" fill="currentColor" stroke="none"/></svg>
        </a>
      </div>
      <div className="mono">© {new Date().getFullYear()}, todas as áreas, OAB-compliant</div>
    </div>
  </footer>
);

const ApplyModal = () => {
  const [open, setOpen] = React.useState(false);
  const [step, setStep] = React.useState(1);
  const [d, setD] = React.useState({ area: "", leads: "", faturamento: "", melhoria: "" });

  React.useEffect(() => {
    const onOpen = () => { setOpen(true); setStep(1); if (window.fbq) window.fbq("track", "Lead"); };
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("open-apply", onOpen);
    window.addEventListener("keydown", onKey);
    return () => { window.removeEventListener("open-apply", onOpen); window.removeEventListener("keydown", onKey); };
  }, []);

  React.useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; }, [open]);

  if (!open) return null;

  const set = (k) => (e) => setD((p) => ({ ...p, [k]: e.target.value }));
  const canNext = d.area && d.leads && d.faturamento;

  // Agenda do GoHighLevel/LeadConnector. As respostas da qualificação vão na URL,
  // mapeie-as em campos personalizados / valores do calendário no GHL pra capturá-las no lead.
  const utmQuery = (window.MetrikTracking && window.MetrikTracking.query()) || "";
  const calUrl = "https://api.leadconnectorhq.com/widget/group/D9w1zoyS5iur9ERdRFUy"
    + "?area=" + encodeURIComponent(d.area)
    + "&leads=" + encodeURIComponent(d.leads)
    + "&faturamento=" + encodeURIComponent(d.faturamento)
    + "&melhoria=" + encodeURIComponent(d.melhoria)
    + (utmQuery ? "&" + utmQuery : "");

  return (
    <div className="modal-overlay" onClick={() => setOpen(false)}>
      <div className={"modal" + (step === 2 ? " modal--wide" : "")} onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={() => setOpen(false)} aria-label="Fechar">×</button>
        <div className="modal-progress"><span style={{ width: step === 1 ? "50%" : "100%" }} /></div>
        <div className="modal-steps">Passo {step} de 2</div>

        {step === 1 ? (
          <div>
            <h3>Vamos ver se faz sentido.</h3>
            <p className="modal-sub">Pra eu entender o seu escritório.</p>
            <div className="field">
              <label>Área de atuação</label>
              <select value={d.area} onChange={set("area")}>
                <option value="">Selecione…</option>
                <option>Previdenciário</option><option>Trabalhista</option><option>Família</option>
                <option>Criminal</option><option>Tributário</option><option>Cível</option>
                <option>Empresarial</option><option>Consumidor</option><option>Imobiliário</option><option>Outra</option>
              </select>
            </div>
            <div className="field">
              <label>Quantos leads recebe atualmente</label>
              <select value={d.leads} onChange={set("leads")}>
                <option value="">Selecione…</option>
                <option>Menos de 25 por dia</option><option>25 a 50 por dia</option>
                <option>50 a 100 por dia</option><option>Mais de 100 por dia</option>
              </select>
            </div>
            <div className="field">
              <label>Faturamento mensal</label>
              <select value={d.faturamento} onChange={set("faturamento")}>
                <option value="">Selecione…</option>
                <option>Até R$ 50 mil</option><option>R$ 50 a 100 mil</option>
                <option>R$ 100 a 300 mil</option><option>R$ 300 mil+</option>
              </select>
            </div>
            <div className="field">
              <label>O que faria você vender pelo menos o dobro?</label>
              <textarea value={d.melhoria} onChange={set("melhoria")} rows="3" placeholder="O que você acha que precisa melhorar no seu comercial hoje? (opcional)" />
            </div>
            <button className="btn btn--primary btn--lg" disabled={!canNext} onClick={() => { if (window.fbq) window.fbq("track", "InitiateCheckout"); setStep(2); }}>Continuar →</button>
          </div>
        ) : (
          <div>
            <h3>Escolha o melhor horário.</h3>
            <p className="modal-sub">Você confirma nome, e-mail e WhatsApp na própria agenda e já marca seu diagnóstico, sem custo.</p>
            <div className="cal-wrap">
              <iframe
                title="Agendar diagnóstico"
                src={calUrl}
                scrolling="no"
                style={{ width: "100%", border: "none", minHeight: 620, display: "block" }}
                id="D9w1zoyS5iur9ERdRFUy_apply"
              />
            </div>
            <button type="button" className="modal-back" onClick={() => setStep(1)}>← voltar</button>
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, {
  Nav, Hero, PainSection, SolutionSection, ProcessSection, BenefitsSection,
  SocialProofSection, OfferSection, ObjectionsSection, GuaranteeSection,
  UrgencySection, FAQSection, FinalCTASection, Footer, ApplyModal,
});