// Tweaks: language, palette, hero treatment.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "language": "nl",
  "palette": "neon",
  "heroPhoneTilt": -3,
  "showFloatChips": true,
  "showMarquee": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  if (window.ZUIPIE_APPLY_LANG) window.ZUIPIE_APPLY_LANG(t.language);
  document.documentElement.setAttribute('data-palette', t.palette);

  const phone = document.querySelector('.hero-phone');
  if (phone) phone.style.transform = `rotate(${t.heroPhoneTilt}deg)`;

  document.querySelectorAll('.float-chip').forEach(el => {
    el.style.display = t.showFloatChips ? '' : 'none';
  });
  const marq = document.querySelector('.marquee');
  if (marq) marq.style.display = t.showMarquee ? '' : 'none';
}

// Apply initial defaults immediately (don't wait for tweaks toggle)
applyTweaks(TWEAK_DEFAULTS);

function ZuipieTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Taal / Language">
        <TweakRadio
          label="Language"
          value={t.language}
          options={[
            { value: 'nl', label: 'Nederlands' },
            { value: 'en', label: 'English' }
          ]}
          onChange={v => setTweak('language', v)}
        />
      </TweakSection>

      <TweakSection label="Palette">
        <TweakSelect
          label="Palette"
          value={t.palette}
          options={[
            { value: 'neon', label: 'Neon (default)' },
            { value: 'midnight', label: 'Midnight (cool blue)' },
            { value: 'warm', label: 'Warm (magenta + gold)' }
          ]}
          onChange={v => setTweak('palette', v)}
        />
      </TweakSection>

      <TweakSection label="Hero">
        <TweakSlider
          label="Phone tilt"
          value={t.heroPhoneTilt}
          min={-15} max={15} step={1}
          unit="°"
          onChange={v => setTweak('heroPhoneTilt', v)}
        />
        <TweakToggle
          label="Floating chips"
          value={t.showFloatChips}
          onChange={v => setTweak('showFloatChips', v)}
        />
        <TweakToggle
          label="Marquee strip"
          value={t.showMarquee}
          onChange={v => setTweak('showMarquee', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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