function Nav({ active, onNavigate }) {
  const { Button, IconButton } = window.ArnelBiscarraDesignSystem_2766cb;
  const [open, setOpen] = React.useState(false);
  const [copied, setCopied] = React.useState(false);
  const copyTimerRef = React.useRef(null);
  const nav = window.SITE_DATA.nav;
  const socials = window.SITE_DATA.socials;
  const email = window.SITE_DATA.contactInfo.find((c) => c.label === 'Email').value;

  const go = (id) => {
    setOpen(false);
    onNavigate(id);
  };

  // Same copy-to-clipboard pattern as Contact.jsx's email row.
  const copyEmail = (e) => {
    e.preventDefault();
    const done = () => {
      setCopied(true);
      clearTimeout(copyTimerRef.current);
      copyTimerRef.current = setTimeout(() => setCopied(false), 1800);
    };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(email).then(done).catch(() => fallbackCopyEmail(done));
    } else {
      fallbackCopyEmail(done);
    }
  };
  const fallbackCopyEmail = (done) => {
    const ta = document.createElement('textarea');
    ta.value = email;
    ta.style.position = 'fixed';
    ta.style.left = '-9999px';
    document.body.appendChild(ta);
    ta.select();
    try { document.execCommand('copy'); done(); } catch (err) {}
    document.body.removeChild(ta);
  };

  return (
    <div className="nav-bar">
      <div className="nav-inner">
        <a className="nav-logo" href="#top" onClick={(e) => { e.preventDefault(); go('top'); }}>
          <img src="assets/arnel-logo.png" alt="Arnel Biscarra — Web & Graphics" />
        </a>
        <div className="nav-links">
          {nav.map((l) => (
            <button key={l.id} className={`nav-link ${active === l.id ? 'is-active' : ''}`} onClick={() => go(l.id)}>
              {l.label}
              <span className="underline"></span>
            </button>
          ))}
        </div>
        <div className="nav-cta">
          <Button variant="dark" size="sm" arrow onClick={() => go('contact')}>Contact Me</Button>
        </div>
        <button
          aria-label="Menu"
          className="nav-link nav-burger"
          onClick={() => setOpen((v) => !v)}
        >
          {open ? '\u2715' : '\u2630'}
        </button>
      </div>
      <div className={`mobile-menu ${open ? 'open' : ''}`}>
        {nav.map((l) => (
          <button key={l.id} className={`nav-link ${active === l.id ? 'is-active' : ''}`} onClick={() => go(l.id)}>{l.label}</button>
        ))}
        <Button variant="dark" size="sm" arrow onClick={() => go('contact')} style={{ marginTop: 8 }}>Contact Me</Button>

        <div className="mobile-menu-divider" aria-hidden="true"></div>

        <div className="mobile-menu-socials">
          {socials.map((s) => (
            <IconButton key={s.key} ariaLabel={s.label} size={38} onClick={() => window.open(s.url, '_blank')}>
              <window.SocialGlyph name={s.key} size={16} />
            </IconButton>
          ))}
        </div>

        <div className="mobile-menu-email">
          <a href={`mailto:${email}`} className="mobile-menu-email-text">{email}</a>
          <button
            type="button"
            className={`contact-copy-btn ${copied ? 'is-copied' : ''}`}
            onClick={copyEmail}
            aria-label="Copy email address"
            title="Copy email address"
          >
            {copied ? (
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            ) : (
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
            )}
            <span className="contact-copy-tip">{copied ? 'Copied!' : 'Copy'}</span>
          </button>
        </div>
      </div>
    </div>
  );
}

window.Nav = Nav;