/* Sticky navigation, full-screen mobile menu, and persistent mobile booking bar. */

const { useState: useNavState, useEffect: useNavEffect } = React;
const { Button: NavButton } = window.CalmingSpotDesignSystem_cdab4b;
const { Wordmark: NavWordmark } = window;

/* Book a Class points to our on-site schedule page (live Momence embed). */
const MOMENCE = "schedule.html";
/* The on-site month-grid schedule page we built. */
const SCHEDULE = "schedule.html";

const NAV_LINKS = [
  { label: "Experiences", href: "index.html#experiences" },
  { label: "Schedule", href: SCHEDULE },
  { label: "Pricing", href: "pricing.html" },
  { label: "Private Events", href: "private-events.html" },
  { label: "Training", href: "sound-training.html" },
  { label: "Our Story", href: "about.html" },
];

function Nav() {
  const [scrolled, setScrolled] = useNavState(false);
  const [menuOpen, setMenuOpen] = useNavState(false);

  useNavEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useNavEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  return (
    <>
      <header className={["cs-nav", scrolled ? "cs-nav--solid" : ""].filter(Boolean).join(" ")}>
        <div className="cs-nav__inner">
          <NavWordmark />
          <nav className="cs-nav__links" aria-label="Primary">
            {NAV_LINKS.map((l) => (
              <a key={l.href} href={l.href} className="cs-nav__link" {...(l.ext ? { target: "_blank", rel: "noopener" } : {})}>{l.label}</a>
            ))}
          </nav>
          <div className="cs-nav__actions">
            <NavButton variant="primary" size="sm" href={MOMENCE} className="cs-nav__book">Book a Class</NavButton>
            <button
              className="cs-nav__burger"
              aria-label="Open menu"
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen(true)}
            >
              <span /><span /><span />
            </button>
          </div>
        </div>
      </header>

      {/* Full-screen mobile menu */}
      <div className={["cs-menu", menuOpen ? "cs-menu--open" : ""].filter(Boolean).join(" ")} aria-hidden={!menuOpen}>
        <div className="cs-menu__top">
          <NavWordmark />
          <button className="cs-menu__close" aria-label="Close menu" onClick={() => setMenuOpen(false)}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
              <path d="M6 6l12 12M18 6 6 18" />
            </svg>
          </button>
        </div>
        <nav className="cs-menu__links" aria-label="Mobile">
          {NAV_LINKS.map((l, i) => (
            <a key={l.href} href={l.href} className="cs-menu__link" style={{ transitionDelay: `${menuOpen ? 80 + i * 50 : 0}ms` }}
               {...(l.ext ? { target: "_blank", rel: "noopener" } : {})}
               onClick={() => setMenuOpen(false)}>
              {l.label}
            </a>
          ))}
        </nav>
        <div className="cs-menu__foot">
          <NavButton variant="primary" size="lg" href={MOMENCE} onClick={() => setMenuOpen(false)}>Book a Class</NavButton>
          <p className="cs-menu__note">Sound, stillness, and connection in Santa Monica.</p>
        </div>
      </div>

      {/* Persistent mobile booking bar */}
      <div className={["cs-mbook", scrolled ? "cs-mbook--show" : ""].filter(Boolean).join(" ")}>
        <NavButton variant="primary" href={MOMENCE} className="cs-mbook__btn">Book a Class</NavButton>
      </div>
    </>
  );
}

Object.assign(window, { Nav });