// Tweaks panel — toggle theme and font pairing

function TweaksPanel({ state, setState, onClose }) {
  const f = FONTS[state.font];
  const t = THEMES[state.theme];
  return (
    <div style={{
      position: 'fixed', bottom: 24, right: 24, zIndex: 1000,
      width: 320, background: '#fff', border: '1px solid rgba(0,0,0,0.1)',
      boxShadow: '0 10px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08)',
      fontFamily: f.sans, color: t.ink,
    }}>
      <div style={{ padding: '14px 18px', borderBottom: '1px solid rgba(0,0,0,0.08)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontFamily: f.display, fontSize: 18, fontWeight: f.displayWeight, letterSpacing: f.displayTracking }}>Tweaks</span>
        <button onClick={onClose} style={{ border: 0, background: 'transparent', cursor: 'pointer', fontSize: 18, color: '#888' }}>×</button>
      </div>
      <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div>
          <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#888', marginBottom: 8 }}>Theme</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6 }}>
            {Object.entries(THEMES).map(([key, th]) => (
              <button key={key} onClick={() => setState({ ...state, theme: key })} style={{
                padding: '10px 10px', border: state.theme === key ? `2px solid ${th.accent}` : '1px solid rgba(0,0,0,0.1)',
                background: th.paper, color: th.ink, fontFamily: f.sans, fontSize: 12, cursor: 'pointer',
                textAlign: 'left', display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 14, height: 14, borderRadius: '50%', background: th.accent, flexShrink: 0 }} />
                {th.name}
              </button>
            ))}
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#888', marginBottom: 8 }}>Schriftpaar</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {Object.entries(FONTS).map(([key, fn]) => (
              <button key={key} onClick={() => setState({ ...state, font: key })} style={{
                padding: '10px 12px',
                border: state.font === key ? `2px solid ${t.accent}` : '1px solid rgba(0,0,0,0.1)',
                background: state.font === key ? t.tint : '#fff',
                cursor: 'pointer', textAlign: 'left', fontFamily: fn.sans, fontSize: 13,
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              }}>
                <span style={{ fontFamily: fn.display, fontSize: 20, fontWeight: fn.displayWeight, letterSpacing: fn.displayTracking }}>Ag</span>
                <span style={{ fontSize: 11, color: '#666' }}>{fn.name}</span>
              </button>
            ))}
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#888', marginBottom: 8 }}>Papier-Textur</div>
          <button onClick={() => setState({ ...state, paper: !state.paper })} style={{
            width: '100%', padding: '8px 12px', border: '1px solid rgba(0,0,0,0.1)',
            background: state.paper ? t.ink : '#fff', color: state.paper ? '#fff' : t.ink,
            cursor: 'pointer', fontFamily: f.sans, fontSize: 12,
          }}>{state.paper ? 'an' : 'aus'}</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });