// PRIMIA V2 — Brand Brief 2026 aplicado
const { useState, useEffect, useRef } = React;

/* ---------- shared bits ---------- */
function Eyebrow({ children }) {
  return <span className="eyebrow">{children}</span>;
}

function Button({ variant = "primary", children, href = "#", small = false, pulse = false }) {
  const cls = `btn btn-${variant} ${small ? "btn-sm" : ""} ${pulse ? "btn-pulse" : ""}`;
  return (
    <a className={cls} href={href}>
      {children}
      <svg className="arrow" width="12" height="12" viewBox="0 0 12 12" fill="none">
        <path d="M2.5 9.5L9.5 2.5M9.5 2.5H4M9.5 2.5V8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </a>);
}

function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------- Logo ---------- */
function Logo({ height = 22 }) {
  const svg = (typeof window !== "undefined" && window.PRIMIA_LOGO_SVG) || "";
  return (
    <span
      className="logo-inline"
      style={{ display: "inline-flex", height, color: "var(--fg)" }}
      dangerouslySetInnerHTML={{ __html: svg }} />);
}

/* ---------- Header ---------- */
function Header() {
  return (
    <header className="header">
      <div className="header-inner">
        <a className="brand" href="#top" aria-label="PRIMIA.AI">
          <Logo height={20} />
        </a>
        <nav className="nav">
          <a href="#solucoes">Soluções</a>
          <a href="#processo">Processo</a>
          <a href="#cases">Cases</a>
          <a href="#diferenciais">Diferenciais</a>
          <a href="#faq">FAQ</a>
        </nav>
        <Button variant="primary" small>Falar com a Primia</Button>
      </div>
    </header>);
}

/* ---------- Hero ---------- */
function HeroVisual() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => (t + 1) % 4), 1800);
    return () => clearInterval(id);
  }, []);
  const nodes = [
    { id: "lead", x: 24, y: 30, label: "Lead", live: tick === 0 },
    { id: "wa", x: 24, y: 130, label: "WhatsApp" },
    { id: "form", x: 24, y: 230, label: "Formulário" },
    { id: "agent", x: 250, y: 130, label: "Agente IA", solid: true },
    { id: "crm", x: 470, y: 60, label: "CRM", live: tick === 1 },
    { id: "auto", x: 470, y: 160, label: "Automação", live: tick === 2 },
    { id: "dash", x: 470, y: 260, label: "Dashboard", live: tick === 3 }];

  return (
    <div className="hero-visual reveal">
      <div className="hv-top">
        <span>OPERATION/01 · LIVE</span>
        <div className="dots">
          <span className="dot"></span>
          <span className="dot"></span>
          <span className="dot live"></span>
        </div>
      </div>
      <div className="hv-body">
        <div className="flow-canvas">
          <svg className="flow-svg" viewBox="0 0 620 340" preserveAspectRatio="none">
            <path className={`flow-path ${tick === 0 ? "live" : ""}`} d="M 95 46 C 170 46, 200 146, 270 146" />
            <path className="flow-path" d="M 95 146 C 170 146, 200 146, 270 146" />
            <path className="flow-path" d="M 95 246 C 170 246, 200 146, 270 146" />
            <path className={`flow-path ${tick === 1 ? "live" : ""}`} d="M 360 146 C 410 146, 420 76, 490 76" />
            <path className={`flow-path ${tick === 2 ? "live" : ""}`} d="M 360 146 C 410 146, 420 176, 490 176" />
            <path className={`flow-path ${tick === 3 ? "live" : ""}`} d="M 360 146 C 410 146, 420 276, 490 276" />
          </svg>
          {nodes.map((n) =>
            <div
              key={n.id}
              className={`flow-node ${n.live ? "active" : ""} ${n.solid ? "solid" : ""}`}
              style={{ left: n.x, top: n.y }}>
              <span className="nd"></span>
              <span>{n.label}</span>
            </div>
          )}
        </div>
      </div>
      <div className="hv-foot">
        <span>SYS · IA + AUTO + DADOS</span>
        <span>v2.5</span>
      </div>
    </div>);
}

/* === A/B/C variants (escolha guiada pelo ICP) ============================
   Switch por ?v=A | ?v=B | ?v=C  ou painel discreto canto inferior direito.
   Default: A (autoria). Persiste em localStorage. */
