// App + tweaks integration

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#1B98E8",
  "showStats": true,
  "heroVariant": "default"
}/*EDITMODE-END*/;

function App() {
  const [scrolled, setScrolled] = React.useState(false);
  const [lang, setLang] = React.useState("EN");
  const [tweaks, setTweak] = (window.useTweaks || (() => [TWEAK_DEFAULTS, () => {}]))(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // apply accent color via CSS var
  React.useEffect(() => {
    document.documentElement.style.setProperty("--blue", tweaks.accentColor || "#1B98E8");
  }, [tweaks.accentColor]);

  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakColor = window.TweakColor;
  const TweakRadio = window.TweakRadio;
  const TweakToggle = window.TweakToggle;

  return (
    <>
      <Header scrolled={scrolled} lang={lang} setLang={setLang} />
      <main>
        <Hero />
        <Project />
        <Training />
        <Why />
        {tweaks.showStats && <Numbers />}
        <Partners />
        <FinalCTA />
      </main>
      <Footer />

      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Brand">
            <TweakColor label="Accent (vivid blue)" value={tweaks.accentColor} onChange={(v) => setTweak("accentColor", v)} />
          </TweakSection>
          <TweakSection title="Sections">
            <TweakToggle label="Show 'Project in Numbers'" value={tweaks.showStats} onChange={(v) => setTweak("showStats", v)} />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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