/* app.jsx — AI Report Radar home */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "particles": "on",
  "auroraStrength": 0.5,
  "altBands": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.style.setProperty('--aurora-o', String(t.auroraStrength));
    document.querySelectorAll('.aurora .blob').forEach((b) => { b.style.opacity = t.auroraStrength; });
  }, [t.auroraStrength]);

  React.useEffect(() => {
    document.querySelectorAll('.section.alt-able').forEach(() => {});
    document.body.classList.toggle('no-bands', !t.altBands);
  }, [t.altBands]);

  return (
    <>
      <Nav />
      <Hero tweaks={t} />
      <NewsSection />
      <ToolsSection />
      <ModelsSection />
      <ReposSection />
      <CreditsSection />
      <FundingSection />
      <CtaSection />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Particles" value={t.particles}
          options={['on', 'dense', 'off']} onChange={(v) => setTweak('particles', v)} />
        <TweakSlider label="Aurora strength" value={t.auroraStrength} min={0.15} max={0.9} step={0.05}
          onChange={(v) => setTweak('auroraStrength', v)} />
        <TweakSection label="Layout" />
        <TweakToggle label="Alternating bands" value={t.altBands} onChange={(v) => setTweak('altBands', v)} />
      </TweaksPanel>
    </>
  );
}

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