/* global window, React, ReactDOM */
// =============================================================
// LANDING — composes all sections into a single responsive page.
//
// The design prototype mounted three fixed-width artboards (desktop /
// tablet / mobile) inside a pan/zoom DesignCanvas. For the shipped page
// we render ONE LandingPage and drive the existing `data-bp` styling from
// the live viewport width, so the whole design-canvas layer is dropped.
// =============================================================

function LandingPage({ bp }) {
  return (
    <div className="landing" data-bp={bp}>
      <window.Navbar />
      <window.Hero />
      <window.CredBar />
      <window.SocialProof />
      <window.Speaker />
      <window.Story />
      <window.LaLinea />
      <window.Demo />
      <window.Quote />
      <window.Metaphor />
      <window.Partners />
      <window.FuturePacing />
      <window.Learn />
      <window.Objections />
      <window.WhoFor />
      <window.FinalCta />
    </div>
  );
}

// Map the live viewport width onto the design's three breakpoints.
// Thresholds mirror the prototype artboards (mobile 390 · tablet 820 · desktop 1440).
function currentBp() {
  const w = window.innerWidth;
  if (w < 768) return "mobile";
  if (w < 1080) return "tablet";
  return "desktop";
}

function useBreakpoint() {
  const [bp, setBp] = React.useState(currentBp);
  React.useEffect(() => {
    let raf = 0;
    const onResize = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setBp(currentBp()));
    };
    window.addEventListener("resize", onResize);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("resize", onResize);
    };
  }, []);
  return bp;
}

function App() {
  const bp = useBreakpoint();
  return <LandingPage bp={bp} />;
}

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