// ConectaAI — components
// All section components for the landing. Export to window at the bottom.

// ── HeroGraph ─────────────────────────────────────────────────────────────
// Force-directed network animation (Obsidian-like graph view).
const HeroGraph = ({ accent = "oklch(0.82 0.18 125)", inkColor = "rgba(255,255,255,.92)", mutedColor = "rgba(255,255,255,.45)", bgDot = "rgba(255,255,255,.06)" }) => {
  const canvasRef = React.useRef(null);
  const wrapRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    const wrap = wrapRef.current;
    if (!canvas || !wrap) return;
    const ctx = canvas.getContext('2d');
    let dpr = Math.min(window.devicePixelRatio || 1, 2);
    let W = 0,H = 0;

    // Layout circular puro com 3 anéis e ~70 nós.
    // Hub fixo + core (8) + ring1 (16) + ring2 (24) + ring3 (24) = 73
    const NODE_DEFS = [];
    NODE_DEFS.push({ id: 'hub', label: 'ConectaAI', kind: 'hub', r: 16 });

    const CORE = [
    { id: 'crm', label: 'CRM' },
    { id: 'erp', label: 'ERP' },
    { id: 'wpp', label: 'WhatsApp' },
    { id: 'help', label: 'Helpdesk' },
    { id: 'db', label: 'Database' },
    { id: 'mail', label: 'E-mail' },
    { id: 'voice', label: 'Voz' },
    { id: 'pay', label: 'Pagamentos' }];

    CORE.forEach((c) => NODE_DEFS.push({ ...c, kind: 'core', r: 7.5 }));

    const RING1 = [
    'HubSpot', 'Salesforce', 'Pipedrive', 'RD Station',
    'SAP', 'TOTVS', 'Omie', 'Bling',
    'Zendesk', 'Freshdesk', 'Intercom', 'Movidesk',
    'Slack', 'Teams', 'Discord', 'Telegram'];

    const RING2 = [
    'Postgres', 'MySQL', 'MongoDB', 'Redis', 'Snowflake', 'BigQuery',
    'Sheets', 'Airtable', 'Notion', 'Confluence', 'Jira', 'Linear',
    'Stripe', 'Pagar.me', 'Mercado Pago', 'Asaas',
    'Twilio', 'Vonage', 'Calendly', 'Cal.com',
    'Drive', 'Dropbox', 'S3', 'GCS'];

    const RING3 = [
    'OpenAI', 'Anthropic', 'Mistral', 'Llama', 'Cohere', 'Groq',
    'GitHub', 'GitLab', 'Bitbucket', 'Vercel',
    'Webhooks', 'REST', 'GraphQL', 'SOAP', 'SFTP', 'FTPS',
    'Kafka', 'RabbitMQ', 'SNS', 'SQS',
    'Auth0', 'Okta', 'SSO', 'LDAP'];


    RING1.forEach((label, i) => NODE_DEFS.push({ id: 'r1_' + i, label, kind: 'leaf', r: 5, ring: 1 }));
    RING2.forEach((label, i) => NODE_DEFS.push({ id: 'r2_' + i, label, kind: 'leaf2', r: 4, ring: 2 }));
    RING3.forEach((label, i) => NODE_DEFS.push({ id: 'r3_' + i, label, kind: 'leaf3', r: 3.5, ring: 3 }));

    // Edges: hub→core, core→ring1 (cada core puxa 2 do ring1), ring1→ring2, ring2→ring3, + cross
    const EDGES = [];
    CORE.forEach((c) => EDGES.push(['hub', c.id]));
    // core → ring1 (cada core conecta com 2 do ring1, em ordem)
    for (let i = 0; i < RING1.length; i++) {
      const coreIdx = Math.floor(i / 2) % CORE.length;
      EDGES.push([CORE[coreIdx].id, 'r1_' + i]);
    }
    // ring1 → ring2 (cada ring1 puxa ~1.5 ring2)
    for (let i = 0; i < RING2.length; i++) {
      const r1Idx = Math.floor(i / 1.5) % RING1.length;
      EDGES.push(['r1_' + r1Idx, 'r2_' + i]);
    }
    // ring2 → ring3
    for (let i = 0; i < RING3.length; i++) {
      const r2Idx = i % RING2.length;
      EDGES.push(['r2_' + r2Idx, 'r3_' + i]);
    }
    // Cross-conexões pra textura
    for (let i = 0; i < 14; i++) {
      const a = NODE_DEFS[1 + Math.floor(Math.random() * (NODE_DEFS.length - 1))];
      const b = NODE_DEFS[1 + Math.floor(Math.random() * (NODE_DEFS.length - 1))];
      if (a.id !== b.id) EDGES.push([a.id, b.id]);
    }

    const nodes = NODE_DEFS.map((d, i) => ({
      ...d,
      x: 0, y: 0, vx: 0, vy: 0,
      fixed: d.id === 'hub',
      // ângulo orbital pra animação suave
      baseAngle: 0,
      orbitSpeed: 0
    }));
    const byId = Object.fromEntries(nodes.map((n) => [n.id, n]));
    const edges = EDGES.
    filter(([a, b]) => byId[a] && byId[b]).
    map(([a, b]) => ({ a: byId[a], b: byId[b], pulses: [] }));

    function spawnPulse() {
      // Prefere edges saindo do hub
      const hubEdges = edges.filter((e) => e.a.kind === 'hub' || e.b.kind === 'hub');
      const pool = Math.random() < 0.55 ? hubEdges : edges;
      const edge = pool[Math.floor(Math.random() * pool.length)];
      if (!edge) return;
      const dir = Math.random() < 0.5 ? 1 : -1;
      edge.pulses.push({ t: 0, dir, speed: 0.006 + Math.random() * 0.012 });
    }

    function getRadii() {
      const m = Math.min(W, H);
      return {
        rCore: m * 0.18,
        r1: m * 0.34,
        r2: m * 0.44,
        r3: m * 0.52
      };
    }

    function layout() {
      const cx = W / 2,cy = H / 2;
      byId.hub.x = cx;byId.hub.y = cy;
      const { rCore, r1, r2, r3 } = getRadii();
      const core = nodes.filter((n) => n.kind === 'core');
      const l1 = nodes.filter((n) => n.ring === 1);
      const l2 = nodes.filter((n) => n.ring === 2);
      const l3 = nodes.filter((n) => n.ring === 3);
      core.forEach((n, i) => {
        const a = i / core.length * Math.PI * 2 - Math.PI / 2;
        n.baseAngle = a;n.orbitSpeed = 0.00006;
        n.x = cx + Math.cos(a) * rCore;n.y = cy + Math.sin(a) * rCore;
      });
      l1.forEach((n, i) => {
        const a = i / l1.length * Math.PI * 2;
        n.baseAngle = a;n.orbitSpeed = -0.00004;
        n.x = cx + Math.cos(a) * r1;n.y = cy + Math.sin(a) * r1;
      });
      l2.forEach((n, i) => {
        const a = i / l2.length * Math.PI * 2 + 0.1;
        n.baseAngle = a;n.orbitSpeed = 0.00003;
        n.x = cx + Math.cos(a) * r2;n.y = cy + Math.sin(a) * r2;
      });
      l3.forEach((n, i) => {
        const a = i / l3.length * Math.PI * 2 - 0.15;
        n.baseAngle = a;n.orbitSpeed = -0.00002;
        n.x = cx + Math.cos(a) * r3;n.y = cy + Math.sin(a) * r3;
      });
    }
    function resize() {
      const rect = wrap.getBoundingClientRect();
      W = Math.max(320, Math.min(2000, rect.width || 800));
      H = Math.max(320, Math.min(900, rect.height || 600));
      canvas.width = W * dpr;canvas.height = H * dpr;
      canvas.style.width = W + 'px';canvas.style.height = H + 'px';
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      layout();
    }
    resize();
    const ro = new ResizeObserver(resize);ro.observe(wrap);

    const mouse = { x: -9999, y: -9999, active: false };
    const onMove = (e) => {
      const r = canvas.getBoundingClientRect();
      mouse.x = e.clientX - r.left;mouse.y = e.clientY - r.top;mouse.active = true;
    };
    const onLeave = () => {mouse.active = false;mouse.x = -9999;mouse.y = -9999;};
    canvas.addEventListener('mousemove', onMove);
    canvas.addEventListener('mouseleave', onLeave);

    function step(ts) {
      const cx = W / 2,cy = H / 2;
      const { rCore, r1, r2, r3 } = getRadii();
      // Posição base orbital + jitter suave
      for (const n of nodes) {
        if (n.fixed) {n.x = cx;n.y = cy;continue;}
        const radius = n.kind === 'core' ? rCore : n.ring === 1 ? r1 : n.ring === 2 ? r2 : r3;
        const a = n.baseAngle + ts * n.orbitSpeed;
        const wobble = Math.sin(ts * 0.0008 + n.baseAngle * 3) * 4;
        const tx = cx + Math.cos(a) * (radius + wobble);
        const ty = cy + Math.sin(a) * (radius + wobble);
        // Mouse repulsão
        let mx = 0,my = 0;
        if (mouse.active) {
          const dx = n.x - mouse.x,dy = n.y - mouse.y;
          const d2 = dx * dx + dy * dy + 0.01;
          if (d2 < 14000) {
            const d = Math.sqrt(d2);
            const f = 30 / Math.max(1, d / 8);
            mx = dx / d * f;my = dy / d * f;
          }
        }
        // Lerp suave pra base + offset de mouse
        n.x += (tx + mx - n.x) * 0.06;
        n.y += (ty + my - n.y) * 0.06;
      }
      // Avança pulsos
      for (const e of edges) {
        e.pulses = e.pulses.filter((p) => {p.t += p.speed;return p.t <= 1;});
      }
    }

    function draw(ts) {
      ctx.clearRect(0, 0, W, H);
      // Fundo: anéis-guia muito sutis
      const cx = W / 2,cy = H / 2;
      const { rCore, r1, r2, r3 } = getRadii();
      ctx.strokeStyle = 'rgba(255,255,255,.04)';
      ctx.lineWidth = 1;
      [rCore, r1, r2, r3].forEach((r) => {
        ctx.beginPath();ctx.arc(cx, cy, r, 0, Math.PI * 2);ctx.stroke();
      });
      // Pontos no fundo
      const gridSize = 32;
      ctx.fillStyle = bgDot;
      for (let x = W / 2 % gridSize; x < W; x += gridSize) {
        for (let y = H / 2 % gridSize; y < H; y += gridSize) {
          ctx.fillRect(x, y, 1, 1);
        }
      }

      // Edges
      for (const e of edges) {
        const dx = e.b.x - e.a.x,dy = e.b.y - e.a.y;
        const d = Math.sqrt(dx * dx + dy * dy);
        if (d < 0.1) continue;
        const ux = dx / d,uy = dy / d;
        const x1 = e.a.x + ux * e.a.r,y1 = e.a.y + uy * e.a.r;
        const x2 = e.b.x - ux * e.b.r,y2 = e.b.y - uy * e.b.r;
        const isHubEdge = e.a.kind === 'hub' || e.b.kind === 'hub';
        const isCoreEdge = e.a.kind === 'core' || e.b.kind === 'core';
        ctx.strokeStyle = isHubEdge ? 'rgba(255,255,255,.22)' :
        isCoreEdge ? 'rgba(255,255,255,.11)' :
        'rgba(255,255,255,.06)';
        ctx.lineWidth = isHubEdge ? 1.1 : 0.7;
        ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke();
        for (const p of e.pulses) {
          const t = p.dir === 1 ? p.t : 1 - p.t;
          const px = x1 + (x2 - x1) * t,py = y1 + (y2 - y1) * t;
          const t0 = Math.max(0, t - 0.14);
          const tx = x1 + (x2 - x1) * t0,ty = y1 + (y2 - y1) * t0;
          const grad = ctx.createLinearGradient(tx, ty, px, py);
          grad.addColorStop(0, 'rgba(255,255,255,0)');
          grad.addColorStop(1, accent);
          ctx.strokeStyle = grad;ctx.lineWidth = 1.6;
          ctx.beginPath();ctx.moveTo(tx, ty);ctx.lineTo(px, py);ctx.stroke();
          ctx.fillStyle = accent;
          ctx.beginPath();ctx.arc(px, py, 2.2, 0, Math.PI * 2);ctx.fill();
        }
      }

      // Nodes
      for (const n of nodes) {
        if (n.kind === 'hub') {
          const pulse = (Math.sin(ts * 0.0018) + 1) / 2;
          const haloR = n.r + 14 + pulse * 10;
          const grad = ctx.createRadialGradient(n.x, n.y, n.r, n.x, n.y, haloR + 22);
          grad.addColorStop(0, 'rgba(255,255,255,0)');
          grad.addColorStop(0.45, 'rgba(217, 184, 87, 0.28)');
          grad.addColorStop(1, 'rgba(255,255,255,0)');
          ctx.fillStyle = grad;
          ctx.beginPath();ctx.arc(n.x, n.y, haloR + 22, 0, Math.PI * 2);ctx.fill();
        }
        ctx.beginPath();ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
        if (n.kind === 'hub') {
          ctx.fillStyle = accent;ctx.fill();
          ctx.lineWidth = 1.5;ctx.strokeStyle = 'rgba(255,255,255,.9)';ctx.stroke();
        } else if (n.kind === 'core') {
          ctx.fillStyle = 'rgba(255,255,255,.95)';ctx.fill();
        } else if (n.ring === 1) {
          ctx.fillStyle = 'rgba(255,255,255,.7)';ctx.fill();
        } else if (n.ring === 2) {
          ctx.fillStyle = 'rgba(255,255,255,.5)';ctx.fill();
        } else {
          ctx.fillStyle = 'rgba(255,255,255,.35)';ctx.fill();
        }

        // Labels apenas em hub + core + ring1 (ring2/3 ficam só como nuvem visual)
        if (n.kind === 'hub' || n.kind === 'core' || n.ring === 1) {
          ctx.font = n.kind === 'hub' ?
          '600 13px ui-sans-serif, system-ui' :
          n.kind === 'core' ? '500 11px ui-monospace, monospace' : '400 10px ui-monospace, monospace';
          ctx.fillStyle = n.kind === 'hub' ? inkColor :
          n.kind === 'core' ? 'rgba(255,255,255,.88)' : mutedColor;
          ctx.textAlign = 'center';ctx.textBaseline = 'top';
          ctx.fillText(n.kind === 'hub' ? 'ConectaAI' : n.label, n.x, n.y + n.r + 5);
        }
      }
    }

    let raf = 0,lastPulse = 0;
    const tick = (ts) => {
      if (ts - lastPulse > 220) {
        spawnPulse();
        if (Math.random() < 0.7) spawnPulse();
        if (Math.random() < 0.4) spawnPulse();
        lastPulse = ts;
      }
      step(ts);draw(ts);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    return () => {
      cancelAnimationFrame(raf);
      ro.disconnect();
      canvas.removeEventListener('mousemove', onMove);
      canvas.removeEventListener('mouseleave', onLeave);
    };
  }, [accent, inkColor, mutedColor, bgDot]);

  return (
    <div ref={wrapRef} className="hero-graph">
      <canvas ref={canvasRef} />
      <div className="hero-graph-meta">
        <span>● contexto sendo puxado em tempo real</span>
        <span>72 nós · 100+ conexões ativas</span>
      </div>
    </div>);

};

