/* DOMINANCE — App shell with client-side router + tweaks */

const { useState: useStateApp, useEffect: useEffectApp } = React;

function useHashRoute() {
  // Hash routes can carry a query string (e.g. "#/intake?t=abc123") — strip
  // it for routing decisions; the page that needs the params parses them
  // off window.location.hash itself.
  const parsePath = () => {
    const h = window.location.hash.replace(/^#/, "") || "/";
    const path = h.split("?")[0] || "/";
    return path;
  };
  const [route, setRoute] = useStateApp(parsePath);
  useEffectApp(() => {
    const onHash = () => {
      setRoute(parsePath());
      // scroll to top on route change
      window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  const navigate = (path) => {
    window.location.hash = path;
  };
  return [route, navigate];
}

function App() {
  const [route, navigate] = useHashRoute();
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  let page = null;
  if (route === "/" || route === "" || route === "/index") {
    page = <HookPage tweaks={tweaks} navigate={navigate} />;
  } else if (route === "/step-2") {
    page = <VslPage tweaks={tweaks} navigate={navigate} />;
  } else if (route === "/apply") {
    page = <ApplyPage navigate={navigate} />;
  } else if (route === "/application-received") {
    page = <ConfirmPage tweaks={tweaks} navigate={navigate} />;
  } else if (route === "/qualified") {
    page = <QualifiedPage tweaks={tweaks} navigate={navigate} />;
  } else if (route === "/declined") {
    page = <DeclinedPage tweaks={tweaks} navigate={navigate} />;
  } else if (route === "/intake") {
    page = <IntakePage navigate={navigate} />;
  } else {
    page = <HookPage tweaks={tweaks} navigate={navigate} />;
  }

  // accent color override
  useEffectApp(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
  }, [tweaks.accent]);

  return (
    <>
      <Ambient />
      <Grain />
      <div key={route} className="route-frame">
        {page}
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hook page copy">
          <TweakText label="Eyebrow" value={tweaks.label} onChange={(v) => setTweak("label", v)} />
          <TweakText label="Headline" value={tweaks.headline} onChange={(v) => setTweak("headline", v)} multiline />
          <TweakText label="Subhead" value={tweaks.subhead} onChange={(v) => setTweak("subhead", v)} />
          <TweakText label="CTA text" value={tweaks.ctaText} onChange={(v) => setTweak("ctaText", v)} />
        </TweakSection>
        <TweakSection title="Brand">
          <TweakColor label="Accent color" value={tweaks.accent} onChange={(v) => setTweak("accent", v)} />
        </TweakSection>
        <TweakSection title="Sections">
          <TweakToggle label="Show metrics row" value={tweaks.showMetrics} onChange={(v) => setTweak("showMetrics", v)} />
          <TweakToggle label="Show client logos" value={tweaks.showLogos} onChange={(v) => setTweak("showLogos", v)} />
        </TweakSection>
        <TweakSection title="Video">
          <TweakText label="VSL runtime" value={tweaks.videoRuntime} onChange={(v) => setTweak("videoRuntime", v)} />
        </TweakSection>
        <TweakSection title="Navigate">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            <TweakButton onClick={() => navigate("/")}>Hook /</TweakButton>
            <TweakButton onClick={() => navigate("/step-2")}>VSL /step-2</TweakButton>
            <TweakButton onClick={() => navigate("/application-received")}>
              Confirm (Review)
            </TweakButton>
            <TweakButton onClick={() => navigate("/qualified")}>
              Qualified
            </TweakButton>
            <TweakButton onClick={() => navigate("/declined")}>
              Declined
            </TweakButton>
            <TweakButton onClick={() => navigate("/intake")}>
              Intake (Onboarding)
            </TweakButton>
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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