// Header.jsx

Object.assign(window, { Header });

function Header() {
  const TICKER_ITEMS = [
    "ES NOTICIA", "Mbappé Real Madrid", "Jaime Caravaca", "Aarhus",
    "Atropello SS Reyes", "Notas Corte Selectividad", "Rocío Carrasco",
    "Supervivientes", "ONCE", "Primitiva", "Bonoloto",
    "Calendario Lunar junio", "Traductor", "Programación TV", "Últimas noticias",
  ];

  const NAV_PRIMARY = [
    { label: "España",        active: false },
    { label: "Opinión",       active: false },
    { label: "España",        active: true  },
    { label: "Internacional", active: false },
    { label: "Deportes",      active: false },
    { label: "Cultura",       active: false },
  ];

  const NAV_SECONDARY = [
    { label: "España",          active: false, first: true },
    { label: "Dinero e inversión", active: true  },
    { label: "Ahorro",          active: false },
    { label: "Macroeconomía",   active: false },
    { label: "Empresas",        active: false },
    { label: "Vivienda",        active: false },
    { label: "Más",             active: false },
  ];

  const Logo = () => (
    <>
      <img
        src="assets/images/logo.png"
        alt="El Mundo"
        style={{ height: 32, width: "auto", display: "block" }}
        onError={e => { e.target.style.display = "none"; e.target.nextSibling.style.display = "flex"; }}
      />
      <span style={{ display: "none", alignItems: "center", fontFamily: "'Times New Roman', serif", fontWeight: 900, fontSize: 22, color: "#111", letterSpacing: -1, whiteSpace: "nowrap" }}>
        EL
        <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 14, height: 14, background: "#111", borderRadius: "50%", margin: "0 2px" }}>
          <span style={{ width: 7, height: 7, borderRadius: "50%", border: "2px solid #fff", display: "block" }} />
        </span>
        MUNDO
      </span>
    </>
  );

  return (
    <header style={{ width: "100%", position: "sticky", top: 0, zIndex: 100, background: "#fff", boxShadow: "0 1px 4px rgba(0,0,0,0.10)" }}>

      {/* ── Ticker ── */}
      <div className="hd-ticker-row" style={{ width: "100%", height: 26, borderBottom: "1px solid #e8e8e8", overflow: "hidden", display: "flex", alignItems: "center", padding: "0 20px" }}>
        <p style={{ margin: 0, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontFamily: "Arial, sans-serif", fontSize: 11, color: "#555" }}>
          {TICKER_ITEMS.map((item, i) => (
            <React.Fragment key={i}>
              {i === 0
                ? <strong style={{ color: "#111", marginRight: 2 }}>{item}</strong>
                : <span style={{ cursor: "pointer" }}>{item}</span>}
              {i < TICKER_ITEMS.length - 1 && <span style={{ color: "#ccc", margin: "0 8px" }}>|</span>}
            </React.Fragment>
          ))}
        </p>
      </div>

      {/* ── Primary nav — DESKTOP ── */}
      <div className="hd-primary-desktop" style={{ width: "100%", height: 56, borderBottom: "1px solid #e8e8e8", background: "#fff" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 20px", height: "100%", display: "flex", alignItems: "center", gap: 0 }}>

          {/* Logo */}
          <div style={{ flexShrink: 0, marginRight: 28, display: "flex", alignItems: "center" }}>
            <Logo />
          </div>

          {/* Nav links */}
          <nav style={{ display: "flex", alignItems: "center", flex: 1, gap: 0 }}>
            {NAV_PRIMARY.map((item, i) => (
              <a key={i} href="#" style={{
                fontFamily: "Arial, sans-serif",
                fontSize: 13,
                fontWeight: item.active ? 700 : 400,
                color: "#111",
                textDecoration: "none",
                padding: "0 14px",
                height: 56,
                display: "flex",
                alignItems: "center",
                whiteSpace: "nowrap",
                borderBottom: item.active ? "2px solid #111" : "2px solid transparent",
              }}>
                {item.label}
              </a>
            ))}

            {/* Menú */}
            <a href="#" style={{
              fontFamily: "Arial, sans-serif", fontSize: 13, fontWeight: 400,
              color: "#111", textDecoration: "none", padding: "0 14px",
              height: 56, display: "flex", alignItems: "center", gap: 6,
              whiteSpace: "nowrap",
            }}>
              Menú
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#111" strokeWidth="2" strokeLinecap="round">
                <line x1="3" y1="6"  x2="21" y2="6"/>
                <line x1="3" y1="12" x2="21" y2="12"/>
                <line x1="3" y1="18" x2="21" y2="18"/>
              </svg>
            </a>
          </nav>

          {/* Inicia sesión */}
          <a href="#" style={{
            fontFamily: "Arial, sans-serif", fontSize: 13, color: "#111",
            textDecoration: "none", whiteSpace: "nowrap", flexShrink: 0, marginLeft: "auto",
          }}>
            Inicia sesión
          </a>
        </div>
      </div>

      {/* ── Primary nav — MOBILE ── */}
      <div className="hd-primary-mobile" style={{ display: "none", width: "100%", height: 52, borderBottom: "1px solid #e8e8e8", background: "#fff" }}>
        <div style={{ padding: "0 16px", height: "100%", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <Logo />
          <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
            <svg width="22" height="22" 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>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#111" strokeWidth="2" strokeLinecap="round">
              <line x1="3" y1="6"  x2="21" y2="6"/>
              <line x1="3" y1="12" x2="21" y2="12"/>
              <line x1="3" y1="18" x2="21" y2="18"/>
            </svg>
          </div>
        </div>
      </div>

      {/* ── Secondary nav — DESKTOP ── */}
      <div className="hd-sec-desktop" style={{ width: "100%", background: "#fff", borderBottom: "1px solid #ddd" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 20px", height: 38, display: "flex", alignItems: "center" }}>
          {NAV_SECONDARY.map((item, i) => (
            <a key={i} href="#" style={{
              fontFamily: "Arial, sans-serif",
              fontSize: 13,
              fontWeight: (item.first || item.active) ? 700 : 400,
              color: "#111",
              textDecoration: "none",
              padding: item.first ? "0 16px 0 0" : "0 16px",
              height: 38,
              display: "flex",
              alignItems: "center",
              whiteSpace: "nowrap",
              flexShrink: 0,
              borderLeft: item.first ? "3px solid #111" : "none",
              paddingLeft: item.first ? 10 : undefined,
              borderBottom: item.active ? "2px solid #111" : "2px solid transparent",
            }}>
              {item.label}
            </a>
          ))}
        </div>
      </div>

      {/* ── Secondary nav — MOBILE ── */}
      <div className="hd-sec-mobile" style={{ display: "none", width: "100%", height: 40, background: "#fff", borderBottom: "1px solid #ddd" }}>
        <div style={{ padding: "0 16px", height: "100%", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 14, color: "#111" }}>España</span>
          <svg width="16" height="16" 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>
      </div>

    </header>
  );
}