// app.jsx — main entry, routing, tweaks

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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ink",
  "mode": "buying",
  "density": "regular"
}/*EDITMODE-END*/;

const PALETTES = {
  forest: { label: "Forest", swatches: ["#0F2A1D", "#3D6A4F", "#F7F4EE", "#C76B3C"] },
  ink:    { label: "Ink",    swatches: ["#0B1426", "#1F4B7A", "#FBF9F6", "#C99B3D"] },
  clay:   { label: "Clay",   swatches: ["#1A1A1A", "#6B8F71", "#FFFBF5", "#C26239"] },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useStateApp("home");
  const isDev = typeof window !== "undefined" && new URLSearchParams(window.location.search).get("dev") === "1"; // 'home' | 'dashboard'

  // Apply palette + density to body
  useEffectApp(() => {
    document.body.setAttribute("data-palette", t.palette);
    document.body.setAttribute("data-density", t.density);
  }, [t.palette, t.density]);

  return (
    <div data-screen-label={view === "home" ? "01 Homepage" : "02 Dashboard"}>
      {view === "home" ? (
        <Homepage
          mode={t.mode}
          setMode={(v) => setTweak("mode", v)}
          density={t.density}
          onOpenDashboard={() => { window.location.href = "/login"; }}
        />
      ) : (
        <Dashboard
          mode={t.mode}
          setMode={(v) => setTweak("mode", v)}
          onBack={() => { setView("home"); window.scrollTo(0,0); }}
        />
      )}

      {isDev && (
      <TweaksPanel>
        <TweakSection label="View"/>
        <TweakRadio
          label="Screen"
          value={view}
          options={[{value:"home", label:"Homepage"}, {value:"dashboard", label:"Dashboard"}]}
          onChange={(v) => { setView(v); window.scrollTo(0,0); }}
        />

        <TweakSection label="User mode"/>
        <TweakSelect
          label="Who's the visitor"
          value={t.mode}
          options={[
            {value: "renter", label: "Renting"},
            {value: "saving", label: "Saving to buy"},
            {value: "buying", label: "Buying now"},
            {value: "parent", label: "Helping your kid"},
            {value: "upsizing", label: "Upsizing"},
            {value: "downsizing", label: "Downsizing"},
            {value: "investment", label: "Investment"},
          ]}
          onChange={(v) => setTweak("mode", v)}
        />

        <TweakSection label="Look &amp; feel"/>
        <TweakRadio
          label="Palette"
          value={t.palette}
          options={[
            {value: "forest", label: "Forest"},
            {value: "ink", label: "Ink"},
            {value: "clay", label: "Clay"},
          ]}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
            {value: "compact", label: "Tight"},
            {value: "regular", label: "Normal"},
            {value: "airy",    label: "Airy"},
          ]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweaksPanel>
      )}
    </div>
  );
}

// Homepage shell — v5 cinematic redesign
function Homepage({ mode, setMode, density, onOpenDashboard }) {
  useEffectApp(() => {
    window.__openDashboard = onOpenDashboard;
    return () => { delete window.__openDashboard; };
  }, [onOpenDashboard]);
  return (
    <>
      <HeroV5/>
      <DualCardsV5/>
      <OldVsNewV5/>
      <BridgeQuoteV5/>
      <AutomationsCarousel/>
      <HowItWorksV5/>
      <BuiltForEveryMoveV5/>
      <MissionControlSection/>
      <FamilyVisibilitySection/>
      <FamilySupportV5/>
      <LifecycleGridV5/>
      <IrishStripV5/>
      <PricingV5/>
      <ClosingCTAV5/>
      <SiteFooterV5/>
    </>
  );
}

// Need to handle that TweakColor option may have label+colors objects
// our tweaks-panel TweakColor expects either flat strings or arrays.
// We'll wrap our own simple TweakColor below if needed — but starter handles options as strings or arrays.
// For named palettes (string key + colors array), we pass via custom rendering.

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