/* global React, ReactDOM */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "typo": "hedvig",
  "glowMul": 1.0,
  "scaleMul": 1.0
}/*EDITMODE-END*/;

const TYPOS = [
  { id:'hedvig',  label:'A · Hedvig + Sometype',  sub:'Lapidaire moderne' },
  { id:'bagnard', label:'B · Cardo + Departure',  sub:'Didone fine + mono pixel' },
  { id:'tenor',   label:'C · Tenor Sans + Geist', sub:'Humaniste rare' },
  { id:'custom',  label:'D · AURUM Custom',       sub:'Wordmark maison (Italiana)' },
];

function App(){
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);
  useEffect(()=>{ document.documentElement.dataset.typo = t.typo; }, [t.typo]);
  useEffect(()=>{
    window.__glowMul = t.glowMul;
    window.__scaleMul = t.scaleMul;
  }, [t.glowMul, t.scaleMul]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Typography" />
      <div style={{display:'flex', flexDirection:'column', gap:6, padding:'4px 12px 12px'}}>
        {TYPOS.map(d=>{
          const active = t.typo===d.id;
          return (
            <button key={d.id} onClick={()=>setT('typo', d.id)}
              style={{
                textAlign:'left', padding:'9px 11px', cursor:'pointer',
                background: active?'rgba(200,149,72,.14)':'transparent',
                border:'1px solid '+(active?'#c89548':'rgba(0,0,0,.08)'),
                color: active?'#7a5a26':'#29261b',
                fontFamily:'ui-sans-serif,system-ui',
                fontSize:11, borderRadius:6,
              }}>
              <div style={{fontWeight:600}}>{d.label}</div>
              <div style={{fontSize:10, opacity:.65, marginTop:3}}>{d.sub}</div>
            </button>
          );
        })}
      </div>

      <TweakSection label="Relic" />
      <TweakSlider label="Scale" value={t.scaleMul} min={0.5} max={1.5} step={0.05}
        onChange={v=>setT('scaleMul', v)} />
      <TweakSlider label="Glow" value={t.glowMul} min={0} max={2} step={0.05}
        onChange={v=>setT('glowMul', v)} />
    </TweaksPanel>
  );
}

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