import Link from 'next/link'
import { Camera, Globe, MessageCircle, Video, X } from 'lucide-react'

export default function Footer() {
  const currentYear = new Date().getFullYear()

  return (
    <footer className="bg-primary text-primary-foreground border-t-4 border-secondary py-12 md:py-16">
      <div className="container mx-auto px-4 md:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Brand */}
          <div>
            <h3 className="text-2xl font-heading uppercase tracking-widest mb-4">Jozi wear</h3>
            <p className="text-muted-foreground text-sm leading-relaxed">
              Born in the heart of Soweto. Limited-edition streetwear that carries the pulse of the township — African print hoodies, caps, and tees, crafted for the culture.
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="font-heading uppercase text-sm tracking-wider mb-4">Quick Links</h4>
            <ul className="space-y-2 text-sm">
              <li><Link href="/" className="hover:text-secondary transition-all duration-200 ease-out">Home</Link></li>
              <li><Link href="/products" className="hover:text-secondary transition-all duration-200 ease-out">Products</Link></li>
              <li><Link href="#featured-products" className="hover:text-secondary transition-all duration-200 ease-out">Featured</Link></li>
              <li><Link href="#new-arrivals" className="hover:text-secondary transition-all duration-200 ease-out">New Arrivals</Link></li>
              <li><Link href="#drops" className="hover:text-secondary transition-all duration-200 ease-out">Drop Campaigns</Link></li>
              <li><Link href="#contact" className="hover:text-secondary transition-all duration-200 ease-out">Contact</Link></li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="font-heading uppercase text-sm tracking-wider mb-4">Contact</h4>
            <div className="space-y-2 text-sm text-muted-foreground">
              <p>123 Vilakazi Street</p>
              <p>Soweto, Johannesburg, 1860</p>
              <p>South Africa</p>
              <a href="tel:+27115550186" className="hover:text-secondary transition-all duration-200 ease-out block">+27 11 555 0186</a>
              <a href="mailto:info@joziwear.co.za" className="hover:text-secondary transition-all duration-200 ease-out block">info@joziwear.co.za</a>
            </div>
          </div>

          {/* Hours & Social */}
          <div>
            <h4 className="font-heading uppercase text-sm tracking-wider mb-4">Store Hours</h4>
            <p className="text-sm text-muted-foreground mb-6">
              Mon - Sat: 10am – 6pm<br />
              Sun: 11am – 4pm
            </p>
            <h4 className="font-heading uppercase text-sm tracking-wider mb-4">Follow the Hustle</h4>
            <div className="flex space-x-4 text-xl">
              <a href="#" aria-label="Facebook" className="hover:text-secondary transition-all duration-200 ease-out"><Globe /></a>
              <a href="#" aria-label="Instagram" className="hover:text-secondary transition-all duration-200 ease-out"><Camera /></a>
              <a href="#" aria-label="X" className="hover:text-secondary transition-all duration-200 ease-out"><X /></a>
              <a href="#" aria-label="TikTok" className="hover:text-secondary transition-all duration-200 ease-out"><Video /></a>
              <a href="#" aria-label="WhatsApp" className="hover:text-secondary transition-all duration-200 ease-out"><MessageCircle /></a>
            </div>
          </div>
        </div>

        <div className="border-t border-border mt-10 pt-6 text-center text-xs text-muted-foreground">
          <p>&copy; {currentYear} Jozi wear. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}