import { useEffect, useState } from "react";
import Nav from "./components/Nav.jsx";
import Hero from "./components/Hero.jsx";
import Wall from "./components/Wall.jsx";
import CrossedOut from "./components/CrossedOut.jsx";
import Journey from "./components/Journey.jsx";
import Audience from "./components/Audience.jsx";
import Closing from "./components/Closing.jsx";
import Footer from "./components/Footer.jsx";
import LaunchModal from "./components/LaunchModal.jsx";

export default function App() {
  const [scrolled, setScrolled] = useState(false);
  const [launchPrompt, setLaunchPrompt] = useState(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <Nav scrolled={scrolled} />
      <main>
        <Hero onStart={(p) => setLaunchPrompt(p || "Build me a tool for my business.")} />
        <Wall />
        <CrossedOut />
        <Journey />
        <Audience />
        <Closing />
      </main>
      <Footer />
      {launchPrompt !== null && (
        <LaunchModal prompt={launchPrompt} onClose={() => setLaunchPrompt(null)} />
      )}
    </>
  );
}
