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

const HERO_IMAGES = {
  'Wheat field':    'https://images.pexels.com/photos/326082/pexels-photo-326082.jpeg?auto=compress&cs=tinysrgb&w=1900',
  'Ripe ears':      'https://images.pexels.com/photos/265216/pexels-photo-265216.jpeg?auto=compress&cs=tinysrgb&w=1900',
  'Golden harvest': 'https://images.pexels.com/photos/96715/pexels-photo-96715.jpeg?auto=compress&cs=tinysrgb&w=1900',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#C2933A", "#D8B25C"],
  "primary": ["#2B5D99", "#234C7E", "#16314F"],
  "headlineFont": "Spectral",
  "heroImage": "Wheat field",
  "scrim": 84,
  "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={[['#C2933A','#D8B25C'], ['#B9D432','#CDE05A'], ['#74BF44','#9AD46F'], ['#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 />);