// Palette definitions + Tweaks panel wiring
const PALETTES = {
  nazar: {
    name: 'Nazar',
    desc: 'Cobalt + ivory + ink. The iconic evil-eye bead.',
    bg: '#EFE8DA', ink: '#0E0F1A', paper: '#F7F1E3',
    accent: '#1E3A8A', accent2: '#C9A227', accent3: '#A6311F',
    muted: '#8A8578',
  },
  tulip: {
    name: 'Tulip Field',
    desc: 'Aubergine + tulip red + bone. Dusk over the Bosphorus.',
    bg: '#F2ECE0', ink: '#1A0F1C', paper: '#FAF3E3',
    accent: '#6A1E3F', accent2: '#D1452E', accent3: '#3A5A3A',
    muted: '#8F8170',
  },
  kahve: {
    name: 'Kahve',
    desc: 'Coffee browns + nazar blue + bone. Grounds at the bottom of the cup.',
    bg: '#E8DFCB', ink: '#2A1A10', paper: '#F5EBD6',
    accent: '#5A3A1F', accent2: '#1E3A8A', accent3: '#B67231',
    muted: '#8E7C63',
  },
};

function applyPalette(p) {
  const r = document.documentElement;
  r.style.setProperty('--bg', p.bg);
  r.style.setProperty('--ink', p.ink);
  r.style.setProperty('--paper', p.paper);
  r.style.setProperty('--accent', p.accent);
  r.style.setProperty('--accent-2', p.accent2);
  r.style.setProperty('--accent-3', p.accent3);
  r.style.setProperty('--muted', p.muted);
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "nazar"
}/*EDITMODE-END*/;

function Tweaks({ palette, setPalette, editOn }) {
  if (!editOn) return null;
  return (
    <div className="tweaks">
      <h4>Tweaks</h4>
      <label>Palette</label>
      <div className="row" style={{ flexWrap:'wrap' }}>
        {Object.entries(PALETTES).map(([k, p]) => (
          <button key={k} className={palette === k ? 'active' : ''}
            onClick={() => setPalette(k)}
            style={{ flex:'1 1 30%' }}>
            {p.name}
          </button>
        ))}
      </div>
      <div className="swatches" style={{ marginTop: 10 }}>
        <span style={{ background: PALETTES[palette].ink }}/>
        <span style={{ background: PALETTES[palette].paper }}/>
        <span style={{ background: PALETTES[palette].accent }}/>
        <span style={{ background: PALETTES[palette].accent2 }}/>
        <span style={{ background: PALETTES[palette].accent3 }}/>
      </div>
      <div style={{ marginTop: 12, fontSize: 10, color: 'var(--muted)' }}>
        Toggle off via the toolbar. Palette persists.
      </div>
    </div>
  );
}

window.PALETTES = PALETTES;
window.applyPalette = applyPalette;
window.Tweaks = Tweaks;
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;