const NodeMark = ({ size = 22, color = "currentColor" }) =>
<svg width={size} height={size} viewBox="0 0 64 64" fill="none" style={{ display: "block" }}>
    <path d="M 18 14 L 10 14 L 10 50 L 18 50" stroke={color} strokeWidth="4" strokeLinecap="square" strokeLinejoin="miter" fill="none" />
    <path d="M 46 14 L 54 14 L 54 50 L 46 50" stroke={color} strokeWidth="4" strokeLinecap="square" strokeLinejoin="miter" fill="none" />
    <line x1="14" y1="32" x2="26" y2="32" stroke={color} strokeWidth="4" />
    <line x1="38" y1="32" x2="50" y2="32" stroke={color} strokeWidth="4" />
    <rect x="28" y="28" width="8" height="8" fill={color} />
  </svg>;


const Nav = () =>
<nav className="nav">
    <div className="wrap nav-inner">
      <a href="#" className="logo" aria-label="ConectaAI — home">
        <span className="logo-mark"><NodeMark size={26} color="var(--ink)" /></span>
        <span><b>conecta</b><i>/ai</i></span>
      </a>
      <div className="nav-links">
        <a href="#produto">Produto</a>
        <a href="#agentes">Agentes</a>
        <a href="#integracoes">Integrações</a>
        <a href="#casos">Casos</a>
        <a href="#precos">Preços</a>
        <a href="https://help.conectaai.io" target="_blank" rel="noopener" style={{ color: "var(--accent)" }}>Help Center</a>
      </div>
      <div className="nav-cta">
        <a href="https://app.conectaai.io/login" rel="noopener" className="btn btn-ghost nav-login" style={{ height: 38, fontSize: 13 }}>
          Entrar
        </a>
        <a href="https://calendar.app.google/gcAyr2SvyNVNhwb86" target="_blank" rel="noopener" className="btn btn-primary" style={{ height: 38, fontSize: 13 }}>
          Agendar demo <span className="arrow">→</span>
        </a>
      </div>
    </div>
  </nav>;


