import { FeatureCard } from './FeatureCard';

const features = [
  {
    title: 'Vehicle Management',
    description: 'Track all your vehicles in one centralized location with detailed information and history.',
    imageSrc: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=600&h=400&fit=crop',
    imageAlt: 'Vehicle Management',
  },
  {
    title: 'Fuel Log Tracking',
    description: 'Monitor fuel consumption, costs, and efficiency across all your vehicles.',
    imageSrc: 'https://images.unsplash.com/photo-1529369623266-f5264b696110?w=600&h=400&fit=crop',
    imageAlt: 'Fuel Log Tracking',
  },
  {
    title: 'Maintenance Records',
    description: 'Keep detailed maintenance logs and never miss scheduled service appointments.',
    imageSrc: 'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=600&h=400&fit=crop',
    imageAlt: 'Maintenance Records',
  },
  {
    title: 'Document Storage',
    description: 'Store and organize all vehicle documents, receipts, and important paperwork.',
    imageSrc: 'https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?w=600&h=400&fit=crop',
    imageAlt: 'Document Storage',
  },
  {
    title: 'Fuel Stations',
    description: 'Find and track your favorite service stations and fuel locations.',
    imageSrc: 'https://images.unsplash.com/photo-1572281335102-5f780686ee91?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&fit=crop&crop=focalpoint&fp-x=0.5&fp-y=0.6&q=80&auto=format&ixlib=rb-4.1.0&w=600&h=400',
    imageAlt: 'Fuel Stations',
  },
  {
    title: 'Reports & Analytics',
    description: 'Generate detailed reports on costs, mileage, and vehicle performance.',
    imageSrc: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop',
    imageAlt: 'Reports & Analytics',
  },
  {
    title: 'Reminders',
    description: 'Set up automated reminders for maintenance, registration, and insurance renewals.',
    imageSrc: 'https://images.unsplash.com/photo-1434494878577-86c23bcb06b9?w=600&h=400&fit=crop',
    imageAlt: 'Reminders',
  },
  {
    title: 'Data Export',
    description: 'Export your data in various formats for reporting and record keeping.',
    imageSrc: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=400&fit=crop',
    imageAlt: 'Data Export',
  },
];

export const FeaturesGrid = () => {
  return (
    <section className="py-16 px-4 md:px-8 bg-[#1D1A18] border-t border-white/5">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-12">
          <p className="text-primary-500 text-sm font-semibold uppercase tracking-wide mb-2">
            Our Features
          </p>
          <h2 className="text-3xl md:text-4xl font-bold text-avus">What We Offer</h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {features.map((feature) => (
            <FeatureCard key={feature.title} {...feature} />
          ))}
        </div>

        <div className="text-center mt-12">
          <p className="text-lg text-titanio mb-6">
            We are a cloud-based platform accessible anywhere, anytime.
          </p>
        </div>
      </div>
    </section>
  );
};