// Root app
function App() {
  useReveal();
  return (
    <Fragment>
      <Hero />
      <Speaker />
      <MissionQuote />
      <ImpactStats />
      <Testimonials />
      <Qualifier />
      <Pricing />
      <Agenda />
      <Frameworks />
      <Gallery />
      <Bonus />
      <FAQ />
      {/* spacer so sticky bar doesn't overlap final content */}
      <div className="h-28" />
      <Footer />
      <StickyBar />
    </Fragment>
  );
}

function Footer() {
  return (
    <footer className="relative pt-12 pb-10 border-t border-white/5">
      <div className="mx-auto max-w-[1320px] px-5 lg:px-10 flex flex-wrap items-center justify-between gap-4 text-[13px] text-mute">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-teal to-teal-deep grid place-items-center">
            <span className="font-display text-ink-900 font-bold leading-none">B</span>
          </div>
          <div>
            <div className="text-white text-[14px] font-semibold leading-tight">Basesh Gala</div>
            <div className="text-[11px] uppercase tracking-[0.2em]">Rise to IPO with AI</div>
          </div>
        </div>
        <div className="flex flex-wrap gap-x-6 gap-y-2">
          <a href="#" className="hover:text-white">Privacy</a>
          <a href="#" className="hover:text-white">Terms</a>
          <a href="#" className="hover:text-white">Refund policy</a>
          <a href="#" className="hover:text-white">Contact</a>
        </div>
        <div className="text-[11px] uppercase tracking-[0.2em]">© 2026 · Made in India</div>
      </div>
    </footer>
  );
}

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