/* AgroPerfect — Integrated Grape Program · Tweaks panel */
const { useTweaks, TweaksPanel, TweakSection, TweakSlider, TweakToggle,
        TweakRadio, TweakSelect, TweakColor } = window;

const HERO_IMAGES = {
  'Vineyard rows':   'https://images.pexels.com/photos/39351/purple-grapes-vineyard-napa-valley-napa-vineyard-39351.jpeg?auto=compress&cs=tinysrgb&w=1900',
  'Ripe clusters':   'https://images.pexels.com/photos/60021/grapes-vines-fruit-vineyard-60021.jpeg?auto=compress&cs=tinysrgb&w=1900',
  'Vineyard hills':  'https://images.pexels.com/photos/708777/pexels-photo-708777.jpeg?auto=compress&cs=tinysrgb&w=1900',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#8E4585", "#A85FA0"],
  "primary": ["#2B5D99", "#234C7E", "#16314F"],
  "headlineFont": "Spectral",
  "heroImage": "Vineyard rows",
  "scrim": 80,
  "reveals": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    if (Array.isArray(t.accent)) {
      root.style.setProperty('--gold', t.accent[0]);
      root.style.setProperty('--gold-soft', t.accent[1] || t.accent[0]);
    }
    if (Array.isArray(t.primary)) {
      root.style.setProperty('--forest', t.primary[0]);
      root.style.setProperty('--forest-deep', t.primary[1] || t.primary[0]);
      root.style.setProperty('--forest-night', t.primary[2] || t.primary[1] || t.primary[0]);
    }
    root.style.setProperty('--font-display', `'${t.headlineFont}', Georgia, serif`);

    const heroBg = document.getElementById('heroBg');
    if (heroBg && HERO_IMAGES[t.heroImage]) {
      heroBg.style.backgroundImage = `url('${HERO_IMAGES[t.heroImage]}')`;
    }
    const scrim = document.getElementById('heroScrim');
    if (scrim) scrim.style.opacity = (t.scrim / 100).toFixed(2);

    document.body.classList.toggle('reveals-off', !t.reveals);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand color" />
      <TweakColor label="Accent" value={t.accent}
        options={[['#8E4585','#A85FA0'], ['#B9D432','#CDE05A'], ['#7A2E4A','#9A4767'], ['#C2933A','#D8B25C']]}
        onChange={(v) => setTweak('accent', v)} />
      <TweakColor label="Primary" value={t.primary}
        options={[['#2B5D99','#234C7E','#16314F'], ['#1F4D86','#173C68','#102A47'], ['#4A2E6E','#3A2356','#26163C']]}
        onChange={(v) => setTweak('primary', v)} />

      <TweakSection label="Typography" />
      <TweakSelect label="Headline font" value={t.headlineFont}
        options={['Spectral', 'Newsreader', 'Libre Caslon Display']}
        onChange={(v) => setTweak('headlineFont', v)} />

      <TweakSection label="Hero" />
      <TweakSelect label="Photo" value={t.heroImage}
        options={Object.keys(HERO_IMAGES)}
        onChange={(v) => setTweak('heroImage', v)} />
      <TweakSlider label="Overlay" value={t.scrim} min={40} max={95} unit="%"
        onChange={(v) => setTweak('scrim', v)} />

      <TweakSection label="Motion" />
      <TweakToggle label="Section reveals" value={t.reveals}
        onChange={(v) => setTweak('reveals', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<App />);