// ─── Tweaks panel ──────────────────────────────────────────────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "displayFont": "Newsreader",
  "accentRed": "#E20612",
  "accentEmber": "#D4622A",
  "texture": true,
  "grain": true,
  "heroVariant": "italic-two-line"
}/*EDITMODE-END*/;

function Tweaks({ values, onChange }) {
  return (
    <div style={{
      position: 'fixed', right: 20, bottom: 20, zIndex: 100,
      width: 280, background: 'var(--obsidian)', border: '1px solid var(--border-strong)',
      padding: 20, fontFamily: 'var(--font-body)', fontSize: 12,
      boxShadow: '0 40px 80px rgba(0,0,0,0.6)',
    }}>
      <div className="mono" style={{ fontSize: 10, color: 'var(--ember)', marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
        <span>▸ TWEAKS · § 00</span>
        <span style={{ color: 'var(--tungsten)' }}>LIVE</span>
      </div>

      <Tw label="Display font">
        <select value={values.displayFont} onChange={(e) => onChange('displayFont', e.target.value)}
          style={{ border: '1px solid var(--tungsten)', padding: 8, fontSize: 11 }}>
          {['Newsreader', 'EB Garamond', 'Cormorant Garamond', 'Libre Caslon Text'].map(f => <option key={f} style={{ background: 'var(--obsidian)' }}>{f}</option>)}
        </select>
      </Tw>

      <Tw label="Hero treatment">
        <select value={values.heroVariant} onChange={(e) => onChange('heroVariant', e.target.value)}
          style={{ border: '1px solid var(--tungsten)', padding: 8, fontSize: 11 }}>
          <option value="italic-two-line">Directed, italic emphasis</option>
          <option value="stacked">Stacked · capital lines</option>
          <option value="quiet">Single sentence</option>
        </select>
      </Tw>

      <Tw label="Action accent">
        <div style={{ display: 'flex', gap: 6 }}>
          {['#E20612', '#D4622A', '#C4B49A', '#F5F0E8'].map(c => (
            <button key={c} onClick={() => onChange('accentRed', c)}
              style={{ width: 26, height: 26, background: c, border: values.accentRed === c ? '2px solid var(--bone)' : '1px solid var(--tungsten)', cursor: 'pointer' }} />
          ))}
        </div>
      </Tw>

      <Tw label="Viewfinder grid">
        <Toggle on={values.texture} onClick={() => onChange('texture', !values.texture)} />
      </Tw>

      <Tw label="Film grain">
        <Toggle on={values.grain} onClick={() => onChange('grain', !values.grain)} />
      </Tw>
    </div>
  );
}

function Tw({ label, children }) {
  return (
    <div style={{ marginBottom: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
      <span className="mono" style={{ fontSize: 9, color: 'var(--parchment)' }}>{label}</span>
      {children}
    </div>
  );
}

function Toggle({ on, onClick }) {
  return (
    <button onClick={onClick} style={{
      width: 44, height: 20, background: 'transparent',
      border: '1px solid var(--tungsten)',
      position: 'relative', cursor: 'pointer', padding: 0,
    }}>
      <span style={{
        position: 'absolute', top: 1, left: on ? 23 : 1, width: 18, height: 16,
        background: on ? 'var(--signal)' : 'var(--tungsten)', transition: 'left .24s',
      }} />
    </button>
  );
}

Object.assign(window, { Tweaks, TWEAK_DEFAULTS });