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

const HERO_IMAGES = {
  'Cotton field':   'https://images.pexels.com/photos/13924887/pexels-photo-13924887.jpeg?auto=compress&cs=tinysrgb&w=1900',
  'Boll close-up':  'https://images.pexels.com/photos/13924871/pexels-photo-13924871.jpeg?auto=compress&cs=tinysrgb&w=1900',
  'Cotton plant':   'https://images.pexels.com/photos/32796552/pexels-photo-32796552.jpeg?auto=compress&cs=tinysrgb&w=1900',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#E5A521", "#F4C242"],
  "primary": ["#2B5D99", "#234C7E", "#16314F"],
  "headlineFont": "Spectral",
  "heroImage": "Cotton field",
  "scrim": 82,
  "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={[['#E5A521','#F4C242'], ['#B9D432','#CDE05A'], ['#C2933A','#D8B25C'], ['#2C8C43','#52A862']]}
        onChange={(v) => setTweak('accent', v)} />
      <TweakColor label="Primary" value={t.primary}
        options={[['#2B5D99','#234C7E','#16314F'], ['#1F4D86','#173C68','#102A47'], ['#2E6E86','#235668','#16404F']]}
        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 />);