// Main app — composes hero + sections, wires Tweaks, manages nav scroll state.
const { useState: useAS, useEffect: useAE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroCopy": "pickup",
  "showHobbyPicker": true,
  "accentHue": "green"
} /*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = useAS(false);

  useAE(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Apply accent override
  useAE(() => {
    const map = { green: '#00E878', amber: '#FFB830', coral: '#FF6B4A' };
    document.documentElement.style.setProperty('--green', map[tweaks.accentHue] || map.green);
  }, [tweaks.accentHue]);

  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <a href="#hero" className="nav-brand">
          <img src="https://res.cloudinary.com/do6e5mbge/image/upload/v1777940000/mascot-2_tfqfde.png" alt="" className="nav-mark" />
          <span>graze.it</span>
        </a>
        <div className="nav-links">
          <a href="#problem">Why</a>
          <a href="#how">How it works</a>
          <a href="#day">20 hours</a>
          <a href="#pricing">Pricing</a>
        </div>
        <a href="#final" className="nav-cta">Join waitlist</a>
      </nav>

      <Hero tweaks={tweaks} />
      <Problem />
      <How />
      <DayScrubber />
      <Bento />
      <Pricing />
      <Final />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakSelect
            label="Headline copy"
            value={tweaks.heroCopy}
            options={[
            { value: 'pickup', label: 'Pick up the [guitar].' },
            { value: 'learn', label: 'Learn [anything].' },
            { value: 'twenty', label: 'Your next 20 hours.' }]
            }
            onChange={(v) => setTweak('heroCopy', v)} />
          
        </TweakSection>
        <TweakSection label="Accent">
          <TweakRadio
            label="Primary accent"
            value={tweaks.accentHue}
            options={[
            { value: 'green', label: 'Green' },
            { value: 'amber', label: 'Amber' },
            { value: 'coral', label: 'Coral' }]
            }
            onChange={(v) => setTweak('accentHue', v)} />
          
        </TweakSection>
      </TweaksPanel>
    </>);

};

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