// SiteHeader — sticky nav with logo, links, book CTA. Composes Button.
const { Button } = window.BluePhoenixDesignSystem_f91d3d;

function SiteHeader({ onBook, onNav, active }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menu, setMenu] = React.useState(false);
  React.useEffect(() => {
    const el = document.querySelector("[data-scroll]");
    const fn = () => setScrolled((el ? el.scrollTop : window.scrollY) > 20);
    (el || window).addEventListener("scroll", fn);
    return () => (el || window).removeEventListener("scroll", fn);
  }, []);
  const links = ["Trips", "Boats", "Photos", "About", "FAQ"];
  return (
    <header className="bp-header" style={{
      position: "sticky", top: 0, zIndex: 50,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "12px 32px",
      background: scrolled ? "rgba(255,255,255,.9)" : "var(--surface-page)",
      backdropFilter: scrolled ? "blur(10px)" : "none",
      borderBottom: `1px solid ${scrolled ? "var(--border-subtle)" : "transparent"}`,
      boxShadow: scrolled ? "var(--shadow-sm)" : "none",
      transition: "all var(--dur-base) var(--ease-out)",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14, cursor: "pointer", height: 64 }} onClick={() => onNav("home")}>
        <img src={window.BP_ASSETS.logo} alt="Blue Phoenix" className="bp-logo" style={{ height: scrolled ? 64 : 88, margin: scrolled ? 0 : "-12px 0", transition: "height var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out)" }} />
        <div style={{ lineHeight: 1 }}>
          <div className="bp-wordmark" style={{ fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--text-strong)", fontSize: 20 }}>Blue Phoenix</div>
          <div className="bp-wordmark-sub" style={{ fontFamily: "var(--font-display)", fontWeight: 600, textTransform: "uppercase", letterSpacing: ".26em", color: "var(--bp-cyan-700)", fontSize: 9.5 }}>Sportfishing · Los Cabos</div>
        </div>
      </div>
      <nav className="bp-nav" style={{ display: "flex", alignItems: "center", gap: 32 }}>
        {links.map(l => (
          <a key={l} className="bp-nav-link" onClick={() => onNav(l)} style={{
            fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, textTransform: "uppercase", letterSpacing: ".1em",
            color: active === l ? "var(--bp-cyan-700)" : "#000", cursor: "pointer", transition: "color var(--dur-fast)",
          }}>{l}</a>
        ))}
        <span className="bp-book-desktop"><Button variant="primary" size="md" onClick={onBook} style={{ borderColor: "transparent" }}>Book Charter</Button></span>
        <button type="button" className="bp-burger" aria-label="Menu" onClick={() => setMenu(!menu)} style={{ display: "none", flexDirection: "column", justifyContent: "center", gap: 5, width: 42, height: 42, background: "transparent", border: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", padding: 9 }}>
          <span style={{ height: 2, background: "#000", borderRadius: 2 }}></span>
          <span style={{ height: 2, background: "#000", borderRadius: 2 }}></span>
          <span style={{ height: 2, background: "#000", borderRadius: 2 }}></span>
        </button>
      </nav>
      {menu && (
        <div className="bp-mobile-menu" style={{ position: "absolute", top: "100%", right: 12, marginTop: 4, background: "var(--surface-card)", border: "1px solid var(--border-strong)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", padding: 8, display: "flex", flexDirection: "column", minWidth: 180, zIndex: 60 }}>
          {links.map(l => (
            <a key={l} onClick={() => { setMenu(false); onNav(l); }} style={{ padding: "12px 16px", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 14, textTransform: "uppercase", letterSpacing: ".1em", color: active === l ? "var(--bp-cyan-700)" : "#000", cursor: "pointer", borderRadius: "var(--radius-sm)" }}>{l}</a>
          ))}
          <a onClick={() => { setMenu(false); onBook(); }} className="bp-gold-shimmer" style={{ position: "relative", overflow: "hidden", padding: "12px 16px", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14, textTransform: "uppercase", letterSpacing: ".1em", color: "var(--bp-gold-700, #8a6215)", cursor: "pointer", borderRadius: "var(--radius-sm)", borderTop: "1px solid var(--border-subtle)", marginTop: 4 }}>Book Charter</a>
        </div>
      )}
    </header>
  );
}
window.SiteHeader = SiteHeader;