/* global React */
const { useState, useEffect, useRef } = React;

function pageBase() {
  return window.location.pathname.includes('/pages/') ? '../' : '';
}

function Nav({ accent }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const base = pageBase();

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

  useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
  }, [mobileOpen]);

  const L = {
    home: base + 'index.html',
    brand: base + 'pages/brand-lifestyle.html',
    maternity: base + 'pages/maternity.html',
    newborn: base + 'pages/newborn.html',
    families: base + 'pages/families.html',
    couples: base + 'pages/couples-engagements.html',
    weddings: base + 'pages/weddings-elopements.html',
    about: base + 'pages/about.html',
    blog: base + 'pages/blog.html',
    contact: base + 'pages/contact.html',
    galleries: 'https://jpazphotography.pixieset.com/',
  };
  window.__navLinks = L;

  const personalLinks = [
    ['Maternity', L.maternity],
    ['Newborn', L.newborn],
    ['Families', L.families],
    ['Couples & Engagements', L.couples],
    ['Weddings & Elopements', L.weddings],
  ];

  // Always solid nav on inner pages (no hero behind it)
  const forceSolid = !!(window.PAGE && window.PAGE.solidNav);

  return (
    <React.Fragment>
      <nav className={'nav' + (scrolled || forceSolid ? ' scrolled' : '')}>
        <a href={L.home} className="logo-wrap" aria-label="JPaz Photography home">
          <img src={base + 'assets/logo.png'} alt="JPaz Photography" />
        </a>

        <ul className="nav-links" role="menubar">
          <li><a href={L.brand}>Brand &amp; Lifestyle</a></li>
          <li className="has-dropdown">
            <a href={L.maternity}>Personal <span className="chev">▼</span></a>
            <ul className="dropdown">
              {personalLinks.map(([label, href]) => (
                <li key={label}><a href={href}>{label}</a></li>
              ))}
            </ul>
          </li>
          <li><a href={L.galleries} target="_blank" rel="noopener noreferrer">Galleries</a></li>
          <li><a href={L.about}>About</a></li>
          <li><a href={L.blog}>Blog</a></li>
          <li><a href={L.contact} className="nav-cta">Contact</a></li>
        </ul>

        <button
          className={'burger' + (mobileOpen ? ' open' : '')}
          aria-label="Toggle menu"
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen(v => !v)}
        >
          <span></span><span></span><span></span>
        </button>
      </nav>

      <div className={'mobile-menu' + (mobileOpen ? ' open' : '')} aria-hidden={!mobileOpen}>
        <a href={L.brand}>Brand &amp; Lifestyle</a>
        <a href={L.galleries} target="_blank" rel="noopener noreferrer">Galleries</a>
        <a href={L.about}>About</a>
        <a href={L.blog}>Blog</a>
        <a href={L.contact}>Contact</a>
        <div className="sub-label">Personal sessions</div>
        <div className="sub">
          {personalLinks.map(([label, href]) => (
            <a key={label} href={href}>{label}</a>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

window.Nav = Nav;
window.pageBase = pageBase;