/* EduTrust.lk — Tweaks island. Mounts a React panel that drives CSS vars + hero variant. */

const ET_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#1EA8A0", "#FF7A18"],
  "font": "Poppins + Inter",
  "hero": "split",
  "radius": 16,
  "showStats": true,
  "showStories": true,
  "showPreview": true
}/*EDITMODE-END*/;

const ET_PALETTES = [
  ["#1EA8A0", "#FF7A18"],   // brand
  ["#0F766E", "#F59E0B"],   // deep teal + amber
  ["#2563EB", "#FF7A18"],   // blue + orange
  ["#7C3AED", "#06B6D4"],   // violet + cyan
  ["#0F172A", "#1EA8A0"]    // navy + teal
];

const ET_FONTS = {
  "Poppins + Inter": { display: "'Poppins',system-ui,sans-serif", body: "'Inter',system-ui,sans-serif" },
  "Sora + Inter":    { display: "'Sora',system-ui,sans-serif",    body: "'Inter',system-ui,sans-serif" },
  "Manrope":         { display: "'Manrope',system-ui,sans-serif", body: "'Manrope',system-ui,sans-serif" },
  "DM Sans":         { display: "'DM Sans',system-ui,sans-serif", body: "'DM Sans',system-ui,sans-serif" }
};

function mix(hex, pct, withWhite){
  // simple lighten/darken
  const c = hex.replace('#',''); const n = parseInt(c,16);
  let r=(n>>16)&255,g=(n>>8)&255,b=n&255;
  const t = withWhite?255:0;
  r=Math.round(r+(t-r)*pct); g=Math.round(g+(t-g)*pct); b=Math.round(b+(t-b)*pct);
  return '#'+((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1);
}

function applyTweaks(t){
  const root = document.documentElement.style;
  const [teal, orange] = t.palette;
  root.setProperty('--teal', teal);
  root.setProperty('--teal-700', mix(teal,.18,false));
  root.setProperty('--teal-900', mix(teal,.4,false));
  root.setProperty('--teal-50', mix(teal,.9,true));
  root.setProperty('--teal-100', mix(teal,.78,true));
  root.setProperty('--orange', orange);
  root.setProperty('--orange-600', mix(orange,.14,false));
  root.setProperty('--orange-50', mix(orange,.9,true));
  root.setProperty('--ring', `color-mix(in srgb, ${teal} 28%, transparent)`);

  const f = ET_FONTS[t.font] || ET_FONTS["Poppins + Inter"];
  root.setProperty('--font-display', f.display);
  root.setProperty('--font-body', f.body);

  root.setProperty('--radius', t.radius + 'px');
  root.setProperty('--radius-sm', Math.max(6, t.radius-4) + 'px');

  const hero = document.querySelector('.hero');
  if(hero){
    const map = {split:'', centered:'centered', immersive:'immersive'};
    if(map[t.hero]) hero.setAttribute('data-variant', map[t.hero]);
    else hero.removeAttribute('data-variant');
  }
  const tog = (sel,on)=>{ const el=document.querySelector(sel); if(el) el.style.display = on?'':'none'; };
  tog('#sec-stats', t.showStats);
  tog('#sec-stories', t.showStories);
  tog('#sec-preview', t.showPreview);
}

function ETTweaks(){
  const [t, setTweak] = useTweaks(ET_DEFAULTS);
  React.useEffect(()=>{ applyTweaks(t); }, [t]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand color" />
      <TweakColor label="Palette" value={t.palette} options={ET_PALETTES}
        onChange={(v)=>setTweak('palette', v)} />
      <TweakSection label="Typography" />
      <TweakSelect label="Font" value={t.font} options={Object.keys(ET_FONTS)}
        onChange={(v)=>setTweak('font', v)} />
      <TweakSection label="Hero layout" />
      <TweakRadio label="Variant" value={t.hero} options={['split','centered','immersive']}
        onChange={(v)=>setTweak('hero', v)} />
      <TweakSection label="Shape" />
      <TweakSlider label="Corner radius" value={t.radius} min={4} max={26} unit="px"
        onChange={(v)=>setTweak('radius', v)} />
      <TweakSection label="Sections" />
      <TweakToggle label="Platform statistics" value={t.showStats} onChange={(v)=>setTweak('showStats', v)} />
      <TweakToggle label="Success stories" value={t.showStories} onChange={(v)=>setTweak('showStories', v)} />
      <TweakToggle label="Platform preview" value={t.showPreview} onChange={(v)=>setTweak('showPreview', v)} />
    </TweaksPanel>
  );
}

(function mount(){
  const el = document.createElement('div');
  el.id = 'et-tweaks-root';
  document.body.appendChild(el);
  ReactDOM.createRoot(el).render(<ETTweaks />);
})();