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

import Link from 'next/link'

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

  const quickLinks = [
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Latest Drops', href: '/#latest-drops' },
    { label: 'Featured Collections', href: '/#featured-collections' },
    { label: 'About', href: '/#about-vault' },
    { label: 'Authenticity Guarantee', href: '/#authentication-guarantee' },
    { label: 'Gallery', href: '/#gallery' },
  ]

  return (
    <footer className="bg-[#0f0f17] border-t border-[#303040] text-[#e7e7ee]">
      <div className="max-w-7xl mx-auto px-6 py-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
        {/* Column 1 – Brand & Contact */}
        <div>
          <h3 className="font-heading text-[#c0c0c0] text-xl mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Vault by Mkhize</h3>
          <div className="space-y-3 text-sm">
            <div className="flex items-start gap-3">
              <MapPin size={16} className="mt-0.5 text-[#c0c0c0] flex-shrink-0" />
              <span>Shop 12, The Marc, Cnr Rivonia Road & Maude Street, Sandton, Johannesburg, 2196</span>
            </div>
            <div className="flex items-center gap-3">
              <Phone size={16} className="text-[#c0c0c0] flex-shrink-0" />
              <a href="tel:+27115551234" className="hover:text-[#c0c0c0] transition-all duration-200 ease-out">+27 11 555 1234</a>
            </div>
            <div className="flex items-center gap-3">
              <Mail size={16} className="text-[#c0c0c0] flex-shrink-0" />
              <a href="mailto:concierge@vaultbymkhize.co.za" className="hover:text-[#c0c0c0] transition-all duration-200 ease-out">concierge@vaultbymkhize.co.za</a>
            </div>
          </div>
        </div>

        {/* Column 2 – Business Hours */}
        <div>
          <h4 className="font-heading text-[#c0c0c0] text-lg mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Visiting Hours</h4>
          <p className="text-sm">Monday – Saturday: 09:00 – 18:00<br />Sunday: 10:00 – 15:00</p>
          <p className="text-sm mt-4 text-[#c0c0c0]">Private appointments available after hours for Vault Elite members.</p>
        </div>

        {/* Column 3 – Quick Links */}
        <div>
          <h4 className="font-heading text-[#c0c0c0] text-lg mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Navigate</h4>
          <ul className="space-y-2 text-sm">
            {quickLinks.map((link) => (
              <li key={link.label}>
                <Link
                  href={link.href}
                  className="hover:text-[#c0c0c0] transition-all duration-200 ease-out"
                >
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        {/* Column 4 – Social & Copyright */}
        <div>
          <h4 className="font-heading text-[#c0c0c0] text-lg mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Connect</h4>
          <div className="flex gap-4 mb-6">
            <a href="https://instagram.com/vaultbymkhize" target="_blank" rel="noopener noreferrer" className="text-[#c0c0c0] hover:text-white transition-all duration-200 ease-out">
              <Camera size={20} />
            </a>
            <a href="https://facebook.com/vaultbymkhize" target="_blank" rel="noopener noreferrer" className="text-[#c0c0c0] hover:text-white transition-all duration-200 ease-out">
              <Globe size={20} />
            </a>
            <a href="https://x.com/vaultbymkhize" target="_blank" rel="noopener noreferrer" className="text-[#c0c0c0] hover:text-white transition-all duration-200 ease-out">
              <X size={20} />
            </a>
            <a href="https://tiktok.com/@vaultbymkhize" target="_blank" rel="noopener noreferrer" className="text-[#c0c0c0] hover:text-white transition-all duration-200 ease-out">
              <Video size={20} />
            </a>
            <a href="https://wa.me/27115551234" target="_blank" rel="noopener noreferrer" className="text-[#c0c0c0] hover:text-white transition-all duration-200 ease-out">
              <MessageCircle size={20} />
            </a>
          </div>
          <p className="text-xs text-[#a0a0b0]">Every pair authenticated by our in‑house specialist, trained at Nike Johannesburg and resale forensic labs.</p>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="border-t border-[#303040] py-6">
        <div className="max-w-7xl mx-auto px-6 text-center text-xs text-[#a0a0b0]">
          © {currentYear} Vault by Mkhize. All rights reserved.
        </div>
      </div>
    </footer>
  )
}