/* Tiaxel — homepage Tweaks panel.
   Drives plain-HTML page via data-attributes + CSS vars on documentElement. */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle } = window;

const TIAXEL_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "split",
  "accent": "#FFB400",
  "primary": "#074BB6",
  "showTrust": true,
  "lang": "ar"
}/*EDITMODE-END*/;

function HomeTweaks(){
  const [t, setTweak] = useTweaks(TIAXEL_DEFAULTS);

  React.useEffect(()=>{ document.body.setAttribute('data-hero', t.hero); }, [t.hero]);
  React.useEffect(()=>{ document.documentElement.style.setProperty('--gold', t.accent); }, [t.accent]);
  React.useEffect(()=>{ document.documentElement.style.setProperty('--blue', t.primary); }, [t.primary]);
  React.useEffect(()=>{
    const tr = document.querySelector('.trust');
    if(tr) tr.style.display = t.showTrust ? '' : 'none';
  }, [t.showTrust]);
  React.useEffect(()=>{
    if(window.tiaxelSetLang) window.tiaxelSetLang(t.lang);
  }, [t.lang]);

  return (
    <TweaksPanel title="Tiaxel">
      <TweakSection label="Hero direction" />
      <TweakRadio label="Layout" value={t.hero}
        options={[
          {value:'split', label:'Split'},
          {value:'centered', label:'Centered'},
          {value:'editorial', label:'Editorial'}
        ]}
        onChange={(v)=>setTweak('hero', v)} />

      <TweakSection label="Language" />
      <TweakRadio label="Display" value={t.lang}
        options={[{value:'ar', label:'العربية'},{value:'en', label:'English'}]}
        onChange={(v)=>setTweak('lang', v)} />

      <TweakSection label="Brand color" />
      <TweakColor label="Primary" value={t.primary}
        options={['#074BB6','#0A3F93','#1B3A6B','#0E7C66']}
        onChange={(v)=>setTweak('primary', v)} />
      <TweakColor label="Accent" value={t.accent}
        options={['#FFB400','#FF8A3D','#FFD000','#E0B25A']}
        onChange={(v)=>setTweak('accent', v)} />

      <TweakSection label="Sections" />
      <TweakToggle label="Show client logos" value={t.showTrust}
        onChange={(v)=>setTweak('showTrust', v)} />
    </TweaksPanel>
  );
}

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