// Tatava Studio, homepage composition + Tweaks wiring


const HOME_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "cinematic",
  "headline": "racing",
  "displayFont": "serif",
  "showVideo": true
}/*EDITMODE-END*/;

const HEADLINE_LABELS = {
  racing: "A Racing Mind…",
  name: "When the Overwhelm…",
  quieter: "Make Room for…"
};

function HomeApp() {
  const [t, setTweak] = useTweaks(HOME_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.classList.toggle("type-poppins", t.displayFont === "poppins");
  }, [t.displayFont]);

  const Hero =
    t.heroVariant === "split" ? HeroSplit :
    t.heroVariant === "poster" ? HeroPosterBand :
    HeroCinematic;

  return (
    <div id="top">
      <Nav></Nav>
      <Hero key={t.heroVariant + t.headline} headline={t.headline} showVideo={t.showVideo}></Hero>
      <ProofStrip></ProofStrip>
      <ServicesGrid></ServicesGrid>
      <FounderBio></FounderBio>
      <HowItWorks></HowItWorks>
      <Footer showCta></Footer>
      <WhatsAppFloat></WhatsAppFloat>

      <TweaksPanel>
        <TweakSection label="Hero"></TweakSection>
        <TweakRadio
          label="Layout"
          value={t.heroVariant}
          options={["cinematic", "split", "poster"]}
          onChange={(v) => setTweak("heroVariant", v)}
        ></TweakRadio>
        <TweakSelect
          label="Headline (A/B)"
          value={t.headline}
          options={[
            { value: "racing", label: "A Racing Mind Deserves More Than Advice" },
            { value: "name", label: "When the Overwhelm Finally Has a Name" },
            { value: "quieter", label: "Make Room for a Quieter Mind" }
          ]}
          onChange={(v) => setTweak("headline", v)}
        ></TweakSelect>
        <TweakToggle
          label="Video background"
          value={t.showVideo}
          onChange={(v) => setTweak("showVideo", v)}
        ></TweakToggle>
        <TweakSection label="Type"></TweakSection>
        <TweakRadio
          label="Display face"
          value={t.displayFont}
          options={[
            { value: "serif", label: "Serif" },
            { value: "poppins", label: "Poppins" }
          ]}
          onChange={(v) => setTweak("displayFont", v)}
        ></TweakRadio>
      </TweaksPanel>
    </div>
  );
}

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