// Tweaks mount. Palette, font, hero layout variant, density.
/* global React, ReactDOM, TweaksPanel, TweakSection, TweakRadio, useTweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "aurora",
  "font": "geist",
  "density": "regular",
  "heroVariant": "orb"
}/*EDITMODE-END*/;

const PALETTE_ACCENTS = {
  aurora:   ['#8EE8D8', '#7FA6FF'],
  obsidian: ['#FF6B3D', '#FFC875'],
  ion:      ['#6C8BFF', '#9EE6FF'],
};

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

  React.useEffect(() => {
    document.documentElement.setAttribute('data-palette', t.palette);
    document.documentElement.setAttribute('data-font', t.font);
    document.documentElement.setAttribute('data-density', t.density);
    // Update three.js scene accent
    const [a, b] = PALETTE_ACCENTS[t.palette] || PALETTE_ACCENTS.aurora;
    if (window.__heroScene) window.__heroScene.setAccent(a, b);
  }, [t]);

  React.useEffect(() => {
    // Hero variants (layout tweak) — swap class on .hero
    const hero = document.querySelector('.hero');
    if (!hero) return;
    hero.classList.remove('variant-orb','variant-split','variant-centered');
    hero.classList.add('variant-' + t.heroVariant);
    const heroInner = hero.querySelector('.hero-inner > div');
    if (heroInner) {
      if (t.heroVariant === 'centered') {
        heroInner.style.alignItems = 'center';
        heroInner.style.textAlign = 'center';
      } else {
        heroInner.style.alignItems = 'flex-start';
        heroInner.style.textAlign = 'left';
      }
    }
  }, [t.heroVariant]);

  return (
    <TweaksPanel>
      <TweakSection label="Palette" />
      <TweakRadio label="Theme" value={t.palette}
        options={['aurora', 'obsidian', 'ion']}
        onChange={(v) => setTweak('palette', v)} />
      <TweakSection label="Type" />
      <TweakRadio label="Font" value={t.font}
        options={['geist', 'inter', 'grotesk']}
        onChange={(v) => setTweak('font', v)} />
      <TweakSection label="Layout" />
      <TweakRadio label="Density" value={t.density}
        options={['compact', 'regular', 'comfy']}
        onChange={(v) => setTweak('density', v)} />
      <TweakRadio label="Hero layout" value={t.heroVariant}
        options={['orb', 'centered']}
        onChange={(v) => setTweak('heroVariant', v)} />
    </TweaksPanel>
  );
}

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