import { Users, DollarSign, FileText, Wrench, Award, CheckCircle } from "lucide-react";

const advantages = [
  {
    icon: Users,
    title: "Experienced Local Installers",
    description:
      "Diligent and professional local installers with years of experience serving Bay Area homeowners and businesses.",
    color: "text-blue-600",
    bg: "bg-blue-50",
  },
  {
    icon: DollarSign,
    title: "Best Bang for Your Buck",
    description:
      "An emphasis on best \"bang for the buck\" in system design and sizing based on your electricity needs — optimal quality, price, and aesthetics.",
    color: "text-orange-500",
    bg: "bg-orange-50",
  },
  {
    icon: FileText,
    title: "Flexible Financing",
    description:
      "Financing through partner institutions, or directly through SolarBase via a Power Purchase Agreement (PPA), if desired.",
    color: "text-green-600",
    bg: "bg-green-50",
  },
  {
    icon: Wrench,
    title: "Streamlined Process",
    description:
      "SolarBase arranges all rebate and utility paperwork, permits, and commissioning — minimizing headaches every step of the way.",
    color: "text-purple-600",
    bg: "bg-purple-50",
  },
  {
    icon: Award,
    title: "Customer Satisfaction",
    description:
      "Most importantly, our dedication to customer satisfaction. We stand by every system we install and provide ongoing support.",
    color: "text-red-500",
    bg: "bg-red-50",
  },
  {
    icon: CheckCircle,
    title: "Residential & Commercial",
    description:
      "We serve both residential homeowners and commercial property owners throughout the Bay Area with equal care and expertise.",
    color: "text-teal-600",
    bg: "bg-teal-50",
  },
];

export function Advantages() {
  return (
    <section className="py-20 bg-gray-50" id="advantages">
      <div className="container mx-auto px-4">
        <div className="text-center mb-14">
          <p className="text-orange-500 text-sm font-semibold uppercase tracking-widest mb-2">
            What Sets Us Apart
          </p>
          <h2 className="text-4xl text-gray-900 mb-4">The SolarBase Advantage</h2>
          <div className="w-20 h-1 bg-orange-500 mx-auto mb-4 rounded-full"></div>
          <p className="text-gray-600 max-w-2xl mx-auto">
            We combine deep local knowledge, cutting-edge technology, and a genuine commitment to your satisfaction.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {advantages.map((adv, index) => (
            <div
              key={index}
              className="bg-white p-7 rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:-translate-y-1 transition-all duration-200"
            >
              <div className={`w-14 h-14 ${adv.bg} rounded-xl flex items-center justify-center mb-5`}>
                <adv.icon className={`w-7 h-7 ${adv.color}`} />
              </div>
              <h3 className="text-lg text-gray-900 mb-2">{adv.title}</h3>
              <p className="text-gray-500 text-sm leading-relaxed">{adv.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
