import { Phone, Mail, MapPin } from "lucide-react";
import logoImage from "../../assets/2edc706805fecf0b3862a2e8f9240b675524c183.png";

const quickLinks = [
  { label: "Our Advantage", href: "#advantages" },
  { label: "About Us", href: "#about" },
  { label: "Why Go Solar", href: "#why-solar" },
  { label: "Our Process", href: "#process" },
  { label: "Contact", href: "#contact" },
];

export function Footer() {
  return (
    <footer className="bg-[#0F2340] text-white">
      <div className="container mx-auto px-4 py-14">
        <div className="grid md:grid-cols-3 gap-10 mb-12">
          {/* Brand */}
          <div>
            <img
              src={logoImage}
              alt="SolarBase GROUP"
              className="h-12 w-auto object-contain mb-4 brightness-0 invert"
            />
            <p className="text-gray-400 text-sm leading-relaxed">
              Bay Area's premier solar installation company, dedicated to customer satisfaction and quality service for residential and commercial clients.
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="text-white text-sm font-semibold uppercase tracking-wider mb-5">Quick Links</h4>
            <ul className="space-y-2.5">
              {quickLinks.map((link) => (
                <li key={link.href}>
                  <a
                    href={link.href}
                    className="text-gray-400 hover:text-orange-400 transition-colors text-sm flex items-center gap-2"
                  >
                    <span className="w-1 h-1 bg-orange-500 rounded-full"></span>
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="text-white text-sm font-semibold uppercase tracking-wider mb-5">Contact Information</h4>
            <ul className="space-y-3">
              <li className="flex items-start gap-3">
                <MapPin className="w-4 h-4 text-orange-400 flex-shrink-0 mt-0.5" />
                <span className="text-gray-400 text-sm">
                  533 Airport Blvd., Suite 503<br />Burlingame, CA 94010
                </span>
              </li>
              <li className="flex items-center gap-3">
                <Phone className="w-4 h-4 text-orange-400 flex-shrink-0" />
                <a href="tel:6505482508" className="text-gray-400 hover:text-orange-400 transition-colors text-sm">
                  (650) 548-2508
                </a>
              </li>
              <li className="flex items-center gap-3">
                <Mail className="w-4 h-4 text-orange-400 flex-shrink-0" />
                <a href="mailto:sales@solarbasecorp.com" className="text-gray-400 hover:text-orange-400 transition-colors text-sm break-all">
                  sales@solarbasecorp.com
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-white/10 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-gray-500">
          <p>&copy; {new Date().getFullYear()} SolarBase GROUP. All rights reserved.</p>
          <a
            href="http://www.solarbase.com"
            target="_blank"
            rel="noopener noreferrer"
            className="hover:text-orange-400 transition-colors"
          >
            www.solarbase.com
          </a>
        </div>
      </div>
    </footer>
  );
}
