// Header.jsx

Object.assign(window, { Header });

function Header() {
  const TICKER_ITEMS = [
    "Pedro Sánchez", "Begoña Gómez", "Jordi Évole", "Juicio Peinado",
    "Banco de España", "Inflación", "Crisis económica", "Horizon AI",
    "Mercados financieros", "Elecciones", "IBEX 35", "Euríbor",
  ];

  return (
    <header style={{ width: "100%", position: "sticky", top: 0, zIndex: 100, backgroundColor: "#fff", boxShadow: "0 2px 10px rgba(0,0,0,0.13)" }}>

      {/* Ticker — desktop only */}
      <div className="hd-ticker-row" style={{ width: "100%", height: 22, backgroundColor: "#fff", borderBottom: "1px solid #ececec", overflow: "hidden", display: "flex", alignItems: "center" }}>
        <div className="hd-ticker">
          <span style={{ fontFamily: "Roboto, sans-serif", fontSize: 10, color: "rgba(112,112,112,0.7)", whiteSpace: "nowrap", marginRight: 8, flexShrink: 0, paddingLeft: 16 }}>
            Es noticia
          </span>
          <div style={{ width: 1, height: 10, backgroundColor: "rgba(112,112,112,0.4)", marginRight: 8, flexShrink: 0 }} />
          <div style={{ overflow: "hidden", flex: 1 }}>
            <div className="ticker-track">
              {[...TICKER_ITEMS, ...TICKER_ITEMS].map((item, i) => (
                <span key={i} style={{ fontFamily: "Roboto, sans-serif", fontSize: 10, color: "rgba(112,112,112,0.5)", padding: "0 14px", borderRight: "1px solid rgba(112,112,112,0.18)", whiteSpace: "nowrap" }}>
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Primary header */}
      <div style={{ width: "100%", height: 44, backgroundColor: "#fff", borderBottom: "1px solid #e8e8e8", position: "relative" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 16px", display: "flex", alignItems: "center", justifyContent: "space-between", height: "100%", gap: 12 }}>

          {/* Left nav — desktop only */}
          <div className="hd-nav-left" style={{ display: "flex", alignItems: "center", gap: 18, flexShrink: 0 }}>
            {["España", "Opinión"].map((item, i) => (
              <a key={i} href="#" style={{ fontFamily: "'Times New Roman', serif", fontSize: 13, color: "#111", textDecoration: "none", whiteSpace: "nowrap" }}>{item}</a>
            ))}
            <a href="#" style={{ fontFamily: "'Times New Roman', serif", fontSize: 13, color: "#111", textDecoration: "none", whiteSpace: "nowrap", fontWeight: 700 }}>España</a>
            {["Internacional", "Deportes", "Cultura"].map((item, i) => (
              <a key={i} href="#" style={{ fontFamily: "'Times New Roman', serif", fontSize: 13, color: "#111", textDecoration: "none", whiteSpace: "nowrap" }}>{item}</a>
            ))}
            <span style={{ fontFamily: "Arial, sans-serif", fontSize: 13, color: "#111", cursor: "pointer", whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: 4 }}>
              Menú
              <span style={{ display: "flex", flexDirection: "column", gap: 2.5 }}>
                <span style={{ display: "block", width: 14, height: 1.5, background: "#111", borderRadius: 1 }} />
                <span style={{ display: "block", width: 14, height: 1.5, background: "#111", borderRadius: 1 }} />
                <span style={{ display: "block", width: 14, height: 1.5, background: "#111", borderRadius: 1 }} />
              </span>
            </span>
          </div>

          {/* Logo — desktop: absolute center / mobile: static left via CSS */}
          <div className="hd-logo-center" style={{ position: "absolute", left: "50%", transform: "translateX(-50%)" }}>
            <img src="assets/images/logo.png" alt="El Mundo" style={{ height: 26, width: "auto", display: "block" }}
              onError={e => {
                e.target.style.display = "none";
                e.target.nextSibling.style.display = "block";
              }}
            />
            <span style={{ display: "none", fontFamily: "'Times New Roman', serif", fontWeight: 900, fontSize: 22, color: "#111", letterSpacing: -0.5, whiteSpace: "nowrap" }}>
              EL<span style={{ display: "inline-block", width: 14, height: 14, background: "#111", borderRadius: "50%", verticalAlign: "middle", margin: "0 1px" }} />MUNDO
            </span>
          </div>

          {/* Right group */}
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
            <span className="hd-badge" style={{ background: "#ffd700", color: "#111", fontFamily: "Arial, sans-serif", fontWeight: 800, fontSize: 12, padding: "3px 8px", borderRadius: 3, whiteSpace: "nowrap", letterSpacing: 0.2 }}>
              SOLO 8,99€ /AÑO
            </span>
            {/* Desktop: text login */}
            <span className="hd-login-text" style={{ fontFamily: "Arial, sans-serif", fontSize: 12, color: "#111", cursor: "pointer", whiteSpace: "nowrap" }}>
              Inicia sesión
            </span>
            {/* Mobile: person icon */}
            <div className="hd-login-icon" style={{ display: "none", cursor: "pointer", padding: "2px" }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#111" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                <circle cx="12" cy="7" r="4"/>
              </svg>
            </div>
            {/* Mobile: hamburger (right side) */}
            <div className="hd-hamburger-right" style={{ display: "none", alignItems: "center", cursor: "pointer", padding: "4px 2px", flexShrink: 0 }}>
              <span style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <span style={{ display: "block", width: 20, height: 2, background: "#111", borderRadius: 1 }} />
                <span style={{ display: "block", width: 20, height: 2, background: "#111", borderRadius: 1 }} />
                <span style={{ display: "block", width: 20, height: 2, background: "#111", borderRadius: 1 }} />
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Secondary nav — desktop */}
      <div className="hd-sec-desktop" style={{ width: "100%", height: 36, backgroundColor: "#f9f9f9", borderBottom: "2px solid #ddd" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 16px", display: "flex", alignItems: "center", height: "100%", gap: 0, overflowX: "auto" }} className="hd-sec-nav">
          {[
            { label: "España",            active: true  },
            { label: "Dinero e inversión", active: false },
            { label: "Ahorro",            active: false },
            { label: "Macroeconomía",     active: false },
            { label: "Empresas",          active: false },
            { label: "Vivienda",          active: false },
            { label: "Más",               active: false },
          ].map((item, i) => (
            <a key={i} href="#" style={{
              fontFamily: "'Times New Roman', serif", fontSize: 13, color: "#111", textDecoration: "none",
              whiteSpace: "nowrap", flexShrink: 0, padding: "0 14px", height: "100%",
              display: "flex", alignItems: "center",
              borderRight: i === 0 ? "1px solid #ddd" : "none",
              fontWeight: item.active ? 700 : 400,
              borderBottom: item.active ? "2px solid #111" : "none",
            }}>
              {item.label}
            </a>
          ))}
        </div>
      </div>

      {/* Secondary nav — mobile: España + chevron */}
      <div className="hd-sec-mobile" style={{ display: "none", width: "100%", height: 38, backgroundColor: "#fff", borderBottom: "2px solid #ddd", alignItems: "center", justifyContent: "space-between", padding: "0 16px" }}>
        <span style={{ fontFamily: "'Times New Roman', serif", fontWeight: 700, fontSize: 14, color: "#111" }}>España</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#111" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="6 9 12 15 18 9"/>
        </svg>
      </div>

      {/* Gradient fade — smooths header/content boundary on scroll */}
      <div style={{ position: "absolute", bottom: -20, left: 0, right: 0, height: 20, background: "linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0))", pointerEvents: "none", zIndex: 1 }} />
    </header>
  );
}