'use client';

import React from 'react';
import { Section } from '@/ui/Section';
import { FeatureGrid } from '@/ui/FeatureGrid';
import { FeatureItem } from '@/ui/FeatureItem';
import { Box } from '@/ui/Box';
import { RefreshCw, Gavel, Layout } from 'lucide-react';

/**
 * ValuePillars - Redesigned for League Admin features.
 * Focuses on solving the core problems of league management.
 */
export function ValuePillars() {
  const pillars = [
    {
      title: "Automatic Results Sync",
      description: "Direct iRacing integration. Positions, incidents, and best laps imported instantly. Standings update the moment the race ends.",
      icon: RefreshCw,
    },
    {
      title: "Structured Stewarding",
      description: "A dedicated review panel for protests. Drivers submit timestamps and clips; you make the call. Points adjust automatically.",
      icon: Gavel,
    },
    {
      title: "Professional Presence",
      description: "A clean, modern home for your league. Schedules, standings, and rosters that build prestige and attract drivers.",
      icon: Layout,
    },
  ];

  return (
    <Section variant="default" py={32}>
      <Box>
        <FeatureGrid columns={{ base: 1, md: 3 }} gap={16}>
          {pillars.map((pillar) => (
            <FeatureItem 
              key={pillar.title}
              title={pillar.title}
              description={pillar.description}
              icon={pillar.icon}
            />
          ))}
        </FeatureGrid>
      </Box>
    </Section>
  );
}

