'use client';

import Link from 'next/link';
import { ShieldCheck, Leaf, Award, Phone, Mail, MapPin, Facebook, Instagram, MessageCircle } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';
import Logo from '@/components/ui/Logo';
import {
  SITE_PHONE_DISPLAY,
  SITE_ADDRESS,
  SITE_HOURS,
  SITE_EMAIL,
  FACEBOOK_URL,
  INSTAGRAM_URL,
  WHATSAPP_URL,
} from '@/lib/constants';

export default function Footer() {
  const { t } = useTranslation();

  const footerLinks = {
    shop: [
      { label: t('nav.chicken'), href: '/shop?category=chicken' },
      { label: t('nav.beef'), href: '/shop?category=beef' },
      { label: t('nav.lamb'), href: '/shop?category=lamb' },
      { label: t('nav.fish'), href: '/shop?category=fish' },
    ],
    company: [
      { label: t('nav.home'), href: '/' },
      { label: t('nav.about'), href: '/about' },
      { label: t('nav.halalCert'), href: '/about#halal' },
      { label: t('nav.delivery'), href: '/about#delivery' },
      { label: t('nav.contact'), href: '/about#contact' },
    ],
    account: [
      { label: t('nav.myAccount'), href: '/account' },
      { label: t('nav.orderHistory'), href: '/account#orders' },
      { label: t('nav.wishlist'), href: '/wishlist' },
      { label: t('nav.cart'), href: '/cart' },
    ],
  };

  return (
    <footer className="border-t border-gray-100 bg-brand-950 text-white">
      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        <div className="grid gap-12 md:grid-cols-2 lg:grid-cols-4">
          <div>
            <Link href="/" className="mb-4 flex items-center gap-3">
              <Logo size="sm" className="ring-brand-700" />
              <span className="font-display text-xl font-bold">{t('site.name')}</span>
            </Link>
            <p className="mb-6 text-sm leading-relaxed text-brand-200">
              {t('footer.tagline')}
            </p>
            <div className="mb-6 flex flex-wrap gap-4">
              <div className="flex items-center gap-1.5 text-xs text-gold-400">
                <ShieldCheck className="h-4 w-4" />
                {t('trust.halal')}
              </div>
              <div className="flex items-center gap-1.5 text-xs text-gold-400">
                <Leaf className="h-4 w-4" />
                {t('trust.fresh')}
              </div>
              <div className="flex items-center gap-1.5 text-xs text-gold-400">
                <Award className="h-4 w-4" />
                {t('trust.premium')}
              </div>
            </div>
            <div className="flex gap-3">
              <a
                href={FACEBOOK_URL}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={t('social.facebook')}
                className="rounded-lg bg-brand-800 p-2.5 text-brand-200 transition-colors hover:bg-brand-700 hover:text-white"
              >
                <Facebook className="h-4 w-4" />
              </a>
              <a
                href={INSTAGRAM_URL}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={t('social.instagram')}
                className="rounded-lg bg-brand-800 p-2.5 text-brand-200 transition-colors hover:bg-brand-700 hover:text-white"
              >
                <Instagram className="h-4 w-4" />
              </a>
              <a
                href={WHATSAPP_URL}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={t('social.whatsapp')}
                className="rounded-lg bg-brand-800 p-2.5 text-brand-200 transition-colors hover:bg-brand-700 hover:text-white"
              >
                <MessageCircle className="h-4 w-4" />
              </a>
            </div>
          </div>

          <div>
            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gold-400">
              {t('footer.shop')}
            </h3>
            <ul className="space-y-2">
              {footerLinks.shop.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-sm text-brand-200 transition-colors hover:text-white"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gold-400">
              {t('footer.company')}
            </h3>
            <ul className="space-y-2">
              {footerLinks.company.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-sm text-brand-200 transition-colors hover:text-white"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gold-400">
              {t('footer.contact')}
            </h3>
            <ul className="space-y-3">
              <li className="flex items-center gap-2 text-sm text-brand-200">
                <Phone className="h-4 w-4 text-gold-400" />
                <a href={`tel:${SITE_PHONE_DISPLAY.replace(/\s/g, '')}`} className="hover:text-white">
                  {SITE_PHONE_DISPLAY}
                </a>
              </li>
              <li className="flex items-center gap-2 text-sm text-brand-200">
                <Mail className="h-4 w-4 text-gold-400" />
                <a href={`mailto:${SITE_EMAIL}`} className="hover:text-white">
                  {SITE_EMAIL}
                </a>
              </li>
              <li className="flex items-start gap-2 text-sm text-brand-200">
                <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-gold-400" />
                <span>
                  {SITE_ADDRESS}
                  <br />
                  {t('footer.hours', { hours: SITE_HOURS })}
                </span>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-brand-800 pt-8 sm:flex-row">
          <p className="text-xs text-brand-300">
            &copy; {new Date().getFullYear()} {t('site.name')}. {t('footer.rights')}
          </p>
          <div className="flex gap-6 text-xs text-brand-300">
            <Link href="/about#privacy" className="hover:text-white">
              {t('nav.privacy')}
            </Link>
            <Link href="/about#terms" className="hover:text-white">
              {t('nav.terms')}
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
}