/* App composition with tweaks */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lightMode": "auto",
  "lightSpeed": 0.6,
  "lightIntensity": 1.0,
  "accent": "#b8a8ff",
  "orbPulse": true,
  "showDotGrid": true
}/*EDITMODE-END*/;

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => {
    document.getElementById("root").classList.add("ready");
  }, []);
  return (
    <>
      <Nav />
      <Hero tweaks={t} />
      <Marquee />
      <Philosophy />
      <WhyHCAI />
      <Services />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Light source" />
        <TweakRadio
          label="Mode"
          value={t.lightMode}
          options={["auto", "mouse", "static"]}
          onChange={(v) => setTweak("lightMode", v)}
        />
        <TweakSlider
          label="Sweep speed"
          value={t.lightSpeed}
          min={0.1} max={2.0} step={0.1}
          onChange={(v) => setTweak("lightSpeed", v)}
        />
        <TweakSlider
          label="Intensity"
          value={t.lightIntensity}
          min={0.2} max={2.0} step={0.1}
          onChange={(v) => setTweak("lightIntensity", v)}
        />
        <TweakToggle
          label="Orb pulse"
          value={t.orbPulse}
          onChange={(v) => setTweak("orbPulse", v)}
        />

        <TweakSection label="Palette" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#b8a8ff", "#a8b8ff", "#c8a0ff", "#d6a0d8", "#80c0d8"]}
          onChange={(v) => setTweak("accent", v)}
        />

        <TweakSection label="Atmosphere" />
        <TweakToggle
          label="Dot grid"
          value={t.showDotGrid}
          onChange={(v) => setTweak("showDotGrid", v)}
        />
      </TweaksPanel>
    </>
  );
};

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