// cal-app.jsx — App root: router, layout, tweaks panel

const { useState: AUS, useEffect: AUE, useMemo: AUM } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "traditional",
  "font": "inter",
  "applySteps": 5,
  "trustPlacement": "section",
  "stickyMobileCta": true,
  "showMoment": true
}/*EDITMODE-END*/;

const HERO_OPTIONS = [
  { value: "traditional", label: "Traditional" },
  { value: "mini-app", label: "Mini-application" },
  { value: "quiz", label: "Qualifying quiz" },
  { value: "estimator", label: "Payment estimator" },
];

const FONT_OPTIONS = [
  { value: "inter", label: "Inter" },
  { value: "geist", label: "Geist" },
  { value: "dmsans", label: "DM Sans" },
];

const TRUST_OPTIONS = [
  { value: "strip", label: "Trust strip only" },
  { value: "section", label: "Dedicated reviews section" },
  { value: "inline", label: "Inline + section" },
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { path } = useRoute();

  // Apply font to root
  AUE(() => {
    document.documentElement.dataset.font = t.font;
  }, [t.font]);

  // Hide nav/footer on /apply (full takeover)
  const isApply = path.startsWith("/apply");

  // Route resolution
  let page;
  if (path === "/" || path === "") {
    page = <Home heroVariant={t.hero} trustPlacement={t.trustPlacement} showMoment={t.showMoment} />;
  } else if (path.startsWith("/apply")) {
    page = <Apply density={t.applySteps} />;
  } else if (path === "/financing" || path.startsWith("/financing")) {
    page = <Financing />;
  } else if (path === "/about" || path.startsWith("/about")) {
    page = <About />;
  } else if (path === "/credit-consent") {
    page = <CreditConsent />;
  } else if (path === "/privacy") {
    page = <PrivacyPolicy />;
  } else {
    page = <NotFound />;
  }

  return (
    <div className={t.stickyMobileCta ? "has-sticky-cta" : ""} style={{minHeight:"100vh",display:"flex",flexDirection:"column"}}>
      <Nav />
      <main style={{flex:1, display:"flex", flexDirection:"column"}}>{page}</main>
      {!isApply && <Footer />}
      <StickyMobileCTA enabled={t.stickyMobileCta} hideOnApply={true} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero strategy" />
        <TweakSelect
          label="Above-the-fold variant"
          value={t.hero}
          options={HERO_OPTIONS}
          onChange={(v) => setTweak("hero", v)}
        />
        <p className="twk-note">
          Switches the home hero between 4 strategies — read on home (/).
        </p>

        <TweakSection label="Typography" />
        <TweakRadio
          label="Type family"
          value={t.font}
          options={FONT_OPTIONS}
          onChange={(v) => setTweak("font", v)}
        />

        <TweakSection label="Apply flow" />
        <TweakRadio
          label="Steps"
          value={t.applySteps}
          options={[
            { value: 3, label: "3" },
            { value: 4, label: "4" },
            { value: 5, label: "5" },
          ]}
          onChange={(v) => setTweak("applySteps", v)}
        />
        <p className="twk-note">
          3 = combined sections, 4 = income+credit merged, 5 = canonical.
        </p>

        <TweakSection label="Social proof" />
        <TweakSelect
          label="Placement"
          value={t.trustPlacement}
          options={TRUST_OPTIONS}
          onChange={(v) => setTweak("trustPlacement", v)}
        />

        <TweakSection label="Mobile" />
        <TweakToggle
          label="Sticky bottom CTA"
          value={t.stickyMobileCta}
          onChange={(v) => setTweak("stickyMobileCta", v)}
        />
        <p className="twk-note">
          Mobile only. Off on /apply by design.
        </p>

        <TweakSection label="Imagery" />
        <TweakToggle
          label="Show 'a real moment' banner"
          value={t.showMoment}
          onChange={(v) => setTweak("showMoment", v)}
        />
        <p className="twk-note">
          Adds a wide photo slot between How-it-works and Why-CAL on home.
        </p>

        <TweakSection label="Quick links" />
        <div className="twk-links">
          <a href="#/">Home</a>
          <a href="#/apply">Apply</a>
          <a href="#/financing">How it works</a>
          <a href="#/about">About + contact</a>
          <a href="#/credit-consent">Credit consent</a>
          <a href="#/__nope">404</a>
        </div>
      </TweaksPanel>

      <style>{`
        .twk-note {
          margin: 4px 0 0;
          font-size: 11px;
          color: rgba(41,38,27,.5);
          line-height: 1.45;
          padding: 0 2px;
        }
        .twk-links {
          display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px;
          font-size: 11.5px;
        }
        .twk-links a {
          padding: 5px 8px; border-radius: 6px;
          background: rgba(255,255,255,.55);
          border: .5px solid rgba(0,0,0,.08);
          color: rgba(41,38,27,.85);
          text-decoration: none;
        }
        .twk-links a:hover { background: white; color: var(--primary); }
      `}</style>
    </div>
  );
}

function Root() {
  return (
    <RouterRoot>
      <App />
    </RouterRoot>
  );
}

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