/* Top nav with scroll-spy */
const SECTIONS = [
  { id: "hero",      num: "01", label: "Home",         dark: false },
  { id: "how",       num: "02", label: "How it works", dark: false },
  { id: "preview",   num: "03", label: "Simulation",   dark: true  },
  { id: "proof",     num: "04", label: "Proof",        dark: true  },
  { id: "founders",  num: "05", label: "Founders",     dark: false },
  { id: "blog",      num: "06", label: "Field Notes",  dark: false },
  { id: "waitlist",  num: "07", label: "Reach out",    dark: false },
];
const EXTERNAL = [
];

function Nav() {
  const [active, setActive] = React.useState("hero");
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 20);
      let current = "hero";
      for (const s of SECTIONS) {
        const el = document.getElementById(s.id);
        if (!el) continue;
        const top = el.getBoundingClientRect().top;
        if (top <= 120) current = s.id;
      }
      setActive(current);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const go = (id) => (e) => {
    e.preventDefault();
    setOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const dark = SECTIONS.find(s => s.id === active)?.dark ?? false;

  // Header background: on dark sections when scrolled, use a dark translucent bg
  const headerBg = !scrolled
    ? "bg-transparent"
    : dark
      ? "bg-ink/80 backdrop-blur border-b-2 border-cream/20"
      : "bg-cream/90 backdrop-blur border-b-2 border-ink";

  // Text colors flip based on section
  const textBase   = dark ? "text-cream" : "text-ink";
  const borderBase = dark ? "border-cream" : "border-ink";
  // Active pill
  const activePill = dark ? "bg-cream text-ink" : "bg-ink text-cream";
  // Hover border
  const hoverBorder = dark ? "hover:border-cream" : "hover:border-ink";
  // Book-a-demo button — keep cyan accent but adjust border/shadow
  const btnBorder = dark ? "border-cream" : "border-ink";
  const btnShadow = dark ? "hs-cream" : "hs-sm";
  // Mobile menu
  const menuBtnBorder = dark ? "border-cream" : "border-ink";
  const menuLineBg    = dark ? "bg-cream" : "bg-ink";

  return (
    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${headerBg} ${textBase}`}>
      <div className="max-w-[1400px] mx-auto px-5 md:px-8 h-16 md:h-20 flex items-center justify-between">
        <a href="#hero" onClick={go("hero")} className="flex items-center gap-3 group">
          <img src={window.__resources.logo} alt="" className="w-9 h-9 pixelated" />
          <span className="font-pixel text-blue text-2xl leading-none tracking-wide">cubicle</span>
        </a>

        <nav className="hidden md:flex items-center gap-1" aria-label="Primary">
          {SECTIONS.map((s) => (
            <a key={s.id} href={`#${s.id}`} onClick={go(s.id)}
               className={`relative font-mono text-xs px-2.5 py-2 border-2 border-transparent overflow-hidden group/nav transition-all duration-200 ${active===s.id ? activePill : hoverBorder}`}>
              <span className={`absolute inset-0 transition-transform duration-200 origin-left ${active===s.id ? "scale-x-0" : "scale-x-0 group-hover/nav:scale-x-100"}`} style={{background:"rgba(46, 194, 219, 0.25)"}} aria-hidden/>
              <span className="relative">
                <span className="opacity-60 mr-1">{s.num}</span>{s.label}
              </span>
            </a>
          ))}
          {EXTERNAL.map((s) => (
            <a key={s.label} href={s.href}
               className={`relative font-mono text-xs px-2.5 py-2 border-2 border-transparent overflow-hidden group/nav transition-all duration-200 ${hoverBorder}`}>
              <span className="absolute inset-0 transition-transform duration-200 origin-left scale-x-0 group-hover/nav:scale-x-100" style={{background:"rgba(46, 194, 219, 0.25)"}} aria-hidden/>
              <span className="relative">
                <span className="opacity-60 mr-1">{s.num}</span>{s.label}
              </span>
            </a>
          ))}
        </nav>

        <div className="hidden md:block">
          <a href="https://form.typeform.com/to/AQnu6FVK" target="_blank" rel="noopener noreferrer"
             className={`inline-flex items-center gap-2 font-mono text-xs uppercase tracking-wider bg-orange text-cream border-2 ${btnBorder} px-4 py-2 ${btnShadow} btn-chunky ${dark ? "btn-chunky-cream" : ""}`}>
            Book a demo <span className="arr">→</span>
          </a>
        </div>

        <button onClick={() => setOpen(v=>!v)} className={`md:hidden w-10 h-10 border-2 ${menuBtnBorder} flex items-center justify-center`} aria-label={open ? "Close menu" : "Open menu"} aria-expanded={open} aria-controls="mobile-menu">
          <div className="relative w-5 h-4">
            <span className={`absolute left-0 right-0 h-[2px] ${menuLineBg} transition-all ${open?"top-[7px] rotate-45":"top-0"}`}/>
            <span className={`absolute left-0 right-0 h-[2px] ${menuLineBg} top-[7px] transition-opacity ${open?"opacity-0":""}`}/>
            <span className={`absolute left-0 right-0 h-[2px] ${menuLineBg} transition-all ${open?"top-[7px] -rotate-45":"top-[14px]"}`}/>
          </div>
        </button>
      </div>

      {open && (
        <div id="mobile-menu" className={`md:hidden border-t-2 ${dark ? "border-cream bg-ink" : "border-ink bg-cream"}`}>
          <nav className="px-5 py-4 flex flex-col gap-1" aria-label="Primary mobile">
            {SECTIONS.map((s) => (
              <a key={s.id} href={`#${s.id}`} onClick={go(s.id)}
                 className={`font-mono text-sm px-3 py-3 border-2 ${active===s.id ? (dark ? "bg-cream text-ink border-cream" : "bg-ink text-cream border-ink") : "border-transparent"}`}>
                <span className="opacity-60 mr-2">{s.num}</span>{s.label}
              </a>
            ))}
            {EXTERNAL.map((s) => (
              <a key={s.label} href={s.href} className="font-mono text-sm px-3 py-3 border-2 border-transparent">
                <span className="opacity-60 mr-2">{s.num}</span>{s.label}
              </a>
            ))}
            <a href="https://form.typeform.com/to/AQnu6FVK" target="_blank" rel="noopener noreferrer" className={`mt-2 font-mono text-sm uppercase bg-orange text-cream border-2 ${btnBorder} px-4 py-3 text-center ${btnShadow}`}>
              Book a demo →
            </a>
          </nav>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;