/* ===========================================================
   ELEVEN JERSEYS — Tweaks panel config
   =========================================================== */
const EJ_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "classic",
  "grid": "cards"
}/*EDITMODE-END*/;

const ACCENTS = [
  {id:'classic', label:'Classic Red', c:'#e1122b'},
  {id:'electric', label:'Electric Blue', c:'#1a4dff'},
  {id:'pitch', label:'Pitch Green', c:'#03a657'},
  {id:'gold', label:'Champion Gold', c:'#cf9a14'},
  {id:'mono', label:'Blackout', c:'#0d0e11'},
];
const GRIDS = [
  {id:'cards', label:'Cards'},
  {id:'minimal', label:'Minimal'},
  {id:'editorial', label:'Editorial'},
  {id:'compact', label:'Compact'},
];

function EJTweaks(){
  const [t, setTweak] = useTweaks(EJ_TWEAK_DEFAULTS);

  React.useEffect(()=>{
    const html = document.documentElement;
    if(t.accent === 'classic') html.removeAttribute('data-accent');
    else html.setAttribute('data-accent', t.accent);
  }, [t.accent]);

  React.useEffect(()=>{
    const html = document.documentElement;
    if(t.grid === 'cards') html.removeAttribute('data-grid');
    else html.setAttribute('data-grid', t.grid);
  }, [t.grid]);

  const cur = ACCENTS.find(a=>a.id===t.accent) || ACCENTS[0];

  return (
    <TweaksPanel>
      <TweakSection label="Accent colour" />
      <div style={{display:'flex',flexWrap:'wrap',gap:8,marginBottom:6}}>
        {ACCENTS.map(a=>(
          <button key={a.id} onClick={()=>setTweak('accent',a.id)} title={a.label}
            style={{
              width:34,height:34,borderRadius:'50%',background:a.c,cursor:'pointer',
              border: t.accent===a.id ? '2px solid #111' : '2px solid #e3e3e6',
              outline: t.accent===a.id ? '2px solid #fff' : 'none',
              outlineOffset:-4, boxShadow: t.accent===a.id ? '0 0 0 1px #111' : 'none'
            }} />
        ))}
      </div>
      <div style={{fontSize:12,color:'#71757c',marginBottom:4}}>{cur.label}</div>

      <TweakSection label="Product grid layout" />
      <TweakRadio label="Style" value={t.grid}
        options={GRIDS.map(g=>g.id)}
        onChange={(v)=>setTweak('grid', v)} />
      <div style={{fontSize:12,color:'#71757c',lineHeight:1.5,marginTop:4}}>
        Cards · bordered shop look · &nbsp; Minimal · image-led, no buttons · &nbsp; Editorial · 3-up large · &nbsp; Compact · 5-up dense
      </div>
    </TweaksPanel>
  );
}

(function mountEJTweaks(){
  if(!window.React || !window.TweaksPanel){ setTimeout(mountEJTweaks, 60); return; }
  let host = document.getElementById('ej-tweaks-root');
  if(!host){ host = document.createElement('div'); host.id='ej-tweaks-root'; document.body.appendChild(host); }
  ReactDOM.createRoot(host).render(<EJTweaks/>);
})();