// Sticky site header with nav + CTA. Scrolls links to sections; opens contact.
function Header({ onStart }) {
  const { Logo, Icon, Container } = window;
  const { Button } = window.ZentroDesignSystem_967cea;
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const el = document.querySelector("[data-site-scroll]") || window;
    const onScroll = () => {
      const y = el === window ? window.scrollY : el.scrollTop;
      setScrolled(y > 12);
    };
    el.addEventListener("scroll", onScroll);
    return () => el.removeEventListener("scroll", onScroll);
  }, []);
  const links = [["Work", "work"], ["Services", "services"], ["Process", "process"], ["Why Zentro", "pricing"]];
  const go = (id) => {
    setOpen(false);
    const t = document.getElementById(id);
    if (t) t.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 100,
      background: scrolled ? "rgba(8,8,10,0.82)" : "transparent",
      backdropFilter: scrolled ? "blur(14px)" : "none",
      borderBottom: scrolled ? "1px solid var(--border-subtle)" : "1px solid transparent",
      transition: "all var(--dur-base) var(--ease-out)",
    }}>
      <Container style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 76 }}>
        <div style={{ cursor: "pointer" }} onClick={() => go("top")}><Logo height={40} /></div>
        <nav style={{ display: "flex", alignItems: "center", gap: 36 }} className="z-desktop-nav">
          {links.map(([label, id]) => (
            <span key={id} onClick={() => go(id)} style={{
              fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 500,
              color: label === "Why Zentro" ? "var(--gold-500)" : "var(--text-secondary)", cursor: "pointer", transition: "color var(--dur-fast)",
            }}
              onMouseEnter={(e) => e.currentTarget.style.color = label === "Why Zentro" ? "var(--gold-400)" : "var(--text-primary)"}
              onMouseLeave={(e) => e.currentTarget.style.color = label === "Why Zentro" ? "var(--gold-500)" : "var(--text-secondary)"}
            >{label}</span>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="z-desktop-nav">
            <Button variant="ghost" size="sm" onClick={() => window.location.href = "apply.html"} iconLeft={<Icon name="Pencil" size={15} />}>Join as Editor</Button>
          </span>
          <span className="z-desktop-nav">
            <Button variant="secondary" size="sm" onClick={() => window.open("https://calendly.com/ph-zentro/30min", "_blank")} iconLeft={<Icon name="Calendar" size={16} />}>Book a call</Button>
          </span>
          <span className="z-desktop-nav">
            <Button variant="primary" size="sm" onClick={onStart} iconRight={<Icon name="ArrowRight" size={16} />}>Start a project</Button>
          </span>
          <span className="z-mobile-toggle" style={{ display: "none" }}>
            <button aria-label="Menu" onClick={() => setOpen(!open)} style={{
              width: 44, height: 44, display: "flex", alignItems: "center", justifyContent: "center",
              background: "transparent", border: "1px solid var(--border-default)", borderRadius: "var(--radius-sm)", color: "var(--text-primary)", cursor: "pointer",
            }}><Icon name={open ? "X" : "Menu"} size={20} /></button>
          </span>
        </div>
      </Container>
      {open && (
        <div className="z-mobile-menu" style={{ borderTop: "1px solid var(--border-subtle)", background: "rgba(8,8,10,0.96)", backdropFilter: "blur(14px)" }}>
          <Container style={{ display: "flex", flexDirection: "column", gap: 4, padding: "16px var(--gutter)" }}>
            {links.map(([label, id]) => (
              <span key={id} onClick={() => go(id)} style={{ padding: "14px 0", fontFamily: "var(--font-sans)", fontSize: 18, fontWeight: 600, color: "var(--text-primary)", borderBottom: "1px solid var(--border-subtle)", cursor: "pointer" }}>{label}</span>
            ))}
            <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 10 }}>
              <Button variant="secondary" fullWidth onClick={() => { setOpen(false); window.location.href = "apply.html"; }}>Join as Editor</Button>
              <Button variant="secondary" fullWidth onClick={() => { setOpen(false); window.open("https://calendly.com/ph-zentro/30min", "_blank"); }}>Book a call</Button>
              <Button variant="primary" fullWidth onClick={() => { setOpen(false); onStart(); }}>Start a project</Button>
            </div>
          </Container>
        </div>
      )}
    </header>
  );
}
window.Header = Header;