// Tweaks.jsx — floating control panel

const Tweaks = ({ visible, state, setState }) => {
  if (!visible) return null;
  return (
    <div style={{
      position: 'fixed',
      bottom: 24,
      right: 24,
      zIndex: 100,
      width: 300,
      background: 'var(--bg-elev)',
      border: '1px solid var(--ink)',
      borderRadius: 4,
      padding: 20,
      boxShadow: '0 20px 40px oklch(0.2 0.02 260 / 0.15)',
      fontFamily: 'var(--sans)',
      fontSize: 13,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, paddingBottom: 12, borderBottom: '1px solid var(--rule-soft)' }}>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>Tweaks</span>
        <span style={{ fontSize: 10, color: 'var(--ink-mute)', fontFamily: 'var(--mono)', letterSpacing: '0.1em' }}>✦ live</span>
      </div>

      <TweakRow label="Layout variant">
        <Seg options={[['editorial','Editorial'],['grid','Grid']]}
          value={state.variant} onChange={v => setState({variant: v})} />
      </TweakRow>

      <TweakRow label="Accent hue">
        <Seg options={[['gold','Gold'],['dusk','Dusk'],['sage','Sage']]}
          value={state.accent} onChange={v => setState({accent: v})} />
      </TweakRow>

      <TweakRow label="Motif intensity">
        <Seg options={[['subtle','Subtle'],['medium','Medium'],['strong','Strong']]}
          value={state.motif} onChange={v => setState({motif: v})} />
      </TweakRow>

      <TweakRow label="Display font">
        <Seg options={[['cormorant','Cormorant'],['fraunces','Fraunces'],['playfair','Playfair']]}
          value={state.serif} onChange={v => setState({serif: v})} />
      </TweakRow>

      <TweakRow label="Paper grain">
        <Seg options={[['on','On'],['off','Off']]}
          value={state.grain} onChange={v => setState({grain: v})} />
      </TweakRow>

      <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 8, lineHeight: 1.5, fontStyle: 'italic', fontFamily: 'var(--serif)' }}>
        Toggle the Tweaks button in the toolbar to hide this panel.
      </div>
    </div>
  );
};

const TweakRow = ({ label, children }) => (
  <div style={{ marginBottom: 14 }}>
    <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-mute)', marginBottom: 6 }}>{label}</div>
    {children}
  </div>
);

const Seg = ({ options, value, onChange }) => (
  <div style={{ display: 'flex', border: '1px solid var(--rule)', borderRadius: 3, overflow: 'hidden' }}>
    {options.map(([v, label], i) => (
      <button key={v} onClick={() => onChange(v)}
        style={{
          flex: 1,
          padding: '7px 8px',
          fontSize: 12,
          background: value === v ? 'var(--ink)' : 'transparent',
          color: value === v ? 'var(--bg)' : 'var(--ink-soft)',
          border: 'none',
          borderLeft: i > 0 ? '1px solid var(--rule)' : 'none',
          cursor: 'pointer',
          fontFamily: 'var(--sans)',
          transition: 'all .15s ease',
        }}>{label}</button>
    ))}
  </div>
);

Object.assign(window, { Tweaks });