/* Sticky site header — dark chrome, logo, nav, ESCUCHAR EN VIVO */
function Header({ playing, onToggle }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const el = document.querySelector("[data-site-scroll]") || window;
    const target = el === window ? window : el;
    const handler = () => {
      const y = target === window ? window.scrollY : target.scrollTop;
      setScrolled(y > 20);
    };
    target.addEventListener("scroll", handler);
    return () => target.removeEventListener("scroll", handler);
  }, []);
  const nav = [
    ["Programación", "#programacion"],
    ["La radio", "#campana"],
    ["Anunciá", "#anunciar"],
    ["App", "#app"],
    ["Contacto", "#contacto"],
  ];
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 60,
      background: scrolled ? "rgba(19,19,17,.92)" : "linear-gradient(to bottom, rgba(19,19,17,.85), rgba(19,19,17,0))",
      backdropFilter: scrolled ? "blur(12px)" : "none",
      borderBottom: scrolled ? "1px solid rgba(255,255,255,.08)" : "1px solid transparent",
      transition: "all .3s ease",
    }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "14px 28px", display: "flex", alignItems: "center", gap: 22 }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
          <img src="./assets/logo.png" alt="LA 100 Carlos Paz" style={{ height: 52, display: "block" }} />
        </a>
        <nav className="hdr-nav" style={{ display: "flex", gap: 4, marginLeft: 6 }}>
          {nav.map(([label, href]) => (
            <a key={label} href={href} style={{
              color: "rgba(255,255,255,.86)", textDecoration: "none",
              fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 14.5,
              padding: "9px 14px", borderRadius: 999, transition: "all .2s",
            }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(255,255,255,.1)"; e.currentTarget.style.color = LA.yellow; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "rgba(255,255,255,.86)"; }}
            >{label}</a>
          ))}
        </nav>
        <div style={{ flex: 1 }} />
        <button onClick={onToggle} style={{
          display: "inline-flex", alignItems: "center", gap: 10,
          background: LA.yellow, color: LA.black, border: "none", cursor: "pointer",
          fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14, letterSpacing: ".01em",
          padding: "11px 20px 11px 16px", borderRadius: 999,
          boxShadow: "0 6px 20px rgba(255,176,0,.4)",
          transition: "transform .15s var(--ease-pop)",
        }}
          onMouseDown={(e) => e.currentTarget.style.transform = "scale(.95)"}
          onMouseUp={(e) => e.currentTarget.style.transform = "scale(1)"}
          onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"}
        >
          {playing ? <Equalizer playing color={LA.black} /> : <PlayGlyph size={16} color={LA.black} />}
          {playing ? "EN VIVO" : "ESCUCHAR EN VIVO"}
        </button>
      </div>
    </header>
  );
}
window.Header = Header;