// Shared chrome — top nav + bottom status bar.
// Sticks across all pages. Active route is highlighted.

const TopNav = ({ route }) => {
  const T = window.TOKENS;
  const items = [
    { k: 'home', label: 'home', path: '/' },
    { k: 'blog', label: 'blog', path: '/blog' },
    { k: 'about', label: 'about', path: '/about' },
    { k: 'uses', label: 'uses', path: '/uses' },
    { k: 'connect', label: 'connect', path: '/connect' },
    { k: 'links', label: 'links', path: '/links' },
  ];
  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: '20px 40px', display: 'flex', justifyContent: 'space-between',
      alignItems: 'center',
      fontFamily: T.mono, fontSize: 11, letterSpacing: '0.22em',
      textTransform: 'uppercase',
      background: `linear-gradient(180deg, ${T.bg}f0 0%, ${T.bg}00 100%)`,
      backdropFilter: 'blur(2px)',
    }}>
      <div
        onClick={() => window.navigate('/')}
        style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}
      >
        <span style={{
          display: 'inline-block', width: 10, height: 10, background: T.accent,
          boxShadow: `0 0 12px ${T.accent}`,
        }} />
        <span style={{ fontWeight: 700, color: T.fg }}>KAROL.ROSZAK</span>
        <span style={{ color: T.fgDim }}>// @LORAKSZAK</span>
      </div>
      <div style={{ display: 'flex', gap: 28 }}>
        {items.map(it => {
          const active = route === it.k;
          return (
            <span
              key={it.k}
              onClick={() => window.navigate(it.path)}
              style={{
                cursor: 'pointer',
                color: active ? T.fg : T.fgDim,
                position: 'relative',
                transition: 'color .15s',
              }}
              onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = T.fg; }}
              onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = T.fgDim; }}
            >
              <span style={{ color: active ? T.accent : T.fgGhost }}>›</span> {it.label}
              {active && (
                <span style={{
                  position: 'absolute', left: 12, right: 0, bottom: -8, height: 1,
                  background: T.accent,
                }} />
              )}
            </span>
          );
        })}
      </div>
    </div>
  );
};

const BottomBar = ({ route }) => {
  const T = window.TOKENS;
  const [time, setTime] = React.useState(new Date());
  React.useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{
      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 50,
      padding: '14px 40px', display: 'flex', justifyContent: 'space-between',
      fontFamily: T.mono, fontSize: 10, letterSpacing: '0.22em',
      color: T.fgGhost,
      background: T.bg,
      borderTop: `1px solid ${T.fgFaint}`,
    }}>
      <div style={{ display: 'flex', gap: 24 }}>
        <span style={{ color: T.accent }}>◉ LIVE</span>
        <span>CET</span>
        <span>{time.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}</span>
      </div>
      <div style={{ display: 'flex', gap: 24 }}>
        <span>~/{route}</span>
        <span>UTF-8</span>
        <span>v1.0.0</span>
      </div>
    </div>
  );
};

window.TopNav = TopNav;
window.BottomBar = BottomBar;