// ═══════════════════════════════════════════════════════════════════════════
// Chrome — the navigational spine, mobile bar, and shared furniture.
// The spine is not a header: it is a fixed left column you travel down, with
// the scroll depth drawn on it as a filling rule.
// ═══════════════════════════════════════════════════════════════════════════

const SECTIONS = [
  ['research', 'Research'],
  ['publications', 'Papers'],
  ['models', 'Models'],
  ['insights', 'Notes'],
  ['philosophy', 'Tenets'],
  ['team', 'Lab'],
  ['contact', 'Contact'],
];

const SPY_IDS = ['hero', ...SECTIONS.map(([id]) => id)];

const Arrow = ({ s = 11 }) => (
  <svg width={s} height={s} viewBox="0 0 11 11" fill="none" style={{ flex: 'none' }}>
    <path d="M1.6 9.4L9.4 1.6M9.4 1.6H3.9M9.4 1.6V7.1"
      stroke="currentColor" strokeWidth="1.1" strokeLinecap="square" />
  </svg>
);

const ThemeSwitch = ({ theme, setTheme }) => (
  <button
    className="tsw"
    data-t={theme}
    aria-label={theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
    onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
    <span />
  </button>
);

const Rail = ({ theme, setTheme, active, depth }) => (
  <div className="rail">
    <a href="#hero" aria-label="MMRL — top"
      onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
      <span className="rail-mark" />
    </a>

    <nav className="rail-nav">
      <span className="rail-depth" style={{ height: `${depth * 100}%` }} />
      {SECTIONS.map(([id, label]) => (
        <a key={id} href={`#${id}`} className="rail-item" data-on={active === id ? '1' : '0'}
          onClick={(e) => { e.preventDefault(); goTo(id); }}>
          {label}
        </a>
      ))}
    </nav>

    <div className="rail-foot">
      <span className="rail-rot">{String(Math.round(depth * 100)).padStart(2, '0')}%</span>
      <ThemeSwitch theme={theme} setTheme={setTheme} />
    </div>
  </div>
);

const MobileBar = ({ theme, setTheme, active, depth }) => {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const label = (SECTIONS.find(([id]) => id === active) || [null, 'Overview'])[1];

  return (
    <>
      <div className="mbar">
        <span className="mbar-progress" style={{ width: `${depth * 100}%` }} />
        <a href="#hero" style={{ display: 'flex', alignItems: 'center', gap: 10 }}
          onClick={(e) => { e.preventDefault(); setOpen(false); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
          <span className="rail-mark" style={{ width: 20, height: 20 }} />
          <span className="mc mc-ink mc-b" style={{ letterSpacing: '0.16em' }}>MMRL</span>
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span className="mc" style={{ fontSize: 8.5 }}>{label}</span>
          <button className="burger" data-open={open ? '1' : '0'} aria-label="Menu"
            aria-expanded={open} onClick={() => setOpen((o) => !o)}>
            <i /><i />
          </button>
        </div>
      </div>

      <div className="msheet" data-open={open ? '1' : '0'}>
        {SECTIONS.map(([id, l], i) => (
          <a key={id} href={`#${id}`}
            onClick={(e) => { e.preventDefault(); setOpen(false); setTimeout(() => goTo(id), 240); }}>
            <span>{l}</span>
            <span className="mc dim-2">{String(i + 1).padStart(2, '0')}</span>
          </a>
        ))}
        <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span className="mc">Appearance</span>
          <ThemeSwitch theme={theme} setTheme={setTheme} />
        </div>
      </div>
    </>
  );
};

// Section masthead — label column, then the statement across the wide field.
const SecHead = ({ label, title, note }) => (
  <header className="sec-head pad">
    <div className="sec-label rv">
      <div className="mc mc-ink mc-b" style={{ letterSpacing: '0.2em' }}>{label}</div>
      {note && <div className="mc dim-2" style={{ marginTop: 8, letterSpacing: '0.1em' }}>{note}</div>}
    </div>
    <h2 className="rv" style={{ '--rv-d': '90ms' }}>{title}</h2>
  </header>
);

window.SECTIONS = SECTIONS;
window.SPY_IDS = SPY_IDS;
window.Arrow = Arrow;
window.ThemeSwitch = ThemeSwitch;
window.Rail = Rail;
window.MobileBar = MobileBar;
window.SecHead = SecHead;