const { useState: useStateNav, useEffect: useEffectNav } = React;

function TopNav({ onRequestAccess, theme, setTheme }) {
  const [scrolled, setScrolled] = useStateNav(false);
  useEffectNav(() => {
    const h = () => setScrolled(window.scrollY > 20);
    h();
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);
  const isLight = theme === 'cream';
  return (
    <nav className={`top-nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-left">
        <img src="assets/eloreum-full.png" alt="Eloreum — enterprise AI agent operating system" className="nav-logo" />
      </div>
      <div className="nav-right">
        <button
          className="theme-toggle"
          onClick={() => setTheme(isLight ? 'dark' : 'cream')}
          aria-label={isLight ? 'Switch to dark mode' : 'Switch to light mode'}
          title={isLight ? 'Switch to dark mode' : 'Switch to light mode'}
        >
          <span className={`theme-toggle-track ${isLight ? 'light' : 'dark'}`}>
            <span className="theme-toggle-thumb">
              {isLight ? (
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="4" />
                  <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
                </svg>
              ) : (
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
                </svg>
              )}
            </span>
          </span>
        </button>
        <span className="nav-status">
          <span className="pulse-dot" />
          <span>system operational</span>
        </span>
        <button className="nav-btn" onClick={onRequestAccess}>
          <span>Request Access</span>
          <span className="btn-arrow">→</span>
        </button>
      </div>
    </nav>
  );
}

// ============================================================
// Tweaks panel
// ============================================================
function TweaksPanel({ values, onChange, visible }) {
  if (!visible) return null;
  const themes = ['dark', 'cream', 'highcontrast'];
  const accents = [
    { id: 'ember', hue: 22, name: 'Ember (default)' },
    { id: 'citron', hue: 68, name: 'Citron' },
    { id: 'cyan', hue: 195, name: 'Cyan' },
    { id: 'magenta', hue: 330, name: 'Magenta' },
  ];
  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <span className="pulse-dot" />
        <span>Tweaks</span>
      </div>
      <div className="tweaks-body">
        <div className="tweaks-group">
          <div className="tweaks-label">theme</div>
          <div className="tweaks-row">
            {themes.map(t => (
              <button
                key={t}
                className={`tweaks-chip ${values.theme === t ? 'on' : ''}`}
                onClick={() => onChange({ theme: t })}
              >
                {t}
              </button>
            ))}
          </div>
        </div>
        <div className="tweaks-group">
          <div className="tweaks-label">accent</div>
          <div className="tweaks-row">
            {accents.map(a => (
              <button
                key={a.id}
                className={`tweaks-swatch ${values.accent === a.id ? 'on' : ''}`}
                style={{ background: `oklch(0.68 0.17 ${a.hue})` }}
                onClick={() => onChange({ accent: a.id })}
                title={a.name}
              />
            ))}
          </div>
        </div>
        <div className="tweaks-group">
          <div className="tweaks-label">headline</div>
          <div className="tweaks-row tweaks-row-stack">
            {[
              'Your organization already knows the answer.',
              'Agents with earned autonomy.',
              'A quiet advantage for the work you do.',
            ].map(h => (
              <button
                key={h}
                className={`tweaks-opt ${values.headline === h ? 'on' : ''}`}
                onClick={() => onChange({ headline: h })}
              >
                {h}
              </button>
            ))}
          </div>
        </div>
        <div className="tweaks-group">
          <div className="tweaks-label">density</div>
          <div className="tweaks-row">
            {['compact', 'relaxed'].map(d => (
              <button
                key={d}
                className={`tweaks-chip ${values.density === d ? 'on' : ''}`}
                onClick={() => onChange({ density: d })}
              >
                {d}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TopNav, TweaksPanel });