// App — composes the Rank Asset Managers one-pager and wires the Tweaks panel.

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroImg":         "assets/images/header.jpg",
  "heroLayout":      "right",
  "heroAccent":      "orange",
  "introAlign":      "center",
  "wwdTone":         "teal",
  "approachLayout":  "stepper",
  "classesTone":     "orange",
  "classesLayout":   "switcher",
  "whyImg":          "assets/images/community.webp",
  "whoLayout":       "grid",
  "ctaImg":          "assets/images/cta.jpg",
  "ctaTone":         "dark"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAKS_DEFAULTS);
  // Internal preview panel: only mount when ?tweaks=1 is in the URL.
  const showTweaks = typeof window !== "undefined" &&
    new URLSearchParams(window.location.search).get("tweaks") === "1";

  // Tweak panel image options — only files that still exist on disk.
  const heroOptions = [
    { label: "Header",    value: "assets/images/header.jpg" },
    { label: "Advisor",   value: "assets/images/advisor.jpg" },
    { label: "Community", value: "assets/images/community.webp" },
  ];
  const ctaOptions = [
    { label: "CTA",       value: "assets/images/cta.jpg" },
    { label: "Advisor",   value: "assets/images/advisor.jpg" },
  ];
  const whyOptions = [
    { label: "Community", value: "assets/images/community.webp" },
    { label: "Advisor",   value: "assets/images/advisor.jpg" },
  ];

  return (
    <>
      <NavBar/>
      <Hero heroImg={tweaks.heroImg} layout={tweaks.heroLayout} accent={tweaks.heroAccent}/>
      <Pitch accent={tweaks.heroAccent} mediaImg={tweaks.heroImg}/>
      <Intro align={tweaks.introAlign}/>
      <WhatWeDo tone={tweaks.wwdTone}/>
      <Approach layout={tweaks.approachLayout}/>
      <AssetClasses tone={tweaks.classesTone} layout={tweaks.classesLayout}/>
      <WhyRank whyImg={tweaks.whyImg}/>
      <WhoFor layout={tweaks.whoLayout}/>
      <FinalCta ctaImg={tweaks.ctaImg} tone={tweaks.ctaTone}/>
      <GetStartedModal/>

      {showTweaks && <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakRadio
            label="Layout"
            value={tweaks.heroLayout}
            options={["right","left","type-only"]}
            onChange={v => setTweak("heroLayout", v)}
          />
          <TweakSelect
            label="Photo"
            value={tweaks.heroImg}
            options={heroOptions}
            onChange={v => setTweak("heroImg", v)}
          />
          <TweakRadio
            label="Accent color"
            value={tweaks.heroAccent}
            options={["orange","cream","teal"]}
            onChange={v => setTweak("heroAccent", v)}
          />
        </TweakSection>

        <TweakSection label="Intro">
          <TweakRadio
            label="Alignment"
            value={tweaks.introAlign}
            options={["center","left"]}
            onChange={v => setTweak("introAlign", v)}
          />
        </TweakSection>

        <TweakSection label="What We Do">
          <TweakRadio
            label="Background"
            value={tweaks.wwdTone}
            options={["teal","night","espresso"]}
            onChange={v => setTweak("wwdTone", v)}
          />
        </TweakSection>

        <TweakSection label="Approach">
          <TweakRadio
            label="Layout"
            value={tweaks.approachLayout}
            options={["stepper","grid"]}
            onChange={v => setTweak("approachLayout", v)}
          />
        </TweakSection>

        <TweakSection label="Asset Classes">
          <TweakRadio
            label="Layout"
            value={tweaks.classesLayout}
            options={["switcher","grid"]}
            onChange={v => setTweak("classesLayout", v)}
          />
          <TweakRadio
            label="Background"
            value={tweaks.classesTone}
            options={["orange","espresso"]}
            onChange={v => setTweak("classesTone", v)}
          />
        </TweakSection>

        <TweakSection label="Why Rank">
          <TweakSelect
            label="Background photo"
            value={tweaks.whyImg}
            options={whyOptions}
            onChange={v => setTweak("whyImg", v)}
          />
        </TweakSection>

        <TweakSection label="Who This Is For">
          <TweakRadio
            label="Layout"
            value={tweaks.whoLayout}
            options={["grid","stack"]}
            onChange={v => setTweak("whoLayout", v)}
          />
        </TweakSection>

        <TweakSection label="Final CTA">
          <TweakSelect
            label="Photo"
            value={tweaks.ctaImg}
            options={ctaOptions}
            onChange={v => setTweak("ctaImg", v)}
          />
          <TweakRadio
            label="Overlay"
            value={tweaks.ctaTone}
            options={["dark","orange"]}
            onChange={v => setTweak("ctaTone", v)}
          />
        </TweakSection>
      </TweaksPanel>}
    </>
  );
}

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