/* ============================================================
   App shell — tweaks + mount
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split",
  "whichAppStyle": "cards",
  "vibe": "white",
  "accent": "#0E664F",
  "showHowToVideo": true,
  "showProof": true
}/*EDITMODE-END*/;

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

  return (
    <>
      <Nav />
      <main>
        <Hero t={t} />
        <WhichApp t={t} />
        <TrackerHowTo t={t} />
        <Showcase />
        <WebinarCTA t={t} />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Layout" value={t.heroLayout}
          options={["split", "centered", "showcase"]}
          onChange={(v) => setTweak("heroLayout", v)} />
        <TweakRadio label="Background" value={t.vibe}
          options={["white", "warm", "pine"]}
          onChange={(v) => setTweak("vibe", v)} />
        <TweakColor label="Accent" value={t.accent}
          options={["#0E664F", "#1D3327", "#177f65"]}
          onChange={(v) => setTweak("accent", v)} />

        <TweakSection label="Which app section" />
        <TweakRadio label="Style" value={t.whichAppStyle}
          options={["cards", "split"]}
          onChange={(v) => setTweak("whichAppStyle", v)} />

        <TweakSection label="Using the Tracker" />
        <TweakToggle label="Show how-to video" value={t.showHowToVideo}
          onChange={(v) => setTweak("showHowToVideo", v)} />

        <TweakSection label="Webinar" />
        <TweakToggle label="Show proof stats" value={t.showProof}
          onChange={(v) => setTweak("showProof", v)} />
      </TweaksPanel>
    </>
  );
}

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