/* ===== IRIDIUM SHIELD — Tweaks panel app ===== */
const IS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "a",
  "accent": "#c82234",
  "grain": true
}/*EDITMODE-END*/;

function IridiumTweaks(){
  const [t, setTweak] = useTweaks(IS_DEFAULTS);
  const root = document.documentElement;

  // apply + persist for the no-flash early loader in app.js
  React.useEffect(()=>{
    const prev = root.getAttribute('data-hero');
    root.setAttribute('data-hero', t.hero);
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--grain', t.grain ? 1 : 0);
    try{ localStorage.setItem('is_tweaks_v2', JSON.stringify({hero:t.hero, accent:t.accent, grain:t.grain})); }catch(e){}
    if(prev !== t.hero){
      window.dispatchEvent(new CustomEvent('is:herochange',{detail:t.hero}));
      window.scrollTo({top:0});
    }
  },[t.hero, t.accent, t.grain]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero layout" />
      <TweakRadio label="Variant" value={t.hero}
        options={[{value:'a',label:'Cinematic'},{value:'b',label:'Dossier'},{value:'c',label:'Typographic'}]}
        onChange={(v)=>setTweak('hero', v)} />

      <TweakSection label="Accent" />
      <TweakColor label="Signal color" value={t.accent}
        options={['#c82234','#d94a27','#a8323f','#5d86a8']}
        onChange={(v)=>setTweak('accent', v)} />

      <TweakSection label="Texture" />
      <TweakToggle label="Film grain" value={t.grain}
        onChange={(v)=>setTweak('grain', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<IridiumTweaks/>);