import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react'

export default function Footer() {
  return (
    <footer className="bg-[#111827] text-white py-16">
      <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
        {/* Brand */}
        <div className="space-y-4">
          <h3 className="text-3xl font-bold font-heading text-[#8b5a3c]">Kapa Roast</h3>
          <p className="text-gray-300 text-sm leading-relaxed">
            Roasting single-origin African beans in the heart of Cape Town. 
            Every batch tells a story of origin, care, and community.
          </p>
          <div className="flex space-x-4 pt-2">
            <a href="#" aria-label="Facebook" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
              <Globe className="h-5 w-5" />
            </a>
            <a href="#" aria-label="Instagram" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
              <Camera className="h-5 w-5" />
            </a>
            <a href="#" aria-label="X" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
              <X className="h-5 w-5" />
            </a>
            <a href="#" aria-label="TikTok" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
              <Video className="h-5 w-5" />
            </a>
            <a href="#" aria-label="WhatsApp" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
              <MessageCircle className="h-5 w-5" />
            </a>
          </div>
        </div>

        {/* Quick Links */}
        <div>
          <h4 className="text-lg font-semibold font-heading mb-4 text-white">Browse</h4>
          <ul className="space-y-2 text-sm text-gray-400">
            <li><a href="/" className="hover:text-[#ea580c] transition-colors duration-200">Home</a></li>
            <li><a href="#menu" className="hover:text-[#ea580c] transition-colors duration-200">Menu</a></li>
            <li><a href="#gallery" className="hover:text-[#ea580c] transition-colors duration-200">Gallery</a></li>
            <li><a href="#contact" className="hover:text-[#ea580c] transition-colors duration-200">Contact</a></li>
          </ul>
        </div>

        {/* Contact */}
        <div>
          <h4 className="text-lg font-semibold font-heading mb-4 text-white">Get in Touch</h4>
          <ul className="space-y-3 text-sm text-gray-400">
            <li className="flex items-start gap-2">
              <MapPin className="h-4 w-4 mt-0.5 text-[#8b5a3c]" />
              <span>14 Roeland Street<br />Cape Town 8001</span>
            </li>
            <li className="flex items-center gap-2">
              <Phone className="h-4 w-4 text-[#8b5a3c]" />
              <a href="tel:+27210000000" className="hover:text-[#ea580c] transition-colors duration-200">+27 21 000 0000</a>
            </li>
            <li className="flex items-center gap-2">
              <Mail className="h-4 w-4 text-[#8b5a3c]" />
              <a href="mailto:hello@kaparoast.co.za" className="hover:text-[#ea580c] transition-colors duration-200">hello@kaparoast.co.za</a>
            </li>
          </ul>
        </div>

        {/* Hours */}
        <div>
          <h4 className="text-lg font-semibold font-heading mb-4 text-white">Roastery Hours</h4>
          <ul className="space-y-2 text-sm text-gray-400">
            <li className="flex justify-between">
              <span>Monday–Friday</span>
              <span>7am – 5pm</span>
            </li>
            <li className="flex justify-between">
              <span>Saturday</span>
              <span>8am – 3pm</span>
            </li>
            <li className="flex justify-between">
              <span>Sunday</span>
              <span>9am – 1pm</span>
            </li>
          </ul>
          <p className="mt-4 text-xs text-gray-500">
            Public holidays may vary — call ahead.
          </p>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-6 mt-12 pt-8 border-t border-gray-700 text-center text-sm text-gray-400">
        <p>&copy; {new Date().getFullYear()} Kapa Roast. All rights reserved.</p>
      </div>
    </footer>
  )
}