gregknoppcpa/src/components/Services.tsx

import { ArrowRight, Calculator, FileText, Users, Shield, Building, Heart, TrendingUp, PiggyBank, Scale, Briefcase } 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/Screenshot 2025-09-10 183339.png",
      alt: "TAX illustration with geometric patterns"
    },
    {
      icon: Calculator,
      title: "Accounting & Bookkeeping",
      description: "Monthly books, financial statements, and cash-flow management for clear business insights.",
      image: "/lovable-uploads/Screenshot 2025-09-10 183757.png",
      alt: "Financial documents and accounting illustration"
    },
    {
      icon: Users,
      title: "Payroll Solutions",
      description: "Full compliance, filings, and benefits coordination to keep your team paid accurately.",
      image: "/lovable-uploads/Screenshot 2025-09-10 183224.png",
      alt: "Balance scale with payroll and employee elements"
    },
    {
      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: "IRS documents with magnifying glass illustration"
    },
    {
      icon: Building,
      title: "Business Consulting & Formation",
      description: "Entity selection, business valuation partners, and operating agreement guidance.",
      image: "/lovable-uploads/bea5e6b1-7510-4876-955e-a265f2600ec5.png",
      alt: "Business essentials with smartphone and notebook"
    },
    {
      icon: Heart,
      title: "Estate Planning",
      description: "Comprehensive estate planning to facilitate orderly transfer of assets and reduce tax burden.",
      image: "/lovable-uploads/Screenshot 2025-09-10 183339.png",
      alt: "Estate planning illustration"
    },
    {
      icon: TrendingUp,
      title: "Financial Planning",
      description: "Structured financial plans to help you face any financial challenge at each stage of life.",
      image: "/lovable-uploads/Screenshot 2025-09-10 183757.png",
      alt: "Financial planning illustration"
    },
    {
      icon: PiggyBank,
      title: "Retirement Planning",
      description: "Successful implementation and periodic review to ensure financial independence through retirement.",
      image: "/lovable-uploads/Screenshot 2025-09-10 183224.png",
      alt: "Retirement planning illustration"
    },
    {
      icon: Scale,
      title: "Estate & Trust Tax Preparation",
      description: "Specialized tax preparation for estates and trusts with expert guidance on complex tax matters.",
      image: "/lovable-uploads/741d6934-b230-43fb-9aac-a2699bba0915.png",
      alt: "Estate and trust tax illustration"
    },
    {
      icon: Briefcase,
      title: "Sales Tax Services",
      description: "Assistance with sales tax collection, compilation, and preparation of returns across multiple jurisdictions.",
      image: "/lovable-uploads/bea5e6b1-7510-4876-955e-a265f2600ec5.png",
      alt: "Sales tax services illustration"
    }
  ];

  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 xl:grid-cols-4 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;