// App root for index2 — same building blocks as v1, but uses the v2 hero +
// inserts the Monthly Returns Heatmap section after the Features block.

const TWEAK_DEFAULS_V2 = /*EDITMODE-BEGIN*/{
  "accentHue": 262,
  "density": "compact",
  "showMetricsStrip": true
}/*EDITMODE-END*/;

function useThemeV2() {
  const [theme, setTheme] = React.useState(() => {
    const stored = localStorage.getItem("df-theme");
    return stored || "dark";
  });
  React.useEffect(() => {
    const html = document.documentElement;
    html.classList.remove("dark", "light");
    html.classList.add(theme);
    localStorage.setItem("df-theme", theme);
  }, [theme]);
  return [theme, setTheme];
}

function TweaksV2() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULS_V2);
  React.useEffect(() => {
    document.documentElement.style.setProperty("--primary-h", String(t.accentHue));
  }, [t.accentHue]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Accent">
        <TweakColor
          label="Primary hue"
          options={[
            "hsl(262 83% 58%)",
            "hsl(220 90% 58%)",
            "hsl(155 65% 45%)",
            "hsl(35 90% 55%)",
          ]}
          value={`hsl(${t.accentHue} 83% 58%)`}
          onChange={(v) => {
            const m = /hsl\((\d+)/.exec(v);
            if (m) setTweak("accentHue", parseInt(m[1], 10));
          }}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

function AppV2() {
  const [theme, setTheme] = useThemeV2();
  useReveal();
  // When arriving from another page via /#features, /#pricing, etc., the target
  // section doesn't exist yet (the landing is Babel-rendered async), so the
  // browser's native anchor scroll no-ops and we land at the top. Retry until
  // the section mounts, scroll to it, then re-correct after fonts/charts settle.
  React.useEffect(() => {
    const id = decodeURIComponent((window.location.hash || "").slice(1));
    if (!id) return;
    let frames = 0;
    const scrollToTarget = () => {
      const el = document.getElementById(id);
      if (el) {
        el.scrollIntoView({ block: "start" });
        if (document.fonts && document.fonts.ready) {
          document.fonts.ready.then(() => {
            const t = document.getElementById(id);
            if (t) t.scrollIntoView({ block: "start" });
          });
        }
      } else if (frames++ < 60) {
        requestAnimationFrame(scrollToTarget);
      }
    };
    requestAnimationFrame(scrollToTarget);
  }, []);
  return (
    <div className="min-h-screen">
      <NavBarV2 theme={theme} onToggleTheme={() => setTheme(theme === "dark" ? "light" : "dark")} />
      <main>
        <HeroV2 />
        <TrustStrip />
        <FeaturesV2 />
        <IntegrationsMarquee />
        <ProductTour />
        <MonthlyReturnsHeatmap />
        <CorrelationSection />
        <Workflow />
        <Testimonials />
        <Comparison />
        <PricingV4 />
        <Security />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />
      <TweaksV2 />
    </div>
  );
}

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