import { Award, Users, Briefcase } from "lucide-react";

const WhyChooseUs = () => {
  const pillars = [
    {
      icon: Award,
      title: "Proven Expertise",
      description: "Two decades of CPA experience with deep knowledge of Texas tax law and federal regulations."
    },
    {
      icon: Users,
      title: "Personalized Service",
      description: "Every client receives direct access to Greg Knopp with customized strategies for their unique situation."
    },
    {
      icon: Briefcase,
      title: "Comprehensive Solutions",
      description: "From tax prep to business formation, we handle all aspects of your financial and accounting needs."
    }
  ];

  return (
    <section className="py-24 bg-gradient-subtle">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Image */}
          <div className="relative">
            <img
              src="/lovable-uploads/bea5e6b1-7510-4876-955e-a265f2600ec5.png"
              alt="Professional desk details in warm tones"
              className="rounded-2xl card-elevation w-full object-cover"
            />
          </div>
          
          {/* Content */}
          <div>
            <h2 className="text-display-lg font-display font-semibold text-forest mb-8">
              Why Choose Greg Knopp, P.C.?
            </h2>
            
            <div className="space-y-8">
              {pillars.map((pillar, index) => {
                const Icon = pillar.icon;
                return (
                  <div key={index} className="flex gap-4">
                    <div className="flex-shrink-0">
                      <div className="w-12 h-12 bg-brass/20 rounded-2xl flex items-center justify-center">
                        <Icon className="w-6 h-6 text-brass" strokeWidth={1.5} />
                      </div>
                    </div>
                    <div>
                      <h3 className="text-display-md font-display font-medium text-forest mb-2">
                        {pillar.title}
                      </h3>
                      <p className="text-body-lg text-sage leading-relaxed">
                        {pillar.description}
                      </p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default WhyChooseUs;