// ui_kits/site/Nav.jsx — sticky blurred nav with the wordmark + mode toggle (popover).
const Nav = ({ route, setRoute, mode, setMode }) => {
  return (
    <nav className="koa-nav">
      <a className="koa-mark site-mark" href="#/" onClick={(e) => { e.preventDefault(); setRoute('/'); }}>
        <span>koa</span>
        <Wordmark.Dot />
        <span className="tail">codes</span>
      </a>
      <div className="links">
        <a href="#/" onClick={(e) => { e.preventDefault(); setRoute('/'); }} data-active={route === '/'}>→ home</a>
        <a href="#/about"       onClick={(e) => { e.preventDefault(); setRoute('/about'); }}       data-active={route === '/about'}>about</a>
        <a href="#/experiments" onClick={(e) => { e.preventDefault(); setRoute('/experiments'); }} data-active={route === '/experiments'}>experiments</a>
        <a href="#/fun"         onClick={(e) => { e.preventDefault(); setRoute('/fun'); }}         data-active={route === '/fun'}>fun</a>
      </div>
      <button className="koa-mode" popovertarget="mode-pop" aria-label="change mode">
        <ModeGlyph mode={mode} />
        <span>{mode}</span>
      </button>
      <div id="mode-pop" popover="auto" className="koa-pop">
        {['lava', 'abyss', 'plasma'].map(m => (
          <button key={m} onClick={() => { setMode(m); document.getElementById('mode-pop')?.hidePopover(); }} data-active={m === mode}>
            <ModeGlyph mode={m} /> {m}
          </button>
        ))}
      </div>
      <style>{`
        .koa-nav {
          position: fixed; top: 0; left: 0; right: 0; z-index: 50;
          display: flex; align-items: center; gap: var(--s-5);
          padding: 14px clamp(16px, 4vw, 32px);
          background: color-mix(in oklch, var(--bg) 60%, transparent);
          backdrop-filter: blur(20px) saturate(180%);
          -webkit-backdrop-filter: blur(20px) saturate(180%);
          border-bottom: 1px solid var(--border);
        }
        .koa-mark {
          font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1;
          color: var(--fg); display: inline-flex; align-items: baseline; gap: 0;
        }
        .koa-mark .tail { opacity: 0.6; }
        .koa-nav .links { display: flex; gap: var(--s-4); margin-left: auto; }
        .koa-nav .links a {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
          text-transform: uppercase; color: var(--fg-muted);
          transition: color 200ms var(--ease-out);
        }
        .koa-nav .links a:hover { color: var(--fg); }
        .koa-nav .links a[data-active="true"] { color: var(--accent); }
        .koa-mode {
          display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
          color: var(--fg-muted); background: transparent; border: 1px solid var(--border-strong);
          padding: 6px 10px; border-radius: 9999px; cursor: none;
          anchor-name: --mode-anchor;
        }
        .koa-mode:hover { color: var(--fg); border-color: var(--fg); }
        .koa-pop {
          position: fixed; margin: 0; padding: 6px; border: 1px solid var(--border-strong);
          border-radius: 12px; background: color-mix(in oklch, var(--bg-elev) 92%, transparent);
          backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
          box-shadow: var(--shadow-3);
          position-anchor: --mode-anchor; top: anchor(bottom); right: anchor(right);
          margin-top: 8px; min-width: 140px;
          display: flex; flex-direction: column; gap: 2px;
        }
        .koa-pop button {
          background: transparent; border: 0; padding: 8px 10px; border-radius: 8px;
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
          color: var(--fg-muted); text-align: left; display: flex; align-items: center; gap: 8px; cursor: none;
        }
        .koa-pop button:hover { background: color-mix(in oklch, var(--fg) 6%, transparent); color: var(--fg); }
        .koa-pop button[data-active="true"] { color: var(--accent); }
        @media (max-width: 640px) {
          .koa-nav .links a:not([data-active="true"]) { display: none; }
        }
      `}</style>
    </nav>
  );
};

const ModeGlyph = ({ mode }) => {
  const c = { lava: 'oklch(67% 0.245 35)', abyss: 'oklch(82% 0.220 195)', plasma: 'oklch(68% 0.310 320)' }[mode];
  return <span style={{ width: 9, height: 9, borderRadius: '50%', background: c, display: 'inline-block', boxShadow: `0 0 8px ${c}` }} />;
};

const Wordmark = {
  Dot: () => <span className="koa-dot" />
};

window.Nav = Nav;
window.Wordmark = Wordmark;
