// palettes.jsx — meme-direction color palettes exposed via Tweaks
const MEME_PALETTES = {
  classic: { name:'classic toxic',  bg:'#0a0a0a', panel:'#141414', ink:'#e2ffe5', ink2:'#7a8a7a', green:'#39ff14', hot:'#ff2e88', yellow:'#fff700', cyan:'#00ffff', red:'#ff4444' },
  vapor:   { name:'vaporwave',      bg:'#1a0033', panel:'#2a0a4a', ink:'#fff4ff', ink2:'#a98ace', green:'#ff71ce', hot:'#01cdfe', yellow:'#fffb96', cyan:'#05ffa1', red:'#fb4570' },
  gameboy: { name:'gameboy',        bg:'#0f380f', panel:'#306230', ink:'#9bbc0f', ink2:'#8bac0f', green:'#9bbc0f', hot:'#9bbc0f', yellow:'#9bbc0f', cyan:'#9bbc0f', red:'#9bbc0f' },
  amber:   { name:'amber crt',      bg:'#0a0500', panel:'#1a0f00', ink:'#ffb000', ink2:'#a87600', green:'#ffb000', hot:'#ff6500', yellow:'#ffd700', cyan:'#ff8c00', red:'#ff3300' },
  acid:    { name:'acid trip',      bg:'#0a0033', panel:'#140044', ink:'#bef264', ink2:'#84cc16', green:'#bef264', hot:'#a855f7', yellow:'#fde047', cyan:'#67e8f9', red:'#f43f5e' },
  redrum:  { name:'redrum',         bg:'#0a0000', panel:'#1a0000', ink:'#ffe0e0', ink2:'#7a4040', green:'#ff4444', hot:'#fde047', yellow:'#fde047', cyan:'#facc15', red:'#ef4444' },
};

// We mutate this from the App so deep components can read latest palette via window.MEMEColors
window.MEMEColors = MEME_PALETTES.classic;

function applyPalette(key) {
  const p = MEME_PALETTES[key] || MEME_PALETTES.classic;
  window.MEMEColors = p;
  // CSS vars on document root for places using vanilla CSS
  const r = document.documentElement.style;
  Object.entries(p).forEach(([k,v])=>{ if (typeof v === 'string') r.setProperty('--m-'+k, v); });
  return p;
}

// Hook: returns the palette and re-renders subscribers when it changes
function usePalette(key) {
  const [p, setP] = React.useState(() => applyPalette(key));
  React.useEffect(() => { setP(applyPalette(key)); }, [key]);
  return p;
}

window.MEME_PALETTES = MEME_PALETTES;
window.applyPalette = applyPalette;
window.usePalette = usePalette;