import { ModeGuard } from '@/components/shared/ModeGuard';
import Hero from '@/components/landing/Hero';
import AlternatingSection from '@/components/landing/AlternatingSection';
import FeatureGrid from '@/components/landing/FeatureGrid';
import EmailCapture from '@/components/landing/EmailCapture';
import FAQ from '@/components/landing/FAQ';
import Footer from '@/components/landing/Footer';
import CareerProgressionMockup from '@/components/mockups/CareerProgressionMockup';
import RaceHistoryMockup from '@/components/mockups/RaceHistoryMockup';
import CompanionAutomationMockup from '@/components/mockups/CompanionAutomationMockup';
import SimPlatformMockup from '@/components/mockups/SimPlatformMockup';

export default function HomePage() {
  return (
    <ModeGuard mode="pre-launch">
      <main className="min-h-screen">
        <Hero />
        
        {/* Section 1: A Persistent Identity */}
        <AlternatingSection
          heading="A Persistent Identity"
          description={
            <>
              <p>
                Your races, your seasons, your progress — finally in one place.
              </p>
              <ul className="space-y-2 mt-4">
                <li className="flex items-center gap-2">
                  <span className="text-primary-blue">•</span>
                  <span>Lifetime stats and season history across all your leagues</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-primary-blue">•</span>
                  <span>Track your performance, consistency, and team contributions</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-primary-blue">•</span>
                  <span>Your own rating that reflects real league competition</span>
                </li>
              </ul>
              <p className="mt-4">
                iRacing gives you physics. GridPilot gives you a career.
              </p>
            </>
          }
          mockup={<CareerProgressionMockup />}
          layout="text-left"
        />

        <FeatureGrid />

        {/* Section 2: Results That Actually Stay */}
        <AlternatingSection
          heading="Results That Actually Stay"
          backgroundImage="/images/ff1600.jpeg"
          description={
            <>
              <p>
                Every race you run stays with you.
              </p>
              <ul className="space-y-2 mt-4">
                <li className="flex items-center gap-2">
                  <span className="text-primary-blue">•</span>
                  <span>Your stats, your team, your story — all connected</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-primary-blue">•</span>
                  <span>One race result updates your profile, team points, rating, and season history</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-primary-blue">•</span>
                  <span>No more fragmented data across spreadsheets and forums</span>
                </li>
              </ul>
              <p className="mt-4">
                Your racing career, finally in one place.
              </p>
            </>
          }
          mockup={<RaceHistoryMockup />}
          layout="text-right"
        />

        {/* Section 3: Automatic Session Creation */}
        <AlternatingSection
          heading="Automatic Session Creation"
          description={
            <>
              <p>
                Setting up league races used to mean clicking through iRacing's wizard 20 times.
              </p>
              <ul className="space-y-2 mt-4">
                <li className="flex items-center gap-2">
                  <span className="text-primary-blue">•</span>
                  <span>Our companion app syncs with your league schedule</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-primary-blue">•</span>
                  <span>When it's race time, it creates the iRacing session automatically</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-primary-blue">•</span>
                  <span>No clicking through wizards. No manual setup</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-primary-blue">•</span>
                  <span>Runs on your machine, totally transparent, completely safe</span>
                </li>
              </ul>
              <p className="mt-4">
                Automation instead of repetition.
              </p>
            </>
          }
          mockup={<CompanionAutomationMockup />}
          layout="text-left"
        />

        {/* Section 4: Game-Agnostic Platform */}
        <AlternatingSection
          heading="Built for iRacing. Ready for the future."
          backgroundImage="/images/lmp3.jpeg"
          description={
            <>
              <p>
                Right now, we're focused on making iRacing league racing better.
              </p>
              <p className="mt-4">
                But sims come and go. Your leagues, your teams, your rating — those stay.
              </p>
              <p className="mt-4">
                GridPilot is built to outlast any single platform.
              </p>
              <p className="mt-4">
                When the next sim arrives, your competitive identity moves with you.
              </p>
            </>
          }
          mockup={<SimPlatformMockup />}
          layout="text-right"
        />

        <EmailCapture />
        <FAQ />
        <Footer />
      </main>
    </ModeGuard>
  );
}