Object.assign(window, { Header });

function Header() {
  const scrollToForm = e => {
    e.preventDefault();
    const btn = document.querySelector(".cta-btn");
    if (btn) btn.click();
    setTimeout(() => {
      const el = document.getElementById("registration");
      if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
    }, 80);
  };

  const navItems = [
    "Trámites Destacados",
    "El Ministerio",
    "Inclusión",
    "Seguridad Social y Pensiones",
    "Migraciones",
    "Comunicación",
    "Estadísticas",
  ];

  return (
    <header>
      {/* ── Yellow top bar ── */}
      <div className="gov-top-bar" style={{
        background: "#FECB02",
        padding: "8px 24px",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
          <img
            src="assets/images/logo.png"
            alt="Escudo de España"
            className="gov-logo-img"
            style={{ height: "52px" }}
            onError={e => e.target.style.display = "none"}
          />
        </div>

        <div className="gov-lang" style={{ display: "flex", alignItems: "center", gap: "4px", fontSize: "12px", fontFamily: "'Arial', sans-serif" }}>
          <a href="#" onClick={scrollToForm} style={{ color: "#1a1a1a", textDecoration: "none" }}>Castellano ▼</a>
          <span style={{ color: "#666", margin: "0 6px" }}>|</span>
          <a href="#" onClick={scrollToForm} style={{ color: "#1a1a1a", textDecoration: "none" }}>
            Buscar <span style={{ fontSize: "13px" }}>🔍</span>
          </a>
        </div>
      </div>

      {/* ── Blue nav bar ── */}
      <nav className="gov-nav" style={{
        background: "#003082",
        display: "flex",
        justifyContent: "center",
        flexWrap: "wrap",
        padding: "0 8px",
      }}>
        {navItems.map(item => (
          <a
            key={item}
            href="#registration"
            onClick={scrollToForm}
            style={{
              color: "#fff",
              textDecoration: "none",
              fontSize: "13px",
              fontFamily: "'Arial', sans-serif",
              padding: "11px 14px",
              whiteSpace: "nowrap",
              display: "inline-flex",
              alignItems: "center",
              gap: "3px",
              borderBottom: "3px solid transparent",
            }}
            onMouseEnter={e => e.currentTarget.style.borderBottomColor = "#FECB02"}
            onMouseLeave={e => e.currentTarget.style.borderBottomColor = "transparent"}
          >
            {item} ▾
          </a>
        ))}
      </nav>
    </header>
  );
}