// SERVICIOS — Desarrollo es el principal (card grande), Web/Móvil secundarios
const servicesData = [
  {
    id: 'sistemas',
    big: true,
    tag: '01 · Servicio principal',
    title: 'Sistemas informáticos a medida',
    desc: 'Plataformas, ERPs y CRMs diseñados para tu operación específica. Reemplazamos hojas de cálculo, procesos manuales y software genérico por sistemas que se adaptan exactamente a cómo trabaja tu equipo.',
    features: [
      'ERPs · CRMs · Sistemas de gestión',
      'Plataformas SaaS multiusuario',
      'Integraciones con SUNAT, pasarelas de pago y APIs',
      'Migración desde sistemas legacy',
      'Mantenimiento evolutivo continuo',
    ],
    icon: 'sistemas',
    accent: '#4F8CFF',
  },
  {
    id: 'web',
    tag: '02 · Web',
    title: 'Aplicaciones y sitios web',
    desc: 'Aplicaciones web reactivas, portales corporativos y landings de alto rendimiento. SEO técnico, accesibilidad y velocidad como base.',
    features: ['SPAs con React/Next.js', 'Portales corporativos', 'E-commerce a medida', 'Landings de campaña'],
    icon: 'web',
    accent: '#A855F7',
  },
  {
    id: 'movil',
    tag: '03 · Móvil',
    title: 'Apps móviles iOS y Android',
    desc: 'Aplicaciones nativas y multiplataforma con sincronización offline, notificaciones push y publicación en stores.',
    features: ['React Native · Flutter', 'Sincronización offline-first', 'Push notifications', 'Publicación en App Store y Google Play'],
    icon: 'movil',
    accent: '#22D3EE',
  },
  {
    id: 'hosting',
    tag: '04 · Hosting',
    title: 'Alojamiento web profesional',
    desc: 'Servidores optimizados para los sistemas que desarrollamos. Espacio ilimitado, SSL, correos corporativos y soporte 24/7.',
    features: ['Espacio y ancho de banda ilimitado', 'Dominios y SSL incluidos', 'Bases de datos MySQL/Postgres', 'Soporte 24/7'],
    icon: 'hosting',
    accent: '#8B5CF6',
  },
];

const serviceIcons = {
  sistemas: (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="6" y="10" width="52" height="36" rx="3"/>
      <path d="M6 18 H58"/>
      <circle cx="11" cy="14" r="1" fill="currentColor"/>
      <circle cx="15" cy="14" r="1" fill="currentColor"/>
      <path d="M14 26 L22 34 L14 42 M28 42 H42" />
      <path d="M24 54 H40 M32 46 V54"/>
    </svg>
  ),
  web: (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
      <circle cx="32" cy="32" r="22"/>
      <ellipse cx="32" cy="32" rx="10" ry="22"/>
      <path d="M10 32 H54"/>
    </svg>
  ),
  movil: (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="20" y="6" width="24" height="52" rx="4"/>
      <path d="M28 12 H36"/>
      <circle cx="32" cy="52" r="1.5" fill="currentColor"/>
      <path d="M24 18 H40 M24 24 H36 M24 30 H38"/>
    </svg>
  ),
  hosting: (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="10" y="14" width="44" height="12" rx="2"/>
      <rect x="10" y="30" width="44" height="12" rx="2"/>
      <rect x="10" y="46" width="44" height="10" rx="2"/>
      <circle cx="17" cy="20" r="1.2" fill="currentColor"/>
      <circle cx="17" cy="36" r="1.2" fill="currentColor"/>
      <circle cx="17" cy="51" r="1.2" fill="currentColor"/>
      <path d="M24 20 H46 M24 36 H46 M24 51 H40"/>
    </svg>
  ),
};

