// Root app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentTheme": "blue",
  "showFlipHints": true,
  "autoRotateArch": true,
  "industryDefault": 0
}/*EDITMODE-END*/;

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

  const themeClass = t.accentTheme === "cyan" ? "theme-cyan-accent" : "";

  return (
    <div className={themeClass}>
      <Nav />
      <Hero />
      <ValueProps />
      <Industries />
      <LogoStrip />
      <Challenges />
      <Architecture />
      <Resources />
      <FinalCTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio
            label="Accent color"
            value={t.accentTheme}
            options={[
              { value: "blue", label: "Brand blue" },
              { value: "cyan", label: "Cyan" },
            ]}
            onChange={v => setTweak("accentTheme", v)}
          />
        </TweakSection>
        <TweakSection title="Behavior">
          <TweakToggle
            label="Auto-rotate architecture stages"
            value={t.autoRotateArch}
            onChange={v => setTweak("autoRotateArch", v)}
          />
          <TweakToggle
            label="Show flip hints on challenge cards"
            value={t.showFlipHints}
            onChange={v => setTweak("showFlipHints", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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