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

import Link from 'next/link'

export default function Footer() {
  const year = new Date().getFullYear()
  return (
    <footer className="bg-[#18181b] text-white border-t-[3px] border-[#d4af37]">
      <div className="max-w-7xl mx-auto px-4 py-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
        {/* Brand */}
        <div>
          <h3 className="text-2xl [font-family:var(--font-heading)] uppercase tracking-wide text-[#d4af37] mb-4">Kasi Wear</h3>
          <p className="text-sm text-white/80 mb-4">Soweto-born streetwear. Yebo, sharp sharp — authentic kasi drip for the culture.</p>
          <div className="flex space-x-4">
            <a href="https://facebook.com/kasiwear" aria-label="Facebook" target="_blank" rel="noopener noreferrer" className="hover:text-[#d4af37] transition-colors"><Globe size={20} /></a>
            <a href="https://instagram.com/kasiwear" aria-label="Instagram" target="_blank" rel="noopener noreferrer" className="hover:text-[#d4af37] transition-colors"><Camera size={20} /></a>
            <a href="https://x.com/kasiwear" aria-label="X" target="_blank" rel="noopener noreferrer" className="hover:text-[#d4af37] transition-colors"><X size={20} /></a>
            <a href="https://tiktok.com/@kasiwear" aria-label="TikTok" target="_blank" rel="noopener noreferrer" className="hover:text-[#d4af37] transition-colors"><Video size={20} /></a>
            <a href="https://wa.me/27119360000" aria-label="WhatsApp" target="_blank" rel="noopener noreferrer" className="hover:text-[#d4af37] transition-colors"><MessageCircle size={20} /></a>
          </div>
        </div>

        {/* Quick Links */}
        <div>
          <h4 className="text-sm [font-family:var(--font-heading)] uppercase tracking-wider text-[#d4af37] mb-4">Quick Links</h4>
          <ul className="space-y-2 text-sm">
            <li><Link href="/" className="hover:text-[#d4af37] transition-colors">Home</Link></li>
            <li><Link href="/products" className="hover:text-[#d4af37] transition-colors">Products</Link></li>
            <li><a href="#indaba-yethu" className="hover:text-[#d4af37] transition-colors">Indaba Yethu</a></li>
            <li><a href="#soweto-style-gallery" className="hover:text-[#d4af37] transition-colors">Soweto Style Gallery</a></li>
          </ul>
        </div>

        {/* Contact */}
        <div>
          <h4 className="text-sm [font-family:var(--font-heading)] uppercase tracking-wider text-[#d4af37] mb-4">Reach Us</h4>
          <ul className="space-y-3 text-sm">
            <li className="flex items-start gap-2">
              <MapPin size={16} className="mt-0.5 text-[#dc2626] flex-shrink-0" />
              <span>123 Vilakazi Street, Soweto, Johannesburg 1804, South Africa</span>
            </li>
            <li className="flex items-center gap-2">
              <Phone size={16} className="text-[#dc2626]" />
              <a href="tel:+27119360000" className="hover:text-[#d4af37] transition-colors">+27 11 936 0000</a>
            </li>
            <li className="flex items-center gap-2">
              <Mail size={16} className="text-[#dc2626]" />
              <a href="mailto:info@kasiwear.co.za" className="hover:text-[#d4af37] transition-colors">info@kasiwear.co.za</a>
            </li>
          </ul>
        </div>

        {/* Hours */}
        <div>
          <h4 className="text-sm [font-family:var(--font-heading)] uppercase tracking-wider text-[#d4af37] mb-4">Store Hours</h4>
          <ul className="space-y-2 text-sm">
            <li className="flex justify-between"><span>Mon – Fri</span><span>9:00 – 18:00</span></li>
            <li className="flex justify-between"><span>Saturday</span><span>9:00 – 15:00</span></li>
            <li className="flex justify-between"><span>Sunday</span><span>10:00 – 16:00</span></li>
          </ul>
        </div>
      </div>

      <div className="border-t border-white/20 py-6 px-4">
        <div className="max-w-7xl mx-auto text-center text-sm text-white/60">
          &copy; {year} Kasi Wear. All rights reserved.
        </div>
      </div>
    </footer>
  )
}
