// AveraTech — Services section
const { useState: useStateS } = React;

const SERVICES = [
  {
    id: '01',
    title: 'Software sob medida',
    desc: 'Sistemas que nascem do seu processo — ERPs, plataformas internas, marketplaces, ferramentas operacionais. Tudo desenhado em volta de como o seu time já trabalha.',
    bullets: ['Discovery + protótipo em 2 semanas', 'Arquitetura escalável', 'Documentação que sobrevive ao tempo'],
    tags: ['Backend', 'Mobile', 'Web App'],
  },
  {
    id: '02',
    title: 'Sites e plataformas',
    desc: 'Sites institucionais, landing pages de alta conversão e portais B2B. Performance, SEO técnico e CMS sob medida para quem precisa publicar rápido.',
    bullets: ['Lighthouse 95+ garantido', 'Headless CMS sob medida', 'A/B testing nativo'],
    tags: ['Next.js', 'Astro', 'CMS'],
  },
  {
    id: '03',
    title: 'Consultoria técnica',
    desc: 'Discovery, due diligence, escolha de stack, contratação técnica e revisão de arquitetura. Para C-levels que precisam decidir tech sem virar engenheiro.',
    bullets: ['Diagnóstico em 14 dias', 'Roadmap por trimestre', 'Tech advisory contínuo'],
    tags: ['Strategy', 'Audit', 'Hiring'],
  },
  {
    id: '04',
    title: 'Integrações & APIs',
    desc: 'Conexões entre SAP, Salesforce, Totvs, Pipefy, sistemas legados e tudo mais que sua empresa já usa. ETLs, webhooks, eventos e dashboards de observabilidade.',
    bullets: ['Mais de 40 conectores prontos', 'Monitoramento incluso', 'SLA 99.95%'],
    tags: ['API', 'ETL', 'Eventos'],
  },
];

function ServiceCard({ s }) {
  const [hovered, setHovered] = useStateS(false);
  const onMove = (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');
  };
  return (
    <article
      className="card service-card"
      onMouseMove={onMove}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <div className="glow-line" />
      <div className="service-card-head">
        <span className="service-card-id mono">{s.id}</span>
        <div className="service-card-tags">
          {s.tags.map(t => <span key={t} className="service-card-tag mono">{t}</span>)}
        </div>
      </div>
      <h3 className="service-card-title">{s.title}</h3>
      <p className="service-card-desc">{s.desc}</p>
      <ul className="service-card-bullets">
        {s.bullets.map(b => (
          <li key={b}>
            <span className="service-card-check">✓</span>
            <span>{b}</span>
          </li>
        ))}
      </ul>
      <div className="service-card-foot">
        <a href="#contato" className="service-card-link">
          Saber mais
          <span className="arrow">→</span>
        </a>
      </div>
    </article>
  );
}

function Services() {
  return (
    <section id="servicos" className="services section-pad">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot" />Serviços</div>
          <h2>Quatro frentes,<br />um time só.</h2>
          <p className="section-sub">
            Times pequenos, sêniores, full-stack. Cada projeto entra com um líder técnico responsável pela entrega do começo ao fim — sem repassar para júnior na metade.
          </p>
        </div>
        <div className="services-grid">
          {SERVICES.map(s => <ServiceCard key={s.id} s={s} />)}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;