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

import Link from 'next/link'

export default function Footer() {
  return (
    <footer className="bg-[#18181b] text-white border-t-[3px] border-t-[#16a34a]">
      <div className="max-w-7xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-4 gap-8">
        {/* Brand info */}
        <div>
          <h4 className="text-2xl uppercase tracking-tight mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Mzansi Urban</h4>
          <p className="text-sm opacity-90">Soweto-born streetwear. African prints, limited drops, kasi pride.</p>
          <div className="flex gap-3 mt-4">
            <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><Globe size={20} /></a>
            <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><Camera size={20} /></a>
            <a href="https://x.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><X size={20} /></a>
            <a href="https://tiktok.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><Video size={20} /></a>
            <a href="https://wa.me/27112345678" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><MessageCircle size={20} /></a>
          </div>
        </div>

        {/* Quick Links */}
        <div>
          <h5 className="text-lg uppercase mb-3" style={{ fontFamily: 'var(--font-heading)' }}>Shop</h5>
          <ul className="space-y-2 text-sm">
            <li><Link href="/" className="hover:text-[#16a34a] transition-colors">Home</Link></li>
            <li><Link href="/products" className="hover:text-[#16a34a] transition-colors">Products</Link></li>
            <li><Link href="/#new-arrivals" className="hover:text-[#16a34a] transition-colors">New Arrivals</Link></li>
            <li><Link href="/#limited-drops" className="hover:text-[#16a34a] transition-colors">Limited Drops</Link></li>
          </ul>
        </div>

        {/* Contact */}
        <div>
          <h5 className="text-lg uppercase mb-3" style={{ fontFamily: 'var(--font-heading)' }}>Reach Us</h5>
          <ul className="space-y-2 text-sm">
            <li className="flex items-start gap-2"><MapPin size={16} className="mt-0.5 shrink-0" /> 1457 Vilakazi Street, Orlando West, Soweto 1804</li>
            <li className="flex items-center gap-2"><Phone size={16} /> +27 11 234 5678</li>
            <li className="flex items-center gap-2"><Mail size={16} /> shouts@mzansiurban.co.za</li>
          </ul>
        </div>

        {/* Hours */}
        <div>
          <h5 className="text-lg uppercase mb-3" style={{ fontFamily: 'var(--font-heading)' }}>Open Hours</h5>
          <ul className="text-sm space-y-1">
            <li>Mon - Fri: 9:00 - 18:00</li>
            <li>Sat: 10:00 - 16:00</li>
            <li>Sun: 11:00 - 15:00</li>
          </ul>
        </div>
      </div>
      <div className="border-t border-t-white/20 py-4 text-center text-xs opacity-80">
        © {new Date().getFullYear()} Mzansi Urban. All rights reserved. Kasi built, globally loved.
      </div>
    </footer>
  )
}
