Object.assign(window, { Header });

function Header() {
  const scrollToForm = e => {
    e.preventDefault();
    const el = document.getElementById("registration");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
  };

  const navItems = [
    "Qué es el SEPE",
    "Prestaciones",
    "Encontrar trabajo",
    "Formación en el trabajo",
    "Empresas",
    "Autónomos",
    "ERTE / RED",
    "Observatorio de las Ocupaciones",
    "Más información",
  ];

  return (
    <header style={{ background: "#fff", position: "sticky", top: 0, zIndex: 100, boxShadow: "0 1px 4px rgba(0,0,0,0.1)" }}>
      {/* ── Top logos bar ── */}
      <div className="sepe-top-bar" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "10px 24px", borderBottom: "1px solid #e5e5e5",
      }}>
        {/* Logos left */}
        <div>
          <img src="assets/images/header-logos.png"
            alt="Gobierno de España — Ministerio de Trabajo y Economía Social — SEPE — Agenda 2030"
            className="sepe-header-logo"
            style={{ height: "68px", display: "block" }}
            onError={e => e.target.style.display = "none"} />
        </div>

        {/* Right: buttons + language + search */}
        <div className="sepe-header-right" style={{ display: "flex", alignItems: "center", gap: "8px", fontFamily: "Arial, sans-serif" }}>
          <a href="#" onClick={scrollToForm} className="sepe-btn-pill sepe-btn-cita">
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
              <rect x="1" y="3" width="12" height="10" rx="1" stroke="white" strokeWidth="1.3"/>
              <path d="M1 6h12M4.5 1v3M9.5 1v3" stroke="white" strokeWidth="1.3" strokeLinecap="round"/>
            </svg>
            Cita Previa
          </a>
          <a href="#" onClick={scrollToForm} className="sepe-btn-pill sepe-btn-sede">
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
              <circle cx="7" cy="7" r="5.5" stroke="white" strokeWidth="1.3"/>
              <circle cx="7" cy="7" r="2" stroke="white" strokeWidth="1.3"/>
            </svg>
            Sede electrónica
          </a>
          <span className="sepe-lang" style={{ fontSize: "13px", color: "#333", cursor: "default" }}>Español</span>
          <svg className="sepe-search-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" style={{ cursor: "pointer" }}>
            <circle cx="7.5" cy="7.5" r="5" stroke="#333" strokeWidth="1.5"/>
            <path d="M11.5 11.5L15.5 15.5" stroke="#333" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </div>
      </div>

      {/* ── Secondary nav ── */}
      <nav className="sepe-nav" style={{
        display: "flex", justifyContent: "center",
        padding: "0 8px", background: "#fff",
        overflowX: "auto", scrollbarWidth: "none",
      }}>
        {navItems.map(item => (
          <a
            key={item}
            href="#"
            onClick={scrollToForm}
            style={{
              color: "#1a1a1a", textDecoration: "none",
              fontSize: "13px", fontFamily: "Arial, sans-serif",
              padding: "12px 11px", whiteSpace: "nowrap",
              display: "inline-flex", alignItems: "center",
              borderBottom: "3px solid transparent",
            }}
            onMouseEnter={e => e.currentTarget.style.borderBottomColor = "#003082"}
            onMouseLeave={e => e.currentTarget.style.borderBottomColor = "transparent"}
          >
            {item}
          </a>
        ))}
      </nav>
    </header>
  );
}
