// Header.jsx — El Mundo style newspaper header (responsive)

Object.assign(window, { Header });

function Header() {
  return (
    <header style={{ width: "100%", position: "sticky", top: 0, zIndex: 100, backgroundColor: "#fff", boxShadow: "0 1px 3px rgba(0,0,0,0.1)" }}>

      {/* News ticker */}
      <div style={{ width: "100%", height: 20, 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.6)", whiteSpace: "nowrap", marginRight: 8, flexShrink: 0 }}>Es noticia</span>
          <div style={{ width: 1, height: 10, backgroundColor: "rgba(112,112,112,0.45)", marginRight: 8, flexShrink: 0 }} />
          <div style={{ display: "flex", overflow: "hidden", gap: 0 }}>
            {["Jaime Caravaca", "Aarhus", "Atropello SS Reyes", "Notas Corte Selectividad", "Rocío Carrasco", "Supervivientes", "ONCE", "Primitiva", "Bonoloto", "Calendario Lunar", "Traductor", "Programación TV"].map((item, i) => (
              <span key={i} style={{ fontFamily: "Roboto, sans-serif", fontSize: 10, color: "rgba(112,112,112,0.45)", padding: "0 12px", borderRight: "1px solid rgba(112,112,112,0.2)", whiteSpace: "nowrap" }}>{item}</span>
            ))}
            <span style={{ fontFamily: "Roboto, sans-serif", fontSize: 10, color: "rgba(112,112,112,0.45)", padding: "0 12px", whiteSpace: "nowrap" }}>Últimas noticias</span>
          </div>
        </div>
      </div>

      {/* Primary header */}
      <div style={{ width: "100%", height: 42, backgroundColor: "#fff", borderBottom: "1px solid #ececec", display: "flex", alignItems: "center" }}>
        <div className="hd-inner">
          <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
            <a href="#" style={{ fontFamily: "'Times New Roman', serif", fontSize: 13, color: "#000", textDecoration: "none", letterSpacing: "0.26px" }}>Portada</a>
          </div>
          {/* Logo — centered */}
          <div style={{ position: "absolute", left: "50%", transform: "translateX(-50%)" }}>
            <img src="assets/images/logo.png" alt="El Mundo" style={{ height: 28, width: "auto", display: "block" }} />
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <span style={{ fontFamily: "Arial, sans-serif", fontSize: 12, color: "#000", cursor: "pointer", whiteSpace: "nowrap" }}>Inicia sesión</span>
            <div style={{ display: "flex", flexDirection: "column", gap: 4, cursor: "pointer", flexShrink: 0 }}>
              <div style={{ width: 16, height: 1.5, backgroundColor: "#000", borderRadius: 1 }} />
              <div style={{ width: 16, height: 1.5, backgroundColor: "#000", borderRadius: 1 }} />
              <div style={{ width: 16, height: 1.5, backgroundColor: "#000", borderRadius: 1 }} />
            </div>
          </div>
        </div>
      </div>

      {/* Secondary nav */}
      <div style={{ width: "100%", height: 36, backgroundColor: "#f7f7f7", boxShadow: "0 1px 3px rgba(0,0,0,0.07)", display: "flex", alignItems: "center" }}>
        <div className="hd-sec-nav">
          {["España", "Opinión", "Actualidad Económica", "Internacional", "Deportes", "Cultura", "Tecnología"].map((item, i) => (
            <a key={i} href="#" style={{ fontFamily: "'Times New Roman', serif", fontSize: 13, color: "#000", textDecoration: "none", borderBottom: i === 0 ? "2px solid #ff0000" : "none", paddingBottom: i === 0 ? 2 : 0, whiteSpace: "nowrap", flexShrink: 0 }}>{item}</a>
          ))}
        </div>
      </div>
    </header>
  );
}