/* ============================================================
   THE MOMENT BEFORE — Tweaks app (hero directions + atmosphere)
   A small React island. It does NOT own the page — it just
   applies values to <html> data-attrs / CSS vars and fires an
   `mbtweak` event the vanilla landing script listens for.
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "stage",
  "heroTemplate": "phulkari",
  "ambient": "aurora",
  "motion": 80,
  "goldTone": "#C4923A"
}/*EDITMODE-END*/;

function mbApplyTweaks(t){
  const r = document.documentElement;
  r.setAttribute('data-hero-layout', t.heroLayout);
  r.setAttribute('data-ambient', t.ambient);
  r.style.setProperty('--motion', (t.motion/100).toFixed(2));
  r.classList.toggle('motion-min', t.motion < 12);
  if(t.goldTone){
    r.style.setProperty('--gold', t.goldTone);
    // keep the bright/deep relatives in step with the chosen tone
    r.style.setProperty('--gold-deep', t.goldTone);
  }
  window.dispatchEvent(new CustomEvent('mbtweak', { detail: t }));
}

function MBTweaksApp(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(()=>{ mbApplyTweaks(t); }, [t]);
  return (
    React.createElement(TweaksPanel, { title:'Tweaks' },
      React.createElement(TweakSection, { label:'Hero' }),
      React.createElement(TweakRadio, {
        label:'Layout', value:t.heroLayout,
        options:['stage','centered','editorial'],
        onChange:(v)=>setTweak('heroLayout', v) }),
      React.createElement(TweakSelect, {
        label:'Lead invitation', value:t.heroTemplate,
        options:[{value:'phulkari',label:'Patjhar · wine'},
                 {value:'genda',label:'Genda · marigold'},
                 {value:'saanjh',label:'Saanjh · twilight'}],
        onChange:(v)=>setTweak('heroTemplate', v) }),
      React.createElement(TweakSection, { label:'Atmosphere' }),
      React.createElement(TweakRadio, {
        label:'Ambient', value:t.ambient,
        options:['aurora','calm','plain'],
        onChange:(v)=>setTweak('ambient', v) }),
      React.createElement(TweakSlider, {
        label:'Motion', value:t.motion, min:0, max:100, step:5, unit:'%',
        onChange:(v)=>setTweak('motion', v) }),
      React.createElement(TweakColor, {
        label:'Gold tone', value:t.goldTone,
        options:['#C4923A','#E7C46A','#A6772A'],
        onChange:(v)=>setTweak('goldTone', v) })
    )
  );
}

(function mountTweaks(){
  const mount = ()=>{
    const el = document.getElementById('tweaks-root');
    if(!el || !window.useTweaks) return;
    ReactDOM.createRoot(el).render(React.createElement(MBTweaksApp));
  };
  if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mount);
  else mount();
})();