const Hero = () => {
  const [hasBackdrop, setHasBackdrop] = React.useState(
    () => (document.body.dataset.graph || 'constellation') === 'constellation'
  );
  React.useEffect(() => {
    const obs = new MutationObserver(() => {
      setHasBackdrop((document.body.dataset.graph || 'constellation') === 'constellation');
    });
    obs.observe(document.body, { attributes: true, attributeFilter: ['data-graph'] });
    return () => obs.disconnect();
  }, []);
  return (
    <section className={"hero" + (hasBackdrop ? " hero--with-backdrop" : "")}>
      <HeroGraphBackdrop />
      <div className="wrap">
      <div className="hero-meta mono">
        <span><span className="dot"></span>4 anos · 100+ provedores no Brasil</span>
        <span>CHAPECÓ SANTA CATARINA · 2026</span>
      </div>
      <h1>
        Atendimento <em>impecável</em>.<br />
        Sem montar <span className="accent-word">operação</span>.
      </h1>
      <div className="hero-lower">
        <p className="lead">A gente já opera atendimento pra mais de 100 provedores há 4 anos. Agora colocamos IA na frente — pra resolver o que dá pra resolver em segundos, e deixar nosso time humano só com o que importa.

          </p>
        <div className="actions">
          <div className="cta-row">
            <a href="https://calendar.app.google/gcAyr2SvyNVNhwb86" target="_blank" rel="noopener" className="btn btn-accent">
              Conversar com a operação <span className="arrow">→</span>
            </a>
            <a href="#produto" className="btn btn-ghost">Ver como funciona</a>
          </div>
          <div className="note">Implementação em 14 dias · LGPD · ISO 27001 em processo</div>
        </div>
      </div>

      {/* Card-style graph (renderiza só em variantes orbital/dataflow) */}
      <HeroGraphPickerLive renderMode="card" />
      </div>
    </section>);

};

