const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#C4714A",
    "gold": "#D4A96A",
    "background": "#1A1612",
    "heroTreatment": "Bleed",
    "showGrain": true,
    "tickerSpeed": "Calm"
  }/*EDITMODE-END*/;

  function App(){
    const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle } = window;
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

    React.useEffect(()=>{
      const r = document.documentElement.style;
      r.setProperty('--terracotta', t.accent);
      r.setProperty('--gold', t.gold);
      r.setProperty('--obsidian', t.background);
      r.setProperty('--obsidian-2', shade(t.background, -0.05));
      document.body.style.setProperty('--grain-opacity', t.showGrain ? .06 : 0);
      document.body.classList.toggle('no-grain', !t.showGrain);

      // ticker speed
      const speeds = { Calm: { a: 60, b: 90 }, Steady: { a: 38, b: 56 }, Brisk: { a: 22, b: 32 } };
      const s = speeds[t.tickerSpeed] || speeds.Calm;
      document.querySelectorAll('#ticker1').forEach(el=> el.style.animationDuration = s.a + 's');
      document.querySelectorAll('#ticker2').forEach(el=> el.style.animationDuration = s.b + 's');

      // hero treatment
      const photoImg = document.querySelector('.hero-photo img');
      const name = document.querySelector('.hero-type .name');
      if(photoImg && name){
        if(t.heroTreatment === 'Bleed'){
          photoImg.style.transform = 'scale(1.06)';
          photoImg.style.objectPosition = '55% 30%';
          name.style.transform = 'translateX(-3vw)';
        } else if(t.heroTreatment === 'Centered'){
          photoImg.style.transform = 'scale(1)';
          photoImg.style.objectPosition = '50% 35%';
          name.style.transform = 'translateX(0)';
        } else { // Overlap
          photoImg.style.transform = 'scale(1.22)';
          photoImg.style.objectPosition = '58% 28%';
          name.style.transform = 'translateX(6vw)';
        }
      }
    }, [t]);

    function shade(hex, amt){
      const c = hex.replace('#',''); const n = parseInt(c,16);
      let r = (n>>16)&255, g=(n>>8)&255, b=n&255;
      r = Math.max(0,Math.min(255, r + Math.round(255*amt)));
      g = Math.max(0,Math.min(255, g + Math.round(255*amt)));
      b = Math.max(0,Math.min(255, b + Math.round(255*amt)));
      return '#' + ((r<<16)|(g<<8)|b).toString(16).padStart(6,'0');
    }

    return (
      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakColor label="Accent" value={t.accent} onChange={v=>setTweak('accent', v)}
            options={["#C4714A","#1C3A5E","#8a3a23","#A88B5C"]} />
          <TweakColor label="Gold detail" value={t.gold} onChange={v=>setTweak('gold', v)}
            options={["#D4A96A","#E8C77E","#B8945A","#F5EFE6"]} />
          <TweakColor label="Background" value={t.background} onChange={v=>setTweak('background', v)}
            options={["#1A1612","#0E0B08","#211C16","#0A0A0A"]} />
        </TweakSection>
        <TweakSection title="Composition">
          <TweakRadio label="Hero" value={t.heroTreatment} onChange={v=>setTweak('heroTreatment', v)}
            options={["Bleed","Centered","Overlap"]} />
          <TweakRadio label="Tickers" value={t.tickerSpeed} onChange={v=>setTweak('tickerSpeed', v)}
            options={["Calm","Steady","Brisk"]} />
          <TweakToggle label="Film grain" value={t.showGrain} onChange={v=>setTweak('showGrain', v)} />
        </TweakSection>
      </TweaksPanel>
    );
  }

  function mount(){
    if(!window.useTweaks || !window.TweaksPanel){
      return setTimeout(mount, 30);
    }
    ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<App/>);
  }
  mount();