import Link from "next/link"
import { Facebook, Instagram, Linkedin, Mail, MapPin, Phone } from "lucide-react"

export function SiteFooter() {
  return (
    <footer className="bg-gray-900 text-white pt-16 pb-8">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
          {/* Brand Info */}
          <div className="space-y-6">
            <div className="bg-white p-2 inline-block rounded-sm">
              <img src="/hps-logo-full.png" alt="HPS Logo" className="h-12 w-auto" />
            </div>
            <p className="text-gray-400 text-sm leading-relaxed">
              High Performance Structures specializes in Insulating Concrete Form (ICF) installations, structural
              concrete flooring, and radiant heating systems. Building the future, one structure at a time.
            </p>
            <div className="flex gap-4">
              <a href="#" className="text-gray-400 hover:text-accent transition-colors">
                <Facebook className="h-5 w-5" />
              </a>
              <a href="#" className="text-gray-400 hover:text-accent transition-colors">
                <Instagram className="h-5 w-5" />
              </a>
              <a href="#" className="text-gray-400 hover:text-accent transition-colors">
                <Linkedin className="h-5 w-5" />
              </a>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="text-lg font-bold mb-6 text-white">Quick Links</h3>
            <nav className="flex flex-col gap-3">
              {["Home", "Services", "Resources", "Blog", "Contact"].map((item) => (
                <Link
                  key={item}
                  href={item === "Home" ? "/" : `/${item.toLowerCase()}`}
                  className="text-gray-400 hover:text-accent transition-colors text-sm"
                >
                  {item}
                </Link>
              ))}
            </nav>
          </div>

          {/* Services */}
          <div>
            <h3 className="text-lg font-bold mb-6 text-white">Our Services</h3>
            <nav className="flex flex-col gap-3">
              {[
                "ICF Foundations",
                "Above Grade Walls",
                "Structural Floors",
                "Radiant Heating",
                "Safe Rooms",
                "Consultation",
              ].map((item) => (
                <Link key={item} href="/services" className="text-gray-400 hover:text-accent transition-colors text-sm">
                  {item}
                </Link>
              ))}
            </nav>
          </div>

          {/* Contact Info */}
          <div>
            <h3 className="text-lg font-bold mb-6 text-white">Contact Us</h3>
            <div className="space-y-4">
              <div className="flex items-start gap-3 text-gray-400 text-sm">
                <MapPin className="h-5 w-5 text-accent shrink-0" />
                <p>Woodland Park, CO</p>
              </div>
              <div className="flex items-center gap-3 text-gray-400 text-sm">
                <Phone className="h-5 w-5 text-accent shrink-0" />
                <a href="tel:7199008850" className="hover:text-white transition-colors">
                  719.900.8850
                </a>
              </div>
              <div className="flex items-center gap-3 text-gray-400 text-sm">
                <Mail className="h-5 w-5 text-accent shrink-0" />
                <a href="mailto:info@highperformancestructures.com" className="hover:text-white transition-colors">
                  info@highperformancestructures.com
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-500">
          <p>&copy; {new Date().getFullYear()} High Performance Structures, Inc. All rights reserved.</p>
          <div className="flex gap-6">
            <Link href="#" className="hover:text-white transition-colors">
              Privacy Policy
            </Link>
            <Link href="#" className="hover:text-white transition-colors">
              Terms of Service
            </Link>
          </div>
        </div>
      </div>
    </footer>
  )
}