const HERO_VARIANTS = {
  A: {
    label: "Autoria",
    eyebrow: "Operação técnica aplicada",
    headLines: ["Construímos a operação", "que faz seu lançamento", "acontecer."],
    accentLine: 2,
    lead: "Squad técnico por trás de Bvaz, Camila Vieira e Febracis. WhatsApp que não trava, agentes que qualificam, automações que rodam, dashboards que mostram o que importa.",
    ctaPrimary: "Falar com a Primia",
    ctaSecondary: "Ver cases"
  },
  B: {
    label: "Cliente herói",
    eyebrow: "Para quem lança grande",
    headLines: ["Lança maior,", "sem quebrar", "a operação."],
    accentLine: 1,
    lead: "Quando o lançamento cresce mais rápido que sua estrutura técnica, a Primia entra como squad de atendimento, automação e dados. Você cria e aparece. A gente sustenta o resto.",
    ctaPrimary: "Quero conversar",
    ctaSecondary: "Ver como entregamos"
  },
  C: {
    label: "Squad-substituto",
    eyebrow: "Um time. Todas as frentes.",
    headLines: ["O time que você", "teria que montar", "— pronto."],
    accentLine: 2,
    lead: "Estratégia, design, tecnologia, automação e dados em um único squad. A Primia funciona como seu departamento técnico-operacional terceirizado — entregando o que 4 fornecedores entregariam, com método e sem ruído.",
    ctaPrimary: "Conhecer o squad",
    ctaSecondary: "Ver cases"
  }
};

function useHeroVariant() {
  // Variante C cravada em 2026-05-27 — "O time que você teria que montar — pronto."
  const [variant, setVariant] = useState("C");
  return [variant, setVariant];
}

function VariantSwitcher({ variant, setVariant }) {
  return (
    <div className="variant-switcher" title="Demo · alterna entre variantes A/B/C da headline">
      <span className="vs-label">VARIANT</span>
      {Object.entries(HERO_VARIANTS).map(([k, v]) =>
        <button
          key={k}
          className={`vs-btn ${variant === k ? "active" : ""}`}
          onClick={() => setVariant(k)}
          aria-label={`Variante ${k} — ${v.label}`}>
          {k}
        </button>
      )}
      <span className="vs-meta">{HERO_VARIANTS[variant].label}</span>
    </div>);
}

function Hero({ variant }) {
  const v = HERO_VARIANTS[variant];
  return (
    <section className="hero section first" id="top">
      <div className="hero-grid-bg"></div>
      <div className="hero-glow"></div>
      <div className="wrap hero-inner">
        <div>
          <Eyebrow>{v.eyebrow}</Eyebrow>
          <h1 className="hero-title reveal" style={{ fontSize: "80px" }}>
            {v.headLines.map((line, i) =>
              <React.Fragment key={i}>
                {i === v.accentLine
                  ? <span className="accent-text" style={{ fontSize: "80px" }}>{line}</span>
                  : line}
                {i < v.headLines.length - 1 && <br />}
              </React.Fragment>
            )}
          </h1>
          <p className="hero-sub reveal">{v.lead}</p>
          <div className="hero-ctas reveal">
            <Button variant="primary" pulse>{v.ctaPrimary}</Button>
            <Button variant="ghost" href="#cases">{v.ctaSecondary}</Button>
          </div>
          <div className="hero-proof reveal">
            <div className="proof">
              <div className="num">01</div>
              <div className="lbl">Diagnóstico antes de qualquer linha de código</div>
            </div>
            <div className="proof">
              <div className="num">02</div>
              <div className="lbl">Squad multifuncional: estratégia + design + tech + dados</div>
            </div>
            <div className="proof">
              <div className="num">03</div>
              <div className="lbl">Operação real: 1M+ msgs · R$493k em economia · R$30M em cenários</div>
            </div>
          </div>
        </div>
        <HeroVisual />
      </div>
    </section>);
}

/* ---------- Marquee ---------- */
function Marquee() {
  const items = [
    "Agentes de IA", "Chatbots em escala", "Automações de operação",
    "Sites de lançamento", "Sistemas sob medida", "Dashboards de comando",
    "Integração CRM", "WhatsApp Cloud", "Estratégia técnica", "Diagnóstico operacional"];

  const block =
    <span>
      {items.map((s, i) =>
        <React.Fragment key={i}>
          {s}
          <span className="sep">/</span>
        </React.Fragment>
      )}
    </span>;

  return (
    <div className="marquee">
      <div className="marquee-track">
        {block}{block}{block}
      </div>
    </div>);
}

