const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 45,
  "theme": "light",
  "density": "comfy",
  "headline": "Describe a website.\nWatch it build itself.",
  "subhead": "Forge turns plain language into a real, deployable site \u2014 in seconds, not sprints."
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = useState("landing"); // "landing" | "builder"

  useEffect(() => {
    document.documentElement.style.setProperty("--accent-h", tweaks.accentHue);
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.dataset.density = tweaks.density;
  }, [tweaks.accentHue, tweaks.theme, tweaks.density]);

  return (
    <>
      {screen === "landing" && (
        <Landing
          tweaks={tweaks}
          onEnterBuilder={(prompt) => setScreen("builder")}
        />
      )}
      {screen === "builder" && (
        <Builder onBack={() => setScreen("landing")} />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio
            label="Mode"
            value={tweaks.theme}
            options={[
              { value: "light", label: "Light" },
              { value: "dark", label: "Dark" },
            ]}
            onChange={(v) => setTweak("theme", v)}
          />
          <TweakSlider
            label="Accent hue"
            value={tweaks.accentHue}
            min={0}
            max={360}
            step={1}
            onChange={(v) => setTweak("accentHue", v)}
          />
          <TweakRadio
            label="Density"
            value={tweaks.density}
            options={[
              { value: "compact", label: "Compact" },
              { value: "comfy", label: "Comfy" },
              { value: "loose", label: "Loose" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
        <TweakSection title="Hero copy">
          <TweakText
            label="Headline"
            value={tweaks.headline}
            onChange={(v) => setTweak("headline", v)}
            multiline
          />
          <TweakText
            label="Subhead"
            value={tweaks.subhead}
            onChange={(v) => setTweak("subhead", v)}
            multiline
          />
        </TweakSection>
        <TweakSection title="Navigation">
          <TweakButton
            label={screen === "landing" ? "Open builder \u2192" : "\u2190 Back to landing"}
            onClick={() => setScreen(screen === "landing" ? "builder" : "landing")}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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