import { ArrowRight, Calculator, FileText, Users, Shield, Building } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";

const Services = () => {
  const services = [
    {
      icon: FileText,
      title: "Tax Preparation & Planning",
      description: "Maximize deductions with proactive quarterly planning and audit-ready documentation.",
      image: "/lovable-uploads/741d6934-b230-43fb-9aac-a2699bba0915.png",
      alt: "Abstract illustration of IRS documents and magnifier"
    },
    {
      icon: Calculator,
      title: "Accounting & Bookkeeping",
      description: "Monthly books, financial statements, and cash-flow management for clear business insights.",
      image: "/lovable-uploads/1260e5db-df42-4f32-89c2-eecc054d669d.png",
      alt: "Abstract financial charts and calculator"
    },
    {
      icon: Users,
      title: "Payroll Solutions",
      description: "Full compliance, filings, and benefits coordination to keep your team paid accurately.",
      image: null,
      alt: null
    },
    {
      icon: Shield,
      title: "IRS Representation",
      description: "Expert audit defense, penalty negotiations, and payment plan arrangements.",
      image: "/lovable-uploads/741d6934-b230-43fb-9aac-a2699bba0915.png",
      alt: "Abstract illustration of IRS documents and magnifier"
    },
    {
      icon: Building,
      title: "Business Consulting & Formation",
      description: "Entity selection, business valuation partners, and operating agreement guidance.",
      image: null,
      alt: null
    }
  ];

  return (
    <section className="py-24 bg-background">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-display-lg font-display font-semibold text-forest mb-4">
            Our CPA Services
          </h2>
          <p className="text-body-lg text-sage max-w-2xl mx-auto">
            Comprehensive financial solutions tailored to your business and personal needs
          </p>
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => {
            const Icon = service.icon;
            return (
              <Card key={index} className="card-elevation hover:shadow-lg gentle-transition group cursor-pointer rounded-2xl overflow-hidden">
                {service.image && (
                  <div className="aspect-video overflow-hidden">
                    <img
                      src={service.image}
                      alt={service.alt || ""}
                      className="w-full h-full object-cover group-hover:scale-105 smooth-transition"
                    />
                  </div>
                )}
                <CardContent className="p-8">
                  <div className="w-12 h-12 bg-brass/20 rounded-2xl flex items-center justify-center mb-6">
                    <Icon className="w-6 h-6 text-brass" strokeWidth={1.5} />
                  </div>
                  
                  <h3 className="text-display-md font-display font-medium text-forest mb-4">
                    {service.title}
                  </h3>
                  
                  <p className="text-sage mb-6 leading-relaxed">
                    {service.description}
                  </p>
                  
                  <div className="flex items-center text-forest group-hover:text-brass gentle-transition">
                    <span className="font-medium">Learn more</span>
                    <ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 gentle-transition" />
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export default Services;