/* ---------- Audience ---------- */
function Audience() {
  const items = [
    {
      n: "01", t: "Lançador high-ticket", g: "info",
      d: "Mentores, experts, eventos e produtos digitais com lançamentos de R$1M a R$30M+. Sua audiência cresce mais rápido que sua equipe técnica. A Primia entra como squad de IA aplicada — diagnóstico, build, operação durante e depois do lançamento."
    },
    {
      n: "02", t: "Operador high-stakes", g: "wa",
      d: "Empresas com WhatsApp e CRM em volume crítico, onde IA falhar significa dinheiro fora. Atendimento, suporte, qualificação e fluxos comerciais sustentados por agentes treinados, automações e dashboards conectados à rotina real."
    }];

  return (
    <section className="section" id="para-quem">
      <div className="wrap">
        <div className="section-header reveal">
          <div className="titles">
            <Eyebrow>Para quem é</Eyebrow>
            <h2 className="h2" style={{ fontSize: "40px" }}>
              Para quem precisa de IA do tamanho da <em className="italic-serif">operação real</em>.
            </h2>
          </div>
          <p className="body">
            Quando lançamento cresce mais rápido que estrutura ou volume cresce
            mais rápido que time, a Primia entra como squad técnico — não
            como vendedora de pacote.
          </p>
        </div>
        <div className="audience-grid-v2 reveal">
          {items.map((x) =>
            <div className="aud-card-v2" key={x.n}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <span className="num">ICP {x.n}</span>
                <div className="glyph"><AudIcon kind={x.g} /></div>
              </div>
              <div className="title">{x.t}</div>
              <p className="desc">{x.d}</p>
            </div>
          )}
        </div>
        <div className="audience-foot reveal">
          <span>Outras demandas?</span>
          <a href="#cta">Falamos com você caso a caso →</a>
        </div>
      </div>
    </section>);
}

function AudIcon({ kind }) {
  const c = "currentColor";
  switch (kind) {
    case "info":
      return <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="7" stroke={c} strokeWidth="1.5" /><path d="M7 10l2 2 4-4" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>;
    case "wa":
      return <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 17a7 7 0 100-14 7 7 0 000 14zM6 12l2-1 2 1 2-1 2 1" stroke={c} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" /></svg>;
    default: return null;
  }
}

/* ---------- About ---------- */
function About() {
  return (
    <section className="section" id="sobre">
      <div className="wrap">
        <div className="section-header reveal">
          <div className="titles">
            <Eyebrow>Sobre a Primia</Eyebrow>
            <h2 className="h2" style={{ fontSize: "40px" }}>
              Squad técnico de IA, <em className="italic-serif">forjado</em> em lançamentos high-ticket.
            </h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <p className="lead">
              A Primia nasceu dentro de operações que não podiam falhar.
              Lançamentos de R$5M a R$30M. Eventos com milhares de leads.
              Operações de WhatsApp processando milhões de mensagens. Cada
              ferramenta no nosso stack veio de uma demanda real, não de
              uma roadmap de produto.
            </p>
            <p className="body">
              Unimos estratégia, design, tecnologia e dados em um único
              squad. Não vendemos transformação genérica. Diagnosticamos a
              operação real, desenhamos a IA que cabe nela, entregamos o
              que aguenta auditoria e ficamos durante o lançamento.
              Agentes, automações, sites, sistemas, dashboards — conectados
              à rotina, não ao slide.
            </p>
          </div>
        </div>
      </div>
    </section>);
}

/* ---------- Services ---------- */
function Services() {
  return (
    <section className="section" id="solucoes">
      <div className="wrap">
        <div className="section-header center reveal">
          <div className="titles">
            <Eyebrow>Soluções</Eyebrow>
            <h2 className="h2" style={{ maxWidth: "22ch", fontSize: "40px" }}>
              Infraestrutura técnica para operação que aguenta.
            </h2>
          </div>
        </div>
        <div className="svc-bento reveal">
          <ServiceCard
            cls="tall"
            tag="01 · AGENTES"
            title="Agentes de IA"
            body="Atendimento, suporte, qualificação e tarefas internas sustentadas por agentes treinados pro seu contexto — não pelo prompt genérico de plataforma."
            viz={<VizAgent />} />

          <ServiceCard
            cls="med-wide"
            tag="02 · AUTOMAÇÕES"
            title="Automações de operação"
            body="Fluxos que conectam WhatsApp, CRM, plataforma de pagamento, email e ferramentas internas. Operação que roda sozinha, com log auditável."
            viz={<VizAuto />} />

          <ServiceCard
            cls="med-wide"
            tag="03 · INTERFACES"
            title="Sites & sistemas"
            body="Páginas de lançamento que aguentam pico, dashboards que viram sala de comando, sistemas internos sob medida — desenhados pro time que vai usar."
            viz={<VizWeb />} />

          <ServiceCard
            cls="med"
            tag="04 · CHAT"
            title="Chatbots em escala"
            body="Fluxos pra WhatsApp, site e canais digitais conectados a dados, CRM e automações. Bots que processam volume sem perder fio."
            viz={<VizChat />} />

          <ServiceCard
            cls="med"
            tag="05 · DASHBOARDS"
            title="Sala de comando"
            body="Painéis executivos com indicadores de lead, vendas, canais e operação. Decisão por dado, não por achismo."
            viz={<VizDash />} />

          <ServiceCard
            cls="med"
            tag="06 · DADOS"
            title="Inteligência de dados"
            body="Análise de lead, scoring de comportamento, integração de fontes. Camada de dados que sustenta IA — não a maquia."
            viz={<VizStrat />} />
        </div>
      </div>
    </section>);
}

