import Link from 'next/link';

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

  return (
    <footer>
      {/* Red accent bar */}
      <div className="h-1 bg-[#e31e24]" />

      {/* Main footer — warm dark charcoal, not pitch black */}
      <div className="bg-[#1c1c1c]">
        <div className="container-page py-14">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-10">

            {/* Brand column */}
            <div className="md:col-span-2">
              {/* Logo — white rounded background so it blends cleanly */}
              <Link href="/" className="inline-flex items-center gap-3 mb-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#e31e24] focus-visible:ring-offset-2 focus-visible:ring-offset-[#1c1c1c] rounded-xl" style={{ minHeight: 'unset' }}>
                <div className="w-14 h-14 rounded-xl bg-white flex items-center justify-center flex-shrink-0 shadow-lg overflow-hidden">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src="/logo.jpeg"
                    alt="Pep's Restaurant"
                    className="w-full h-full object-contain"
                  />
                </div>
                <div>
                  <div className="text-white font-black text-lg leading-tight">Pep&apos;s Restaurant</div>
                  <div className="text-[#e31e24] text-[10px] font-bold tracking-[0.2em] uppercase leading-tight mt-0.5">Ghana</div>
                </div>
              </Link>

              <p className="text-gray-400 text-sm leading-relaxed max-w-xs mb-6">
                Discover our signature, bold &amp; unforgettable flavors — from Jollof Rice and Banku to Pizzas, Burgers and Shawarma.
              </p>

              {/* Social icons */}
              <div className="flex items-center gap-2">
                {[
                  {
                    label: 'Facebook',
                    href: 'https://facebook.com',
                    icon: (
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/>
                      </svg>
                    ),
                  },
                  {
                    label: 'Instagram',
                    href: 'https://instagram.com',
                    icon: (
                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
                        <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                        <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/>
                        <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
                      </svg>
                    ),
                  },
                  {
                    label: 'WhatsApp',
                    href: `https://wa.me/${process.env.NEXT_PUBLIC_WA_NUMBER || '233XXXXXXXXX'}`,
                    icon: (
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                      </svg>
                    ),
                  },
                ].map(({ label, href, icon }) => (
                  <a
                    key={label}
                    href={href}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={label}
                    className="w-9 h-9 rounded-lg bg-white/10 hover:bg-[#e31e24] flex items-center justify-center text-gray-400 hover:text-white transition-all duration-300"
                    style={{ minHeight: 'unset', minWidth: 'unset' }}
                  >
                    {icon}
                  </a>
                ))}
              </div>
            </div>

            {/* Quick links */}
            <div>
              <h3 className="text-white font-black text-xs uppercase tracking-[0.2em] mb-5">Quick Links</h3>
              <ul className="space-y-1">
                {[['/', 'Home'], ['/menu', 'Our Menu'], ['/checkout', 'Order Now'], ['/contact', 'Contact']].map(([href, label]) => (
                  <li key={href}>
                    <Link
                      href={href}
                      className="text-sm text-gray-400 hover:text-white transition-colors inline-flex items-center gap-2 min-h-[36px] group"
                    >
                      <span className="w-0 group-hover:w-2 h-px bg-[#e31e24] transition-all duration-200 flex-shrink-0" />
                      {label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            {/* Contact */}
            <div>
              <h3 className="text-white font-black text-xs uppercase tracking-[0.2em] mb-5">Contact</h3>
              <div className="space-y-3 text-sm text-gray-400">
                <a href="tel:+233XXXXXXXXX" className="flex items-center gap-2.5 hover:text-white transition-colors min-h-[36px]">
                  <span className="w-7 h-7 rounded-lg bg-white/10 flex items-center justify-center flex-shrink-0">
                    <svg className="w-3.5 h-3.5 text-[#e31e24]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                  </span>
                  +233 XX XXX XXXX
                </a>
                <div className="flex items-start gap-2.5">
                  <span className="w-7 h-7 rounded-lg bg-white/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                    <svg className="w-3.5 h-3.5 text-[#e31e24]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                      <path strokeLinecap="round" strokeLinejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                  </span>
                  <span>Accra, Ghana</span>
                </div>
                <div className="flex items-start gap-2.5">
                  <span className="w-7 h-7 rounded-lg bg-white/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                    <svg className="w-3.5 h-3.5 text-[#e31e24]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                  </span>
                  <div>
                    <div>Mon–Fri: 10:00–22:00</div>
                    <div>Sat–Sun: 09:00–23:00</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="border-t border-white/10">
          <div className="container-page py-4 flex flex-col sm:flex-row items-center justify-between gap-3">
            <p className="text-xs text-gray-500">&copy; {year} Pep&apos;s Restaurant Ghana. All rights reserved.</p>
            <p className="text-xs text-gray-600">Made with <span className="text-[#e31e24]">♥</span> in Ghana</p>
          </div>
        </div>
      </div>
    </footer>
  );
}