// Tweaks panel
const TweakPanel = ({ active, tweaks, setTweaks, onClose }) => {
  if (!active) return null;
  const swatch = (v) => ({ width: 24, height: 24, borderRadius: 999, background: v, border: '1.5px solid rgba(0,0,0,.1)' });

  const Row = ({ label, children }) => (
    <div style={{ padding: '14px 0', borderBottom: '1px solid var(--brown-100)' }}>
      <div style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--brown-600)', marginBottom: 10 }}>{label}</div>
      {children}
    </div>
  );
  const Opt = ({ active: a, onClick, children }) => (
    <button onClick={onClick} style={{
      padding: '8px 12px', borderRadius: 10, fontSize: 13, fontWeight: 500,
      border: '1.5px solid ' + (a ? 'var(--brown-700)' : 'var(--brown-200, var(--brown-100))'),
      background: a ? 'var(--brown-700)' : '#fff', color: a ? '#fff' : 'var(--brown-800)',
    }}>{children}</button>
  );

  return (
    <aside style={{
      position: 'fixed', right: 20, bottom: 20, width: 320, zIndex: 110,
      background: '#fff', borderRadius: 18, boxShadow: 'var(--shadow-lg)',
      border: '1px solid var(--brown-100)', padding: '18px 20px',
      fontFamily: 'var(--sans)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
        <div className="serif" style={{ fontSize: 20, fontWeight: 600 }}>Tweaks</div>
        <button onClick={onClose}><Icon name="x" size={18}/></button>
      </div>
      <Row label="Hero layout">
        <div style={{ display: 'flex', gap: 8 }}>
          <Opt active={tweaks.hero === 'split'} onClick={() => setTweaks({ hero: 'split' })}>Split</Opt>
          <Opt active={tweaks.hero === 'centered'} onClick={() => setTweaks({ hero: 'centered' })}>Centered</Opt>
        </div>
      </Row>
      <Row label="Primary action emphasis">
        <div style={{ display: 'flex', gap: 8 }}>
          <Opt active={tweaks.primary === 'shop'} onClick={() => setTweaks({ primary: 'shop' })}>Shop first</Opt>
          <Opt active={tweaks.primary === 'gift'} onClick={() => setTweaks({ primary: 'gift' })}>Gift first</Opt>
          <Opt active={tweaks.primary === 'club'} onClick={() => setTweaks({ primary: 'club' })}>Club first</Opt>
        </div>
      </Row>
      <Row label="Accent palette">
        <div style={{ display: 'flex', gap: 10 }}>
          {[
            { k: 'sky', c: '#a8d0e6' },
            { k: 'butter', c: '#f2e4b8' },
            { k: 'peach', c: '#f2dccd' },
          ].map(s => (
            <button key={s.k} onClick={() => setTweaks({ accent: s.k })} style={{
              ...swatch(s.c),
              outline: tweaks.accent === s.k ? '2px solid var(--brown-700)' : 'none',
              outlineOffset: 2,
            }}/>
          ))}
        </div>
      </Row>
      <Row label="Corporate callout">
        <div style={{ display: 'flex', gap: 8 }}>
          <Opt active={tweaks.corp === 'section'} onClick={() => setTweaks({ corp: 'section' })}>Full section</Opt>
          <Opt active={tweaks.corp === 'banner'} onClick={() => setTweaks({ corp: 'banner' })}>Slim banner</Opt>
        </div>
      </Row>
    </aside>
  );
};

Object.assign(window, { TweakPanel });