function ServiceCard({ cls, tag, title, body, viz }) {
  return (
    <article className={`svc ${cls}`}>
      <div className="svc-head">
        <span className="svc-tag">{tag}</span>
        <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ color: "var(--muted)" }}>
          <path d="M3 11L11 3M11 3H5M11 3v6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
      <div className="svc-viz">{viz}</div>
      <div>
        <h3 className="svc-title">{title}</h3>
        <p className="svc-body" style={{ marginTop: 10 }}>{body}</p>
      </div>
    </article>);
}

/* service visualizations (mantidos do original) */
function VizAgent() {
  return (
    <svg viewBox="0 0 240 180" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style={{ padding: 8 }}>
      <defs>
        <radialGradient id="ag" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.35" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
        </radialGradient>
      </defs>
      <circle cx="120" cy="90" r="55" fill="url(#ag)" />
      <circle cx="120" cy="90" r="36" fill="none" stroke="var(--accent)" strokeWidth="1" />
      <circle cx="120" cy="90" r="22" fill="var(--bg)" stroke="var(--accent)" strokeWidth="1.5" />
      <text x="120" y="95" textAnchor="middle" fill="var(--accent)" fontSize="14" fontFamily="JetBrains Mono" fontWeight="600">AI</text>
      {[0, 1, 2, 3, 4, 5].map((i) => {
        const a = i * Math.PI * 2 / 6;
        const x = 120 + Math.cos(a) * 70;
        const y = 90 + Math.sin(a) * 50;
        return <circle key={i} cx={x} cy={y} r="3" fill="var(--fg-2)" />;
      })}
      {[0, 1, 2, 3, 4, 5].map((i) => {
        const a = i * Math.PI * 2 / 6;
        const x = 120 + Math.cos(a) * 70;
        const y = 90 + Math.sin(a) * 50;
        return <line key={i} x1="120" y1="90" x2={x} y2={y} stroke="var(--line-2)" strokeWidth="0.8" strokeDasharray="2 3" />;
      })}
    </svg>);
}
function VizChat() {
  return (
    <svg viewBox="0 0 260 140" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style={{ padding: 12 }}>
      <rect x="14" y="20" rx="10" ry="10" width="120" height="32" fill="var(--bg-2)" stroke="var(--line)" />
      <text x="28" y="40" fill="var(--fg-2)" fontSize="11" fontFamily="Schibsted Grotesk">Oi! Posso ajudar?</text>
      <rect x="126" y="62" rx="10" ry="10" width="120" height="32" fill="var(--accent)" />
      <text x="140" y="82" fill="var(--accent-ink)" fontSize="11" fontFamily="Schibsted Grotesk" fontWeight="500">Quero falar com vocês</text>
      <rect x="14" y="104" rx="10" ry="10" width="80" height="24" fill="var(--bg-2)" stroke="var(--line)" />
      <circle cx="26" cy="116" r="2" fill="var(--muted)" />
      <circle cx="34" cy="116" r="2" fill="var(--muted)" />
      <circle cx="42" cy="116" r="2" fill="var(--muted)" />
    </svg>);
}
function VizAuto() {
  return (
    <svg viewBox="0 0 260 140" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style={{ padding: 16 }}>
      {[40, 110, 180, 220].map((x, i) =>
        <g key={i}>
          <rect x={x - 22} y="55" width="44" height="30" rx="6" fill="var(--bg-2)" stroke={i === 1 ? "var(--accent)" : "var(--line)"} />
          <text x={x} y="74" textAnchor="middle" fill={i === 1 ? "var(--accent)" : "var(--fg-2)"} fontSize="10" fontFamily="JetBrains Mono">{["IN", "FN", "DB", "OUT"][i]}</text>
        </g>
      )}
      <line x1="62" y1="70" x2="88" y2="70" stroke="var(--line-2)" strokeDasharray="3 3" />
      <line x1="132" y1="70" x2="158" y2="70" stroke="var(--accent)" strokeDasharray="3 3" />
      <line x1="202" y1="70" x2="198" y2="70" stroke="var(--line-2)" />
    </svg>);
}
function VizWeb() {
  return (
    <svg viewBox="0 0 240 140" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style={{ padding: 14 }}>
      <rect x="10" y="12" width="220" height="116" rx="8" fill="var(--bg-2)" stroke="var(--line)" />
      <rect x="10" y="12" width="220" height="20" fill="var(--bg-3)" stroke="var(--line)" />
      <circle cx="22" cy="22" r="2" fill="var(--muted)" />
      <circle cx="30" cy="22" r="2" fill="var(--muted)" />
      <circle cx="38" cy="22" r="2" fill="var(--muted)" />
      <rect x="22" y="48" width="120" height="10" fill="var(--fg-2)" opacity="0.4" />
      <rect x="22" y="64" width="80" height="6" fill="var(--muted)" opacity="0.4" />
      <rect x="22" y="80" width="60" height="20" rx="4" fill="var(--accent)" />
    </svg>);
}
function VizDash() {
  return (
    <svg viewBox="0 0 240 140" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style={{ padding: 16 }}>
      <polyline points="20,110 50,80 80,90 110,55 140,70 170,40 210,55" fill="none" stroke="var(--accent)" strokeWidth="1.6" />
      <polyline points="20,118 50,95 80,108 110,82 140,98 170,75 210,90" fill="none" stroke="var(--line-2)" strokeWidth="1.2" strokeDasharray="3 3" />
      {[
        [20, 110], [50, 80], [80, 90], [110, 55], [140, 70], [170, 40], [210, 55]].
        map(([x, y], i) => <circle key={i} cx={x} cy={y} r="2.5" fill="var(--accent)" />)}
    </svg>);
}
function VizStrat() {
  return (
    <svg viewBox="0 0 240 140" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style={{ padding: 16 }}>
      <circle cx="120" cy="70" r="50" fill="none" stroke="var(--line-2)" strokeDasharray="3 3" />
      <circle cx="120" cy="70" r="32" fill="none" stroke="var(--line-2)" />
      <circle cx="120" cy="70" r="14" fill="var(--accent)" />
      <line x1="120" y1="20" x2="120" y2="120" stroke="var(--line)" />
      <line x1="70" y1="70" x2="170" y2="70" stroke="var(--line)" />
    </svg>);
}

