// LogicLabz one-pager — main app
const { useEffect, useRef, useState, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#A855F7",
  "fontPair": "grotesk"
}/*EDITMODE-END*/;

// ── icons ──────────────────────────────────────────────────────────────────
const Ico = {
  ads: (s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 18V9a2 2 0 0 1 2-2h2l3-4h2v18h-2l-3-4H5a2 2 0 0 1-2-2z" />
      <path d="M14 8v8" />
      <path d="M17.5 6.5 19 5M17.5 17.5 19 19M19 12h2" />
    </svg>
  ),
  flow: (s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="6" height="6" rx="1.5" />
      <rect x="15" y="3" width="6" height="6" rx="1.5" />
      <rect x="9" y="15" width="6" height="6" rx="1.5" />
      <path d="M6 9v3h12V9M12 12v3" />
    </svg>
  ),
  spark: (s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8" />
      <circle cx="12" cy="12" r="2.5" />
    </svg>
  ),
  page: (s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="2" />
      <path d="M3 8h18" />
      <path d="M7 13h7M7 17h10" />
      <circle cx="6" cy="5.5" r="0.6" fill="currentColor" />
      <circle cx="8" cy="5.5" r="0.6" fill="currentColor" />
    </svg>
  ),
  cart: (s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 4h2l2.5 11.5A2 2 0 0 0 9.5 17H18a2 2 0 0 0 2-1.6L21 8H6" />
      <circle cx="10" cy="20.5" r="1.3" />
      <circle cx="17" cy="20.5" r="1.3" />
    </svg>
  ),
  arrow: (s = 14) => (
    <svg className="arr" width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  ),
  corner: (s = 16) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7 17 17 7M9 7h8v8" />
    </svg>
  ),
  wa: (s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 21l1.7-5.1A8.5 8.5 0 1 1 8.1 19.3L3 21z" />
      <path d="M8.5 9c.5-.4 1.3-.7 1.8 0 .3.4.7 1.3.9 1.7.2.4 0 .8-.3 1.1-.3.3-.5.5-.3.9.3.6 1 1.5 1.8 2.2.8.7 1.7 1.2 2.2 1.5.4.2.7 0 .9-.3.3-.3.6-.6 1-.3.6.3 1.7.9 2 1.1.3.2.4.6.1 1.1-.4.6-1.5 1.4-2.2 1.5-.7.1-1.4.5-3.3-.4-2.5-1.1-4.2-3.4-4.4-3.7-.2-.4-1.2-1.7-1.2-3.2 0-1.6.8-2.3 1.1-2.7.2-.3.5-.4.7-.4z" />
    </svg>
  ),
  mail: (s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="m3 7 9 6 9-6" />
    </svg>
  ),
  briefcase: (s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="7" width="18" height="13" rx="2" />
      <path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
      <path d="M3 13h18" />
    </svg>
  ),
  store: (s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 8 4.5 4h15L21 8" />
      <path d="M5 8v12h14V8" />
      <path d="M3 8a2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0 3 0" />
      <path d="M9 20v-6h6v6" />
    </svg>
  ),
  laptop: (s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="11" rx="2" />
      <path d="M2 20h20" />
      <path d="M10 20h4" />
    </svg>
  ),
  play: (s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="14" rx="2" />
      <path d="M10 9.5v3l3-1.5z" fill="currentColor" />
      <path d="M8 22h8" />
    </svg>
  ),
  alert: (s = 20) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3 2 20h20L12 3z" />
      <path d="M12 10v4M12 17v.5" />
    </svg>
  ),
  question: (s = 20) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" />
      <path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 3.5M12 17v.5" />
    </svg>
  ),
  ghost: (s = 20) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" />
      <path d="M8 10h.5M15.5 10h.5M8 15c1-1.2 2.4-1.8 4-1.8s3 .6 4 1.8" />
    </svg>
  ),
  clock: (s = 20) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3 2" />
    </svg>
  ),
  ig: (s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
    </svg>
  ),
  check: (s = 12) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12.5 10 17.5 19 7" />
    </svg>
  ),
};

// ── data ───────────────────────────────────────────────────────────────────
const SERVICES = [
  { name: "Tráfego Pago", desc: "Campanhas em Meta Ads e Google Ads gerenciadas com foco em ROAS, não em vaidade.", tags: ["Meta Ads", "Google Ads", "TikTok Ads"], ico: "ads" },
  { name: "Automações de Marketing", desc: "Funis, fluxos e jornadas que vendem enquanto você dorme — sem retrabalho do time.", tags: ["E-mail", "WhatsApp", "CRM"], ico: "flow" },
  { name: "Produção de Criativos", desc: "Artes e vídeos pensados pra parar o scroll e converter — em volume e velocidade.", tags: ["Static", "Vídeo", "UGC"], ico: "spark" },
  { name: "Páginas de Vendas & Landing Pages", desc: "Páginas com copy persuasiva, design moderno e métricas amarradas. Cada elemento existe pra mover o lead pro próximo passo — testadas e otimizadas com base no comportamento real do usuário.", tags: ["Copy", "Design", "CRO", "A/B Test"], ico: "page" },
  { name: "Gestão Completa de E-commerce", desc: "Da loja ao anúncio, do criativo ao retargeting. Operação ponta-a-ponta pra escalar com previsibilidade e margem saudável — sem você coordenar cinco fornecedores diferentes.", tags: ["Shopify", "WooCommerce", "Performance", "CRM"], ico: "cart" },
];

const WHY = [
  { n: "01", title: "Estratégia + execução", desc: "Não somos consultores que entregam slides. Pensamos a estratégia, operamos a campanha, ajustamos no dia seguinte. Tudo no mesmo time." },
  { n: "02", title: "Operação direta, sem intermediário", desc: "Quem opera é quem rodou verba real. Sem camada de júnior intermediando seu acesso ao trabalho que importa." },
  { n: "03", title: "Dados em tempo real", desc: "Dashboard transparente, atualizado todos os dias. Você sabe pra onde vai cada R$, qual criativo está performando e o que muda na semana." },
];

const STATS = [
  { tag: "Operação", val: "Ativa desde 2022" },
  { tag: "Verba diária", val: "Em Meta, Google e TikTok" },
  { tag: "Cadência", val: "Revisão semanal por operação" },
];

const PROBLEMS = [
  { ico: "alert", q: "Você anuncia, mas o caixa não responde.", a: "Verba sai, lead entra, e mesmo assim a venda não fecha. A gente entra na operação e <b>amarra anúncio, página e CRM</b> pra cada R$ investido voltar mensurado.", to: "trafego", cta: "Como amarramos isso" },
  { ico: "question", q: "Não sabe pra onde vai o dinheiro do tráfego.", a: "Relatórios confusos, plataformas brigando entre si. <b>Dashboard único e transparente</b>, atualizado todo dia, mostrando o que performa e o que precisa morrer.", to: "trafego", cta: "Ver a operacionalização" },
  { ico: "ghost", q: "O criativo cansa antes da campanha escalar.", a: "Sem volume novo, a entrega cai. Produzimos <b>artes e vídeos em ritmo de operação</b>, testando ângulos pra você nunca depender de um anúncio só.", to: "crea", cta: "Ver o pipeline de criativo" },
  { ico: "clock", q: "Tempo todo no produto, nada sobra pro marketing.", a: "Você não tem que virar gestor de tráfego. Cuidamos da operação inteira — <b>você acompanha o resultado</b>, não a planilha.", to: "ecom", cta: "Ver gestão completa" },
];

