function Services() {
  const items = [
    {
      idx: "01",
      title: "Análise de Dados",
      lead: "Convertemos dados brutos em narrativa - dashboards, estudos preditivos e relatórios executivos que guiam a próxima decisão.",
      bullets: ["dashboards_executivos", "modelos_preditivos", "segmentação_de_clientes", "relatórios_white_label"],
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <rect x="3" y="17" width="4" height="8" stroke="#2BE876" strokeWidth="1.5" />
          <rect x="10" y="11" width="4" height="14" stroke="#2BE876" strokeWidth="1.5" />
          <rect x="17" y="5" width="4" height="20" stroke="#2BE876" strokeWidth="1.5" />
          <path d="M5 4 L25 4" stroke="#2BE876" strokeWidth="1.5" strokeDasharray="2 3" opacity="0.5" />
        </svg>
      ),
    },
    {
      idx: "02",
      title: "Desenvolvimento de Sistemas",
      lead: "Sistemas internos sob medida: ERPs leves, portais de operação, APIs e ferramentas que substituem 12 planilhas por um lugar só.",
      bullets: ["web_apps_sob_medida", "APIs_e_integrações", "portais_internos", "migração_de_legado"],
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <rect x="4" y="5" width="20" height="15" rx="1.5" stroke="#1E9FD4" strokeWidth="1.5" />
          <path d="M9 11 L11 14 L9 17" stroke="#1E9FD4" strokeWidth="1.5" strokeLinecap="round" />
          <path d="M13 17 L18 17" stroke="#1E9FD4" strokeWidth="1.5" strokeLinecap="round" />
          <path d="M10 24 H18" stroke="#1E9FD4" strokeWidth="1.5" />
        </svg>
      ),
    },
    {
      idx: "03",
      title: "Automação de Tarefas",
      lead: "Rotinas repetitivas viram fluxos confiáveis: integrações entre sistemas, RPA em processos manuais e pipelines agendados.",
      bullets: ["integrações_entre_sistemas", "RPA_de_processos", "pipelines_agendados", "alertas_inteligentes"],
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <circle cx="14" cy="14" r="4" stroke="#F5C542" strokeWidth="1.5" />
          <path d="M14 2 V6 M14 22 V26 M2 14 H6 M22 14 H26" stroke="#F5C542" strokeWidth="1.5" strokeLinecap="round" />
          <path d="M5.5 5.5 L8.5 8.5 M19.5 19.5 L22.5 22.5 M5.5 22.5 L8.5 19.5 M19.5 8.5 L22.5 5.5" stroke="#F5C542" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
      ),
    },
  ];

  function handleMove(e) {
    const r = e.currentTarget.getBoundingClientRect();
    e.currentTarget.style.setProperty("--mx", ((e.clientX - r.left) / r.width * 100) + "%");
    e.currentTarget.style.setProperty("--my", ((e.clientY - r.top) / r.height * 100) + "%");
  }

  return (
    <section className="band" id="services">
      <HexBackdrop />
      <div className="shell">
        <div className="sec-head">
          <div>
            <Eyebrow tone="teal">o que fazemos</Eyebrow>
            <h2 style={{marginTop: 14}}>Três frentes para tirar sua operação do <span className="text-grad">piloto automático manual</span>.</h2>
          </div>
          <p>Atuamos como um time técnico acoplado ao seu: entendemos o processo, mapeamos o dado, entregamos ferramenta - e ficamos até virar rotina.</p>
        </div>

        <div className="svc-grid">
          {items.map((s, i) => (
            <article key={i} className="svc" onMouseMove={handleMove}>
              <div className="svc-ico">{s.icon}</div>
              <div className="idx">/ {s.idx}</div>
              <h3>{s.title}</h3>
              <p style={{fontSize: 14}}>{s.lead}</p>
              <ul>
                {s.bullets.map(b => <li key={b}>{b}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });