const { FeatureCard, Kicker } = window.GrupoHaykDesignSystem_364dc7;

const SERVICES_CSS = `
.services{ background:var(--surface-page); padding:90px 28px; }
.services__in{ max-width:var(--container-max); margin:0 auto; }
.services__head{ max-width:640px; margin-bottom:44px; }
.services__head h2{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h2);
  letter-spacing:-.02em; color:var(--text-primary); margin:14px 0 14px; }
.services__head p{ font-family:var(--font-body); font-size:var(--fs-body-lg); color:var(--text-secondary);
  line-height:1.6; margin:0; }
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:900px){ .services__grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .services__grid{ grid-template-columns:1fr; } }
`;
{
  const _p = document.getElementById('services-css'); if (_p) _p.remove();
  const s = document.createElement('style'); s.id = 'services-css'; s.textContent = SERVICES_CSS; document.head.appendChild(s);
}

const ITEMS = [
  ['reefer', 'Transporte refrigerado', 'Equipo reefer propio de −20 °C a temperatura ambiente, certificado para cadena de frío.'],
  ['carga', 'Carga seca', 'Distribución nacional de carga general con la misma puntualidad y trazabilidad.'],
  ['temperatura', 'Control de temperatura', 'Registro continuo y alertas en cada trayecto. La temperatura nunca queda al azar.'],
  ['geolocalizacion', 'Rastreo en vivo', 'Ubicación y condiciones de tu carga en tiempo real, desde el origen hasta la entrega.'],
  ['seguridad', 'Carga segura', 'Protocolos de seguridad, monitoreo y custodia para que tu mercancía llegue íntegra.'],
  ['operador', 'Operadores propios', 'Personal capacitado y de planta — trato humano y experiencia detrás del volante.'],
];

function Services() {
  return (
    <section className="services" id="servicios">
      <div className="services__in">
        <div className="services__head">
          <Kicker>Lo que movemos</Kicker>
          <h2>Cadena de frío sin interrupciones, carga seca sin sorpresas.</h2>
          <p>Un solo operador logístico para todo lo que tu producto necesita — con flota propia y control de punta a punta.</p>
        </div>
        <div className="services__grid">
          {ITEMS.map(([icon, title, body]) => (
            <FeatureCard key={title} icon={icon} title={title} interactive>{body}</FeatureCard>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Services = Services;