// Header.jsx — El País style newspaper header (responsive)

Object.assign(window, { Header });

function Header() {
  return (
    <header style={{ width: "100%", position: "sticky", top: 0, zIndex: 100, backgroundColor: "#fff" }}>
      <style>{`
        .lp-top-bar { border-bottom: 1px solid #e8e8e8; }
        .lp-top-inner {
          max-width: 1200px; margin: 0 auto;
          padding: 5px 16px;
          display: flex; align-items: center; justify-content: space-between;
        }
        .lp-top-left { display: flex; align-items: center; gap: 4px; }
        .lp-top-right { display: flex; align-items: center; gap: 8px; }
        .lp-suscribe-btn {
          background: #EFCA3A; color: #000;
          font-family: Arial, sans-serif; font-size: 12px; font-weight: 700;
          border: none; border-radius: 3px; padding: 5px 14px;
          cursor: pointer; text-transform: uppercase; letter-spacing: 0.3px;
          white-space: nowrap;
        }
        .lp-login-btn {
          display: flex; align-items: center; gap: 4px;
          border: 1px solid #bbb; border-radius: 3px; padding: 4px 10px; cursor: pointer;
          white-space: nowrap;
        }

        .lp-logo-bar { border-bottom: 1px solid #e8e8e8; }
        .lp-logo-inner {
          max-width: 1200px; margin: 0 auto;
          padding: 10px 16px;
          display: flex; align-items: center; position: relative;
        }
        .lp-hamburger { display: flex; flex-direction: column; gap: 4px; cursor: pointer; z-index: 1; }
        .lp-hamburger span { width: 18px; height: 1.5px; background: #000; border-radius: 1px; display: block; }
        .lp-logo-center {
          position: absolute; left: 50%; transform: translateX(-50%);
        }

        .lp-section-bar { border-bottom: 1px solid #d0d0d0; }
        .lp-section-inner {
          max-width: 1200px; margin: 0 auto;
          padding: 0 16px;
          display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
        }
        .lp-internacional {
          border-bottom: 3px solid #000;
          padding: 7px 0 5px;
          font-family: Arial, sans-serif; font-weight: 700; font-size: 17px; color: #000;
          white-space: nowrap;
        }
        .lp-subnav {
          display: flex; align-items: center;
          padding-bottom: 8px;
          overflow-x: auto; -webkit-overflow-scrolling: touch;
          scrollbar-width: none; gap: 0;
        }
        .lp-subnav::-webkit-scrollbar { display: none; }
        .lp-subnav a {
          font-family: Arial, sans-serif; font-size: 11px; color: #222;
          text-decoration: none; white-space: nowrap;
          padding: 0 10px; letter-spacing: 0.3px;
          border-right: 1px solid #ccc;
        }
        .lp-subnav a:last-child { border-right: none; }

        /* ── Mobile ── */
        @media (max-width: 600px) {
          .lp-top-inner  { padding: 4px 10px; }
          .lp-top-left   { display: none; }
          .lp-login-btn  { display: none; }
          .lp-logo-inner { padding: 8px 10px; }
          .lp-section-inner { flex-direction: column; align-items: flex-start; gap: 0; padding: 0 10px; }
          .lp-internacional { font-size: 15px; padding: 6px 0 4px; }
          .lp-subnav     { padding-bottom: 6px; width: 100%; }
          .lp-subnav a   { font-size: 10px; padding: 0 8px; }
        }
      `}</style>

      {/* Top utility bar */}
      <div className="lp-top-bar">
        <div className="lp-top-inner">
          <div className="lp-top-left">
            <span style={{ fontFamily: "Arial, sans-serif", fontSize: 12, color: "#444" }}>Seleccione:</span>
            <span style={{ fontFamily: "Arial, sans-serif", fontSize: 12, fontWeight: 700, color: "#111" }}>---</span>
            <span style={{ fontFamily: "Arial, sans-serif", fontSize: 10, color: "#555" }}>▼</span>
          </div>
          <div className="lp-top-right">
            <button className="lp-suscribe-btn">Suscríbete</button>
            <div className="lp-login-btn">
              <span style={{ fontFamily: "Arial, sans-serif", fontSize: 12, color: "#111" }}>Iniciar sesión</span>
              <span style={{ fontFamily: "Arial, sans-serif", fontSize: 9, color: "#555" }}>▼</span>
            </div>
          </div>
        </div>
      </div>

      {/* Logo bar */}
      <div className="lp-logo-bar">
        <div className="lp-logo-inner">
          <div className="lp-hamburger">
            <span /><span /><span />
          </div>
          <div className="lp-logo-center">
            <img src="assets/images/logo.png" alt="El País" style={{ height: 26, width: "auto", display: "block" }} />
          </div>
        </div>
      </div>

      {/* Internacional + secondary nav */}
      <div className="lp-section-bar">
        <div className="lp-section-inner">
          <div className="lp-internacional">Internacional</div>
          <nav className="lp-subnav">
            {["MERCADOS","VIVIENDA","FORMACIÓN","MIS DERECHOS","NEGOCIOS","CINCO DÍAS","RETINA","ÚLTIMAS NOTICIAS"].map((item, i) => (
              <a key={i} href="#">{item}</a>
            ))}
          </nav>
        </div>
      </div>
    </header>
  );
}