import { Home, FileSearch, Wrench, CheckCircle, Zap, Gift } from "lucide-react";

const steps = [
  {
    number: "01",
    icon: Home,
    title: "On-site Consultation",
    items: [
      "Determine size, age, and condition of rooftop and underlying structure",
      "Examine utility electrical meter, house's electrical panel and system",
      "Review recent utility bills to determine usage and cost",
    ],
  },
  {
    number: "02",
    icon: FileSearch,
    title: "Preliminary Design & Proposal",
    items: [
      "Size system based on electricity usage, rooftop, and local sun",
      "Rough layout of where the solar panels will go",
      "Take customer input and revise initial design if necessary",
      "Generate formal proposal, quote, and contract",
      "Contract signoff and down-payment (smaller of 10% or $1,000)",
    ],
  },
  {
    number: "03",
    icon: Wrench,
    title: "Installation",
    items: [
      "Submit final design to obtain building and electrical permits",
      "Coordinate installation schedule with installer and homeowner",
      "Physical installation (typically 1–3 days for standard residential)",
    ],
  },
  {
    number: "04",
    icon: CheckCircle,
    title: "Inspection & Approval",
    items: [
      "City inspection — final approval",
      "Interconnection: local utility installs new meter and solar system is commissioned",
    ],
  },
  {
    number: "05",
    icon: Zap,
    title: "Enjoy the Savings",
    items: [
      "Begin enjoying smaller monthly utility bills immediately!",
    ],
  },
  {
    number: "06",
    icon: Gift,
    title: "Rebates & Incentives",
    items: [
      "Work with SolarBase to obtain all applicable rebates, tax credits, and incentives",
    ],
  },
];

export function ProcessSteps() {
  return (
    <section className="py-20 bg-white" id="process">
      <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">
            Simple &amp; Streamlined
          </p>
          <h2 className="text-4xl text-gray-900 mb-4">Steps to Going Solar</h2>
          <div className="w-20 h-1 bg-orange-500 mx-auto mb-4 rounded-full"></div>
          <p className="text-gray-500 max-w-xl mx-auto">
            From your first consultation to flipping the switch — we handle everything so you don't have to.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {steps.map((step, index) => (
            <div
              key={index}
              className="bg-gray-50 border border-gray-100 rounded-xl p-7 hover:border-orange-200 hover:shadow-md transition-all duration-200 relative overflow-hidden"
            >
              {/* Large background number */}
              <span className="absolute top-3 right-4 text-7xl text-gray-100 select-none pointer-events-none leading-none">
                {step.number}
              </span>

              <div className="w-12 h-12 bg-[#1E3A5F] rounded-xl flex items-center justify-center mb-4 shadow-sm">
                <step.icon className="w-6 h-6 text-orange-400" />
              </div>

              <h3 className="text-base text-gray-900 mb-3">{step.title}</h3>

              <ul className="space-y-2">
                {step.items.map((item, i) => (
                  <li key={i} className="text-gray-500 text-sm flex items-start gap-2 leading-relaxed">
                    <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-orange-400 flex-shrink-0"></span>
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* CTA Strip */}
        <div className="mt-14 bg-[#1E3A5F] rounded-2xl p-8 text-center text-white">
          <h3 className="text-2xl mb-2">Ready to start your solar journey?</h3>
          <p className="text-gray-300 mb-6">Contact us today for a free, no-obligation consultation and site assessment.</p>
          <a
            href="#contact"
            className="inline-block bg-orange-500 hover:bg-orange-600 text-white px-10 py-3.5 rounded-md font-semibold transition-colors"
          >
            Get a Free Quote
          </a>
        </div>
      </div>
    </section>
  );
}
