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

const HERO_IMAGES = {
  'Cucumber on vine': 'https://images.pexels.com/photos/2329440/pexels-photo-2329440.jpeg?auto=compress&cs=tinysrgb&w=1900',
  'Open field':       'https://images.pexels.com/photos/2255801/pexels-photo-2255801.jpeg?auto=compress&cs=tinysrgb&w=1900',
  'Young plants':     'https://images.pexels.com/photos/1112080/pexels-photo-1112080.jpeg?auto=compress&cs=tinysrgb&w=1900',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#5E8C2E", "#79A93F"],
  "primary": ["#2B5D99", "#234C7E", "#16314F"],
  "headlineFont": "Spectral",
  "heroImage": "Cucumber on vine",
  "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={[['#5E8C2E','#79A93F'], ['#C2933A','#D8B25C'], ['#3F8F6B','#56A985'], ['#B9D432','#CDE05A']]}
        onChange={(v) => setTweak('accent', v)} />
      <TweakColor label="Primary" value={t.primary}
        options={[['#2B5D99','#234C7E','#16314F'], ['#1F4D86','#173C68','#102A47'], ['#2E6B4F','#1F5039','#143626']]}
        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 />);