// Tweaks panel — accent color, hero animation mode, type pairing
const TweaksPanel = ({ state, setState, visible }) => {
  const t = window.ATTO_TOKENS;
  if (!visible) return null;

  const Row = ({ label, children }) => (
    <div style={{ marginBottom: 16 }}>
      <div style={{ fontFamily: 'var(--atto-mono)', fontSize: 10, letterSpacing: '0.1em',
        color: t.fadedText, marginBottom: 8 }}>{label}</div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>{children}</div>
    </div>
  );

  const Opt = ({ active, onClick, children, title }) => (
    <button onClick={onClick} title={title} style={{
      padding: '7px 11px', fontSize: 12, border: `1px solid ${active ? t.ink : t.rule}`,
      background: active ? t.ink : 'transparent', color: active ? t.ivory : t.ink,
      borderRadius: 999, cursor: 'pointer', fontFamily: 'var(--atto-sans)',
      letterSpacing: '-0.005em',
    }}>{children}</button>
  );

  return (
    <div style={{
      position: 'fixed', bottom: 24, right: 24, zIndex: 100,
      background: 'rgba(244,239,230,0.92)', backdropFilter: 'blur(20px)',
      WebkitBackdropFilter: 'blur(20px)',
      border: `1px solid ${t.rule}`, borderRadius: 16, padding: 20, width: 260,
      boxShadow: '0 24px 48px -16px rgba(10,10,10,0.18)',
      fontFamily: 'var(--atto-sans)',
    }}>
      <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-0.005em',
        marginBottom: 14, display: 'flex', justifyContent: 'space-between' }}>
        <span>Tweaks</span>
        <span style={{ fontFamily: 'var(--atto-mono)', fontSize: 10, color: t.fadedText }}>
          LIVE
        </span>
      </div>

      <Row label="ACCENT">
        <Opt active={state.accent === 'gold'} onClick={() => setState({ ...state, accent: 'gold' })}>Gold</Opt>
        <Opt active={state.accent === 'blue'} onClick={() => setState({ ...state, accent: 'blue' })}>Blue</Opt>
        <Opt active={state.accent === 'ink'} onClick={() => setState({ ...state, accent: 'ink' })}>Ink</Opt>
      </Row>

      <Row label="HERO MOTION">
        <Opt active={state.heroMode === 'breathe'} onClick={() => setState({ ...state, heroMode: 'breathe' })}>Breathe</Opt>
        <Opt active={state.heroMode === 'stream'} onClick={() => setState({ ...state, heroMode: 'stream' })}>Stream</Opt>
        <Opt active={state.heroMode === 'orbit'} onClick={() => setState({ ...state, heroMode: 'orbit' })}>Orbit</Opt>
      </Row>

      <Row label="TYPE PAIRING">
        <Opt active={state.type === 'sfpro'} onClick={() => setState({ ...state, type: 'sfpro' })}>SF Pro</Opt>
        <Opt active={state.type === 'inter'} onClick={() => setState({ ...state, type: 'inter' })}>Inter × Century</Opt>
        <Opt active={state.type === 'editorial'} onClick={() => setState({ ...state, type: 'editorial' })}>Editorial</Opt>
        <Opt active={state.type === 'mono'} onClick={() => setState({ ...state, type: 'mono' })}>Mono-Accent</Opt>
      </Row>
    </div>
  );
};

window.TweaksPanel = TweaksPanel;