// ============================================================
// APP — orchestrator that composes the landing page
// ============================================================

function ShardLanding() {
  const theme = window.useActiveTheme();
  const {
    Nav,
    Hero,
    ShardField,
    ProblemSection,
    WhatIsSection,
    FeaturesSection,
    PersonasSection,
    HowItWorks,
    ComparisonSection,
    SignalsSection,
    PricingSection,
    FAQSection,
    FinalCTA,
    Footer,
  } = window;

  // Keep body bg + text in sync so any sliver of body that peeks through
  // (e.g. behind backdrop-filter on the fixed nav) matches the active theme.
  React.useEffect(() => {
    document.body.style.background = theme.page;
    document.body.style.color = theme.ink;
  }, [theme.page, theme.ink]);

  // When this page loads with a hash (e.g. /#features after clicking the nav
  // from /about), the browser tries to scroll before React renders the
  // targets. Re-trigger the scroll once the layout has actually committed.
  React.useEffect(() => {
    const hash = window.location.hash;
    if (!hash || hash === "#") return;
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        try {
          const el = document.querySelector(hash);
          if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
        } catch (e) {}
      });
    });
  }, []);

  return (
    // Wrapper is transparent — body carries the page colour so the fixed
    // ShardField canvas can sit between body and content.
    <div style={{ background: "transparent", color: theme.ink, minHeight: "100vh", position: "relative" }}>
      <ShardField />
      <div style={{ position: "relative", zIndex: 1 }}>
      <Nav />
      <Hero />
      <ProblemSection />
      <WhatIsSection />
      <FeaturesSection />
      <PersonasSection />
      <HowItWorks />
      <ComparisonSection />
      <SignalsSection />
      <PricingSection />
      <FAQSection />
      <FinalCTA />
      <Footer />
      </div>
    </div>
  );
}

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