'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: "League Identity",
      description: "Public schedules, standings, and rosters for league members.",
      icon: Layout,
    },
  ];

  return (
    <Section variant="default" padding="lg">
      <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>
    </Section>
  );
}