"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { 
  Cpu, 
  FileDigit, 
  ShieldCheck, 
  Globe, 
  Smartphone, 
  Cloud, 
  ReceiptText, 
  PartyPopper 
} from "lucide-react";

const services = [
  {
    title: "Predator AI Solutions",
    description: "Powerful AI-driven systems that automate operations, analyze data, and help you make faster, smarter decisions.",
    icon: <Cpu className="w-8 h-8 text-primary" />,
  },
  {
    title: "Digital Transformation",
    description: "We turn paper into secure digital assets. From IDs and certificates to official records, we digitize, manage, and protect your documents.",
    icon: <FileDigit className="w-8 h-8 text-primary" />,
  },
  {
    title: "Advanced Security Services",
    description: "End-to-end security solutions including smart CCTV, professional management, trained officers, and dedicated vehicles.",
    icon: <ShieldCheck className="w-8 h-8 text-primary" />,
  },
  {
    title: "Web Design",
    description: "Modern, secure, and high-performance websites that build trust, strengthen your brand, and convert visitors into customers.",
    icon: <Globe className="w-8 h-8 text-primary" />,
  },
  {
    title: "App Development",
    description: "Custom mobile and web applications designed to simplify workflows, improve control, and enhance user experience.",
    icon: <Smartphone className="w-8 h-8 text-primary" />,
  },
  {
    title: "Cloud Services",
    description: "Reliable and secure cloud solutions for data storage, backups, and system management—accessible anytime, anywhere.",
    icon: <Cloud className="w-8 h-8 text-primary" />,
  },
  {
    title: "Tax Filing Services",
    description: "Stress-free tax preparation and filing for individuals and companies, ensuring accuracy, compliance, and peace of mind.",
    icon: <ReceiptText className="w-8 h-8 text-primary" />,
  },
  {
    title: "Event & Party Security",
    description: "Professional security planning and on-site management for events and private gatherings—safety handled professionally.",
    icon: <PartyPopper className="w-8 h-8 text-primary" />,
  },
];

export function Services() {
  return (
    <section id="services" className="py-20 bg-neutral-50">
      <Container>
        <div className="text-center mb-16">
          <Heading>Our Services</Heading>
          <Subheading className="mt-4">
            Comprehensive solutions tailored to your business needs.
          </Subheading>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {services.map((service, index) => (
            <Card key={index} className="border-none shadow-sm hover:shadow-md transition-shadow">
              <CardHeader>
                <div className="mb-4">{service.icon}</div>
                <CardTitle className="text-xl">{service.title}</CardTitle>
                <CardDescription className="text-neutral-600 mt-2">
                  {service.description}
                </CardDescription>
              </CardHeader>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}