import { Leaf, TrendingUp, Shield, DollarSign } from "lucide-react";

const benefits = [
  {
    icon: Leaf,
    title: "Environmental Impact",
    description: "Clean, sustainable energy that reduces your carbon footprint and is good for our planet.",
    color: "text-green-600",
    bg: "bg-green-50",
  },
  {
    icon: DollarSign,
    title: "Cost Savings",
    description: "An investment that pays for itself through monthly utility bill savings over time.",
    color: "text-orange-500",
    bg: "bg-orange-50",
  },
  {
    icon: Shield,
    title: "Rate Protection",
    description: "Insulation against future utility rate hikes, which historically average 4–5% per year.",
    color: "text-blue-600",
    bg: "bg-blue-50",
  },
];

export function WhySolar() {
  return (
    <section className="py-20 bg-gray-50" id="why-solar">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-14">
          <p className="text-orange-500 text-sm font-semibold uppercase tracking-widest mb-2">
            Make the Switch
          </p>
          <h2 className="text-4xl text-gray-900 mb-4">Why Go Solar?</h2>
          <div className="w-20 h-1 bg-orange-500 mx-auto mb-6 rounded-full"></div>
          <p className="text-gray-600 max-w-3xl mx-auto leading-relaxed">Not only is Solar Energy clean, sustainable, and good for our environment — it is now so affordable that it is a smart investment that pays for itself over time through the savings you see on your monthly utility bills. With solar, you are insulated against future utility rate hikes that historically average over 4–5% per year.</p>
        </div>

        {/* Benefits Cards */}
        <div className="grid md:grid-cols-3 gap-6 mb-14">
          {benefits.map((item, index) => (
            <div key={index} className="bg-white p-8 rounded-xl shadow-sm border border-gray-100 text-center hover:shadow-md transition-shadow">
              <div className={`w-16 h-16 ${item.bg} rounded-2xl flex items-center justify-center mx-auto mb-5`}>
                <item.icon className={`w-8 h-8 ${item.color}`} />
              </div>
              <h3 className="text-lg text-gray-900 mb-2">{item.title}</h3>
              <p className="text-gray-500 text-sm leading-relaxed">{item.description}</p>
            </div>
          ))}
        </div>

        {/* Chart Section */}
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 md:p-8">
          
          <div className="mb-8 flex justify-center">
            <iframe 
              src="https://fred.stlouisfed.org/graph/graph-landing.php?g=1Ub3y" 
              scrolling="no" 
              frameBorder="0" 
              style={{ overflow: "hidden", width: "100%", height: "525px" }} 
              allowTransparency={true} 
              loading="lazy"
            ></iframe>
          </div>

          <div className="bg-[#1E3A5F]/5 border border-[#1E3A5F]/10 p-6 rounded-xl">
            <div className="flex items-center gap-2 mb-3">
              <TrendingUp className="w-5 h-5 text-[#1E3A5F]" />
              <h4 className="text-gray-800 text-sm">Consistent Rate Increases</h4>
            </div>
            <p className="text-gray-600 text-sm leading-relaxed">
              The electricity rates have consistently increased each year, significantly impacting household and business budgets over time. Going solar locks in your energy cost today.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}