'use client';

import {
  MapPin,
  Phone,
  Mail,
  Facebook,
  Instagram,
  Youtube,
} from 'lucide-react';

/* ── Footer Links ─────────────────────────────────────────────── */
const quickLinks = [
  { label: 'Home', href: '#' },
  { label: 'Shop', href: '#' },
  { label: 'New Arrivals', href: '#' },
  { label: 'Best Sellers', href: '#' },
  { label: 'Sale', href: '#' },
  { label: 'Contact Us', href: '#' },
];

const policyLinks = [
  { label: 'Privacy Policy', href: '#' },
  { label: 'Terms & Conditions', href: '#' },
  { label: 'Return & Refund Policy', href: '#' },
  { label: 'Delivery Information', href: '#' },
  { label: 'Track Order', href: '#' },
];

interface FooterProps {
  className?: string;
}

export default function Footer({ className = '' }: FooterProps) {
  return (
    <footer className={`bg-gray-900 text-gray-300 pt-12 lg:pt-16 pb-24 lg:pb-8 ${className}`}>
      <div className="max-w-7xl mx-auto px-4 lg:px-8">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-10">

          {/* ── Brand Column ──────────────────────────────────── */}
          <div>
            <h3 className="text-xl font-bold text-white mb-4">
              <span className="text-brand">X</span>evon
            </h3>
            <p className="text-gray-400 text-sm leading-relaxed mb-5">
              Xevon is a premium Bangladeshi fashion brand offering high-quality Panjabi,
              Shirts, T-Shirts, Trousers, and Winter Wear for the modern gentleman.
              Style meets comfort.
            </p>
            <div className="flex gap-3">
              {/* Facebook */}
              <a
                href="#"
                className="w-9 h-9 bg-gray-800 hover:bg-brand rounded-full flex items-center justify-center transition-colors"
                aria-label="Facebook"
                title="Facebook"
              >
                <Facebook className="w-4 h-4" />
              </a>
              {/* Instagram */}
              <a
                href="#"
                className="w-9 h-9 bg-gray-800 hover:bg-brand rounded-full flex items-center justify-center transition-colors"
                aria-label="Instagram"
                title="Instagram"
              >
                <Instagram className="w-4 h-4" />
              </a>
              {/* YouTube */}
              <a
                href="#"
                className="w-9 h-9 bg-gray-800 hover:bg-brand rounded-full flex items-center justify-center transition-colors"
                aria-label="YouTube"
                title="YouTube"
              >
                <Youtube className="w-4 h-4" />
              </a>
            </div>
          </div>

          {/* ── Quick Links ──────────────────────────────────── */}
          <div>
            <h4 className="text-white font-semibold mb-4">Quick Links</h4>
            <ul className="space-y-2.5 text-sm">
              {quickLinks.map((link) => (
                <li key={link.label}>
                  <a
                    href={link.href}
                    className="text-gray-400 hover:text-brand transition-colors"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* ── Customer Service ──────────────────────────────── */}
          <div>
            <h4 className="text-white font-semibold mb-4">Customer Service</h4>
            <ul className="space-y-2.5 text-sm">
              {policyLinks.map((link) => (
                <li key={link.label}>
                  <a
                    href={link.href}
                    className="text-gray-400 hover:text-brand transition-colors"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* ── Contact Info ────────────────────────────────────── */}
          <div>
            <h4 className="text-white font-semibold mb-4">Contact Us</h4>
            <ul className="space-y-3 text-sm">
              <li className="flex items-start gap-3">
                <MapPin className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                <span>Gulshan-2, Dhaka 1212,<br />Bangladesh</span>
              </li>
              <li className="flex items-center gap-3">
                <Phone className="w-4 h-4 text-brand flex-shrink-0" />
                <a href="tel:+8801234567890" className="text-gray-400 hover:text-brand transition-colors">
                  +880 1234-567890
                </a>
              </li>
              <li className="flex items-center gap-3">
                <Mail className="w-4 h-4 text-brand flex-shrink-0" />
                <a href="mailto:hello@xevon.com.bd" className="text-gray-400 hover:text-brand transition-colors">
                  hello@xevon.com.bd
                </a>
              </li>
            </ul>
          </div>
        </div>

        {/* ── Copyright ──────────────────────────────────────── */}
        <div className="border-t border-gray-800 mt-10 pt-6 text-center text-xs text-gray-500">
          <p>&copy; 2025 Xevon. All rights reserved. Designed with love in Bangladesh.</p>
        </div>
      </div>
    </footer>
  );
}
