'use client';

import { AlternatingSection } from '@/components/landing/AlternatingSection';
import { FAQ } from '@/components/landing/FAQ';
import { FeatureGrid } from '@/components/landing/FeatureGrid';
import { LandingHero } from '@/components/landing/LandingHero';
import { DiscoverySection } from '@/components/landing/DiscoverySection';
import { FeatureItem, ResultItem, StepItem } from '@/ui/LandingItems';
import { CareerProgressionMockup } from '@/components/mockups/CareerProgressionMockup';
import { CompanionAutomationMockup } from '@/components/mockups/CompanionAutomationMockup';
import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
import { SimPlatformMockup } from '@/components/mockups/SimPlatformMockup';
import { ModeGuard } from '@/components/shared/ModeGuard';
import { Box } from '@/ui/Box';
import { DiscordCTA } from '@/ui/DiscordCTA';
import { Footer } from '@/ui/Footer';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { TelemetryLine } from '@/ui/TelemetryLine';
import { Glow } from '@/ui/Glow';

export interface HomeViewData {
  isAlpha: boolean;
  upcomingRaces: Array<{
    id: string;
    track: string;
    car: string;
    formattedDate: string;
  }>;
  topLeagues: Array<{
    id: string;
    name: string;
    description: string;
  }>;
  teams: Array<{
    id: string;
    name: string;
    description: string;
    logoUrl?: string;
  }>;
}

interface HomeTemplateProps {
  viewData: HomeViewData;
}

export function HomeTemplate({ viewData }: HomeTemplateProps) {
  return (
    <Box as="main" bg="graphite-black" position="relative" overflow="hidden">
      <Glow color="primary" size="xl" position="top-right" opacity={0.05} />
      
      <LandingHero />
      
      <TelemetryLine color="primary" height="1px" opacity={0.3} />

      {/* Section 1: A Persistent Identity */}
      <Box position="relative" bg="graphite-black">
        <Glow color="aqua" size="lg" position="bottom-left" opacity={0.03} />
        <AlternatingSection
          heading="A Persistent Identity"
          backgroundVideo="/gameplay.mp4"
          description={
            <Stack gap={8}>
              <Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
                Your races, your seasons, your progress &mdash; finally in one place.
              </Text>
              <Box display="grid" gridCols={1} gap={3}>
                <FeatureItem text="Lifetime stats and season history across all your leagues" />
                <FeatureItem text="Track your performance, consistency, and team contributions" />
                <FeatureItem text="Your own rating that reflects real league competition" />
              </Box>
              <Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} py={1} bg="primary-accent/5">
                <Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">
                  iRacing gives you physics. GridPilot gives you a career.
                </Text>
              </Box>
            </Stack>
          }
          mockup={<CareerProgressionMockup />}
          layout="text-left"
        />
      </Box>

      <FeatureGrid />

      {/* Section 2: Results That Actually Stay */}
      <Box position="relative" bg="graphite-black">
        <Glow color="primary" size="lg" position="top-right" opacity={0.03} />
        <AlternatingSection
          heading="Results That Actually Stay"
          backgroundImage="/images/ff1600.jpeg"
          description={
            <Stack gap={8}>
              <Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
                Every race you run stays with you.
              </Text>
              <Box display="grid" gridCols={1} gap={3}>
                <ResultItem text="Your stats, your team, your story &mdash; all connected" color="#198CFF" />
                <ResultItem text="One race result updates your profile, team points, rating, and season history" color="#198CFF" />
                <ResultItem text="No more fragmented data across spreadsheets and forums" color="#198CFF" />
              </Box>
              <Box borderLeft borderStyle="solid" borderColor="telemetry-aqua" pl={4} py={1} bg="telemetry-aqua/5">
                <Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">
                  Your racing career, finally in one place.
                </Text>
              </Box>
            </Stack>
          }
          mockup={<RaceHistoryMockup />}
          layout="text-right"
        />
      </Box>

      <TelemetryLine color="aqua" height="1px" opacity={0.2} />

      {/* Section 3: Automatic Session Creation */}
      <Box position="relative" bg="graphite-black">
        <Glow color="amber" size="lg" position="bottom-right" opacity={0.02} />
        <AlternatingSection
          heading="Automatic Session Creation"
          description={
            <Stack gap={8}>
              <Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
                Setting up league races used to mean clicking through iRacing&apos;s wizard 20 times.
              </Text>
              <Box display="grid" gridCols={1} gap={3}>
                <StepItem step={1} text="Our companion app syncs with your league schedule" />
                <StepItem step={2} text="When it's race time, it creates the iRacing session automatically" />
                <StepItem step={3} text="No clicking through wizards. No manual setup" />
              </Box>
              <Box borderLeft borderStyle="solid" borderColor="warning-amber" pl={4} py={1} bg="warning-amber/5">
                <Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">
                  Automation instead of repetition.
                </Text>
              </Box>
            </Stack>
          }
          mockup={<CompanionAutomationMockup />}
          layout="text-left"
        />
      </Box>

      {/* Section 4: Game-Agnostic Platform */}
      <Box position="relative" bg="graphite-black">
        <Glow color="primary" size="xl" position="center" opacity={0.03} />
        <AlternatingSection
          heading="Built for iRacing. Ready for the future."
          backgroundImage="/images/lmp3.jpeg"
          description={
            <Stack gap={8}>
              <Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
                Right now, we&apos;re focused on making iRacing league racing better.
              </Text>
              <Text color="text-gray-400" leading="relaxed">
                But sims come and go. Your leagues, your teams, your rating &mdash; those stay.
              </Text>
              <Box borderLeft borderStyle="solid" borderColor="border-gray" pl={4} py={1} bg="white/5">
                <Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest" leading="relaxed">
                  GridPilot is built to outlast any single platform. When the next sim arrives, your competitive identity moves with you.
                </Text>
              </Box>
            </Stack>
          }
          mockup={<SimPlatformMockup />}
          layout="text-right"
        />
      </Box>

      {/* Alpha-only discovery section */}
      <ModeGuard feature="alpha_discovery">
        <Box bg="panel-gray/20" py={20} borderTop borderBottom borderColor="border-gray/50" position="relative">
          <Glow color="aqua" size="xl" position="center" opacity={0.02} />
          <DiscoverySection viewData={viewData} />
        </Box>
      </ModeGuard>

      <DiscordCTA />
      <FAQ />
      <Footer />
    </Box>
  );
}