/* app.jsx — main composition + tweaks + scroll progress */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D97A2C",
  "reducedMotion": false
}/*EDITMODE-END*/;

function ProgressBar(){
  const p = useScrollProgress();
  return <div className="scroll-progress" style={{ width: `${p * 100}%` }} aria-hidden="true" />;
}

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

  React.useEffect(()=>{
    document.documentElement.style.setProperty("--orange", t.accent || "#D97A2C");
  },[t.accent]);

  React.useEffect(()=>{
    document.documentElement.classList.toggle("no-motion", !!t.reducedMotion);
  },[t.reducedMotion]);

  return (
    <React.Fragment>
      <ProgressBar />
      <Nav />
      <main>
        <Hero accent={t.accent} />
        <Marquee />
        <Manifesto />
        <Worlds />
        <Bento />
        <Premium />
        <Privacy />
        <Footer />
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#D97A2C", "#C8860A", "#5B8A4F", "#B8611C", "#7A5AE0"]}
          onChange={(v)=> setTweak("accent", v)}
        />
        <TweakSection label="Motion" />
        <TweakToggle
          label="Reduced motion"
          value={!!t.reducedMotion}
          onChange={(v)=> setTweak("reducedMotion", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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