'use client';

import { HomeFeatureDescription } from '@/components/home/HomeFeatureDescription';
import { HomeFeatureSection } from '@/components/home/HomeFeatureSection';
import { HomeFooterCTA } from '@/components/home/HomeFooterCTA';
import { HomeHeader } from '@/components/home/HomeHeader';
import { HomeStatsStrip } from '@/components/home/HomeStatsStrip';
import { LeagueSummaryPanel } from '@/components/home/LeagueSummaryPanel';
import { QuickLinksPanel } from '@/components/home/QuickLinksPanel';
import { RecentRacesPanel } from '@/components/home/RecentRacesPanel';
import { TeamSummaryPanel } from '@/components/home/TeamSummaryPanel';
import { FAQ } from '@/components/landing/FAQ';
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 { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Box } from '@/ui/primitives/Box';
import { Grid } from '@/ui/primitives/Grid';
import { Section } from '@/ui/Section';
import { Text } from '@/ui/Text';

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;
}

/**
 * HomeTemplate - Redesigned for "Precision Racing Minimal" theme.
 * Composes semantic components instead of generic layout primitives.
 */
export function HomeTemplate({ viewData }: HomeTemplateProps) {
  return (
    <Box color="text-white">
      {/* Hero Section */}
      <HomeHeader
        title="Modern Motorsport Infrastructure."
        subtitle="Precision Racing Infrastructure"
        description="GridPilot gives your league racing a real home. Results, standings, teams, and career progression — engineered for precision and control."
        primaryAction={{ label: 'Join the Grid', href: '#' }}
        secondaryAction={{ label: 'Explore Leagues', href: '#' }}
      />

      {/* Telemetry Status Strip */}
      <HomeStatsStrip />

      {/* Quick Actions Bar */}
      <QuickLinksPanel />

      {/* Feature Sections */}
      <HomeFeatureSection
        heading="A Persistent Identity"
        accentColor="primary"
        layout="text-left"
        description={
          <HomeFeatureDescription
            lead="Your races, your seasons, your progress — finally in one place."
            items={[
              'Lifetime stats and season history across all your leagues',
              'Track your performance, consistency, and team contributions',
              'Your own rating that reflects real league competition',
            ]}
            quote="iRacing gives you physics. GridPilot gives you a career."
            accentColor="primary"
          />
        }
        mockup={<CareerProgressionMockup />}
      />

      <HomeFeatureSection
        heading="Results That Actually Stay"
        accentColor="aqua"
        layout="text-right"
        description={
          <HomeFeatureDescription
            lead="Every race you run stays with you."
            items={[
              'Your stats, your team, your story — all connected',
              'One race result updates your profile, team points, rating, and season history',
              'No more fragmented data across spreadsheets and forums',
            ]}
            quote="Your racing career, finally in one place."
            accentColor="aqua"
          />
        }
        mockup={<RaceHistoryMockup />}
      />

      <HomeFeatureSection
        heading="Automatic Session Creation"
        accentColor="amber"
        layout="text-left"
        description={
          <HomeFeatureDescription
            lead="Setting up league races used to mean clicking through iRacing's wizard 20 times."
            items={[
              'Our companion app syncs with your league schedule',
              'When it\'s race time, it creates the iRacing session automatically',
              'No clicking through wizards. No manual setup',
            ]}
            quote="Automation instead of repetition."
            accentColor="amber"
          />
        }
        mockup={<CompanionAutomationMockup />}
      />

      <HomeFeatureSection
        heading="Built for iRacing. Ready for the future."
        accentColor="primary"
        layout="text-right"
        description={
          <HomeFeatureDescription
            lead="Right now, we're focused on making iRacing league racing better."
            items={[
              'But sims come and go. Your leagues, your teams, your rating — those stay.',
            ]}
            quote="GridPilot is built to outlast any single platform."
            accentColor="gray"
          />
        }
        mockup={<SimPlatformMockup />}
      />

      {/* Discovery Grid */}
      <ModeGuard feature="alpha_discovery">
        <Section py={24} variant="dark">
          <Container>
            <Box maxWidth="2xl" mb={16}>
              <Box display="flex" alignItems="center" borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" px={4} mb={4}>
                <Text size="xs" weight="bold" uppercase letterSpacing="widest" color="text-primary-accent">
                  Live Ecosystem
                </Text>
              </Box>
              <Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" letterSpacing="tight" color="text-white" mb={6}>
                DISCOVER THE GRID
              </Heading>
              <Text size="lg" color="text-gray-400" leading="relaxed">
                Explore leagues, teams, and races that make up the GridPilot ecosystem.
              </Text>
            </Box>

            <Grid cols={1} lgCols={3} gap={8}>
              <LeagueSummaryPanel leagues={viewData.topLeagues} />
              <TeamSummaryPanel teams={viewData.teams} />
              <RecentRacesPanel races={viewData.upcomingRaces} />
            </Grid>
          </Container>
        </Section>
      </ModeGuard>

      {/* CTA & FAQ */}
      <HomeFooterCTA />
      <FAQ />
    </Box>
  );
}