const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroPreset": "florida",
  "heroIntensity": 35,
  "heroBlur": 120,
  "heroAngle": 135,
  "heroSweep": true,
  "heroShowA": true,
  "heroShowB": true,
  "heroShowC": true
}/*EDITMODE-END*/;

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

  return (
    <div className="min-h-screen bg-ink-50 text-ink-800">
      <Nav />
      <Hero tw={tw} />
      <TrustBar />
      <HowItWorks />
      <LiveSampleTable />
      <WhoItsFor />
      <Pricing />
      <FAQ />
      <FinalCTA />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero palette" />
        <TweakSelect
          label="Preset"
          value={tw.heroPreset}
          options={[
            { value: "off-white", label: "Off-white (default)" },
            { value: "florida",   label: "Florida — orange + green" },
            { value: "citrus",    label: "Citrus — orange + pink" },
            { value: "aurora",    label: "Aurora — violet + mint" },
            { value: "coastal",   label: "Coastal — sky + cyan" },
            { value: "sunset",    label: "Sunset — rose + violet" },
            { value: "midnight",  label: "Midnight — dark navy" },
          ]}
          onChange={(v) => setTweak("heroPreset", v)}
        />
        <TweakSlider label="Color intensity" value={tw.heroIntensity} min={0} max={100} unit="%"
                     onChange={(v) => setTweak("heroIntensity", v)} />
        <TweakSlider label="Blur softness" value={tw.heroBlur} min={40} max={220} unit="px"
                     onChange={(v) => setTweak("heroBlur", v)} />

        <TweakSection label="Color hue layers" />
        <TweakToggle label="Hue A (warm)"  value={tw.heroShowA} onChange={(v) => setTweak("heroShowA", v)} />
        <TweakToggle label="Hue B (mid)"   value={tw.heroShowB} onChange={(v) => setTweak("heroShowB", v)} />
        <TweakToggle label="Hue C (cool)"  value={tw.heroShowC} onChange={(v) => setTweak("heroShowC", v)} />

        <TweakSection label="Sweep" />
        <TweakToggle label="Linear sweep"  value={tw.heroSweep} onChange={(v) => setTweak("heroSweep", v)} />
        <TweakSlider label="Sweep angle"   value={tw.heroAngle} min={0} max={360} unit="°"
                     onChange={(v) => setTweak("heroAngle", v)} />
      </TweaksPanel>
    </div>
  );
}

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