import inverterImage from "../../assets/cb1eea8f07c31b7b0885893394a8b3f61204ee28.png";
import { CheckCircle } from "lucide-react";

const highlights = [
  "Residential & commercial installations throughout the Bay Area",
  "Customized system design for every project",
  "Personal touch from initial site visit to commissioning",
  "Ongoing support after installation",
];

export function About() {
  return (
    <section className="py-20 bg-white" id="about">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-14 items-center">
          {/* Image side */}
          <div className="relative">
            <img
              src={inverterImage}
              alt="SolarBase team with solar inverter installation"
              className="w-full h-[440px] object-cover rounded-2xl shadow-xl"
            />
            {/* Floating badge */}
            <div className="absolute -bottom-5 -right-5 bg-[#1E3A5F] text-white px-6 py-4 rounded-xl shadow-lg hidden sm:block">
              <div className="text-3xl text-orange-400">100%</div>
              <div className="text-sm text-gray-300 mt-0.5">Customer Focused</div>
            </div>
          </div>

          {/* Content side */}
          <div>
            <p className="text-orange-500 text-sm font-semibold uppercase tracking-widest mb-2">
              Who We Are
            </p>
            <h2 className="text-4xl text-gray-900 mb-4">About SolarBase GROUP</h2>
            <div className="w-20 h-1 bg-orange-500 mb-6 rounded-full"></div>

            <p className="text-gray-600 mb-4 leading-relaxed">Based in Burlingame, CA, SolarBase is the Bay Area solar company most focused on customer satisfaction for both residential and commercial installations. Our straightforward and streamlined customer experience, along with our emphasis on designing and installing systems of the highest quality, sets us apart from the rest of the crowd.</p>
            <p className="text-gray-600 mb-6 leading-relaxed">A personal touch, from the initial site visit to the customized design of your system, and through to the commissioning of your system is the hallmark of SolarBase for each and every one of our projects. We stand by every system we install and provide ongoing support, should you need it. Going solar has never made more sense both environmentally and economically, so why not let the SolarBase professionals see what we can do for you!</p>

            <ul className="space-y-3 mb-8">
              {highlights.map((item, i) => (
                <li key={i} className="flex items-start gap-3">
                  <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
                  <span className="text-gray-700 text-sm">{item}</span>
                </li>
              ))}
            </ul>

            <a
              href="#contact"
              className="inline-block bg-orange-500 hover:bg-orange-600 text-white px-8 py-3.5 rounded-md font-semibold transition-colors"
            >
              Schedule a Free Consultation
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}