const LOGOS = [
  { name: "Nova Co.", g: "◆" }, { name: "Helio", g: "◐" }, { name: "Patten", g: "▲" },
  { name: "Querida", g: "◇" }, { name: "Outline", g: "✦" }, { name: "Vértice", g: "▼" },
];

const TESTIMONIALS = [
  {
    quote: "Reposicionaram a operação inteira em 30 dias. Saímos da bagunça de três freelas pra um time só reportando todo dia.",
    name: "Ana Resende",
    role: "CEO · Onkel Studio",
    result: "Receita +2.1× em 6 meses",
    initials: "AR",
    avatar: "a1",
  },
  {
    quote: "Eles não entregam slide, entregam screen do BM. É outro nível de transparência — e o resultado veio.",
    name: "Marina Salles",
    role: "Diretora · Trilha Educação",
    result: "CPA −42% no lançamento",
    initials: "MS",
    avatar: "a2",
  },
  {
    quote: "Pela primeira vez tenho um relatório que eu mesmo entendo, no domingo à noite, sem ninguém do time pra traduzir.",
    name: "João Camargo",
    role: "Fundador · Verde Mercearia",
    result: "Pedidos +60% em 90 dias",
    initials: "JC",
    avatar: "a3",
  },
];

const AUDIENCE = [
  { ico: "cart", title: "E-commerce", desc: "De pequenas lojas a operações que faturam 7 dígitos por mês. Performance, conversão e escala.", tag: "Shopify · Woo · Nuvemshop" },
  { ico: "play", title: "Infoprodutos", desc: "Lançamentos, perpétuos e funis de alto ticket. Criativo, copy e mídia integrados.", tag: "Hotmart · Kiwify · Eduzz" },
  { ico: "store", title: "Comércios Locais", desc: "Operação física que quer aparecer no Google, lotar agenda e parar de depender de indicação. Cuidamos do funil local de ponta a ponta.", tag: "Google Meu Negócio · WhatsApp Business · Geo-targeting" },
  { ico: "briefcase", title: "Profissionais & Marcas Pessoais", desc: "Arquiteta, advogado, designer, consultor. Portfólio que vende o trabalho e funil pra captar cliente todo mês — sem você ter que postar nada.", tag: "Portfólio · Landing · Captação de leads" },
];

// ── reveal hook ────────────────────────────────────────────────────────────
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll("[data-reveal]");
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
      }),
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ── in-view hook (returns ref + bool when intersected) ─────────────────────
function useInView(threshold = 0.4) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const node = ref.current; if (!node) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.unobserve(node); } }),
      { threshold }
    );
    io.observe(node);
    return () => io.disconnect();
  }, [threshold]);
  return [ref, shown];
}

