const serviceData = [
  { t: 'Landing pages', d: 'Páginas optimizadas para convertir. SEO técnico, carga <1s, copy enfocado al cliente.', tag: 'desde 3 días', icon: 'M3 7h18M3 12h18M3 17h10' },
  { t: 'Webs corporativas', d: 'Multi-sección, multi-idioma, CMS propio. Para marcas que quieren proyectar seriedad.', tag: 'por fases', icon: 'M4 4h16v16H4z M4 9h16 M9 9v11' },
  { t: 'Dashboards', d: 'Paneles de control con datos reales, roles y permisos. Construidos para decisiones.', tag: 'data-driven', icon: 'M3 3v18h18 M7 14l3-3 3 3 4-5' },
  { t: 'Apps móviles', d: 'iOS + Android con React Native / Expo. Mismo código, dos plataformas, UX nativo.', tag: 'React Native', icon: 'M7 2h10v20H7z M11 18h2' },
  { t: 'E-commerce', d: 'Tiendas a medida con pasarela de pago, inventario, envíos y analytics integrados.', tag: 'ROI primero', icon: 'M3 3h2l3 14h11l2-10H6 M9 21a1 1 0 100-2 1 1 0 000 2z M18 21a1 1 0 100-2 1 1 0 000 2z' },
  { t: 'UI / UX Figma', d: 'Diseño visual y de experiencia. Prototipos navegables antes de escribir código.', tag: 'Figma', icon: 'M9 3a3 3 0 100 6h3V3H9z M12 3h3a3 3 0 110 6h-3V3z M12 9a3 3 0 110 6 3 3 0 010-6z M9 15h3v3a3 3 0 11-3-3z' },
];

function ServiceCard({ t, d, tag, icon, idx }) {
  const ref = React.useRef();
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      el.style.setProperty('--mx', (e.clientX - r.left) + 'px');
      el.style.setProperty('--my', (e.clientY - r.top) + 'px');
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <div className={`card reveal d${idx%4}`} ref={ref} style={{ padding: 32 }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom: 28 }}>
        <div style={{
          width: 44, height: 44, borderRadius: 12,
          background: 'linear-gradient(135deg, rgba(124,140,255,0.2), rgba(34,211,238,0.1))',
          border: '1px solid var(--border-2)',
          display:'grid', placeItems:'center'
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" style={{ color: 'var(--accent-3)' }}>
            <path d={icon} />
          </svg>
        </div>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-mute)', padding: '4px 8px', border: '1px solid var(--border)', borderRadius: 999 }}>{tag}</span>
      </div>
      <h3 style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 10 }}>{t}</h3>
      <p style={{ color: 'var(--text-dim)', fontSize: 14.5, lineHeight: 1.55 }}>{d}</p>
    </div>
  );
}

function ServicesSection() {
  return (
    <section id="servicios" className="shell">
      <div className="container">
        <div className="sh reveal">
          <span className="eyebrow"><span className="dot"/>Servicios</span>
          <h2 className="h-section">Todo lo que necesita tu producto<br/><span className="grad-text">para funcionar de verdad.</span></h2>
          <p className="h-sub">Diseño, desarrollo y automatización bajo un mismo techo. Entregas por fases, pagos por fase, sin sorpresas.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 20 }}>
          {serviceData.map((s, i) => <ServiceCard key={s.t} {...s} idx={i} />)}
        </div>
      </div>
    </section>
  );
}
window.ServicesSection = ServicesSection;