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

function pageBase() {
  return ''; // all pages now at root level
}

// Google Analytics 4 event helper. Safe if analytics is blocked or not loaded yet.
window.jpTrack = function (name, params) {
  try { if (typeof window.gtag === 'function') window.gtag('event', name, params || {}); } catch (e) {}
};

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

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

  // Count taps on phone, email and quote buttons so enquiries can be attributed to pages in GA4
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest && e.target.closest('a');
      if (!a) return;
      const href = a.getAttribute('href') || '';
      if (href.indexOf('tel:') === 0) window.jpTrack('contact_click', { method: 'phone', page_path: location.pathname });
      else if (href.indexOf('mailto:') === 0) window.jpTrack('contact_click', { method: 'email', page_path: location.pathname });
      else if (href.indexOf('#enquire') !== -1 || /contact(\.html)?$/.test(href.split('#')[0])) window.jpTrack('cta_click', { label: (a.textContent || '').trim().slice(0, 40), page_path: location.pathname });
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

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

  const L = {
    home: base + 'index.html',
    brand: base + 'brand-lifestyle.html',
    maternity: base + 'maternity.html',
    newborn: base + 'newborn.html',
    families: base + 'families.html',
    couples: base + 'couples-engagements.html',
    weddings: base + 'weddings-elopements.html',
    about: base + 'about.html',
    blog: base + 'blog.html',
    contact: base + 'contact.html',
    galleries: 'https://jpazphotography.pic-time.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.webp'} alt="JPaz Photography" />
        </a>

        <ul className="nav-links" role="menubar">
          <li><a href={L.brand}>Brand Photo &amp; Video</a></li>
          <li className="has-dropdown">
            <a href="#" onClick={e => e.preventDefault()}>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}>Journal</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 Photo &amp; Video</a>
        <button
          className={'mob-personal-toggle' + (personalOpen ? ' open' : '')}
          onClick={() => setPersonalOpen(v => !v)}
        >
          Personal <span className="chev">▼</span>
        </button>
        {personalOpen && (
          <div className="sub">
            {personalLinks.map(([label, href]) => (
              <a key={label} href={href}>{label}</a>
            ))}
          </div>
        )}
        <a href={L.galleries} target="_blank" rel="noopener noreferrer">Galleries</a>
        <a href={L.about}>About</a>
        <a href={L.blog}>Journal</a>
        <a href={L.contact}>Contact</a>
      </div>
    </React.Fragment>
  );
}

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