// ── animated counter ──────────────────────────────────────────────────────
function Counter({ to, decimals = 0, pre = "", suf = "", duration = 1600 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  const done = useRef(false);
  useEffect(() => {
    const node = ref.current; if (!node) return;
    const io = new IntersectionObserver((entries) => entries.forEach((entry) => {
      if (!entry.isIntersecting || done.current) return;
      done.current = true;
      const start = performance.now();
      const tick = (t) => {
        const p = Math.min(1, (t - start) / duration);
        setVal(to * (1 - Math.pow(1 - p, 3)));
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    }), { threshold: 0.5 });
    io.observe(node);
    return () => io.disconnect();
  }, [to, duration]);
  const display = decimals > 0 ? val.toFixed(decimals) : Math.round(val);
  return (
    <span ref={ref} className="stat-num">
      {pre && <span className="pre">{pre}</span>}
      <span>{display}</span>
      <span className="suf">{suf}</span>
    </span>
  );
}

// ── line chart (used in hero dashboard) ────────────────────────────────────
function HeroChart() {
  const data = [22, 28, 26, 35, 41, 48, 56, 64, 72, 79, 88, 96];
  const months = ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"];
  const [ref, shown] = useInView(0.4);
  const W = 440, H = 160, P = 28;
  const max = 100, min = 0;
  const x = (i) => P + (i * (W - P * 2)) / (data.length - 1);
  const y = (v) => H - P - ((v - min) / (max - min)) * (H - P * 2);
  const points = data.map((v, i) => [x(i), y(v)]);
  const linePath = points.map(([px, py], i) => (i ? "L" : "M") + px + " " + py).join(" ");
  const areaPath = linePath + ` L ${x(data.length - 1)} ${H - P} L ${x(0)} ${H - P} Z`;

  return (
    <div className="dash-chart" ref={ref}>
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
        <defs>
          <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.35" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </linearGradient>
        </defs>
        <g className="chart-grid">
          {[0, 0.33, 0.66, 1].map((t, i) => (
            <line key={i} x1={P} x2={W - P} y1={P + t * (H - P * 2)} y2={P + t * (H - P * 2)} />
          ))}
        </g>
        {months.map((m, i) => (
          <text key={i} className="chart-lbl" x={x(i)} y={H - 6} textAnchor="middle">{m}</text>
        ))}
        <path d={areaPath} className="chart-area"
              style={{ opacity: shown ? 1 : 0, transition: "opacity 1.2s 0.4s ease" }} />
        <path d={linePath} className="chart-line"
              style={{
                strokeDasharray: 1200, strokeDashoffset: shown ? 0 : 1200,
                transition: "stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1)"
              }} />
        {points.map(([px, py], i) => (
          <circle key={i} className={"chart-pt" + (i === points.length - 1 ? " last" : "")}
                  cx={px} cy={py} r={i === points.length - 1 ? 5 : 3}
                  style={{ opacity: shown ? 1 : 0, transition: `opacity .3s ${0.4 + i * 0.08}s ease` }} />
        ))}
      </svg>
      <div className="chart-tip"
           style={{
             left: `${(x(points.length - 1) / W) * 100}%`,
             top: `${(y(96) / H) * 100}%`,
             opacity: shown ? 1 : 0,
             transition: "opacity .4s 1.6s ease",
           }}>
        R$ 96k · ROAS 5.2x
      </div>
    </div>
  );
}

// ── ROAS line chart (results section) ──────────────────────────────────────
function ROASChart() {
  const data = [1.8, 2.1, 2.4, 2.9, 3.3, 3.6, 4.2, 4.8, 5.1, 5.4, 5.9, 6.2];
  const [ref, shown] = useInView(0.35);
  const W = 460, H = 200, P = 24;
  const max = 7, min = 1;
  const x = (i) => P + (i * (W - P * 2)) / (data.length - 1);
  const y = (v) => H - P - ((v - min) / (max - min)) * (H - P * 2);
  const pts = data.map((v, i) => [x(i), y(v)]);
  const lp = pts.map(([px, py], i) => (i ? "L" : "M") + px + " " + py).join(" ");
  const ap = lp + ` L ${x(data.length - 1)} ${H - P} L ${x(0)} ${H - P} Z`;
  return (
    <div className="res-chart" ref={ref}>
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
        <defs>
          <linearGradient id="roasGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.4" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </linearGradient>
        </defs>
        <g className="chart-grid">
          {[0, 0.5, 1].map((t, i) => (
            <line key={i} x1={P} x2={W - P} y1={P + t * (H - P * 2)} y2={P + t * (H - P * 2)} />
          ))}
        </g>
        <path d={ap} fill="url(#roasGrad)"
              style={{ opacity: shown ? 1 : 0, transition: "opacity 1.2s .4s ease" }} />
        <path d={lp} className="chart-line"
              style={{
                strokeDasharray: 1400, strokeDashoffset: shown ? 0 : 1400,
                transition: "stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1)"
              }} />
        {pts.map(([px, py], i) => (
          <circle key={i} className={"chart-pt" + (i === pts.length - 1 ? " last" : "")}
                  cx={px} cy={py} r={i === pts.length - 1 ? 5 : 2.5}
                  style={{ opacity: shown ? 1 : 0, transition: `opacity .3s ${0.6 + i * 0.07}s ease` }} />
        ))}
        {/* baseline label */}
        <text className="chart-lbl" x={x(0)} y={y(1.8) - 8} textAnchor="start">1.8x</text>
        <text className="chart-lbl" x={x(pts.length - 1)} y={y(6.2) - 10} textAnchor="end">6.2x</text>
      </svg>
    </div>
  );
}

// ── Bar chart (before/after) ───────────────────────────────────────────────
function BarChart() {
  const groups = [
    { lbl: "CTR", a: 0.9, b: 2.4, unit: "%" },
    { lbl: "CPA", a: 84, b: 36, unit: "R$", invert: true },
    { lbl: "Conv.", a: 1.3, b: 3.8, unit: "%" },
  ];
  const [ref, shown] = useInView(0.4);
  const W = 280, H = 200, P = 28;
  const gw = (W - P * 2) / groups.length;
  return (
    <div className="res-chart" ref={ref}>
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid meet">
        <line x1={P} x2={W - P} y1={H - P} y2={H - P} stroke="var(--border)" strokeWidth="1" />
        {groups.map((g, i) => {
          const max = Math.max(g.a, g.b);
          const ha = ((g.invert ? max - g.a + max * 0.2 : g.a) / (max * 1.2)) * (H - P * 2);
          const hb = ((g.invert ? max - g.b + max * 0.2 : g.b) / (max * 1.2)) * (H - P * 2);
          const cx = P + i * gw + gw / 2;
          // 'Antes' bar shown muted, 'Depois' in accent — simpler: scale by relative value
          const aH = (g.a / max) * (H - P * 2 - 20);
          const bH = (g.b / max) * (H - P * 2 - 20);
          // For inverted (lower is better, like CPA), flip visual so 'b' looks like improvement = shorter
          return (
            <g key={i} transform={`translate(${cx}, 0)`}>
              <rect x={-22} y={H - P - aH} width={18} height={shown ? aH : 0}
                    fill="var(--border-strong)" rx="2"
                    style={{ transition: `height .9s ${0.15 + i * 0.1}s cubic-bezier(.2,.8,.3,1)` }} />
              <rect x={4} y={H - P - bH} width={18} height={shown ? bH : 0}
                    fill="var(--accent)" rx="2"
                    style={{
                      transition: `height .9s ${0.3 + i * 0.1}s cubic-bezier(.2,.8,.3,1)`,
                      filter: "drop-shadow(0 0 8px rgba(168,85,247,0.4))"
                    }} />
              <text className="chart-lbl" x={0} y={H - P + 14} textAnchor="middle">{g.lbl}</text>
              <text x={-13} y={H - P - aH - 6} textAnchor="middle" className="chart-lbl"
                    style={{ opacity: shown ? 0.6 : 0, transition: "opacity .4s 1s ease" }}>
                {g.unit === "R$" ? `R$${g.a}` : `${g.a}${g.unit}`}
              </text>
              <text x={13} y={H - P - bH - 6} textAnchor="middle"
                    style={{
                      fontFamily: "var(--font-mono)", fontSize: 9,
                      fill: "var(--accent)", letterSpacing: "0.04em",
                      opacity: shown ? 1 : 0, transition: "opacity .4s 1.1s ease"
                    }}>
                {g.unit === "R$" ? `R$${g.b}` : `${g.b}${g.unit}`}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
}

// ── Donut chart (channel mix) ─────────────────────────────────────────────
function DonutChart() {
  const slices = [
    { lbl: "Meta Ads", v: 48, color: "var(--accent)" },
    { lbl: "Google Ads", v: 32, color: "#C084FC" },
    { lbl: "TikTok / outros", v: 12, color: "#7E3AC3" },
    { lbl: "Orgânico", v: 8, color: "#4D3266" },
  ];
  const [ref, shown] = useInView(0.4);
  const total = slices.reduce((s, x) => s + x.v, 0);
  const R = 60, r = 42, cx = 80, cy = 80, C = 2 * Math.PI * R;
  let offset = 0;
  return (
    <div className="res-chart" ref={ref} style={{ alignItems: "center", gap: 18 }}>
      <svg viewBox="0 0 160 160" style={{ width: 140, height: 140, flexShrink: 0 }}>
        <circle cx={cx} cy={cy} r={R} fill="none" stroke="var(--border)" strokeWidth={R - r} />
        {slices.map((s, i) => {
          const frac = s.v / total;
          const len = frac * C;
          const dasharray = `${shown ? len : 0} ${C}`;
          const rot = -90 + (offset / C) * 360;
          offset += len;
          return (
            <circle key={i} cx={cx} cy={cy} r={R} fill="none"
                    stroke={s.color} strokeWidth={R - r}
                    strokeDasharray={dasharray}
                    transform={`rotate(${rot} ${cx} ${cy})`}
                    style={{ transition: `stroke-dasharray 1.2s ${i * 0.15}s cubic-bezier(.4,0,.2,1)` }} />
          );
        })}
        <text x={cx} y={cy - 2} textAnchor="middle"
              style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, fill: "var(--text)" }}>
          {total}%
        </text>
        <text x={cx} y={cy + 14} textAnchor="middle"
              style={{ fontFamily: "var(--font-mono)", fontSize: 9, fill: "var(--text-muted)", letterSpacing: "0.06em" }}>
          ALOCAÇÃO
        </text>
      </svg>
      <div className="legend" style={{ flex: 1, minWidth: 0 }}>
        {slices.map((s, i) => (
          <div className="row" key={i}>
            <span className="sw" style={{ background: s.color }} />
            <span>{s.lbl}</span>
            <b>{s.v}%</b>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── feature mocks ──────────────────────────────────────────────────────────

function AdsMock() {
  const [ref, shown] = useInView(0.3);
  const ads = [
    { name: "Reels · Promo Verão", platform: "Meta", thumb: "t1", spend: "R$ 4.8k", ctr: "3.1%", roas: "6.4x", win: true },
    { name: "Search · Termo principal", platform: "Google", thumb: "t2", spend: "R$ 2.1k", ctr: "5.4%", roas: "4.8x" },
    { name: "Carrossel · Catálogo", platform: "Meta", thumb: "t3", spend: "R$ 1.6k", ctr: "1.9%", roas: "3.1x" },
  ];
  return (
    <div className="mock ads-mock" ref={ref}>
      <div className="mock-hd">
        <div className="dots"><i /><i /><i /></div>
        <span>painel · campanhas ativas</span>
      </div>
      <div className="tabs">
        <span className="tab active">Meta Ads · 12</span>
        <span className="tab">Google Ads · 7</span>
        <span className="tab">TikTok · 3</span>
      </div>
      <div className="ads-list">
        {ads.map((a, i) => (
          <div className="ad-row" key={i}
               style={{
                 opacity: shown ? 1 : 0,
                 transform: shown ? "translateX(0)" : "translateX(-12px)",
                 transition: `opacity .5s ${i * 0.12}s ease, transform .5s ${i * 0.12}s ease`
               }}>
            <div className={"ad-thumb " + a.thumb} />
            <div className="ad-meta">
              <span className="ad-name">{a.name}</span>
              <div className="ad-stats">
                <span>Spend <b>{a.spend}</b></span>
                <span>CTR <b>{a.ctr}</b></span>
              </div>
            </div>
            <div className={"ad-roas" + (a.win ? " win" : "")}>
              <span className="lbl">ROAS</span>
              {a.roas}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function FlowMock() {
  const [ref, shown] = useInView(0.3);
  return (
    <div className="mock flow-mock" ref={ref}>
      <svg viewBox="0 0 480 320">
        <defs>
          <marker id="arr" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <path d="M0 0L6 3L0 6Z" fill="var(--text-muted)" />
          </marker>
        </defs>

        {/* Edges */}
        <path d="M 90 160 L 175 160" className="flow-edge" markerEnd="url(#arr)" />
        <path d="M 275 160 Q 320 160 320 80 L 360 80" className="flow-edge" markerEnd="url(#arr)" />
        <path d="M 275 160 L 360 160" className="flow-edge" markerEnd="url(#arr)" />
        <path d="M 275 160 Q 320 160 320 240 L 360 240" className="flow-edge" markerEnd="url(#arr)" />

        {/* Trigger */}
        <rect x="20" y="135" width="70" height="50" rx="8" className="flow-node-rect" />
        <text x="55" y="158" textAnchor="middle" className="flow-txt">Lead</text>
        <text x="55" y="172" textAnchor="middle" className="flow-sub">ENTRA</text>

        {/* Segmenter */}
        <rect x="175" y="125" width="100" height="70" rx="8" className="flow-node-rect accent" />
        <text x="225" y="153" textAnchor="middle" className="flow-txt">Segmentação</text>
        <text x="225" y="170" textAnchor="middle" className="flow-sub">COMPORTAMENTO</text>
        <text x="225" y="184" textAnchor="middle" className="flow-sub">+ INTERESSES</text>

        {/* Channels */}
        <rect x="360" y="55" width="100" height="50" rx="8" className="flow-node-rect" />
        <text x="410" y="78" textAnchor="middle" className="flow-txt">E-mail</text>
        <text x="410" y="92" textAnchor="middle" className="flow-sub">3 GATILHOS</text>

        <rect x="360" y="135" width="100" height="50" rx="8" className="flow-node-rect" />
        <text x="410" y="158" textAnchor="middle" className="flow-txt">WhatsApp</text>
        <text x="410" y="172" textAnchor="middle" className="flow-sub">2 GATILHOS</text>

        <rect x="360" y="215" width="100" height="50" rx="8" className="flow-node-rect" />
        <text x="410" y="238" textAnchor="middle" className="flow-txt">CRM</text>
        <text x="410" y="252" textAnchor="middle" className="flow-sub">SCORE + TAG</text>

        {/* Animated traveling dot */}
        {shown && (
          <circle r="3.5" className="flow-dot">
            <animateMotion dur="3.6s" repeatCount="indefinite"
                           path="M 90 160 L 175 160 L 275 160 L 360 160" />
          </circle>
        )}
        {shown && (
          <circle r="3.5" className="flow-dot" opacity="0.7">
            <animateMotion dur="3.6s" begin="1.2s" repeatCount="indefinite"
                           path="M 90 160 L 175 160 L 275 160 Q 320 160 320 80 L 360 80" />
          </circle>
        )}
        {shown && (
          <circle r="3.5" className="flow-dot" opacity="0.7">
            <animateMotion dur="3.6s" begin="2.4s" repeatCount="indefinite"
                           path="M 90 160 L 175 160 L 275 160 Q 320 160 320 240 L 360 240" />
          </circle>
        )}
      </svg>
    </div>
  );
}

function CreativesMock() {
  const items = [
    { c: "c1", lbl: "Reels", play: true },
    { c: "c2", lbl: "Static" },
    { c: "c3", lbl: "Carrossel" },
    { c: "c4", lbl: "UGC", play: true },
    { c: "c5", lbl: "Stories" },
    { c: "c6", lbl: "Banner" },
  ];
  return (
    <div className="mock">
      <div className="mock-hd">
        <div className="dots"><i /><i /><i /></div>
        <span>biblioteca · esta semana</span>
      </div>
      <div className="crea-grid">
        {items.map((it, i) => (
          <div className={"crea " + it.c} key={i}>
            {it.play && (
              <div className="play-ico">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
              </div>
            )}
            <span className="crea-tag">{it.lbl}</span>
          </div>
        ))}
      </div>
      <div className="crea-foot">
        <span>12 peças produzidas / semana</span>
        <b>+ 3 testes A/B em rotação</b>
      </div>
    </div>
  );
}

function LPMock() {
  const [ref, shown] = useInView(0.3);
  return (
    <div className="mock lp-mock" ref={ref}>
      <div className="lp-bar">
        <i /><i /><i />
        <div className="lp-url"><span>https://</span>seu-cliente.com.br/oferta</div>
      </div>
      <div className="lp-body">
        <div className="lp-badge"
             style={{
               opacity: shown ? 1 : 0,
               transform: shown ? "translateY(0)" : "translateY(-8px)",
               transition: "opacity .5s .8s ease, transform .5s .8s ease"
             }}>
          TX. DE CONVERSÃO
          <b>3.8%</b>
        </div>
        <span className="lp-eyebrow">Oferta limitada</span>
        <div className="lp-head" />
        <div className="lp-head" />
        <div className="lp-sub" />
        <div className="lp-sub s2" />
        <div className="lp-sub s3" />
        <div className="lp-form">
          <div className="lp-input">seu@email.com</div>
          <div className="lp-cta">Quero saber mais</div>
        </div>
      </div>
    </div>
  );
}

function EcomMock() {
  const [ref, shown] = useInView(0.3);
  const products = [
    { name: "Kit Premium", thumb: "linear-gradient(135deg, #a855f7, #6366f1)", v: "R$ 18.2k", pct: 88 },
    { name: "Edição limitada", thumb: "linear-gradient(135deg, #f472b6, #a855f7)", v: "R$ 12.6k", pct: 62 },
    { name: "Combo Best-seller", thumb: "linear-gradient(135deg, #60a5fa, #34d399)", v: "R$ 9.4k", pct: 48 },
  ];
  const bars = [42, 58, 51, 76, 64, 82, 70, 95, 84];
  return (
    <div className="mock ec-mock" ref={ref}>
      <div className="mock-hd">
        <div className="dots"><i /><i /><i /></div>
        <span>loja · últimos 7 dias</span>
      </div>
      <div className="ec-row">
        <div className="ec-tile">
          <div className="ec-lbl">Receita</div>
          <div className="ec-val">R$ 87.4k <span className="delta">+24%</span></div>
        </div>
        <div className="ec-tile">
          <div className="ec-lbl">Pedidos</div>
          <div className="ec-val">412 <span className="delta">+18%</span></div>
        </div>
      </div>
      <div className="ec-block">
        <h5>Vendas / dia</h5>
        <div className="ec-spark">
          {bars.map((h, i) => (
            <i key={i}
               style={{
                 height: shown ? `${h}%` : "0%",
                 transition: `height .7s ${0.1 + i * 0.06}s cubic-bezier(.2,.8,.3,1)`
               }} />
          ))}
        </div>
      </div>
      <div className="ec-block">
        <h5>Top produtos</h5>
        <div className="ec-products">
          {products.map((p, i) => (
            <React.Fragment key={i}>
              <div className="ec-prod">
                <span className="ec-prod-name">
                  <span className="ec-prod-thumb" style={{ background: p.thumb }} />
                  {p.name}
                </span>
                <span className="ec-prod-num">{p.v}</span>
                <span className="ec-bar"><i style={{
                  width: shown ? `${p.pct}%` : "0%",
                  transition: `width .8s ${0.3 + i * 0.1}s cubic-bezier(.2,.8,.3,1)`
                }} /></span>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── feature row (alternating text + visual) ─────────────────────────────
function Feature({ id, num, eyebrow, title, desc, bullets, tags, fitYes, fitNo, alt, children }) {
  return (
    <div className={"feature" + (alt ? " alt" : "")} id={id ? `feat-${id}` : undefined}>
      <div className="feat-text" data-reveal>
        <div className="feat-num">{num} · {eyebrow}</div>
        <h3 className="feat-title">{title}</h3>
        <p className="feat-desc">{desc}</p>
        <ul className="feat-list">
          {bullets.map((b, i) => <li key={i}>{b}</li>)}
        </ul>
        {(fitYes || fitNo) && (
          <div className="feat-fit">
            {fitYes && (
              <div className="feat-fit-block">
                <div className="feat-fit-lbl yes">Faz sentido se você…</div>
                <p>{fitYes}</p>
              </div>
            )}
            {fitNo && (
              <div className="feat-fit-block">
                <div className="feat-fit-lbl no">Não é pra você se…</div>
                <p>{fitNo}</p>
              </div>
            )}
          </div>
        )}
        <div className="feat-tags">
          {tags.map((t) => <span key={t}>{t}</span>)}
        </div>
      </div>
      <div className="feat-visual" data-reveal style={{ "--rd": "120ms" }}>
        {children}
      </div>
    </div>
  );
}

// ── service card ───────────────────────────────────────────────────────────
function Service({ s, i }) {
  const onMove = useCallback((e) => {
    const r = e.currentTarget.getBoundingClientRect();
    e.currentTarget.style.setProperty("--mx", `${e.clientX - r.left}px`);
    e.currentTarget.style.setProperty("--my", `${e.clientY - r.top}px`);
  }, []);
  const IcoFn = Ico[s.ico];
  return (
    <article className="svc" data-reveal style={{ "--rd": `${i * 70}ms` }} onMouseMove={onMove}>
      <div className="svc-top">
        <span className="svc-num">{String(i + 1).padStart(2, "0")} / 05</span>
        <div className="svc-ico">{IcoFn(20)}</div>
      </div>
      <h3 className="svc-name">{s.name}</h3>
      <p className="svc-desc">{s.desc}</p>
      <div className="svc-tags">{s.tags.map((t) => <span key={t}>{t}</span>)}</div>
      <div className="svc-arrow">{Ico.corner(18)}</div>
    </article>
  );
}

// ── nav ───────────────────────────────────────────────────────────────────
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <div className="nav-left">
          <a className="logo" href="#top">
            <span className="logo-mark" aria-hidden="true" />
            <b>LogicLabz</b>
          </a>
          <div className="nav-links">
            <a href="#problemas">Problemas</a>
            <a href="#servicos">Soluções</a>
            <a href="#resultados">Cases</a>
          </div>
        </div>
        <a href="#contato" className="nav-cta">Falar com o time</a>
      </div>
    </nav>
  );
}

// ── hero dashboard ────────────────────────────────────────────────────────
function HeroDashboard() {
  const [ref, shown] = useInView(0.2);
  const kpis = [
    { lbl: "Receita", val: "R$ 412k", delta: "+38%", pos: true },
    { lbl: "ROAS", val: "5.2x", delta: "+1.4x", pos: true },
    { lbl: "CPA", val: "R$ 36", delta: "−57%", pos: true },
  ];
  return (
    <div className="dash" ref={ref} data-reveal style={{ "--rd": "320ms" }}>
      <div className="dash-hd">
        <div className="dots"><i /><i /><i /></div>
        <span>logiclabz · console</span>
        <span className="ex-tag">EXEMPLO</span>
      </div>
      <div className="dash-kpis">
        {kpis.map((k, i) => (
          <div className="kpi" key={k.lbl}
               style={{
                 opacity: shown ? 1 : 0,
                 transform: shown ? "translateY(0)" : "translateY(8px)",
                 transition: `opacity .5s ${0.2 + i * 0.1}s ease, transform .5s ${0.2 + i * 0.1}s ease`
               }}>
            <span className="kpi-lbl">{k.lbl}</span>
            <span className="kpi-val">{k.val}</span>
            <span className={"kpi-delta" + (k.pos ? "" : " neg")}>▲ {k.delta}</span>
          </div>
        ))}
      </div>
      <HeroChart />
      <div className="dash-bars">
        {[42, 68, 51, 88, 73, 95, 62, 80, 70, 92, 84, 100].map((h, i) => (
          <div className="b" key={i}
               style={{ height: `${h}%`, animationDelay: `${0.6 + i * 0.05}s` }} />
        ))}
      </div>
    </div>
  );
}

// ── CTA Final (selector + dynamic links) ──────────────────────────────────
const PICK_OPTIONS = [
  { id: "trafego", label: "Tráfego Pago", ico: "ads" },
  { id: "auto", label: "Automações de Marketing", ico: "flow" },
  { id: "crea", label: "Produção de Criativos", ico: "spark" },
  { id: "lp", label: "Páginas de Vendas / LPs", ico: "page" },
  { id: "ecom", label: "Gestão de E-commerce", ico: "cart" },
  { id: "diag", label: "Não sei — quero um diagnóstico", ico: "question" },
];

function buildMessage(selectedIds, note) {
  const items = selectedIds
    .map((id) => PICK_OPTIONS.find((o) => o.id === id)?.label)
    .filter(Boolean);
  let msg = "Oi, LogicLabz! Vim pelo site";
  if (items.length === 1) {
    msg += ` e gostaria de conversar sobre ${items[0]}.`;
  } else if (items.length > 1) {
    msg += " e gostaria de conversar sobre:\n";
    msg += items.map((l) => `• ${l}`).join("\n");
  } else {
    msg += " e gostaria de conversar sobre as soluções da LogicLabz.";
  }
  if (note.trim()) {
    msg += `\n\nSobre meu negócio:\n${note.trim()}`;
  }
  return msg;
}

function CTAFinal() {
  const [selected, setSelected] = useState([]);
  const [note, setNote] = useState("");

  const toggle = (id) =>
    setSelected((prev) =>
      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
    );

  const message = buildMessage(selected, note);
  const waLink = `https://wa.me/5511953649711?text=${encodeURIComponent(message)}`;
  const items = selected
    .map((id) => PICK_OPTIONS.find((o) => o.id === id)?.label)
    .filter(Boolean);
  const subject = items.length
    ? `Contato pelo site — ${items.join(", ")}`
    : "Contato pelo site — LogicLabz";
  const mailLink = `mailto:jvmgux@logiclabz.com.br?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`;

  return (
    <section className="cta-final" id="contato">
      <div className="wrap">
        <div className="cta-card" data-reveal>
          <span className="cta-eyebrow">Vamos conversar</span>
          <h2 className="cta-title">
            Pedir diagnóstico em 24h úteis.
          </h2>
          <p className="cta-sub">
            Sem pitch genérico, sem proposta padronizada. A gente devolve um plano de ação com o que dá pra fazer pelo seu negócio. Confidencial.
          </p>

          {/* PRIMARY: WhatsApp grande */}
          <a className="ch primary big" href={waLink} target="_blank" rel="noopener noreferrer">
            <div className="ch-ico">{Ico.wa(26)}</div>
            <div className="ch-body">
              <span className="ch-lbl">Falar agora pelo WhatsApp</span>
              <span className="ch-val">+55 11 95364-9711</span>
              <span className="ch-sub">Mais rápido — resposta em até 4h úteis.</span>
            </div>
            <div className="ch-go">{Ico.arrow(18)}</div>
          </a>

          {/* DIVIDER */}
          <div className="cta-divider">ou monte um pedido detalhado</div>

          <p className="cta-detail-intro">
            Se preferir e-mail ou quiser deixar contexto antes da call, marque as frentes que fazem sentido. A mensagem do WhatsApp também já vai com tudo amarrado.
          </p>

          <div className="picker" role="group" aria-label="Selecione as soluções">
            {PICK_OPTIONS.map((o) => {
              const IcoFn = Ico[o.ico];
              const on = selected.includes(o.id);
              return (
                <button
                  type="button"
                  key={o.id}
                  className={"pick" + (on ? " on" : "")}
                  onClick={() => toggle(o.id)}
                  aria-pressed={on}
                >
                  <span className="pick-ico">{IcoFn(18)}</span>
                  <span className="pick-lbl">{o.label}</span>
                  <span className="pick-check">{on && Ico.check(12)}</span>
                </button>
              );
            })}
          </div>

          <div className="pick-count">
            {selected.length > 0 ? (
              <>
                <b>{selected.length}</b> {selected.length === 1 ? "frente selecionada" : "frentes selecionadas"}
                <button type="button" className="clear" onClick={() => setSelected([])}>
                  limpar
                </button>
              </>
            ) : (
              <span style={{ color: "var(--text-faint)" }}>Opcional — selecione pra refinar o pedido.</span>
            )}
          </div>

          <textarea
            className="pick-note"
            placeholder="(Opcional) Conta um pouco do seu negócio: tipo de produto/serviço, faturamento médio, canais que já usa, principal desafio…"
            value={note}
            onChange={(e) => setNote(e.target.value)}
          />

          <a className="ch" href={mailLink}>
            <div className="ch-ico">{Ico.mail(22)}</div>
            <div className="ch-body">
              <span className="ch-lbl">Enviar por e-mail</span>
              <span className="ch-val">jvmgux@logiclabz.com.br</span>
            </div>
            <div className="ch-go">{Ico.arrow(16)}</div>
          </a>

          <div className="ig-row">
            <span>Ou conheça a operação:</span>
            <a href="https://instagram.com/logiclabzz" target="_blank" rel="noopener noreferrer">
              {Ico.ig(15)} @logiclabzz <span style={{ color: "var(--text-faint)", fontWeight: 400, marginLeft: 4, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.04em" }}>(com 2 Z)</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── app ───────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  useEffect(() => {
    const hex = t.accent.replace("#", "");
    const r = parseInt(hex.slice(0, 2), 16);
    const g = parseInt(hex.slice(2, 4), 16);
    const b = parseInt(hex.slice(4, 6), 16);
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--accent-glow", `${r}, ${g}, ${b}`);
    document.documentElement.style.setProperty("--accent-soft", `rgba(${r},${g},${b},0.12)`);
  }, [t.accent]);

  useEffect(() => {
    const pairs = {
      grotesk:  { d: '"Space Grotesk", ui-sans-serif, system-ui, sans-serif', b: '"Inter", ui-sans-serif, system-ui, sans-serif' },
      manrope:  { d: '"Manrope", ui-sans-serif, system-ui, sans-serif',       b: '"Inter", ui-sans-serif, system-ui, sans-serif' },
      monoMix:  { d: '"DM Sans", ui-sans-serif, system-ui, sans-serif',       b: '"Inter", ui-sans-serif, system-ui, sans-serif' },
    };
    const p = pairs[t.fontPair] || pairs.grotesk;
    document.documentElement.style.setProperty("--font-display", p.d);
    document.documentElement.style.setProperty("--font-body", p.b);
  }, [t.fontPair]);

  return (
    <>
      <a id="top" />
      <Nav />

      {/* HERO */}
      <header className="hero wrap">
        <div className="hero-copy">
          <div data-reveal>
            <span className="eyebrow"><span className="dot" /> Agência digital · Resolvedora de problemas</span>
          </div>
          <h1 className="h1" data-reveal style={{ "--rd": "80ms" }}>
            <span className="ln">Você só foca no <span className="accent-word">produto</span>.</span>
            <span className="ln ln-2">A <b>LogicLabz</b> traz os clientes.</span>
          </h1>
          <p className="lede" data-reveal style={{ "--rd": "160ms" }}>
            Diagnóstico gratuito em <strong>até 24h úteis</strong>. Primeiro mês com revisão semanal. Operação digital ponta-a-ponta para <strong>e-commerces, infoprodutos e comércios locais</strong> que cansaram de promessa.
          </p>
          <div className="cta-row" data-reveal style={{ "--rd": "240ms" }}>
            <a className="btn btn-primary" href="#contato">Pedir diagnóstico em 24h {Ico.arrow()}</a>
            <a className="btn btn-ghost" href="#servicos">Ver como operamos</a>
          </div>
        </div>
        <HeroDashboard />
      </header>

      {/* OPERATIONAL SCOPE */}
      <section className="stats">
        <div className="wrap stats-grid">
          {STATS.map((s, i) => (
            <div className="stat" key={i} data-reveal style={{ "--rd": `${i * 80}ms` }}>
              <span className="stat-lbl" style={{ marginBottom: 8 }}>{s.tag}</span>
              <span style={{
                fontFamily: "var(--font-display)",
                fontWeight: 500,
                fontSize: "clamp(22px, 2.4vw, 30px)",
                lineHeight: 1.15,
                letterSpacing: "-0.02em",
                color: "var(--text)",
              }}>
                {s.val}
                {s.revisar && <span className="revisar-tag">REVISAR</span>}
              </span>
            </div>
          ))}
        </div>
      </section>

      {/* PROBLEMAS */}
      <section className="section light" id="problemas">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-tag" data-reveal>Problemas que resolvemos</div>
              <h2 className="sec-title" data-reveal style={{ "--rd": "80ms" }}>
                Sabe o que está travando seu crescimento?<br/>A gente também.
              </h2>
            </div>
            <p className="sec-sub" data-reveal style={{ "--rd": "160ms" }}>
              Cada problema abaixo tem um plano de ação dentro da operação. Sem teoria, sem terceirização.
            </p>
          </div>
          <div className="problems">
            {PROBLEMS.map((p, i) => {
              const IcoFn = Ico[p.ico];
              return (
                <div className="prob" key={i} data-reveal style={{ "--rd": `${i * 80}ms` }}>
                  <div className="prob-ico">{IcoFn(22)}</div>
                  <div className="prob-body">
                    <h3 className="prob-q">{p.q}</h3>
                    <p className="prob-a" dangerouslySetInnerHTML={{ __html: p.a }} />
                    <a className="prob-cta" href={`#feat-${p.to}`}>{p.cta}</a>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* SOLUÇÕES (features) */}
      <section className="section" id="servicos">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-tag" data-reveal>Soluções</div>
              <h2 className="sec-title" data-reveal style={{ "--rd": "80ms" }}>
                Cinco frentes.<br/>Uma operação só.
              </h2>
            </div>
            <p className="sec-sub" data-reveal style={{ "--rd": "160ms" }}>
              Você contrata um time, não cinco fornecedores. Cada serviço com entregável claro — e o que você vê abaixo é como cada um chega na prática.
            </p>
          </div>
          <div className="features">
            <Feature
              id="trafego"
              num="01"
              eyebrow="Tráfego Pago"
              title="Mídia que paga a conta, não só o relatório."
              desc="Campanhas em Meta Ads, Google Ads e TikTok rodando lado a lado, otimizadas por ROAS real — não por curtida. Cada conjunto recebe verba pela performance, e o que não vende, morre rápido."
              bullets={[
                "Estrutura de funil com prospecção, remarketing e retenção",
                "Verba alocada por canal com base em CAC e LTV",
                "Otimização semanal de criativo, copy e segmentação",
              ]}
              tags={["Meta Ads", "Google Ads", "TikTok Ads", "CRO"]}
            >
              <AdsMock />
            </Feature>

            <Feature
              id="auto"
              alt
              num="02"
              eyebrow="Automações de Marketing"
              title="Funis que vendem enquanto você dorme."
              desc="Conectamos seu CRM, e-mail, WhatsApp e checkout numa malha única. Quando o lead entra, ele segue o caminho certo sem ninguém da sua equipe ter que tocar em nada."
              bullets={[
                "Fluxos de boas-vindas, abandono de carrinho e reativação",
                "Segmentação dinâmica por comportamento e tag",
                "Integração com RD Station, HubSpot, Active e n8n",
              ]}
              tags={["E-mail", "WhatsApp", "CRM", "Integrações"]}
            >
              <FlowMock />
            </Feature>

            <Feature
              id="crea"
              num="03"
              eyebrow="Produção de Criativos"
              title="Volume e velocidade pra escalar sem cansar."
              desc="Time interno produzindo artes, vídeos curtos e UGC em ritmo de operação. Em vez de depender de um anúncio mágico, você tem fila de testes rodando o mês inteiro."
              bullets={[
                "Peças novas por semana, em todos os formatos",
                "Roteiro, edição e direção de UGC com criadores parceiros",
                "Identidade visual coerente com a marca e a campanha",
              ]}
              tags={["Static", "Reels", "UGC", "Vídeo", "Stories"]}
            >
              <CreativesMock />
            </Feature>

            <Feature
              id="lp"
              alt
              num="04"
              eyebrow="Páginas de Vendas & Landing Pages"
              title="Páginas pensadas pra converter, não decorar."
              desc="Da copy à arquitetura de informação. Cada elemento existe pra mover o lead pro próximo passo — testadas em A/B com base no comportamento real, não em achismo."
              bullets={[
                "Copy persuasiva ancorada na pesquisa de público",
                "Design responsivo otimizado pra velocidade",
                "Heatmap, gravação de sessão e testes A/B contínuos",
              ]}
              tags={["Copy", "Design", "CRO", "A/B Test"]}
            >
              <LPMock />
            </Feature>

            <Feature
              id="ecom"
              num="05"
              eyebrow="Gestão Completa de E-commerce"
              title="Operação ponta-a-ponta, do checkout ao retargeting."
              desc="A gente cuida da loja inteira: cadastro de produto, vitrine, performance, e-mail transacional, recuperação de carrinho, anúncio. Você acompanha o resultado no dashboard único — sem precisar coordenar cinco fornecedores."
              bullets={[
                "Setup completo em Shopify, Woo ou Nuvemshop",
                "Catálogo dinâmico conectado ao Meta e Google Shopping",
                "Recuperação de carrinho + pós-venda + reativação",
              ]}
              tags={["Shopify", "WooCommerce", "Performance", "CRM"]}
            >
              <EcomMock />
            </Feature>
          </div>
        </div>
      </section>

      {/* CASES */}
      <section className="section" id="resultados">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-tag" data-reveal>Cases anônimos</div>
              <h2 className="sec-title" data-reveal style={{ "--rd": "80ms" }}>
                Operações reais, números defensáveis.
              </h2>
            </div>
            <p className="sec-sub" data-reveal style={{ "--rd": "160ms" }}>
              Cases anônimos pra preservar confidencialidade. Período, intervenção e resultado defensáveis em call.
            </p>
          </div>
          <div className="results">
            <div className="res-card case-card" data-reveal>
              <div className="res-hd">
                <h3 className="res-title">Case 01</h3>
                <span className="res-tag">6 meses</span>
              </div>
              <div className="case-meta">
                <span>E-commerce</span>
                <span>Moda · Sudeste</span>
              </div>
              <div className="res-big">+2.1× <span className="unit">receita</span></div>
              <div className="case-row">
                <span className="case-lbl">Antes</span>
                <span className="case-val">Faturamento mensal estagnado, ROAS abaixo de 2× no Meta.</span>
                <span className="case-lbl">Fizemos</span>
                <span className="case-val">Refatoração do funil de aquisição, retake completo do criativo com UGC, recuperação de carrinho via WhatsApp.</span>
                <span className="case-lbl">Depois</span>
                <span className="case-val up">ROAS 3.6× sustentado</span>
              </div>
            </div>

            <div className="res-card case-card" data-reveal style={{ "--rd": "120ms" }}>
              <div className="res-hd">
                <h3 className="res-title">Case 02</h3>
                <span className="res-tag">120 dias</span>
              </div>
              <div className="case-meta">
                <span>Infoproduto</span>
                <span>Educação · Perpétuo</span>
              </div>
              <div className="res-big">−42% <span className="unit">CPA</span></div>
              <div className="case-row">
                <span className="case-lbl">Antes</span>
                <span className="case-val">CPA inviável no lançamento, criativo único cansando rápido.</span>
                <span className="case-lbl">Fizemos</span>
                <span className="case-val">Pipeline de criativo semanal, automação de captura no WhatsApp, copy de página reescrita do zero.</span>
                <span className="case-lbl">Depois</span>
                <span className="case-val up">2× de escala na verba diária</span>
              </div>
            </div>

            <div className="res-card" data-reveal style={{ "--rd": "240ms" }}>
              <div className="res-hd">
                <h3 className="res-title">Mix de canais</h3>
                <span className="res-tag">Média da casa</span>
              </div>
              <p className="res-cap" style={{ marginTop: -4 }}>
                Como diluímos risco entre plataformas. Distribuição varia por operação.
              </p>
              <DonutChart />
            </div>
          </div>
        </div>
      </section>

      {/* PARA QUEM */}
      <section className="section light" id="paraquem">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-tag" data-reveal>Para quem fazemos</div>
              <h2 className="sec-title" data-reveal style={{ "--rd": "80ms" }}>
                Negócios diferentes.<br/>Mesma exigência de resultado.
              </h2>
            </div>
            <p className="sec-sub" data-reveal style={{ "--rd": "160ms" }}>
              Atendemos quem quer crescer — do e-commerce que escala a sete dígitos ao profissional autônomo que quer captar cliente todo dia.
            </p>
          </div>
          <div className="audience">
            {AUDIENCE.map((a, i) => {
              const IcoFn = Ico[a.ico];
              return (
                <div className="aud" key={a.title} data-reveal style={{ "--rd": `${i * 100}ms` }}>
                  <div className="aud-shape" />
                  <div className="aud-ico">{IcoFn(22)}</div>
                  <h3 className="aud-title">{a.title}</h3>
                  <p className="aud-desc">{a.desc}</p>
                  <span className="aud-tag">{a.tag}</span>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* WHY */}
      <section className="section" id="porque">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-tag" data-reveal>Por que a LogicLabz</div>
              <h2 className="sec-title" data-reveal style={{ "--rd": "80ms" }}>
                A diferença está em como a gente opera.
              </h2>
            </div>
            <p className="sec-sub" data-reveal style={{ "--rd": "160ms" }}>
              Três coisas que a gente faz diferente — e que mudam o resultado já no primeiro mês.
            </p>
          </div>
          <div className="why">
            {WHY.map((w, i) => (
              <div className="why-cell" key={w.n} data-reveal style={{ "--rd": `${i * 100}ms` }}>
                <span className="why-num">{w.n}</span>
                <h3 className="why-title">{w.title}</h3>
                <p className="why-desc">{w.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DEPOIMENTOS */}
      <section className="section" id="depoimentos">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-tag" data-reveal>Depoimentos</div>
              <h2 className="sec-title" data-reveal style={{ "--rd": "80ms" }}>
                Quem confiou a operação pra gente.
              </h2>
            </div>
            <p className="sec-sub" data-reveal style={{ "--rd": "160ms" }}>
              Quem confiou a operação e ficou. Cada caso com o número que importa.
            </p>
          </div>
          <div className="testimonials">
            {TESTIMONIALS.map((t, i) => (
              <article className="tm" key={i} data-reveal style={{ "--rd": `${i * 100}ms` }}>
                {t.revisar && <span className="tm-revisar">REVISAR</span>}
                <span className="tm-result">{t.result}</span>
                <p className="tm-quote">{t.quote}</p>
                <div className="tm-author">
                  <div className={"tm-avatar " + t.avatar}>{t.initials}</div>
                  <div className="tm-author-meta">
                    <span className="tm-name">{t.name}</span>
                    <span className="tm-role">{t.role}</span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CTA FINAL com seletor */}
      <CTAFinal />

      <footer>
        <div className="wrap foot-inner">
          <a className="logo" href="#top">
            <span className="logo-mark" aria-hidden="true" />
            <b>LogicLabz</b>
          </a>
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <a href="https://instagram.com/logiclabzz" target="_blank" rel="noopener noreferrer"
               style={{
                 display: "inline-flex", alignItems: "center", gap: 8,
                 color: "var(--text-muted)", textDecoration: "none",
                 fontSize: 13, fontFamily: "var(--font-mono)",
                 letterSpacing: "0.04em",
                 transition: "color .2s ease",
               }}
               onMouseEnter={(e) => (e.currentTarget.style.color = "var(--accent)")}
               onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-muted)")}>
              {Ico.ig(15)} @logiclabzz <span style={{ color: "var(--text-faint)", fontSize: 10, marginLeft: 2 }}>(com 2 Z)</span>
            </a>
            <span className="foot-meta">© 2026 LogicLabz · Todos os direitos reservados</span>
          </div>
        </div>
      </footer>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Acento">
          <TweakColor
            label="Cor"
            value={t.accent}
            options={["#A855F7", "#C084FC", "#7C3AED", "#4D6BFE", "#39FF14"]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection label="Tipografia">
          <TweakRadio
            label="Pares"
            value={t.fontPair}
            options={[
              { value: "grotesk", label: "Grotesk" },
              { value: "manrope", label: "Manrope" },
              { value: "monoMix", label: "DM Sans" },
            ]}
            onChange={(v) => setTweak("fontPair", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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