import { useState, useEffect } from 'react';
import Header from './components/Header';
import Hero from './components/Hero';
import ProblemSection from './components/ProblemSection';
import GadgetCodeSection from './components/GadgetCodeSection';
import GadgetSection from './components/GadgetSection';
import BuiltWithSection from './components/BuiltWithSection';
import GetStartedSection from './components/GetStartedSection';
import Footer from './components/Footer';

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

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

  return (
    <div className="min-h-screen flex flex-col bg-bg-primary text-text-primary">
      <Header scrolled={scrolled} />
      <main className="flex-1">
        <Hero />
        <div className="section-divider" />
        <ProblemSection />
        <div className="section-divider" />
        <GadgetCodeSection />
        <div className="section-divider" />
        <GadgetSection />
        <div className="section-divider" />
        <BuiltWithSection />
        <div className="section-divider" />
        <GetStartedSection />
      </main>
      <Footer />
    </div>
  );
}