"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card, CardContent } from "@/components/ui/card";
import { 
  Car, 
  Train, 
  ShieldAlert, 
  Skull, 
  Handshake, 
  Zap, 
  Siren,
  Eye
} from "lucide-react";

const incidentTypes = [
  { title: "Car Accidents", icon: <Car className="w-8 h-8 text-red-500" />, description: "Collisions, hit and runs, and road hazards." },
  { title: "Train Accidents", icon: <Train className="w-8 h-8 text-red-500" />, description: "Derailments, crossing incidents, and delays." },
  { title: "Crimes", icon: <ShieldAlert className="w-8 h-8 text-red-500" />, description: "Theft, vandalism, and suspicious activities." },
  { title: "Violent Crimes", icon: <Skull className="w-8 h-8 text-red-500" />, description: "Assault, murder, and attempted murder reports." },
  { title: "Robbery", icon: <Handshake className="w-8 h-8 text-red-500" />, description: "Armed assault and property theft incidents." },
  { title: "Emergencies", icon: <Siren className="w-8 h-8 text-red-500" />, description: "Fires, medical emergencies, and natural disasters." },
  { title: "Public Safety", icon: <Eye className="w-8 h-8 text-red-500" />, description: "Dangerous infrastructure and public hazards." },
  { title: "Other Incidents", icon: <Zap className="w-8 h-8 text-red-500" />, description: "Any other incident requiring public awareness." },
];

export function IncidentTypes() {
  return (
    <section id="safety" className="py-20 bg-neutral-50">
      <Container>
        <div className="text-center mb-16">
          <Heading className="mb-4">Supported Incident Types</Heading>
          <Subheading>We provide documentation tools for a wide range of emergency and safety situations.</Subheading>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {incidentTypes.map((type, index) => (
            <Card key={index} className="border-none shadow-sm hover:shadow-md transition-shadow">
              <CardContent className="pt-8 pb-6 flex flex-col items-center text-center">
                <div className="mb-4 p-3 bg-white rounded-2xl shadow-sm">
                  {type.icon}
                </div>
                <h3 className="font-bold text-lg mb-2">{type.title}</h3>
                <p className="text-sm text-neutral-500">{type.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}