// app.jsx — iMMOKi Digital landing page root.

const { useState: useAS, useEffect: useAE } = React;

// Tiny color helpers — adjust hex by amount.
function hexToRgb(h) {
  h = h.replace("#", "");
  if (h.length === 3) h = h.split("").map(c => c + c).join("");
  return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)];
}
function rgbToHex(r,g,b) { return "#" + [r,g,b].map(v => Math.max(0,Math.min(255,Math.round(v))).toString(16).padStart(2,"0")).join(""); }
function shade(hex, amt) {
  const [r,g,b] = hexToRgb(hex);
  const mix = amt < 0 ? 0 : 255;
  const k = Math.abs(amt);
  return rgbToHex(r + (mix - r) * k, g + (mix - g) * k, b + (mix - b) * k);
}
function tint(hex, amt) { return shade(hex, amt); }

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "A",
  "accent": "#009660"
}/*EDITMODE-END*/;

// Normalize a pathname to a route key (no trailing slash; "/" for root).
function routeOf(pathname) {
  return (pathname || "/").replace(/\/+$/, "") || "/";
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modal, setModal] = useAS(false);
  const [playing, setPlaying] = useAS(true);
  const [path, setPath] = useAS(() => routeOf(location.pathname));

  // Apply accent color tweak — drives CTA buttons + highlights
  useAE(() => {
    document.documentElement.style.setProperty("--blue", t.accent);
    // Darker shade for hover and tints derived from accent
    document.documentElement.style.setProperty("--blue-ink", shade(t.accent, -0.22));
    document.documentElement.style.setProperty("--blue-tint", tint(t.accent, 0.88));
  }, [t.accent]);

  const onBook = () => setModal(true);
  useAE(() => { window.__openBooking = () => setModal(true); }, []);

  // Client-side routing: legal pages get their own URL (not an overlay/modal).
  useAE(() => {
    const onPop = () => setPath(routeOf(location.pathname));
    window.__navigate = (to) => {
      const target = routeOf(to);
      if (routeOf(location.pathname) !== target) history.pushState({}, "", target);
      setPath(target);
      window.scrollTo(0, 0);
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  const legalKey = (window.LEGAL_ROUTES || {})[path] || null;

  return (
    <React.Fragment>
      {legalKey && window.LegalPage ? (
        <window.LegalPage page={legalKey} />
      ) : (
        <div className="shell" id="top">
          <Nav onBook={onBook} />
          <Hero onBook={onBook} variant={t.headline} playing={playing} />
          <Channels />
          <WhyUs />
          <Steps />
          <Demo playing={playing} setPlaying={setPlaying} />
          <Testimonials />
          <About />
          <Pricing onBook={onBook} />
          <FAQ />
          <FinalCTA onBook={onBook} />
          <Footer />
          <StickyMobileCTA onBook={onBook} />

          <TweaksPanel>
            <TweakSection label="Headline-Variante (A/B-Test)" />
            <TweakRadio
              label="Hook"
              value={t.headline}
              options={["A", "B", "C"]}
              onChange={(v) => setTweak("headline", v)}
            />
            <div style={{ fontSize: 11, lineHeight: 1.45, color: "rgba(41,38,27,.55)", marginTop: 2 }}>
              {t.headline === "A" && "A · Verlustangst (Hauptvariante)"}
              {t.headline === "B" && "B · Nutzen / Zeitersparnis"}
              {t.headline === "C" && "C · Peer-Autorität"}
            </div>

            <TweakSection label="Akzentfarbe" />
            <TweakColor
              label="CTA & Highlights"
              value={t.accent}
              options={["#1652F0", "#07122B", "#009660", "#0e3bb3"]}
              onChange={(v) => setTweak("accent", v)}
            />

            <TweakSection label="Demo" />
            <TweakButton label="Buchungs-Modal öffnen" onClick={() => setModal(true)} />
          </TweaksPanel>
        </div>
      )}

      <BookingModal open={modal} onClose={() => setModal(false)} />
      {window.CookieConsent ? <window.CookieConsent /> : null}
    </React.Fragment>
  );
}

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