// Backdrop: renderiza só quando graphStyle === constellation, full-bleed atrás do hero
const HeroGraphBackdrop = () => {
  const [style, setStyle] = React.useState(
    () => document.body.dataset.graph || 'constellation'
  );
  const [accent, setAccent] = React.useState(
    () => getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() || 'oklch(0.82 0.18 125)'
  );
  React.useEffect(() => {
    const obs = new MutationObserver(() => {
      setStyle(document.body.dataset.graph || 'constellation');
      setAccent(getComputedStyle(document.documentElement).getPropertyValue('--accent').trim());
    });
    obs.observe(document.body, { attributes: true, attributeFilter: ['data-graph'] });
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
    return () => obs.disconnect();
  }, []);
  if (style !== 'constellation') return null;
  return (
    <div className="hero-backdrop">
      <window.HeroGraphConstellation accent={accent} />
    </div>);

};

// Bridge: lê body[data-graph] e reage a mudanças do tweak panel
const HeroGraphPickerLive = ({ renderMode = 'auto' }) => {
  const [style, setStyle] = React.useState(
    () => document.body.dataset.graph || 'constellation'
  );
  const [accent, setAccent] = React.useState(
    () => getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() || 'oklch(0.82 0.18 125)'
  );
  React.useEffect(() => {
    const obs = new MutationObserver(() => {
      setStyle(document.body.dataset.graph || 'constellation');
      setAccent(getComputedStyle(document.documentElement).getPropertyValue('--accent').trim());
    });
    obs.observe(document.body, { attributes: true, attributeFilter: ['data-graph'] });
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
    return () => obs.disconnect();
  }, []);
  // Card-mode hides constellation (it renders as full-bleed backdrop instead)
  if (renderMode === 'card' && style === 'constellation') return null;
  return <HeroGraphPicker style={style} accent={accent} />;
};

const LogosStrip = () =>
<div className="proof">
    <div className="wrap proof-row">
      <div className="proof-item">
        <span className="proof-num">4<em>anos</em></span>
        <span className="proof-lbl">operando atendimento</span>
      </div>
      <div className="proof-divider" aria-hidden="true"></div>
      <div className="proof-item">
        <span className="proof-num">100<em>+</em></span>
        <span className="proof-lbl">provedores atendidos no Brasil</span>
      </div>
      <div className="proof-divider" aria-hidden="true"></div>
      <div className="proof-item">
        <span className="proof-num">24<em>/7</em></span>
        <span className="proof-lbl">turnos cobertos pela operação</span>
      </div>
      <div className="proof-divider" aria-hidden="true"></div>
      <div className="proof-item">
        <span className="proof-num">PT<em>+ES</em></span>
        <span className="proof-lbl">português e espanhol nativos</span>
      </div>
    </div>
  </div>;

const Ticker = () =>
<div className="ticker">
    <div className="ticker-track">
      <span>Suporte L1</span><span>2ª via</span><span>Reset CPE</span>
      <span>Diagnóstico de link</span><span>Status do plano</span><span>Agendamento</span>
      <span>Cobrança</span><span>Acordo</span><span>Onboarding</span>
      <span>Pré-venda</span><span>Upsell</span><span>Pesquisa CSAT</span>
      <span>Triagem</span><span>Roteamento</span><span>Transcrição</span>
      <span>Suporte L1</span><span>2ª via</span><span>Reset CPE</span>
      <span>Diagnóstico de link</span><span>Status do plano</span><span>Agendamento</span>
      <span>Cobrança</span><span>Acordo</span><span>Pesquisa CSAT</span>
    </div>
  </div>;


