// Nav.jsx — grouped responsive navigation
const { useState, useEffect, useRef } = React;

const NAV_GROUPS = [
  { label: 'How It Works', page: 'How It Works', href: '/how-it-works/' },
  {
    label: 'Solutions',
    pages: ['For Brands', 'For Marketers', 'For Sports', 'Zenko Apps', 'For Platforms'],
    items: [
      { label: 'For Brands', page: 'For Brands', href: '/for-brands/' },
      { label: 'For Marketers', page: 'For Marketers', href: '/for-marketers/' },
      { label: 'For Sports', page: 'For Sports', href: '/for-sports/' },
      { label: 'Zenko Apps', page: 'Zenko Apps', href: '/zenko-apps/' },
      { label: 'For Platforms', page: 'For Platforms', href: '/for-platforms/' },
    ],
  },
  {
    label: 'Insights',
    pages: ['Insights', 'Growth & Acquisition', 'Loyalty & Retention', 'Sport & Community', 'AI & Agentic Commerce'],
    items: [
      { label: 'All Insights', page: 'Insights', href: '/insights/' },
      { label: 'Growth & Acquisition', page: 'Growth & Acquisition', href: '/insights/growth-acquisition/' },
      { label: 'Loyalty & Retention', page: 'Loyalty & Retention', href: '/insights/loyalty-retention/' },
      { label: 'Sport & Community', page: 'Sport & Community', href: '/insights/sport-community/' },
      { label: 'AI & Agentic Commerce', page: 'AI & Agentic Commerce', href: '/insights/ai-agentic-commerce/' },
    ],
  },
  {
    label: 'Zenko',
    pages: ['Why Zenko?', 'Causes', 'About', 'Blog'],
    items: [
      { label: 'Why Zenko?', page: 'Why Zenko?', href: '/why-zenko/' },
      { label: 'Causes', page: 'Causes', href: '/causes/' },
      { label: 'About Zenko', page: 'About', href: '/about/' },
      { label: 'Latest from Zenko', page: 'Blog', href: '/blog/' },
    ],
  },
  { label: '$ZENKO', page: '$ZENKO', href: '/zenko-token/' },
];

function NavLink({ item, activePage, goTo, className = 'site-nav__link' }) {
  return <a href={item.href} className={`${className}${activePage === item.page ? ' is-active' : ''}`}
    onClick={event => { event.preventDefault(); goTo(item.page); }}
    aria-current={activePage === item.page ? 'page' : undefined}>{item.label}</a>;
}

function Nav({ activePage, onNavigate }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const menuButtonRef = useRef(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    document.body.classList.toggle('mobile-menu-open', menuOpen);
    const onKeyDown = event => {
      if (event.key === 'Escape' && menuOpen) {
        setMenuOpen(false);
        menuButtonRef.current?.focus();
      }
    };
    window.addEventListener('keydown', onKeyDown);
    return () => { document.body.classList.remove('mobile-menu-open'); window.removeEventListener('keydown', onKeyDown); };
  }, [menuOpen]);

  const goTo = page => { setMenuOpen(false); onNavigate(page); };

  return <>
    <nav className={`site-nav${scrolled ? ' site-nav--scrolled' : ''}`} aria-label="Primary navigation">
      <a className="site-nav__logo" href="/" onClick={event => { event.preventDefault(); goTo('home'); }} aria-label="Zenko home">
        <Rune size={26} color="#C94A1A" spin />
        <img src="assets/Zenko_Inline.png" alt="" aria-hidden="true" />
      </a>
      <div className="site-nav__desktop-links">
        {NAV_GROUPS.map(group => group.items ? (
          <div className={`site-nav__group${group.pages.includes(activePage) ? ' is-active' : ''}`} key={group.label}>
            <button className="site-nav__group-trigger" type="button" aria-haspopup="true">{group.label}<span aria-hidden="true">⌄</span></button>
            <div className="site-nav__dropdown">
              {group.items.map(item => <NavLink key={item.page} item={item} activePage={activePage} goTo={goTo} className="site-nav__dropdown-link" />)}
            </div>
          </div>
        ) : <NavLink key={group.page} item={group} activePage={activePage} goTo={goTo} />)}
      </div>
      <button className="site-nav__cta" onClick={() => goTo('Contact')}>Get Started</button>
      <button ref={menuButtonRef} className={`site-nav__burger${menuOpen ? ' is-open' : ''}`} type="button"
        aria-label={menuOpen ? 'Close navigation menu' : 'Open navigation menu'} aria-expanded={menuOpen}
        aria-controls="mobile-navigation" onClick={() => setMenuOpen(open => !open)}><span /><span /><span /></button>
    </nav>
    <div className={`mobile-nav${menuOpen ? ' is-open' : ''}`} id="mobile-navigation" aria-hidden={!menuOpen}>
      <div className="mobile-nav__panel">
        <div className="mobile-nav__links">
          {NAV_GROUPS.map(group => group.items ? (
            <details className="mobile-nav__group" key={group.label} open={group.pages.includes(activePage)}>
              <summary>{group.label}</summary>
              <div>{group.items.map(item => <NavLink key={item.page} item={item} activePage={activePage} goTo={goTo} className="mobile-nav__sublink" />)}</div>
            </details>
          ) : <NavLink key={group.page} item={group} activePage={activePage} goTo={goTo} className="mobile-nav__link" />)}
        </div>
        <button className="mobile-nav__cta" onClick={() => goTo('Contact')} tabIndex={menuOpen ? 0 : -1}>Get Started</button>
      </div>
    </div>
  </>;
}

Object.assign(window, { Nav });