// Tweaks panel

const TweaksPanel = ({ active, setActive, state, setState, tweaks, setTweaks }) => {
  if (!active) return null;
  return (
    <div data-pxs-tweaks style={{ position: 'fixed', bottom: 20, right: 20, width: 320, background: 'white', borderRadius: 14, boxShadow: '0 20px 60px rgba(0,0,0,0.22)', border: '1px solid #eae4d2', zIndex: 150, overflow: 'hidden' }}>
      <div style={{ padding: '12px 16px', background: 'var(--ink)', color: 'white', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '-0.005em' }}>Tweaks</div>
        <button onClick={() => setActive(false)} style={{ color: 'white', padding: 4 }}><Icon name="x" size={14} /></button>
      </div>
      <div style={{ padding: 16, display: 'grid', gap: 16, maxHeight: '70vh', overflowY: 'auto' }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#8a8573', marginBottom: 8 }}>Accent color</div>
          <div style={{ display: 'flex', gap: 8 }}>
            {[
              ['#E85D2F', 'Sunset'],
              ['#D4371A', 'Fire'],
              ['#2E5C42', 'Forest'],
              ['#1B4965', 'River'],
              ['#C28840', 'Amber'],
            ].map(([c, l]) => (
              <button key={c} onClick={() => { document.documentElement.style.setProperty('--accent', c); setTweaks({ ...tweaks, accent: c }); }}
                title={l}
                style={{ width: 32, height: 32, borderRadius: '50%', background: c, border: tweaks.accent === c ? '3px solid var(--ink)' : '2px solid #eae4d2', cursor: 'pointer' }} />
            ))}
          </div>
        </div>

        <div>
          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#8a8573', marginBottom: 8 }}>Hero background</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            {[
              ['#1F3A2B', 'Forest'],
              ['#1B4965', 'River'],
              ['#2A2420', 'Night'],
              ['#4a2a1a', 'Earth'],
            ].map(([c, l]) => (
              <button key={c} onClick={() => { document.documentElement.style.setProperty('--green-deep', c); setTweaks({ ...tweaks, greenDeep: c }); }}
                style={{ padding: '8px', borderRadius: 8, background: c, color: 'white', fontSize: 12, cursor: 'pointer', border: tweaks.greenDeep === c ? '2px solid var(--accent)' : '2px solid transparent' }}>{l}</button>
            ))}
          </div>
        </div>

        <div>
          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#8a8573', marginBottom: 8 }}>Card corner radius</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {['sharp', 'medium', 'rounded'].map(r => (
              <button key={r} onClick={() => setTweaks({ ...tweaks, radius: r })}
                style={{ padding: '6px 10px', fontSize: 12, borderRadius: 8, border: tweaks.radius === r ? '1px solid var(--accent)' : '1px solid #eae4d2', background: tweaks.radius === r ? 'rgba(232,93,47,0.1)' : 'white', textTransform: 'capitalize' }}>{r}</button>
            ))}
          </div>
        </div>

        <div>
          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#8a8573', marginBottom: 8 }}>Display font</div>
          <div style={{ display: 'grid', gap: 6 }}>
            {['Fraunces', 'Instrument Serif', 'Geist'].map(f => (
              <button key={f} onClick={() => { document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(h => h.style.fontFamily = f); setTweaks({ ...tweaks, displayFont: f }); }}
                style={{ padding: '8px 12px', fontSize: 14, borderRadius: 8, border: tweaks.displayFont === f ? '1px solid var(--accent)' : '1px solid #eae4d2', background: tweaks.displayFont === f ? 'rgba(232,93,47,0.06)' : 'white', fontFamily: f, textAlign: 'left' }}>{f}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { TweaksPanel });