const WhyUs = () => {
  const pillars = [
    {
      n: "01",
      title: <>Operamos <em>antes</em> de programar</>,
      body: "A gente vem de 4 anos atendendo provedor por turno, na régua, com gente. Quem desenha o software já passou a noite no console — não é teoria de SaaS.",
      vis: "ops",
    },
    {
      n: "02",
      title: <>IA que <em>defleta</em>, humano que <em>resolve</em></>,
      body: "A IA fecha o que é repetitivo em segundos. O caso que escala chega no humano com o cliente identificado, histórico carregado e proposta de solução pronta.",
      vis: "deflect",
    },
    {
      n: "03",
      title: <>Mais <em>barato</em> porque é mais <em>rápido</em></>,
      body: "Não é cortar pessoas pra economizar. É absorver volume com software pra cada minuto humano render mais. O custo por atendimento cai sem o CSAT cair junto.",
      vis: "cost",
    }
  ];
  return (
    <section className="section section--why" id="por-que">
      <div className="wrap">
        <div className="section-head">
          <div className="kicker"><span>00</span><span>— Por que a gente</span></div>
          <div>
            <h2>Software de IA todo mundo promete.<br /><em>Operação rodando</em>, é outro assunto.</h2>
            <p className="sub">
              Você não está contratando uma plataforma com manual de uso. Está contratando a operação inteira — IA + pessoas + processo — pra atender seu cliente como se fosse o nosso.
            </p>
          </div>
        </div>
        <div className="why-grid">
          {pillars.map((p, i) => (
            <article key={i} className="why-card">
              <div className="why-num mono">{p.n}</div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
              <div className={"why-vis why-vis--" + p.vis} aria-hidden="true">
                {p.vis === "ops" && (
                  <div className="ops-shifts">
                    <span className="shift">06h</span><span className="shift">12h</span>
                    <span className="shift">18h</span><span className="shift on">24h</span>
                  </div>
                )}
                {p.vis === "deflect" && (
                  <div className="deflect-bar">
                    <span className="d-ai" style={{flex: 72}}>72% IA</span>
                    <span className="d-hu" style={{flex: 28}}>28% humano</span>
                  </div>
                )}
                {p.vis === "cost" && (
                  <div className="cost-line">
                    <span className="cl-old">antes <em>R$ 18,80</em>/atendimento</span>
                    <span className="cl-arr">→</span>
                    <span className="cl-new">agora <em>R$ 8,40</em></span>
                  </div>
                )}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};


const HowItWorks = () =>
<section className="section" id="produto">
    <div className="wrap">
      <div className="section-head">
        <div className="kicker"><span>01</span><span>— Como funciona</span></div>
        <div>
          <h2>Da chamada do cliente <em>à pesquisa de CSAT</em>, em uma operação só.</h2>
          <p className="sub">
            Não é uma ferramenta que você instala. É um fluxo end-to-end que a gente opera — IA na frente, humano no meio quando precisa, métrica no fim sempre.
          </p>
        </div>
      </div>
    </div>

    <div className="wrap">
      <div className="flow">
        <div className="flow-step">
          <div className="flow-time mono">~ 0s</div>
          <div className="flow-tag">01 / Entrada</div>
          <h3>Cliente <em>chega</em></h3>
          <p>WhatsApp, voz, e-mail ou chat. Roteador identifica o cliente no seu CRM/ERP e carrega o histórico antes da primeira resposta.</p>
          <div className="flow-chips">
            <span>WhatsApp</span><span>Voz SIP</span><span>E-mail</span><span>Chat</span>
          </div>
        </div>
        <div className="flow-arrow" aria-hidden="true">→</div>
        <div className="flow-step flow-step--ai">
          <div className="flow-time mono">4–40s</div>
          <div className="flow-tag">02 / IA tenta resolver</div>
          <h3>Agente <em>responde</em></h3>
          <p>Para 70% dos casos — 2ª via, status, agendamento, dúvida técnica L1 — a IA resolve direto, com tom da marca, dentro da política.</p>
          <div className="flow-chips">
            <span>RAG nos seus dados</span><span>Ferramentas reais</span><span>Guardrails</span>
          </div>
        </div>
        <div className="flow-arrow" aria-hidden="true">→</div>
        <div className="flow-step flow-step--human">
          <div className="flow-time mono">&lt; 60s</div>
          <div className="flow-tag">03 / Humano com contexto</div>
          <h3>Operador <em>assume</em></h3>
          <p>Os 30% que escalam caem no nosso operador com o caso pré-resumido, sentimento do cliente já lido, e a próxima ação sugerida.</p>
          <div className="flow-chips">
            <span>Resumo automático</span><span>Sentimento</span><span>Próxima ação</span>
          </div>
        </div>
        <div className="flow-arrow" aria-hidden="true">→</div>
        <div className="flow-step flow-step--csat">
          <div className="flow-time mono">D+0</div>
          <div className="flow-tag">04 / Fechamento</div>
          <h3>Mede e <em>aprende</em></h3>
          <p>Pesquisa de CSAT automática, transcrição arquivada, motivos categorizados. Toda semana o agente aprende com o que humano resolveu.</p>
          <div className="flow-chips">
            <span>CSAT</span><span>FCR</span><span>Motivos</span>
          </div>
        </div>
      </div>
    </div>
  </section>;


const Agents = () => {
  const agents = [
  {
    tag: "agent/01 · atendimento",
    state: "em produção",
    name: <>Atendimento <em>de ponta</em></>,
    desc: "Responde por WhatsApp, e-mail e chat com contexto do cliente. Escala pro humano só quando precisa.",
    skills: ["WhatsApp", "E-mail", "CRM", "RAG"],
    metric: { k: "Resolução sem handoff", v: "78%" }
  },
  {
    tag: "agent/02 · back office",
    state: "em produção",
    name: <>Operação <em>silenciosa</em></>,
    desc: "Concilia pedidos, fecha tickets repetitivos e reconcilia dados entre sistemas durante a madrugada.",
    skills: ["ERP", "Planilhas", "SQL", "Cron"],
    metric: { k: "Horas/mês liberadas", v: "420h" }
  },
  {
    tag: "agent/03 · vendas",
    state: "em produção",
    name: <>Pré-venda <em>qualificada</em></>,
    desc: "Qualifica leads pelo ICP, enriquece dados e marca reunião só com quem faz sentido pro seu time.",
    skills: ["HubSpot", "Enriquecimento", "Calendly"],
    metric: { k: "SQLs / mês", v: "3,2×" }
  },
  {
    tag: "agent/04 · financeiro",
    state: "em produção",
    name: <>Cobrança <em>humana</em></>,
    desc: "Negocia parcelamento, emite boletos e fecha acordos dentro da sua política, sem tom robótico.",
    skills: ["Boleto", "Pix", "Régua"],
    metric: { k: "Recuperação D+30", v: "+34%" }
  },
  {
    tag: "agent/05 · RH",
    state: "beta",
    name: <>Onboarding <em>assistido</em></>,
    desc: "Guia novos colaboradores pelos primeiros 30 dias, responde sobre política, benefícios e processos internos.",
    skills: ["SSO", "Notion", "Benefícios"],
    metric: { k: "Tickets RH evitados", v: "61%" }
  },
  {
    tag: "agent/06 · custom",
    state: "do seu jeito",
    name: <>Monte o <em>seu</em></>,
    desc: "Do zero ou partindo de um dos templates acima. Integrações, prompts e regras 100% sob seu controle.",
    skills: ["SDK", "API", "Templates"],
    metric: { k: "Tempo até 1º deploy", v: "< 14d" }
  }];


  return (
    <section className="section" id="agentes">
      <div className="wrap">
        <div className="section-head">
          <div className="kicker"><span>02</span><span>— Agentes</span></div>
          <div>
            <h2>Uma biblioteca viva de <em>agentes prontos</em> para operar.</h2>
            <p className="sub">
              Cada um com papel, ferramentas e métricas definidas. Use como ponto de partida ou customize do zero.
            </p>
          </div>
        </div>

        <div className="agents">
          {agents.map((a, i) =>
          <article key={i} className="agent">
              <div className="agent-head">
                <span className="tag">{a.tag}</span>
                <span className="state">{a.state}</span>
              </div>
              <h4>{a.name}</h4>
              <p>{a.desc}</p>
              <div className="skills">
                {a.skills.map((s) => <span key={s}>{s}</span>)}
              </div>
              <div className="metric">
                <span className="k">{a.metric.k}</span>
                <span className="v">{a.metric.v}</span>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

};

const IntegLogo = ({ logo, name }) => {
  const [failed, setFailed] = React.useState(false);
  const [isDark, setIsDark] = React.useState(() =>
    typeof document !== 'undefined' && document.body?.dataset.theme === 'dark'
  );
  React.useEffect(() => {
    const obs = new MutationObserver(() => {
      setIsDark(document.body.dataset.theme === 'dark');
    });
    obs.observe(document.body, { attributes: true, attributeFilter: ['data-theme'] });
    return () => obs.disconnect();
  }, []);
  const buildMono = (str) => {
    const words = str.split(/[\s\-!]+/).filter(Boolean);
    if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
    return str.slice(0, 2).replace(/^./, c => c.toUpperCase());
  };
  const fallbackMono = buildMono(name);
  const useImg = (logo.kind === "icon" || logo.kind === "file" || logo.kind === "url") && !failed;
  const tint = isDark ? "ffffff" : "111111";
  const src = logo.kind === "icon"
    ? `https://cdn.simpleicons.org/${logo.slug}/${tint}`
    : (logo.kind === "file" || logo.kind === "url") ? (isDark && logo.srcDark ? logo.srcDark : logo.src) : null;
  const cls = ["integ-logo"];
  if (logo.kind === "file") cls.push("integ-logo--file");
  if (logo.darkInvert && isDark) cls.push("integ-logo--invert");
  if (logo.lightInvert && !isDark) cls.push("integ-logo--invert");
  if (logo.brand) cls.push("integ-logo--brand");
  return (
    <div className={cls.join(" ")}>
      {useImg ? (
        <img
          key={src}
          src={src}
          alt={name + " logo"}
          onError={() => setFailed(true)}
        />
      ) : (
        <span className="integ-mono" aria-hidden="true">{logo.text || fallbackMono}</span>
      )}
    </div>
  );
};

const Integrations = () => {
  // Logo strategy:
  // - Marcas com presença em simple-icons CDN: usamos cdn.simpleicons.org (SVG, monocromático).
  // - Marcas regionais/proprietárias sem CDN público: monogram (iniciais) renderizado em CSS.
  const integs = [
    { name: "IXC Provedor", cat: "CRM", logo: { kind: "file", src: "brand/logos/ixc-provedor.png" } },
    { name: "Trello",        cat: "CRM", logo: { kind: "icon", slug: "trello" } },
    { name: "WhatsApp Business API", cat: "Canal", logo: { kind: "url", brand: true, src: "https://cdn.simpleicons.org/whatsapp/3B5BFF", srcDark: "https://cdn.simpleicons.org/whatsapp/3B5BFF" } } },
    { name: "Conecta SIP-AI", cat: "Canal", logo: { kind: "file", brand: true, src: "brand/logos/conecta-mark-accent.svg", srcDark: "brand/logos/conecta-mark-accent.svg" } },
    { name: "OpenAI",        cat: "AI",    logo: { kind: "file", src: "brand/logos/openai.png", darkInvert: true } },
    { name: "Anthropic",     cat: "AI",    logo: { kind: "file", src: "brand/logos/anthropic.webp", darkInvert: true } },
    { name: "Opa! Suite",    cat: "Helpdesk", logo: { kind: "file", src: "brand/logos/opa-suite.svg" } },
    { name: "Twilio",        cat: "Helpdesk", logo: { kind: "file", src: "brand/logos/twilio.png" } },
    { name: "IXC Provedor",  cat: "ERP",   logo: { kind: "file", src: "brand/logos/ixc-provedor.png" } },
    { name: "Hubsoft",       cat: "ERP",   logo: { kind: "file", src: "brand/logos/hubsoft.png", lightInvert: true } },
    { name: "IXC ACS",       cat: "TR069", logo: { kind: "file", src: "brand/logos/ixc-acs.png" } },
    { name: "Postgres",      cat: "Dados", logo: { kind: "icon", slug: "postgresql" } }
  ];

  return (
    <section className="section" id="integracoes">
      <div className="wrap">
        <div className="section-head">
          <div className="kicker"><span>03</span><span>— Integrações</span></div>
          <div>
            <h2>Tudo que sua empresa <em>já usa</em>, conversando entre si.</h2>
            <p className="sub">
              Conectores nativos, SDK aberto e webhooks para plugar qualquer sistema. Se existe, a gente conecta.
            </p>
          </div>
        </div>
      </div>
      <div className="wrap" style={{ paddingLeft: 0, paddingRight: 0 }}>
        <div style={{ paddingLeft: 'var(--pad)', paddingRight: 'var(--pad)' }}>
          <div className="integrations">
            {integs.map((i, idx) =>
            <div key={idx} className="integ">
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <span className="cat">{i.cat}</span>
                  <span className="mark">↗</span>
                </div>
                <IntegLogo logo={i.logo} name={i.name} />
                <span className="name">{i.name}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

};

const Cases = () =>
<section className="section" id="casos">
    <div className="wrap">
      <div className="section-head">
        <div className="kicker"><span>04</span><span>— Casos de uso</span></div>
        <div>
          <h2>Empresas reais, com números <em>auditáveis</em>.</h2>
          <p className="sub">
            Sem cherry-picking: cada caso mostra o antes, o depois e a metodologia. Peça o deck detalhado em PDF.
          </p>
        </div>
      </div>
    </div>

    <div className="wrap" style={{ paddingLeft: 0, paddingRight: 0 }}>
      <div style={{ paddingLeft: 'var(--pad)', paddingRight: 'var(--pad)' }}>
        <div className="cases">
          <article className="case">
            <div className="case-kicker"><span>Provedor MG · 14k assinantes</span><span>case-01</span></div>
            <h3>Da espera de 47 minutos ao <em>atendido em segundos</em>.</h3>
            <p>Pico de chamadas no fim da tarde derrubava a fila. Agente de Suporte L1 absorveu 2ª via, status do plano e reset de CPE direto pelo IXC, sem fila.</p>
            <div className="case-stats">
              <div className="stat"><div className="n">−<em>87%</em></div><div className="lbl">Tempo médio de espera</div></div>
              <div className="stat"><div className="n">71<em>%</em></div><div className="lbl">Resolvido sem humano</div></div>
              <div className="stat"><div className="n">R$ 38<em>k</em></div><div className="lbl">Economia / mês</div></div>
            </div>
          </article>
          <article className="case">
            <div className="case-kicker"><span>Provedor SP · 38k assinantes</span><span>case-02</span></div>
            <h3>Madrugada que <em>não chama o técnico</em> à toa.</h3>
            <p>Diagnóstico via IXC ACS antes de abrir chamado. Quedas reais escalam pro plantão; oscilação de Wi-Fi vira instrução guiada na hora.</p>
            <div className="case-stats">
              <div className="stat"><div className="n">−63<em>%</em></div><div className="lbl">Visitas técnicas</div></div>
              <div className="stat"><div className="n">8<em>min</em></div><div className="lbl">Tempo médio de diagnóstico</div></div>
              <div className="stat"><div className="n">24/7</div><div className="lbl">Cobertura sem plantão presencial</div></div>
            </div>
          </article>
          <article className="case">
            <div className="case-kicker"><span>Provedor PR · 9k assinantes</span><span>case-03</span></div>
            <h3>Cobrança que <em>não soa</em> como cobrança.</h3>
            <p>Régua de inadimplência conversando no WhatsApp, gerando 2ª via, oferecendo acordo dentro da política. Humano só entra em exceção.</p>
            <div className="case-stats">
              <div className="stat"><div className="n">+42<em>%</em></div><div className="lbl">Recuperação em D+15</div></div>
              <div className="stat"><div className="n">−2.1<em>pp</em></div><div className="lbl">Inadimplência mensal</div></div>
              <div className="stat"><div className="n">3.4<em>x</em></div><div className="lbl">ROI no primeiro trimestre</div></div>
            </div>
          </article>
          <article className="case">
            <div className="case-kicker"><span>Provedor BA · 22k assinantes</span><span>case-04</span></div>
            <h3>Retenção que <em>liga antes</em> do cliente cancelar.</h3>
            <p>Sinais do CRM (queda de uso, ticket recorrente, pedido de cancelamento) viram ação. Agente de retenção propõe upgrade ou aciona o humano certo.</p>
            <div className="case-stats">
              <div className="stat"><div className="n">−38<em>%</em></div><div className="lbl">Churn voluntário</div></div>
              <div className="stat"><div className="n">+18<em>%</em></div><div className="lbl">Upsell na retenção</div></div>
              <div className="stat"><div className="n">14<em>d</em></div><div className="lbl">Do setup ao primeiro turno</div></div>
            </div>
          </article>
        </div>
      </div>
    </div>
  </section>;


const Pricing = () =>
<section className="section" id="precos">
    <div className="wrap">
      <div className="section-head">
        <div className="kicker"><span>05</span><span>— Planos</span></div>
        <div>
          <h2>Comece <em>pequeno</em>. Escale sem reescrever nada.</h2>
          <p className="sub">
            Cobrança por turno resolvido, não por usuário. Se o agente não entregou, você não paga.
          </p>
        </div>
      </div>

      <div className="pricing">
        <div className="plan">
          <div className="plan-head">
            <div className="tier">Início · piloto</div>
            <h4>Conecta <em>Start</em></h4>
          </div>
          <div className="plan-price">
            <span className="amt">R$ 926,80</span>
            <span className="unit">/ mês</span>
          </div>
          <ul className="plan-feats">
            <li>1 agente em produção</li>
            <li>Até 100 turnos resolvidos</li>
            <li>3 conectores prontos</li>
            <li>Painel de métricas essenciais</li>
            <li className="muted">SLA dedicado</li>
            <li className="muted">Ambiente isolado</li>
          </ul>
          <div className="plan-cta">
            <a href="https://calendar.app.google/gcAyr2SvyNVNhwb86" target="_blank" rel="noopener" className="btn btn-ghost">Começar piloto <span className="arrow">→</span></a>
          </div>
        </div>

        <div className="plan featured">
          <div className="plan-head">
            <div className="tier">Operação</div>
            <h4>Conecta <em>Core</em></h4>
          </div>
          <div className="plan-price">
            <span className="amt">R$ 8.9k</span>
            <span className="unit">/ mês</span>
          </div>
          <ul className="plan-feats">
            <li>Até 5 agentes simultâneos</li>
            <li>Até 1.000 turnos resolvidos</li>
            <li>Conectores ilimitados</li>
            <li>Auditoria completa + logs</li>
            <li>SLA 99.9% com suporte</li>
            <li>Ambiente isolado na sua nuvem</li>
          </ul>
          <div className="plan-cta">
            <a href="mailto:comercial@speedgrowthisp.com.br" className="btn btn-accent">Falar com vendas <span className="arrow">→</span></a>
          </div>
        </div>

        <div className="plan">
          <div className="plan-head">
            <div className="tier">Grupo · enterprise</div>
            <h4>Conecta <em>Scale</em></h4>
          </div>
          <div className="plan-price">
            <span className="custom">sob medida</span>
          </div>
          <ul className="plan-feats">
            <li>Agentes e turnos ilimitados</li>
            <li>On-prem ou VPC dedicada</li>
            <li>Modelos dedicados / fine-tune</li>
            <li>Certificações customizadas</li>
            <li>Squad de implementação</li>
            <li>Contrato anual com POC paga</li>
          </ul>
          <div className="plan-cta">
            <a href="mailto:comercial@speedgrowthisp.com.br" className="btn btn-ghost">Montar proposta <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </div>
  </section>;


const ContactForm = () => {
  // ⚠️ Substitua por seu endpoint Formspree real:
  // 1. Crie conta grátis em formspree.io com comercial@speedgrowthisp.com.br
  // 2. Crie um formulário "ConectaAI"
  // 3. Cole abaixo o endpoint (formato: https://formspree.io/f/XXXXXXX)
  const FORMSPREE_ENDPOINT = "https://formspree.io/f/xvzlzrzk";

  const [status, setStatus] = React.useState("idle"); // idle | sending | ok | err
  const [msg, setMsg] = React.useState("");

  async function handleSubmit(e) {
    e.preventDefault();
    const form = e.currentTarget;
    const data = new FormData(form);

    // Validação manual (form usa noValidate pra UX customizada)
    const nome = String(data.get("nome") || "").trim();
    const email = String(data.get("email") || "").trim();
    const consent = data.get("consent");
    if (!nome) { setStatus("err"); setMsg("Informe seu nome."); return; }
    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setStatus("err"); setMsg("Email inválido."); return;
    }
    if (!consent) {
      setStatus("err"); setMsg("Aceite a política de privacidade pra continuar."); return;
    }

    setStatus("sending");
    setMsg("");
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: data,
      });
      if (res.ok) {
        setStatus("ok");
        setMsg("Recebido. Retornamos em até 1 dia útil.");
        form.reset();
        return;
      }
      let detail = "";
      try {
        const j = await res.json();
        detail = (j.errors && j.errors[0] && j.errors[0].message) || "";
      } catch (_) {}
      setStatus("err");
      setMsg(detail
        ? `Erro: ${detail}. Tente comercial@speedgrowthisp.com.br`
        : "Não foi possível enviar. Tente comercial@speedgrowthisp.com.br");
    } catch (err) {
      setStatus("err");
      setMsg("Falha de conexão. Tente novamente ou escreva pra comercial@speedgrowthisp.com.br");
    }
  }

  return (
    <form className="contact-form" onSubmit={handleSubmit} noValidate>
      <div className="row-2">
        <div className="field">
          <label htmlFor="cf-nome">Nome</label>
          <input id="cf-nome" name="nome" type="text" required autoComplete="name" />
        </div>
        <div className="field">
          <label htmlFor="cf-email">Email corporativo</label>
          <input id="cf-email" name="email" type="email" required autoComplete="email" />
        </div>
      </div>
      <div className="row-2">
        <div className="field">
          <label htmlFor="cf-empresa">Provedor / empresa</label>
          <input id="cf-empresa" name="empresa" type="text" required />
        </div>
        <div className="field">
          <label htmlFor="cf-assinantes">Nº de assinantes</label>
          <select id="cf-assinantes" name="assinantes" defaultValue="">
            <option value="" disabled>Selecione</option>
            <option value="ate-2k">Até 2.000</option>
            <option value="2k-10k">2.000 – 10.000</option>
            <option value="10k-50k">10.000 – 50.000</option>
            <option value="50k+">50.000+</option>
          </select>
        </div>
      </div>
      <div className="field">
        <label htmlFor="cf-msg">O que você quer resolver?</label>
        <textarea id="cf-msg" name="mensagem" placeholder="Ex.: reduzir tempo de fila no suporte L1 do IXC…" />
      </div>
      <label className="consent">
        <input type="checkbox" name="consent" required />
        <span>Concordo com a <a href="privacidade.html">política de privacidade</a> e autorizo o contato comercial.</span>
      </label>
      <div className="submit-row">
        <button type="submit" className="btn btn-primary" disabled={status === "sending"}>
          {status === "sending" ? "Enviando…" : "Enviar"} <span className="arrow">→</span>
        </button>
        {msg && <span className={`form-msg ${status === "ok" ? "ok" : status === "err" ? "err" : ""}`}>{msg}</span>}
      </div>
    </form>
  );
};

const CTAFinal = () =>
<section className="cta-final" id="demo">
    <div className="wrap">
      <div className="cta-final-grid">
        <div className="cta-final-left">
          <h2>Pronto para botar <em>um agente em turno</em>?</h2>
          <div className="cta-actions">
            <a href="https://calendar.app.google/gcAyr2SvyNVNhwb86" target="_blank" rel="noopener" className="btn btn-primary">
              Agendar demo de 20 min <span className="arrow">→</span>
            </a>
            <a href="mailto:comercial@speedgrowthisp.com.br" className="btn btn-ghost">Falar com o comercial</a>
          </div>
          <div className="tag-line">
            <span>Setup em 14 dias</span>
            <span>Dados no Brasil</span>
            <span>Sem lock-in de modelo</span>
            <span>Pago por resultado</span>
          </div>
        </div>
        <div className="cta-final-right">
          <div className="form-kicker">Ou nos diga sobre seu provedor</div>
          <ContactForm />
        </div>
      </div>
    </div>
  </section>;


const SocialIcon = ({ kind }) => {
  const paths = {
    linkedin: <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v14H.22V8zm7.32 0h4.37v1.92h.06c.61-1.15 2.1-2.36 4.32-2.36 4.62 0 5.47 3.04 5.47 7v7.44h-4.55v-6.6c0-1.57-.03-3.6-2.19-3.6-2.2 0-2.53 1.71-2.53 3.48V22H7.54V8z" fill="currentColor"/>,
    instagram: <><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.13 1.39C1.34 2.69.92 3.36.62 4.14.33 4.9.13 5.77.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.28.26 2.15.56 2.91.3.79.72 1.46 1.39 2.13.67.67 1.34 1.09 2.13 1.39.76.3 1.63.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.28-.06 2.15-.26 2.91-.56a5.89 5.89 0 002.13-1.39 5.89 5.89 0 001.39-2.13c.3-.76.5-1.63.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.28-.26-2.15-.56-2.91a5.89 5.89 0 00-1.39-2.13A5.89 5.89 0 0019.86.63c-.76-.3-1.63-.5-2.91-.56C15.67.01 15.26 0 12 0z" fill="currentColor"/><path d="M12 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zm0 10.16a4 4 0 110-8 4 4 0 010 8zM19.85 5.59a1.44 1.44 0 11-2.88 0 1.44 1.44 0 012.88 0z" fill="currentColor"/></>,
    facebook: <path d="M24 12C24 5.37 18.63 0 12 0S0 5.37 0 12c0 6 4.39 10.95 10.13 11.85V15.47H7.08V12h3.05V9.36c0-3 1.79-4.66 4.53-4.66 1.31 0 2.69.23 2.69.23v2.95h-1.51c-1.49 0-1.95.92-1.95 1.87V12h3.32l-.53 3.47h-2.79v8.38C19.61 22.95 24 18 24 12z" fill="currentColor"/>,
  };
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
      {paths[kind]}
    </svg>
  );
};

const Footer = () =>
<footer className="footer">
    <div className="wrap">
      <div className="footer-grid">
        <div className="col-brand">
          <h5>Brand</h5>
          <a href="#" className="logo" aria-label="ConectaAI">
            <span className="logo-mark"><NodeMark size={26} color="var(--ink)" /></span>
            <span><b>conecta</b><i>/ai</i></span>
          </a>
          <p>Agentes de IA que trabalham conectados ao seu negócio — sem reinventar a sua stack.</p>
          <div className="social-row" aria-label="Redes sociais">
            <a href="#" aria-label="LinkedIn" className="social-link"><SocialIcon kind="linkedin"/></a>
            <a href="#" aria-label="Instagram" className="social-link"><SocialIcon kind="instagram"/></a>
            <a href="#" aria-label="Facebook" className="social-link"><SocialIcon kind="facebook"/></a>
          </div>
        </div>
        <div>
          <h5>Produto</h5>
          <ul>
            <li><a href="#produto">Como funciona</a></li>
            <li><a href="#agentes">Agentes</a></li>
            <li><a href="#integracoes">Integrações</a></li>
            <li><a href="#precos">Planos</a></li>
          </ul>
        </div>
        <div>
          <h5>Contato</h5>
          <ul>
            <li><a href="mailto:comercial@speedgrowthisp.com.br">comercial@speedgrowthisp.com.br</a></li>
            <li><a href="https://calendar.app.google/gcAyr2SvyNVNhwb86" target="_blank" rel="noopener">Agendar demo</a></li>
          </ul>
        </div>
        <div>
          <h5>Legal</h5>
          <ul>
            <li><a href="privacidade.html">Política de privacidade</a></li>
            <li><a href="termos.html">Termos de uso</a></li>
            <li><a href="cookies.html">Política de cookies</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 M&amp;G Representações Comerciais Ltda · CNPJ 34.508.839/0001-57</span>
        <span>CHAPECÓ · SANTA CATARINA</span>
      </div>
    </div>
  </footer>;


Object.assign(window, {
  HeroGraph, HeroGraphPickerLive, NodeMark, Nav, Hero, LogosStrip, Ticker, HowItWorks, Agents, Integrations, Cases, Pricing, CTAFinal, ContactForm, Footer
});