/* === Header ===
 * Sticky top nav. Logo mark + wordmark on left, mono nav center,
 * status pill + CTA on right. Backdrop-blurs on scroll.
 */

const Header = ({ onEnroll }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 100,
      background: scrolled ? "rgba(7,4,14,0.72)" : "transparent",
      backdropFilter: scrolled ? "blur(12px) saturate(120%)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(12px) saturate(120%)" : "none",
      borderBottom: scrolled ? "1px solid var(--obsidian-fog)" : "1px solid transparent",
      transition: "all 200ms cubic-bezier(0.2,0,0,1)",
    }}>
      <div className="ol-header-inner" style={{
        maxWidth: 1280, margin: "0 auto", padding: "16px 32px",
        display: "grid", gridTemplateColumns: "auto 1fr auto",
        alignItems: "center", gap: 32
      }}>
        <a href="index.html#top" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
          <img src="../../assets/logo-mark.png" alt="" style={{ width: 52, height: 52, objectFit: "contain" }} />
          <div>
            <div style={{
              fontFamily: "var(--font-brand)", fontSize: 26, color: "var(--fg-1)",
              textTransform: "uppercase", letterSpacing: "0.02em", lineHeight: 1
            }}>Obsidian <span style={{ color: "var(--neon-magenta)", textShadow: "var(--glow-magenta-sm)" }}>Lake</span></div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--fg-3)",
              letterSpacing: "0.28em", textTransform: "uppercase", marginTop: 2,
              lineHeight: 1.4,
            }}>{"// Counter ubiquitous"}<br />{"technical surveillance //"}</div>
          </div>
        </a>

        <nav className="ol-nav" style={{ display: "flex", gap: 28, justifyContent: "center" }}>
          {[
            { label: "Training Packages", href: "index.html#training" },
            { label: "Field Kits", href: "index.html#kits" },
            { label: "Swag", href: "shop.html" },
            { label: "Field Notes", href: "index.html#notes" },
          ].map((item) => <NavLink key={item.href} {...item} />)}
        </nav>

        <div className="ol-header-actions" style={{ display: "flex", gap: 16, alignItems: "center" }}>
          <span className="ol-header-status"><StatusPill tone="ok">All Systems</StatusPill></span>
          <Button variant="primary" onClick={onEnroll} icon="→">Enroll</Button>
        </div>
      </div>
    </header>
  );
};

const NavLink = ({ label, href }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        fontFamily: "var(--font-mono)",
        fontSize: 12,
        letterSpacing: "0.22em",
        textTransform: "uppercase",
        color: hover ? "var(--neon-cyan)" : "var(--fg-2)",
        textDecoration: "none",
        textShadow: hover ? "0 0 8px var(--neon-cyan)" : "none",
        transition: "all 120ms cubic-bezier(0.2,0,0,1)",
      }}
    >
      {label}
    </a>
  );
};

Object.assign(window, { Header });