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

const HERO_CSS = `
.hero{ position:relative; color:#fff; overflow:hidden;
  background:linear-gradient(180deg, var(--navy-700) 0%, var(--navy-700) 42%, var(--navy-900) 100%); }
.hero::before{ content:""; position:absolute; inset:0;
  background-image:url('assets/patterns/patron-verde.svg'); background-size:200px; opacity:.45; }
.hero__ondas{ position:absolute; top:-30px; right:-40px; width:560px; opacity:.55; pointer-events:none;
  animation:hk-ondas-drift 11s ease-in-out infinite; will-change:transform; }
@keyframes hk-ondas-drift{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-36px); } }
@media (prefers-reduced-motion: reduce){ .hero__ondas{ animation:none; } }
.hero__in{ position:relative; max-width:var(--container-max); margin:0 auto; padding:84px 28px 96px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,1.5rem+3.4vw,4rem);
  line-height:1.05; letter-spacing:-.02em; color:#fff; margin:18px 0 0; }
.hero h1 .g{ color:var(--green-300); }
.hero__sub{ font-family:var(--font-body); font-size:var(--fs-body-lg); line-height:1.6;
  color:var(--navy-100); max-width:30em; margin:22px 0 30px; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__stats{ display:flex; gap:34px; margin-top:46px; padding-top:30px; border-top:1px solid rgba(255,255,255,.14); }
/* tracking card — glassmorphism */
.trk{ position:relative; border-radius:var(--radius-xl); padding:22px;
  background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.20); }
.trk__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.trk__id{ font-family:var(--font-body); font-weight:800; font-size:14px; color:#fff; letter-spacing:.02em; }
.trk__route{ display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.05);
  border-radius:var(--radius-md); padding:14px 16px; margin-bottom:14px; }
.trk__route .city{ font-family:var(--font-body); }
.trk__route .city b{ display:block; color:#fff; font-size:15px; font-weight:700; }
.trk__route .city span{ font-size:12px; color:var(--navy-100); }
.trk__line{ flex:1; height:2px; background:linear-gradient(90deg,var(--green-300),rgba(255,255,255,.2));
  position:relative; border-radius:2px; }
.trk__line::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--green-300); box-shadow:0 0 0 4px rgba(13,179,135,.25); }
.trk__metrics{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.trk__metric{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.05);
  border-radius:var(--radius-sm); padding:11px 12px; }
.trk__metric .v{ font-family:var(--font-body); }
.trk__metric .v b{ display:block; color:#fff; font-weight:800; font-size:16px; }
.trk__metric .v span{ font-size:11px; color:var(--navy-100); }
@media(max-width:880px){ .hero__in{ grid-template-columns:1fr; gap:40px; } .trk{ max-width:460px; } }
`;
{
  const _p = document.getElementById('hero-css'); if (_p) _p.remove();
  const s = document.createElement('style'); s.id = 'hero-css'; s.textContent = HERO_CSS; document.head.appendChild(s);
}

function Hero({ onQuote }) {
  return (
    <section className="hero">
      <img className="hero__ondas" src="assets/elements/ondas-verdes.svg" alt="" aria-hidden="true" />
      <div className="hero__in">
        <div>
          <Kicker onNavy>Transporte refrigerado y carga seca</Kicker>
          <h1>Más rápido,<br />más seguro,<br /><span className="g">más Haykù.</span></h1>
          <p className="hero__sub">
            Flota propia, control de temperatura en cada trayecto y la precisión que convierte
            una promesa en garantía operativa. 25 años moviendo cadena de frío en México.
          </p>
          <div className="hero__cta">
            <Button variant="cta" size="lg" arrow onClick={onQuote}>Cotiza tu envío</Button>
            <Button variant="secondary" size="lg" onNavy as="a" href="#servicios">Ver servicios</Button>
          </div>
          <div className="hero__stats">
            <Stat value={<CountUp end={25} />} suffix="años" label="de experiencia" onNavy />
            <Stat value={<CountUp end={99.4} decimals={1} />} suffix="%" label="Entregas a tiempo" onNavy />
            <Stat value={<CountUp end={100} />} suffix="%" label="Flota propia" onNavy />
          </div>
        </div>

        <div className="trk">
          <div className="trk__top">
            <span className="trk__id">Guía HK-48217</span>
            <Badge variant="solid-green">En ruta</Badge>
          </div>
          <div className="trk__route">
            <div className="city"><b>CDMX</b><span>Origen · 06:10</span></div>
            <div className="trk__line"></div>
            <div className="city" style={{ textAlign: 'right' }}><b>Monterrey</b><span>ETA 18:40</span></div>
          </div>
          <div className="trk__metrics">
            <div className="trk__metric"><BrandIcon name="temperatura" size={30} /><div className="v"><b>3.8 °C</b><span>Temperatura</span></div></div>
            <div className="trk__metric"><BrandIcon name="geolocalizacion" size={30} /><div className="v"><b>Km 612</b><span>Ubicación</span></div></div>
            <div className="trk__metric"><BrandIcon name="reefer" size={30} /><div className="v"><b>Reefer 40'</b><span>Unidad</span></div></div>
            <div className="trk__metric"><BrandIcon name="operador" size={30} /><div className="v"><b>J. Herrera</b><span>Operador</span></div></div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;