const { Button } = window.GrupoHaykDesignSystem_364dc7;

const HEADER_CSS = `
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--border-subtle); }
.site-header__in{ max-width:var(--container-max); margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; gap:28px; }

/* Compact horizontal navbar lockup — built from the brand isotipo + Sora wordmark.
   The stacked master lockup (logo-color.svg) keeps its micro-tagline legible only
   at large sizes, so for the navbar we use this responsive variant. Master lockup
   still appears full-size in the hero/footer. */
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand__mark{ height:46px; width:auto; display:block; flex:none; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__grupo{ font-family:var(--font-display); font-weight:600; font-size:11px;
  letter-spacing:.26em; color:var(--navy-600); text-transform:uppercase; }
.brand__name{ font-family:var(--font-display); font-weight:800; font-size:25px;
  letter-spacing:-.01em; color:var(--navy-900); margin-top:2px; }
.brand__tag{ font-family:var(--font-body); font-weight:700; font-size:11px;
  letter-spacing:.02em; margin-top:4px; color:var(--orange-700); }
.brand__tag i{ color:var(--gray-400); font-style:normal; margin:0 3px; }
.brand__tag b{ color:var(--green-700); font-weight:700; }

.site-nav{ display:flex; gap:26px; margin-left:8px; }
.site-nav a{ font-family:var(--font-body); font-weight:var(--fw-semibold); font-size:var(--fs-body-sm);
  color:var(--text-secondary); transition:color var(--dur-fast) var(--ease-standard); }
.site-nav a:hover{ color:var(--navy-700); }
.site-header__cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
@media(max-width:920px){ .site-nav{ display:none; } }
@media(max-width:480px){ .brand__text{ display:none; } }
`;
{
  const prev = document.getElementById('site-header-css');
  if (prev) prev.remove();
  const s = document.createElement('style'); s.id = 'site-header-css'; s.textContent = HEADER_CSS; document.head.appendChild(s);
}

function Header({ onQuote, onTrack }) {
  return (
    <header className="site-header">
      <div className="site-header__in">
        <a className="brand" href="#" aria-label="Grupo Haykù — Transporte y Distribución">
          <img className="brand__mark" src="assets/logos/isotipo-color.svg" alt="" aria-hidden="true" />
          <span className="brand__text">
            <span className="brand__grupo">Grupo</span>
            <span className="brand__name">Haykù</span>
            <span className="brand__tag">Transporte <i>|</i> <b>Distribución</b></span>
          </span>
        </a>
        <nav className="site-nav">
          <a href="#servicios">Servicios</a>
          <a href="#porque">Por qué Haykù</a>
          <a href="#flota">Flota</a>
          <a href="#rastreo">Rastreo</a>
        </nav>
        <div className="site-header__cta">
          <Button variant="ghost" size="sm" onClick={onTrack}>Rastrear envío</Button>
          <Button variant="cta" size="sm" arrow onClick={onQuote}>Cotiza tu envío</Button>
        </div>
      </div>
    </header>
  );
}
window.Header = Header;