// App entry — orchestrates state, tweaks panel, sections

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "fire",
  "language": "de",
  "heroVariant": "crowd",
  "grain": 6
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [activeSection, setActiveSection] = useStateA('top');

  // Apply theme
  useEffectA(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme);
    document.documentElement.style.setProperty('--grain-opacity', (tweaks.grain / 100).toString());
  }, [tweaks.theme, tweaks.grain]);

  // Apply lang attr
  useEffectA(() => {
    document.documentElement.setAttribute('lang', tweaks.language);
  }, [tweaks.language]);

  // Track active section
  useEffectA(() => {
    const ids = ['top', 'info', 'tickets', 'impressions', 'travel', 'faq'];
    const sections = ids.map(id => document.getElementById(id)).filter(Boolean);
    const onScroll = () => {
      const y = window.scrollY + window.innerHeight * 0.35;
      let curr = ids[0];
      for (const s of sections) {
        if (s.offsetTop <= y) curr = s.id;
      }
      setActiveSection(curr);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const copy = COPY[tweaks.language] || COPY.de;

  return (
    <>
      <Nav lang={tweaks.language} setLang={(l) => setTweak('language', l)} copy={copy} activeSection={activeSection}/>
      <Hero copy={copy} heroVariant={tweaks.heroVariant}/>
      <Ticker items={copy.ticker}/>
      <Info copy={copy}/>
      <Tickets copy={copy}/>
      <Gallery copy={copy}/>
      <Travel copy={copy}/>
      <FAQ copy={copy}/>
      <Footer copy={copy}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio
            label="Aesthetic"
            value={tweaks.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'fire', label: 'Fire' },
              { value: 'sunset', label: 'Sunset' },
              { value: 'mono', label: 'Mono' },
            ]}
          />
          <TweakSlider
            label="Grain"
            value={tweaks.grain}
            min={0} max={20} step={1}
            onChange={(v) => setTweak('grain', v)}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakRadio
            label="Crowd video"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={[
              { value: 'crowd', label: 'Crowd' },
              { value: 'dance', label: 'Dance' },
              { value: 'rave', label: 'Rave' },
              { value: 'hands', label: 'Hands' },
              { value: 'fire', label: 'Fire' },
            ]}
          />
        </TweakSection>

        <TweakSection label="Language">
          <TweakRadio
            label="Sprache"
            value={tweaks.language}
            onChange={(v) => setTweak('language', v)}
            options={[
              { value: 'de', label: 'DE' },
              { value: 'en', label: 'EN' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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