const { Kicker, Badge } = window.GrupoHaykDesignSystem_364dc7;

const FLOTA_CSS = `
.flota{ background:var(--surface-page); padding:90px 28px; }
.flota__in{ max-width:var(--container-max); margin:0 auto; }
.flota__head{ max-width:640px; margin-bottom:40px; }
.flota__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; }
.flota__head p{ font-family:var(--font-body); font-size:var(--fs-body-lg); color:var(--text-secondary);
  line-height:1.6; margin:0; }
.flota__grid{ display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:repeat(2, 280px); gap:16px; }
.flota__ph{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.flota__ph:first-child{ grid-row:span 2; }
.flota__ph img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-slow) var(--ease-out); }
.flota__ph:hover img{ transform:scale(1.035); }
.flota__ph figcaption{ position:absolute; left:0; right:0; bottom:0; padding:36px 18px 14px;
  background:linear-gradient(180deg, rgba(10,22,41,0) 0%, rgba(10,22,41,.78) 100%);
  font-family:var(--font-body); font-weight:700; font-size:14px; color:#fff; }
.flota__units{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; align-items:center; }
.flota__units-lbl{ font-family:var(--font-body); font-weight:800; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted); margin-right:6px; }
@media(max-width:880px){ .flota__grid{ grid-template-columns:1fr; grid-template-rows:auto; }
  .flota__ph{ height:260px; } .flota__ph:first-child{ grid-row:auto; } }
`;
{
  const _p = document.getElementById('flota-css'); if (_p) _p.remove();
  const s = document.createElement('style'); s.id = 'flota-css'; s.textContent = FLOTA_CSS; document.head.appendChild(s);
}

const UNIT_TYPES = ['Cam 1.5', 'Ram 3.5', 'Rabón', 'Tortón', 'Trailer 53"', 'Reefer 53"'];

function Flota() {
  return (
    <section className="flota" id="flota">
      <div className="flota__in">
        <div className="flota__head">
          <Kicker>Nuestra flota</Kicker>
          <h2>Unidades propias, listas para tu operación.</h2>
          <p>Equipo refrigerado y de carga seca, mantenido en casa y monitoreado en cada kilómetro. Esta es la flota que respalda cada promesa.</p>
        </div>
        <div className="flota__grid">
          <figure className="flota__ph" style={{ margin: 0 }}>
            <img src="assets/fleet/flota-reefer-noche.jpg" alt="Tractocamión con caja refrigerada de Grupo Haykù en andén" loading="lazy" />
            <figcaption>Reefer 53" · operación nocturna en andén</figcaption>
          </figure>
          <figure className="flota__ph" style={{ margin: 0 }}>
            <img src="assets/fleet/flota-unidades.jpg" alt="Unidades de la flota Haykù en patio" loading="lazy" />
            <figcaption>Unidades refrigeradas en patio</figcaption>
          </figure>
          <figure className="flota__ph" style={{ margin: 0 }}>
            <img src="assets/fleet/flota-andenes.jpg" alt="Tractocamión Haykù maniobrando en centro de distribución" loading="lazy" />
            <figcaption>Maniobra en centro de distribución</figcaption>
          </figure>
        </div>
        <div className="flota__units">
          <span className="flota__units-lbl">Tipos de unidad</span>
          {UNIT_TYPES.map((u) => <Badge key={u} variant="info">{u}</Badge>)}
        </div>
      </div>
    </section>
  );
}
window.Flota = Flota;