import rooftopImage from "../../assets/6e19539378d35e703c8b7b0f0f143bb1af8987e5.png";

export function Hero() {
  return (
    <section className="relative h-[700px] flex items-center" id="home">
      <div className="absolute inset-0 z-0">
        <img
          src={rooftopImage}
          alt="Solar panels installed on commercial rooftop"
          className="w-full h-full object-cover object-center"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-[#0F2340]/80 via-[#0F2340]/60 to-transparent"></div>
      </div>

      <div className="container mx-auto px-4 z-10 max-w-7xl">
        <div className="max-w-xl">
          <div className="inline-flex items-center bg-orange-500 text-white text-sm font-semibold px-4 py-1.5 rounded-full mb-6 gap-2">
            <span className="w-2 h-2 bg-white rounded-full"></span>
            Bay Area's Trusted Solar Experts
          </div>
          <h1 className="text-5xl md:text-6xl text-white mb-5 leading-tight">
            Dependable Solar<br />Solutions for the<br />
            <span className="text-orange-400">Bay Area</span>
          </h1>
          <p className="text-xl text-gray-200 mb-8">
            with a Focus on Customer Service
          </p>
          <div className="flex flex-wrap gap-4">
            <a
              href="#contact"
              className="bg-orange-500 hover:bg-orange-600 text-white px-8 py-4 rounded-md text-base font-semibold transition-colors shadow-lg"
            >
              Get a Free Quote
            </a>
            <a
              href="#why-solar"
              className="bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white border border-white/50 px-8 py-4 rounded-md text-base font-semibold transition-colors"
            >
              Why Go Solar?
            </a>
          </div>
        </div>
      </div>

      {/* Stats bar */}
      <div className="absolute bottom-0 left-0 right-0 bg-[#1E3A5F]/90 backdrop-blur-sm text-white">
        <div className="container mx-auto px-4 py-4 grid grid-cols-3 divide-x divide-white/20 max-w-2xl">
          <div className="text-center px-4">
            <div className="text-2xl text-orange-400">4.5%+</div>
            <div className="text-xs text-gray-300 mt-0.5">Annual Rate Increase</div>
          </div>
          <div className="text-center px-4">
            <div className="text-2xl text-orange-400">$0.35</div>
            <div className="text-xs text-gray-300 mt-0.5">Per kWh (Tier 2 PG&amp;E)</div>
          </div>
          <div className="text-center px-4">
            <div className="text-2xl text-orange-400">26%</div>
            <div className="text-xs text-gray-300 mt-0.5">Federal Tax Credit</div>
          </div>
        </div>
      </div>
    </section>
  );
}
