import Section from '@/components/ui/Section';
import Container from '@/components/ui/Container';
import Heading from '@/components/ui/Heading';
import MockupStack from '@/components/ui/MockupStack';
import LeagueHomeMockup from '@/components/mockups/LeagueHomeMockup';
import StandingsTableMockup from '@/components/mockups/StandingsTableMockup';
import TeamCompetitionMockup from '@/components/mockups/TeamCompetitionMockup';
import ProtestWorkflowMockup from '@/components/mockups/ProtestWorkflowMockup';
import LeagueDiscoveryMockup from '@/components/mockups/LeagueDiscoveryMockup';
import DriverProfileMockup from '@/components/mockups/DriverProfileMockup';

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

export default function FeatureGrid() {
  return (
    <Section variant="default">
      <Container>
        <Container size="sm" center>
          <Heading level={2} className="text-white">
            Built for League Racing
          </Heading>
          <p className="mt-4 text-lg text-gray-400">
            Everything you need to run a professional iRacing league, nothing you don&apos;t
          </p>
        </Container>
        <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-16 sm:mt-20 lg:max-w-none lg:grid-cols-2 xl:grid-cols-3">
          {features.map((feature, index) => (
            <div key={feature.title} className="flex flex-col gap-6">
              <div className="aspect-video w-full">
                <MockupStack index={index}>
                  <feature.MockupComponent />
                </MockupStack>
              </div>
              <div>
                <Heading level={3} className="text-white">
                  {feature.title}
                </Heading>
                <p className="mt-2 text-base leading-7 text-gray-400">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </Section>
  );
}