const { Kicker, Stat, BrandIcon } = window.GrupoHaykDesignSystem_364dc7;

const WHY_CSS = `
.why{ position:relative; background:var(--navy-800); color:#fff; padding:88px 28px; overflow:hidden; }
.why::before{ content:""; position:absolute; inset:0;
  background-image:url('assets/patterns/patron-verde.svg'); background-size:220px; opacity:.35; }
.why__in{ position:relative; max-width:var(--container-max); margin:0 auto; }
.why__head{ display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; margin-bottom:48px; }
.why__head h2{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h2);
  letter-spacing:-.02em; color:#fff; margin:14px 0 0; max-width:14ch; }
.why__stats{ display:flex; gap:38px; }
.why__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.why__col{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg); padding:26px; }
.why__col .ic{ width:56px; height:56px; border-radius:var(--radius-md); background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.why__col h3{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h4); color:#fff; margin:0 0 8px; }
.why__col p{ font-family:var(--font-body); font-size:var(--fs-body); color:var(--navy-100); line-height:1.6; margin:0; }
@media(max-width:880px){ .why__head{ grid-template-columns:1fr; } .why__cols{ grid-template-columns:1fr; } .why__stats{ flex-wrap:wrap; } }
`;
{
  const _p = document.getElementById('why-css'); if (_p) _p.remove();
  const s = document.createElement('style'); s.id = 'why-css'; s.textContent = WHY_CSS; document.head.appendChild(s);
}

const COLS = [
  ['puntualidad', 'Puntualidad', 'La precisión que convierte una promesa en garantía operativa. Llegamos cuando dijimos que llegaríamos.'],
  ['cadena-frio', 'Confianza técnica', 'Equipo certificado, registro de temperatura y procesos auditables. Tu producto, protegido.'],
  ['seguridad', 'Trato humano', 'Operadores de planta y un equipo que responde. Detrás de cada envío hay personas, no tickets.'],
];

function WhyBand() {
  return (
    <section className="why" id="porque">
      <div className="why__in">
        <div className="why__head">
          <div>
            <Kicker onNavy>Por qué Haykù</Kicker>
            <h2>Confianza técnica, con alma logística.</h2>
          </div>
          <div className="why__stats">
            <Stat value="+8M" suffix="km" label="Recorridos al año" onNavy />
            <Stat value="−20" suffix="°C" label="Control mínimo" onNavy />
            <Stat value="24/7" label="Monitoreo activo" onNavy />
          </div>
        </div>
        <div className="why__cols">
          {COLS.map(([icon, title, body]) => (
            <div className="why__col" key={title}>
              <div className="ic"><BrandIcon name={icon} size={34} /></div>
              <h3>{title}</h3>
              <p>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WhyBand = WhyBand;