/* ---------- Process ---------- */
function Process() {
  const steps = [
    { n: "01", t: "Diagnóstico", d: "Mergulho na operação real: time, fluxo, ferramentas, dados, gargalos. Sem entendimento, sem proposta. Saída: documento com onde IA entra, onde NÃO entra, e por quê." },
    { n: "02", t: "Desenho", d: "Arquitetura técnica + protótipos + plano de entrega. Mostramos o que vai ser construído antes de construir. Aprovação por escrita, não por achismo." },
    { n: "03", t: "Build", d: "Squad multifuncional executa: estratégia, design, tech, dados. Não você gerencia 4 fornecedores. Um squad, uma entrega, um ponto de contato." },
    { n: "04", t: "Operação", d: "Durante o lançamento, ficamos. Monitoramento, ajuste fino, operação. Pós-lançamento: handoff documentado, time treinado, operação sustentada." }];

  return (
    <section className="section" id="processo">
      <div className="wrap">
        <div className="section-header reveal">
          <div className="titles">
            <Eyebrow>Como entregamos</Eyebrow>
            <h2 className="h2" style={{ fontSize: "40px" }}>
              Diagnóstico real antes de qualquer linha de código.
            </h2>
          </div>
          <p className="body">
            Quatro etapas coordenadas — do entendimento à operação contínua.
            Sem improviso, sem entrega-e-tchau, sem código sem propósito.
          </p>
        </div>
        <div className="process-rail reveal">
          {steps.map((s, i) =>
            <div className={`proc-step ${i === 1 ? "active" : ""}`} key={s.n}>
              <span className="num">STEP {s.n}</span>
              <div className="marker">{i === 1 ? "→" : i + 1}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);
}

/* ---------- Numbers (NOVO — seção de prova) ---------- */
function Numbers() {
  const ns = [
    { val: "R$493k", em: "493", lbl: "de economia comprovada em 1 ano de operação WhatsApp Utility" },
    { val: "1,049M", em: "M", lbl: "mensagens orquestradas em produção real" },
    { val: "12.068", em: ".068", lbl: "leads processados em 3 bots paralelos (Posicione-se 2026)" },
    { val: "R$30M", em: "30M", lbl: "teto de cenários de lançamento high-ticket sustentados" }];

  return (
    <section className="section" id="numeros">
      <div className="wrap">
        <div className="section-header reveal">
          <div className="titles">
            <Eyebrow>Em produção</Eyebrow>
            <h2 className="h2" style={{ fontSize: "40px" }}>
              Os números que sustentam <em className="italic-serif">a tese</em>.
            </h2>
          </div>
          <p className="body">
            Não são números de slide. São logs de produção, auditáveis,
            replicáveis. Cada um vira ativo de equity da marca.
          </p>
        </div>
        <div className="numbers-grid reveal">
          {ns.map((n, i) =>
            <div className="num-cell" key={i}>
              <div className="num-val">
                {n.val.split(n.em)[0]}
                <em className="italic-serif">{n.em}</em>
                {n.val.split(n.em)[1] || ""}
              </div>
              <div className="num-lbl">{n.lbl}</div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

/* ---------- Team ---------- */
function Team() {
  const fs = [
    {
      i: "H", n: "Hoberdan",
      role: "IA · Automação · Dev",
      d: "Conecta inteligência artificial, automação, design, dev web e dados pra transformar problemas complexos em infraestrutura digital prática.",
      tags: ["AI Engineering", "Automation", "Full-stack", "Data"]
    },
    {
      i: "B", n: "Bruno Vaz",
      role: "Estratégia · Projetos",
      d: "Conecta necessidades dos clientes às soluções certas, conduzindo projetos mais claros, alinhados e direcionados ao impacto de cada operação.",
      tags: ["Strategy", "Discovery", "Project Lead", "Client Success"]
    }];

  return (
    <section className="section" id="time">
      <div className="wrap">
        <div className="section-header reveal">
          <div className="titles">
            <Eyebrow>Quem está por trás</Eyebrow>
            <h2 className="h2" style={{ fontSize: "40px" }}>
              Squad multifuncional, ponto de contato único.
            </h2>
          </div>
          <p className="body">
            A Primia é conduzida por profissionais que unem visão de negócio,
            tecnologia e implementação. Estratégia + design + tech + dados
            em um único time. Você não contrata 4 fornecedores.
          </p>
        </div>
        <div className="team-grid reveal">
          {fs.map((f) =>
            <article className="founder" key={f.i}>
              <div className="founder-photo">
                <span className="ph">PHOTO/{f.i}</span>
                <span className="initial">{f.i}</span>
              </div>
              <div className="founder-meta">
                <div>
                  <div className="founder-role">{f.role}</div>
                  <h3 className="founder-name">{f.n}</h3>
                </div>
                <p className="founder-desc">{f.d}</p>
                <div className="founder-tags">
                  {f.tags.map((t) => <span key={t}>{t}</span>)}
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);
}

/* ---------- Cases ---------- */
function Cases() {
  const clients = [
    { code: "BV", name: "Bvaz Educação", segment: "Top Eduzz LATAM · Lançamentos high-ticket" },
    { code: "CV", name: "Camila Vieira", segment: "Posicione-se 2026 · 12k leads em 3 bots" },
    { code: "FB", name: "Febracis", segment: "4 unidades · Florida · Rio · Bahia · Online" },
    { code: "MN", name: "Manancial (Jefferson & Tayla)", segment: "Plano EVOLUA · Dossiê high-ticket" },
    { code: "HR", name: "Huendel Rolim", segment: "Mentor de Líderes · Parceria estratégica" },
    { code: "+", name: "& mais", segment: "Marcas que constroem com a Primia" }];

  return (
    <section className="section" id="cases">
      <div className="wrap">
        <div className="section-header reveal">
          <div className="titles">
            <Eyebrow>Cases & clientes</Eyebrow>
            <h2 className="h2">
              Marcas que confiaram a IA da operação à Primia.
            </h2>
          </div>
          <p className="body">
            Lançadores high-ticket e operações que não podiam falhar.
            Cada case é um teste de carga real, com número-âncora auditável.
            Detalhes confidenciais tratados em conversa direta.
          </p>
        </div>
        <div className="clients-wall reveal">
          {clients.map((c, i) =>
            <article className={`client ${c.code === "+" ? "client-cap" : ""}`} key={c.code}>
              <div className="client-logo">
                <span className="client-tag">CASE/{String(i + 1).padStart(2, "0")}</span>
                <span className="client-mono">{c.code}</span>
              </div>
              <div className="client-meta">
                <div className="client-name">{c.name}</div>
                <div className="client-seg">{c.segment}</div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);
}

/* ---------- Differentials ---------- */
function Differentials() {
  const ds = [
    { n: "01", g: "ops", t: "Forjado em lançamento real", d: "Nascemos dentro de operações que não podiam falhar. Cada peça do nosso stack é resposta a um problema que apareceu em produção, não em roadmap." },
    { n: "02", g: "consult", t: "Diagnóstico antes de proposta", d: "Não vendemos solução pronta. Entendemos a operação real e só depois desenhamos. Mostramos onde IA entra — e onde não entra." },
    { n: "03", g: "stack", t: "Squad multifuncional", d: "Estratégia + design + tech + dados em um único squad. Não você contrata 4 fornecedores e reza pra eles se entenderem." },
    { n: "04", g: "tailor", t: "Sustentação no D-day", d: "Estamos lá durante o lançamento. Não entregamos código e desaparecemos. Monitoramento, ajuste fino, operação contínua." }];

  const Icon = ({ g }) => {
    const c = "currentColor";
    if (g === "ops") return <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="10" stroke={c} strokeWidth="1.4" /><circle cx="14" cy="14" r="4" fill={c} /></svg>;
    if (g === "tailor") return <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M4 14L14 4l10 10-10 10L4 14z" stroke={c} strokeWidth="1.4" /><path d="M14 9v10M9 14h10" stroke={c} strokeWidth="1.4" strokeLinecap="round" /></svg>;
    if (g === "stack") return <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M14 4l10 6-10 6L4 10l10-6z" stroke={c} strokeWidth="1.4" strokeLinejoin="round" /><path d="M4 14l10 6 10-6M4 18l10 6 10-6" stroke={c} strokeWidth="1.4" strokeLinejoin="round" /></svg>;
    if (g === "consult") return <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M4 4h14v10H10l-6 6V4z" stroke={c} strokeWidth="1.4" strokeLinejoin="round" /><circle cx="22" cy="22" r="3" stroke={c} strokeWidth="1.4" /></svg>;
    return null;
  };
  return (
    <section className="section" id="diferenciais">
      <div className="wrap">
        <div className="section-header center reveal">
          <div className="titles">
            <Eyebrow>Diferenciais</Eyebrow>
            <h2 className="h2" style={{ maxWidth: "24ch", fontSize: "40px" }}>
              Diferentes desde a origem.
            </h2>
          </div>
        </div>
        <div className="diff-grid reveal">
          {ds.map((d) =>
            <div className="diff" key={d.n}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <span className="glyph"><Icon g={d.g} /></span>
                <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.1em" }}>{d.n}</span>
              </div>
              <h3>{d.t}</h3>
              <p>{d.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);
}

/* ---------- FAQ ---------- */
function FAQ() {
  const items = [
    {
      q: "A Primia é uma agência ou consultoria?",
      a: "Somos um squad técnico de IA. Operamos como agência (entregamos projeto), mas o diagnóstico estratégico vem antes da execução — por isso somos vistos como híbrido. A diferença real é que não terceirizamos tecnologia: o squad é dentro de casa."
    },
    {
      q: "Atendem empresas pequenas / negócios em início?",
      a: "Nosso ICP é lançamento high-ticket e operação em volume crítico. Para empresas em início, recomendamos primeiro nossos produtos (Sender Primia, Webtx Agents) ou a Mentoria Primia, antes do serviço de agência."
    },
    {
      q: "Qual o ticket médio de um projeto?",
      a: "Varia por escopo, mas projetos sob medida começam em R$10k e escalam. Retainers mensais a partir do D+30 do lançamento. Em conversa de discovery a gente alinha escopo, prazo e investimento real."
    },
    {
      q: "Vocês ficam com o código? E se eu quiser sair?",
      a: "Você é dono do código entregue. Handoff documentado faz parte da entrega. Não fazemos lock-in técnico nem contratual."
    },
    {
      q: "Quanto tempo de operação a Primia tem?",
      a: "A marca Primia consolidada é recente, mas o squad atua em lançamentos high-ticket há anos sob outros nomes (Webtx Creative, parcerias diretas). Histórico real, marca nova."
    }];

  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="section-header center reveal">
          <div className="titles">
            <Eyebrow>FAQ</Eyebrow>
            <h2 className="h2" style={{ fontSize: "40px" }}>Dúvidas frequentes.</h2>
          </div>
        </div>
        <div className="faq reveal">
          {items.map((it, i) =>
            <div className="faq-item" key={i}>
              <button
                className={`faq-q ${open === i ? "open" : ""}`}
                onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="plus">+</span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? 320 : 0 }}>
                <div className="inner">{it.a}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

/* ---------- CTA ---------- */
function CTA() {
  return (
    <section className="cta" id="cta">
      <div className="cta-grid-bg"></div>
      <div className="wrap cta-inner reveal">
        <Eyebrow>Próximo passo</Eyebrow>
        <h2 className="cta-title" style={{ fontSize: "60px" }}>
          Vamos desenhar a <em className="italic-serif" style={{ color: "var(--accent)" }}>operação</em><br />
          do seu próximo lançamento?
        </h2>
        <p className="lead" style={{ textAlign: "center", maxWidth: "54ch" }}>
          Conta sua operação pra gente. Em 30 minutos a gente te diz onde a
          Primia entra, onde não entra, e por quê. Sem pitch. Sem deck.
          Diagnóstico direto.
        </p>
        <div style={{ display: "flex", gap: 10, marginTop: 8 }}>
          <Button variant="primary" pulse>Falar com a Primia</Button>
          <Button variant="ghost" href="#cases">Ver cases</Button>
        </div>
      </div>
    </section>);
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <Logo height={30} />
            <p style={{ marginTop: 18 }}>
              Squad técnico de IA para lançamentos high-ticket e operações
              que não podem falhar.
            </p>
          </div>
          <div className="footer-col">
            <h4>Menu</h4>
            <ul>
              <li><a href="#solucoes">Soluções</a></li>
              <li><a href="#processo">Processo</a></li>
              <li><a href="#cases">Cases</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="/sobre">Sobre a Primia</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Legal</h4>
            <ul>
              <li><a href="/privacidade">Política de Privacidade</a></li>
              <li><a href="/termos">Termos de Uso</a></li>
              <li><a href="/cookies">Política de Cookies</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contato</h4>
            <ul>
              <li><a href="/contato">Página de contato</a></li>
              <li><a href="mailto:contato@primia.ai">contato@primia.ai</a></li>
              <li><a href="mailto:contato@primia.ai">contato@primia.ai</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 PRIMIA LTDA · CNPJ 65.870.469/0001-27 · TODOS OS DIREITOS RESERVADOS</span>
          <span>BUILT WITH <span style={{ color: "var(--accent)" }}>●</span> IN BRAZIL</span>
        </div>
      </div>
    </footer>);
}

/* ---------- App + Tweaks ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#8356E7",
  "density": "comfortable"
} /*EDITMODE-END*/;

function App() {
  const useTweaks = window.useTweaks || ((d) => [d, () => {}]);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [variant, setVariant] = useHeroVariant();

  useReveal();

  useEffect(() => {
    document.documentElement.classList.toggle("light", tweaks.theme === "light");
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    const c = tweaks.accent;
    const r = parseInt(c.slice(1, 3), 16), g = parseInt(c.slice(3, 5), 16), b = parseInt(c.slice(5, 7), 16);
    const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    document.documentElement.style.setProperty("--accent-ink", lum > 0.55 ? "#0B0B0C" : "#F2F1ED");

    const hex = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
    const isBrandPurple = c.toLowerCase() === "#8356e7";
    const hover = isBrandPurple ? "#6233CC" : `#${hex(r * 0.82)}${hex(g * 0.82)}${hex(b * 0.82)}`;
    document.documentElement.style.setProperty("--accent-hover", hover);
    document.documentElement.style.setProperty("--accent-glow", `rgba(${r}, ${g}, ${b}, 0.45)`);

    const hr = parseInt(hover.slice(1, 3), 16), hg = parseInt(hover.slice(3, 5), 16), hb = parseInt(hover.slice(5, 7), 16);
    const hlum = (0.299 * hr + 0.587 * hg + 0.114 * hb) / 255;
    document.documentElement.style.setProperty("--accent-hover-ink", hlum > 0.55 ? "#0B0B0C" : "#F2F1ED");

    document.documentElement.style.setProperty("--pad", tweaks.density === "tight" ? "32px" : "56px");
  }, [tweaks.theme, tweaks.accent, tweaks.density]);

  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero variant={variant} />
        <Marquee />
        <Audience />
        <About />
        <Services />
        <Process />
        <Numbers />
        <Team />
        <Cases />
        <Differentials />
        <FAQ />
        <CTA />
      </main>
      <Footer />}

      {window.TweaksPanel &&
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Tema" />
          <window.TweakRadio
            label="Aparência"
            value={tweaks.theme}
            options={[{ value: "dark", label: "Dark" }, { value: "light", label: "Light" }]}
            onChange={(v) => setTweak("theme", v)} />
          <window.TweakRadio
            label="Densidade"
            value={tweaks.density}
            options={[{ value: "comfortable", label: "Confortável" }, { value: "tight", label: "Compacto" }]}
            onChange={(v) => setTweak("density", v)} />
          <window.TweakSection label="Acento" />
          <window.TweakColor
            label="Cor de destaque"
            value={tweaks.accent}
            options={["#8356E7", "#A98AFF", "#6233CC", "#FF8A47", "#47C9FB"]}
            onChange={(v) => setTweak("accent", v)} />
        </window.TweaksPanel>
      }
    </React.Fragment>);
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);