// Nav.jsx — sticky pill nav, used across all pages
const NavBar = ({ active, basePath = '' }) => {
  const [open, setOpen] = React.useState(false);
  const bp = basePath;
  const links = [
    { id: 'work', label: 'Work', href: bp + 'portfolio.html' },
    { id: 'about', label: 'About', href: bp + 'about.html' },
    { id: 'voice', label: 'Voice', href: bp + 'voice-over.html' },
    { id: 'photo', label: 'Photo', href: bp + 'photography.html' },
    { id: 'cases', label: 'Case studies', href: bp + 'case-studies.html' },
  ];
  return (
    <React.Fragment>
      <div className="jp-nav-wrap">
        <nav className="jp-nav" aria-label="Primary">
          <a href={bp + 'index.html'} className="jp-word">
            <span className="jp-word-dot" />
            justinpossible
          </a>
          <div className="jp-nav-links">
            {links.map(l => (
              <a key={l.id} href={l.href} className={`jp-nav-link ${active === l.id ? 'is-active' : ''}`}>
                {l.label}
              </a>
            ))}
          </div>
          <div className="jp-nav-right">
            <button
              className={`jp-nav-burger ${open ? 'is-open' : ''}`}
              onClick={() => setOpen(!open)}
              aria-label={open ? 'Close menu' : 'Open menu'}
              aria-expanded={open}
            >
              <span /><span /><span />
            </button>
            <a className="jp-nav-cta" href="mailto:justin@justinpossible.com">
              Email me <i data-lucide="arrow-up-right" />
            </a>
          </div>
        </nav>
      </div>
      {open && (
        <div className="jp-mobile-menu" role="dialog" aria-label="Navigation">
          {links.map(l => (
            <a
              key={l.id}
              href={l.href}
              className={`jp-mobile-link ${active === l.id ? 'is-active' : ''}`}
              onClick={() => setOpen(false)}
            >
              {l.label}
            </a>
          ))}
          <a className="jp-mobile-link jp-mobile-link--cta" href="mailto:justin@justinpossible.com">
            Email me
          </a>
        </div>
      )}
    </React.Fragment>
  );
};

const SiteFooter = ({ basePath = '' }) => (
  <footer className="jp-footer">
    <div className="jp-footer-inner">
      <div>
        <div className="jp-footer-word">justin<br/>possible.</div>
        <div className="jp-footer-tag">
          Video editor / Creative lead / Voice sometimes.
        </div>
      </div>
      <div className="jp-footer-cols">
        <div>
          <div className="jp-eyebrow">Site</div>
          <a href={basePath + 'index.html'}>Home <i data-lucide="arrow-up-right" /></a>
          <a href={basePath + 'portfolio.html'}>Portfolio <i data-lucide="arrow-up-right" /></a>
          <a href={basePath + 'about.html'}>About <i data-lucide="arrow-up-right" /></a>
          <a href={basePath + 'case-studies.html'}>Case studies <i data-lucide="arrow-up-right" /></a>
        </div>
        <div>
          <div className="jp-eyebrow">Other</div>
          <a href={basePath + 'voice-over.html'}>Voice over <i data-lucide="arrow-up-right" /></a>
          <a href={basePath + 'photography.html'}>Photography <i data-lucide="arrow-up-right" /></a>
        </div>
        <div>
          <div className="jp-eyebrow">Contact</div>
          <a href="mailto:justin@justinpossible.com">justin@justinpossible.com <i data-lucide="arrow-up-right" /></a>
        </div>
      </div>
    </div>
    <div className="jp-footer-bar">
      <span>© 2026 · Justin Possible</span>
      <span>1.85 · 24 fps · Edited in Premiere & Resolve</span>
      <a href="mailto:justin@justinpossible.com">justin@justinpossible.com</a>
    </div>
  </footer>
);

window.NavBar = NavBar;
window.SiteFooter = SiteFooter;