function ServiceCard({ s }) {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    const x = ((e.clientX - r.left) / r.width) * 100;
    const y = ((e.clientY - r.top) / r.height) * 100;
    ref.current.style.setProperty('--mx', `${x}%`);
    ref.current.style.setProperty('--my', `${y}%`);
  };

  return (
    <div
      ref={ref}
      onMouseMove={onMove}
      className="surface"
      style={{
        gridColumn: s.big ? '1 / -1' : 'span 1',
        padding: s.big ? '40px' : '32px',
        display: 'flex',
        flexDirection: s.big ? 'row' : 'column',
        gap: s.big ? 48 : 24,
        position: 'relative',
        minHeight: s.big ? 360 : 320,
        background: `
          radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), ${s.accent}22, transparent 60%),
          linear-gradient(180deg, rgba(19,24,45,0.7), rgba(10,14,31,0.7))
        `,
      }}
    >
      <div style={{ flex: s.big ? '0 0 42%' : 'initial', display: 'flex', flexDirection: 'column', gap: 16 }}>
        <span className="badge">{s.tag}</span>
        <div style={{
          width: s.big ? 88 : 64, height: s.big ? 88 : 64, borderRadius: 16,
          background: `linear-gradient(135deg, ${s.accent}22, ${s.accent}08)`,
          border: `1px solid ${s.accent}44`,
          display: 'grid', placeItems: 'center', color: s.accent,
          boxShadow: `0 20px 40px -10px ${s.accent}44`,
          marginTop: 8,
        }}>
          <div style={{ width: s.big ? 44 : 32, height: s.big ? 44 : 32 }}>{serviceIcons[s.icon]}</div>
        </div>
        <h3 style={{ marginTop: 8, fontSize: s.big ? 32 : 22, letterSpacing: '-0.02em' }}>{s.title}</h3>
        {!s.big && <p style={{ fontSize: 14, color: 'var(--fg-2)' }}>{s.desc}</p>}
        {!s.big && (
          <ul style={{ listStyle: 'none', padding: 0, margin: '8px 0 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
            {s.features.map(f => (
              <li key={f} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--fg-3)', letterSpacing: '.04em' }}>
                <span style={{ color: s.accent, marginTop: 2 }}>▸</span>
                {f}
              </li>
            ))}
          </ul>
        )}
      </div>
      {s.big && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 20, justifyContent: 'center' }}>
          <p style={{ fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.6 }}>{s.desc}</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {s.features.map(f => (
              <li key={f} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13.5, color: 'var(--fg-2)' }}>
                <span style={{
                  width: 18, height: 18, borderRadius: 4, flex: '0 0 18px',
                  background: `linear-gradient(135deg, ${s.accent}, ${s.accent}88)`,
                  display: 'grid', placeItems: 'center', marginTop: 1,
                }}>
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3"><path d="M5 12l5 5L20 7"/></svg>
                </span>
                {f}
              </li>
            ))}
          </ul>
          <a href="#contacto" style={{
            marginTop: 12, display: 'inline-flex', alignItems: 'center', gap: 8,
            fontSize: 14, color: s.accent, fontFamily: 'var(--font-mono)', letterSpacing: '.06em',
          }}>
            Cotizar este servicio
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M5 12h14M13 6l6 6-6 6"/>
            </svg>
          </a>
        </div>
      )}
    </div>
  );
}

function Services() {
  return (
    <section id="servicios">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Servicios</span>
          <h2>Software que <span className="gradient-text">resuelve</span><br/> problemas reales del negocio.</h2>
          <p style={{ fontSize: 17, maxWidth: 620 }}>
            Cuatro líneas de servicio. El núcleo es el desarrollo de sistemas informáticos a medida —
            ahí entregamos el mayor impacto operativo. El resto soporta tu producto digital completo.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 20,
        }} className="services-grid">
          {servicesData.map(s => <ServiceCard key={s.id} s={s} />)}
        </div>
      </div>

      <style>{`
        @media (max-width: 1100px){
          .services-grid{ grid-template-columns: repeat(2, 1fr) !important; }
          .services-grid > .surface[style*="1 / -1"]{ grid-column: 1 / -1 !important; }
        }
        @media (max-width: 720px){
          .services-grid{ grid-template-columns: 1fr !important; }
          .services-grid > .surface{ grid-column: span 1 !important; flex-direction: column !important; }
        }
      `}</style>
    </section>
  );
}
window.Services = Services;