// App composition + Tweaks panel

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "A",
  "howVariant": "A",
  "pricingVariant": "A"
}/*EDITMODE-END*/;

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

  const Hero = t.heroVariant === "B" ? HeroB : t.heroVariant === "C" ? HeroC : HeroA;
  const How  = t.howVariant === "B"  ? HowB  : t.howVariant === "C"  ? HowC  : HowA;
  const Pricing = t.pricingVariant === "B" ? PricingB : t.pricingVariant === "C" ? PricingC : PricingA;

  return (
    <>
      <SBNav />
      <main>
        <Hero />
        <ForWho />
        <How />
        <ClientShowcase />
        <Portfolio />
        <About />
        <Pricing />
        <Testimonials />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero" subtitle="The first 3 seconds.">
          <TweakRadio
            label="Variation"
            value={t.heroVariant}
            options={[
              { value: "A", label: "Live calendar" },
              { value: "B", label: "Multi-device" },
              { value: "C", label: "Type-as-hero" },
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
        </TweakSection>
        <TweakSection title="How it works">
          <TweakRadio
            label="Variation"
            value={t.howVariant}
            options={[
              { value: "A", label: "Stepped cards" },
              { value: "B", label: "Timeline + mocks" },
              { value: "C", label: "Editorial" },
            ]}
            onChange={(v) => setTweak("howVariant", v)}
          />
        </TweakSection>
        <TweakSection title="Pricing">
          <TweakRadio
            label="Variation"
            value={t.pricingVariant}
            options={[
              { value: "A", label: "Two cards" },
              { value: "B", label: "Hero + custom" },
              { value: "C", label: "Comparison" },
            ]}
            onChange={(v) => setTweak("pricingVariant", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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