function App() {
  const [modal, setModal] = useState({ open: false, mode: "download", context: null });

  const openDownload = useCallback(() => setModal({ open: true, mode: "download", context: null }), []);
  const openWaitlist = useCallback((r) => setModal({
    open: true, mode: "waitlist",
    context: { id: r.id, title: r.title, note: `We'll email you when ${r.id} (${r.title}) ships — currently scheduled for ${r.status || "later in 2026"}.` },
  }), []);
  const openInquire = useCallback((r) => setModal({
    open: true, mode: "inquire",
    context: { id: r.id, title: r.title || r.id },
  }), []);
  const close = useCallback(() => setModal(m => ({ ...m, open: false })), []);

  return (
    <div className="vst-root">
      <Header/>
      <Hero onPrimaryCTA={openDownload}/>
      <FeaturedResearch onDownload={(email) => setModal({ open: true, mode: "download", context: { email } })}/>
      <Coverage onWaitlist={openWaitlist} onInquire={openInquire}/>
      <Pricing onInquire={openInquire}/>
      <Methodology/>
      <About/>
      <CTAFinal onPrimaryCTA={openDownload}/>
      <Footer/>
      <CaptureModal
        open={modal.open}
        onClose={close}
        mode={modal.mode}
        context={modal.context}
      />
    </div>
  );
}

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