gridpilot.gg/apps/website/components/landing/FeatureGrid.tsx

'use client';

import { DriverProfileMockup } from '@/components/mockups/DriverProfileMockup';
import { LeagueDiscoveryMockup } from '@/components/mockups/LeagueDiscoveryMockup';
import { LeagueHomeMockup } from '@/components/mockups/LeagueHomeMockup';
import { MockupStack } from '@/components/mockups/MockupStack';
import { ProtestWorkflowMockup } from '@/components/mockups/ProtestWorkflowMockup';
import { StandingsTableMockup } from '@/components/mockups/StandingsTableMockup';
import { TeamCompetitionMockup } from '@/components/mockups/TeamCompetitionMockup';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Section } from '@/ui/Section';
import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';
import { Box } from '@/ui/Box';
import { Grid } from '@/ui/Grid';

const features = [
  {
    title: "A Real Home for Your League",
    description: "Stop juggling Discord, spreadsheets, and iRacing admin panels. GridPilot brings everything into one dedicated platform built specifically for league racing.",
    MockupComponent: LeagueHomeMockup
  },
  {
    title: "Automatic Results & Standings",
    description: "Race happens. Results appear. Standings update. No manual data entry, no spreadsheet formulas, no waiting for someone to publish.",
    MockupComponent: StandingsTableMockup
  },
  {
    title: "Real Team Racing",
    description: "Constructors' championships that actually matter. Driver lineups. Team strategies. Multi-class racing done right.",
    MockupComponent: TeamCompetitionMockup
  },
  {
    title: "Clean Protests & Penalties",
    description: "Structured incident reporting with video clip references. Steward review workflows. Transparent penalty application. Professional race control.",
    MockupComponent: ProtestWorkflowMockup
  },
  {
    title: "Find Your Perfect League",
    description: "Search and discover leagues by game, region, and skill level. Browse featured competitions, check driver counts, and join communities that match your racing style.",
    MockupComponent: LeagueDiscoveryMockup
  },
  {
    title: "Your Racing Identity",
    description: "Cross-league driver profiles with career stats, achievements, and racing history. Build your reputation across multiple championships and showcase your progression.",
    MockupComponent: DriverProfileMockup
  }
];

function FeatureCard({ feature, index }: { feature: typeof features[0], index: number }) {
  return (
    <Surface
      variant="muted"
      padding={8}
      rounded="none"
      border
      borderColor="var(--ui-color-border-low)"
      hoverBorderColor="var(--ui-color-intent-primary)"
      transition="all 0.3s ease"
      group
      position="relative"
      overflow="hidden"
    >
      <Stack aspectRatio="video" fullWidth position="relative" bg="var(--ui-color-bg-base)" rounded="none" overflow="hidden" border borderColor="var(--ui-color-border-low)">
        <MockupStack index={index}>
          <feature.MockupComponent />
        </MockupStack>
      </Stack>
      <Stack gap={4} mt={6}>
        <Stack direction="row" align="center" gap={3}>
          <Box w="1" h="3" bg="var(--ui-color-intent-primary)" />
          <Heading level={3} weight="bold" fontSize="lg" letterSpacing="-0.05em" uppercase>
            {feature.title}
          </Heading>
        </Stack>
        <Text size="sm" variant="low" leading="relaxed" weight="normal" groupHoverTextColor="var(--ui-color-text-med)">
          {feature.description}
        </Text>
      </Stack>
      {/* Subtle hover effect */}
      <Box 
        position="absolute" 
        bottom="0" 
        left="0" 
        w="full" 
        h="0.5" 
        bg="var(--ui-color-intent-primary)" 
        transform="scaleX(0)"
        groupHoverScale={true}
        transition="transform 0.5s ease"
        style={{ transformOrigin: 'left' }}
      />
    </Surface>
  );
}

export function FeatureGrid() {
  return (
    <Box borderBottom borderColor="var(--ui-color-border-low)">
      <Section variant="dark" padding="xl">
        <Container position="relative" zIndex={10}>
        <Stack gap={16}>
          <Stack maxWidth="2xl">
            <Stack borderLeft borderStyle="solid" borderColor="var(--ui-color-intent-primary)" pl={4} mb={4} bg="rgba(25, 140, 255, 0.05)" py={1}>
              <Text size="xs" weight="bold" variant="primary" uppercase letterSpacing="0.3em">
                Engineered for Competition
              </Text>
            </Stack>
            <Heading level={2} weight="bold" fontSize={{ base: '3xl', md: '5xl' }} letterSpacing="-0.05em" uppercase>
              Building for League Racing
            </Heading>
            <Text size="lg" variant="low" block mt={6} leading="relaxed" borderLeft borderColor="var(--ui-color-border-low)" pl={6}>
              Every feature is designed to reduce friction and increase immersion. Join our Discord to help shape the future of the platform.
            </Text>
          </Stack>
          
          <Grid cols={{ base: 1, md: 2, lg: 3 }} gap={6}>
            {features.map((feature, index) => (
              <FeatureCard key={feature.title} feature={feature} index={index} />
            ))}
          </Grid>
        </Stack>
      </Container>
      </Section>
    </Box>
  );
}