// Tweaks for Arroz y Más — palette swatches + a few extras
const { useEffect } = React;

function ArrozTweaks(){
  const [tw, setTweak] = useTweaks(window.TWEAK_DEFAULTS || { palette: "cream-mustard" });

  useEffect(() => {
    document.documentElement.dataset.palette = tw.palette || "cream-mustard";
  }, [tw.palette]);

  const palettes = [
    { id: "cream-mustard", label: "Cream + Mustard", swatches: ["#FBF3E1","#E8A52C","#1F6E5A","#E97C56"] },
    { id: "dusk-teal",     label: "Dusk Teal",       swatches: ["#EFEAD8","#D4A03A","#2A6A6C","#D9684A"] },
    { id: "sunset-coral",  label: "Sunset Coral",    swatches: ["#FFEDD8","#F0A93A","#5C7A4A","#E2624A"] },
    { id: "cactus-sand",   label: "Cactus Sand",     swatches: ["#F1E8D0","#B89530","#3E6B3D","#C46A40"] },
  ];

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Color palette" subtitle="Swap the whole site mood">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
          {palettes.map(p => {
            const active = tw.palette === p.id;
            return (
              <button
                key={p.id}
                onClick={()=> setTweak('palette', p.id)}
                style={{
                  display:'flex', flexDirection:'column', gap:8,
                  padding:'10px 10px', borderRadius:10,
                  border: `1.5px solid ${active ? '#3B2A1F' : 'rgba(0,0,0,.12)'}`,
                  background: active ? '#FFF8E7' : 'transparent',
                  cursor:'pointer', textAlign:'left',
                  fontFamily:'inherit'
                }}
              >
                <div style={{display:'flex', gap:4}}>
                  {p.swatches.map((c,i) => (
                    <span key={i} style={{
                      width:18, height:18, borderRadius:4,
                      background:c, border:'1px solid rgba(0,0,0,.08)'
                    }}/>
                  ))}
                </div>
                <span style={{fontSize:12, fontWeight:600}}>{p.label}</span>
              </button>
            );
          })}
        </div>
      </TweakSection>
    </TweaksPanel>
  );
}

const tweaksRoot = document.createElement('div');
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<ArrozTweaks />);