// App entry — assembles all sections and the Tweaks panel
const { useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakToggle, TweakRadio } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showSystemLayer": true,
  "density": "comfortable",
  "heroEyebrow": "Open source \u00b7 MIT \u00b7 v1.0.0"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.style.setProperty('--row-gap',
      tweaks.density === 'compact' ? '64px' : tweaks.density === 'spacious' ? '128px' : '96px');
  }, [tweaks.density]);

  return (
    <>
      <ForemanNav />
      <main>
        <Hero />
        <Problem />
        <HowItWorks />
        <Terminal />
        <Diagnostic />
        <WhatsInside />
        <Skills />
        <Modes />
        <Industry />
        <BoardSim />
        <Quickstart />
        <BuiltBy />
      </main>
      <ForemanFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Layout">
          <TweakRadio
            label="Section density"
            value={tweaks.density}
            options={[
              { value: 'compact', label: 'Compact' },
              { value: 'comfortable', label: 'Comfortable' },
              { value: 'spacious', label: 'Spacious' },
            ]}
            onChange={(v) => setTweak('density', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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