import { Phone, Mail, MapPin, Globe } from "lucide-react";
import rooftopImage from "../../assets/cb1eea8.png";

const contactItems = [
  {
    icon: Phone,
    label: "Phone",
    value: "(650) 548-2508",
    href: "tel:6505482508",
    color: "bg-blue-50",
    iconColor: "text-blue-600",
  },
  {
    icon: Mail,
    label: "Email",
    value: "sales@solarbasecorp.com",
    href: "mailto:sales@solarbasecorp.com",
    color: "bg-orange-50",
    iconColor: "text-orange-500",
  },
  {
    icon: MapPin,
    label: "Address",
    value: "533 Airport Blvd., Suite 503\nBurlingame, CA 94010",
    href: "https://maps.google.com/?q=533+Airport+Blvd+Suite+503+Burlingame+CA",
    color: "bg-green-50",
    iconColor: "text-green-600",
  },
  {
    icon: Globe,
    label: "Website",
    value: "www.solarbasecorp.com",
    href: "http://www.solarbasecorp.com",
    color: "bg-purple-50",
    iconColor: "text-purple-600",
  },
];

export function Contact() {
  return (
    <section className="py-20 bg-gray-50" id="contact">
      <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">
            Reach Out
          </p>
          <h2 className="text-4xl text-gray-900 mb-4">Contact Us</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">
            Get in touch with our team to start your solar journey. We'll provide a free, no-obligation consultation.
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Image */}
          <div className="relative">
            <img
              src={rooftopImage}
              alt="Commercial solar installation by SolarBase"
              className="w-full h-[450px] object-cover rounded-2xl shadow-xl"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-[#0F2340]/80 via-[#0F2340]/30 to-transparent rounded-2xl m-[0px]"></div>
            <div className="absolute bottom-6 left-6 text-white">
              <p className="text-sm text-gray-200">Serving the Bay Area Since</p>
              <p className="text-3xl text-orange-400">2010+</p>
            </div>
          </div>

          {/* Contact Info */}
          <div className="space-y-5">
            {contactItems.map((item, index) => (
              <a
                key={index}
                href={item.href}
                target={item.href.startsWith("http") ? "_blank" : undefined}
                rel="noopener noreferrer"
                className="flex items-start gap-4 bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:border-orange-200 hover:shadow-md transition-all duration-200 group"
              >
                <div className={`w-12 h-12 ${item.color} rounded-xl flex items-center justify-center flex-shrink-0`}>
                  <item.icon className={`w-5 h-5 ${item.iconColor}`} />
                </div>
                <div>
                  <p className="text-xs text-gray-400 uppercase tracking-wider mb-1">{item.label}</p>
                  <p className="text-gray-800 group-hover:text-orange-500 transition-colors whitespace-pre-line">
                    {item.value}
                  </p>
                </div>
              </a>
            ))}

            
          </div>
        </div>
      </div>
    </section>
  );
}