// theme.jsx — light/dark theming for the Thruline landing directions.
// Neutral chrome (bg / text / surfaces / borders / form fields) flips between
// modes; brand accents (orange, orange2, amber) stay constant so they read on
// both. Exports mkTheme(mode) + a <ThemeToggle/> pill. (T from brand.jsx.)

function mkTheme(mode) {
  const d = mode === 'dark';
  return {
    mode, d,
    // constant brand accents (matched to the TL logo: deep red → orange → gold)
    orange: '#EC5A14', orange2: d ? '#FF7A45' : '#C21A0A', amber: '#F9A826',
    red: '#C21A0A', gold: '#F9A826',
    ink: '#1A1A1A', cream: '#FFF8F0',
    // themed neutrals
    bg:   d ? '#1A1A1A' : '#FFF8F0',
    bg2:  d ? '#23201A' : '#FFFFFF',
    bg3:  d ? '#2B271F' : '#F3EADC',
    fg:   d ? '#FFF8F0' : '#1A1A1A',
    mute: d ? 'rgba(255,248,240,0.62)' : 'rgba(26,26,26,0.55)',
    line: d ? 'rgba(255,248,240,0.16)' : 'rgba(26,26,26,0.12)',
    fieldBg: d ? '#23201A' : '#FFFFFF',
    fieldLine: d ? 'rgba(255,248,240,0.22)' : 'rgba(26,26,26,0.12)',
  };
}

function ThemeToggle({ mode, setMode, c }) {
  const d = mode === 'dark';
  const Opt = ({ on, icon, label, val }) => (
    <button onClick={() => setMode(val)} aria-label={label}
      style={{ display: 'flex', alignItems: 'center', gap: 6, border: 'none', cursor: 'pointer',
        background: on ? c.orange : 'transparent', color: on ? '#1A1A1A' : c.mute,
        padding: '6px 11px', borderRadius: 20, font: '600 12px "Archivo", sans-serif', lineHeight: 1, transition: 'all .15s' }}>
      <span style={{ fontSize: 13 }}>{icon}</span>{label}
    </button>
  );
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 2, padding: 3, borderRadius: 22,
      border: `1px solid ${c.line}`, background: c.bg2 }}>
      <Opt on={!d} icon="☀" label="Light" val="light" />
      <Opt on={d} icon="☾" label="Dark" val="dark" />
    </div>
  );
}

Object.assign(window, { mkTheme, ThemeToggle });