/* AgroPerfect — Tweaks panel app (controls the static homepage via CSS vars + DOM) */
const { useTweaks, TweaksPanel, TweakSection, TweakSlider, TweakToggle,
        TweakRadio, TweakSelect, TweakColor } = window;

const HERO_IMAGES = {
  'Field rows':        'https://images.pexels.com/photos/974314/pexels-photo-974314.jpeg?auto=compress&cs=tinysrgb&w=1900',
  'Rice terraces':     'https://images.pexels.com/photos/1081912/pexels-photo-1081912.jpeg?auto=compress&cs=tinysrgb&w=1900',
  'Tractor at harvest':'https://images.pexels.com/photos/2933243/pexels-photo-2933243.jpeg?auto=compress&cs=tinysrgb&w=1900',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#B9D432", "#CDE05A"],
  "green": ["#2B5D99", "#234C7E", "#16314F"],
  "headlineFont": "Spectral",
  "heroImage": "Field rows",
  "heroAlign": "left",
  "scrim": 82,
  "reveals": true
}/*EDITMODE-END*/;

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

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

    // Hero image
    const heroBg = document.getElementById('heroBg');
    if (heroBg && HERO_IMAGES[t.heroImage]) {
      heroBg.style.backgroundImage = `url('${HERO_IMAGES[t.heroImage]}')`;
    }
    // Hero alignment
    const hero = document.querySelector('.hero');
    if (hero) hero.classList.toggle('hero--center', t.heroAlign === 'center');
    // Scrim darkness
    const scrim = document.getElementById('heroScrim');
    if (scrim) scrim.style.opacity = (t.scrim / 100).toFixed(2);

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand color" />
      <TweakColor label="Accent" value={t.accent}
        options={[['#B9D432','#CDE05A'], ['#74BF44','#9AD46F'], ['#2C8C43','#52A862'], ['#C2933A','#D8B25C']]}
        onChange={(v) => setTweak('accent', v)} />
      <TweakColor label="Primary" value={t.green}
        options={[['#2B5D99','#234C7E','#16314F'], ['#1F4D86','#173C68','#102A47'], ['#2E6E86','#235668','#16404F']]}
        onChange={(v) => setTweak('green', 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)} />
      <TweakRadio label="Alignment" value={t.heroAlign}
        options={['left', 'center']}
        onChange={(v) => setTweak('heroAlign', v)} />
      <TweakSlider label="Overlay" value={t.scrim} min={30} 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 />);