'use client';

import type { ReactNode } from 'react';

/**
 * GLOBAL FOOTER — Shahi Kitchen
 * Cream + gold palette matching the header for a cohesive look.
 */

import Link from 'next/link';
import { logoUrl } from '@/lib/assets';
import { useLanguage } from '@/lib/language-context';
import { getTranslation } from '@/lib/translations';
import {
  MapPin,
  Clock,
  Phone,
  Mail,
  Heart,
} from 'lucide-react';

function InstagramIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="2" y="2" width="20" height="20" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
    </svg>
  );
}

function FacebookIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
    </svg>
  );
}

const FOOTER_COPY: Record<
  string,
  {
    openingHours: string;
    experience: string;
    contactReserve: string;
    madeWith: string;
  }
> = {
  sv: {
    openingHours: 'Öppettider',
    experience: 'Vår Upplevelse',
    contactReserve: 'Kontakt & Boka',
    madeWith: 'Tillagat med tradition och hjärta.',
  },
  en: {
    openingHours: 'Opening Hours',
    experience: 'Our Experience',
    contactReserve: 'Contact & Reserve',
    madeWith: 'Made with tradition and heart.',
  },
  ar: {
    openingHours: 'ساعات العمل',
    experience: 'تجربتنا',
    contactReserve: 'تواصل واحجز',
    madeWith: 'مُعدّ بتقاليد ومن القلب.',
  },
  tr: {
    openingHours: 'Çalışma Saatleri',
    experience: 'Deneyimimiz',
    contactReserve: 'İletişim & Rezervasyon',
    madeWith: 'Gelenek ve sevgiyle hazırlandı.',
  },
  hi: {
    openingHours: 'खुलने का समय',
    experience: 'हमारा अनुभव',
    contactReserve: 'संपर्क और बुकिंग',
    madeWith: 'परंपरा और दिल से बनाया गया।',
  },
  ur: {
    openingHours: 'کھلنے کے اوقات',
    experience: 'ہمارا تجربہ',
    contactReserve: 'رابطہ اور بکنگ',
    madeWith: 'روایت اور دل سے تیار۔',
  },
};

function FooterHeading({ children }: { children: ReactNode }) {
  return (
    <h3 className="footer-heading mb-5 flex items-center gap-2 text-xs font-bold uppercase tracking-[0.22em] text-[#8a6a25]">
      <span className="footer-heading-line" aria-hidden="true" />
      {children}
    </h3>
  );
}

export default function Footer() {
  const { language } = useLanguage();
  const t = getTranslation(language);
  const copy = FOOTER_COPY[language] ?? FOOTER_COPY.en;

  return (
    <footer id="contact" className="scroll-mt-header shahi-footer relative mt-auto overflow-hidden">
      <div className="footer-top-rail" aria-hidden="true" />

      <div className="footer-main relative px-6 pb-12 pt-16">
        <div className="footer-glow footer-glow--gold" aria-hidden="true" />
        <div className="footer-glow footer-glow--emerald" aria-hidden="true" />

        <div className="relative mx-auto max-w-7xl">
          <div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-8">
            {/* Brand */}
            <div className="lg:col-span-1">
              <div className="mb-5 flex items-center gap-3">
                <div className="footer-logo-ring grid h-14 w-14 place-items-center rounded-2xl border p-1.5">
                  <img
                    src={logoUrl()}
                    alt="Shahi Kitchen"
                    className="h-full w-full object-contain"
                  />
                </div>
                <div>
                  <span className="block font-serif text-xl tracking-tight text-[#101724]">
                    Shahi Kitchen
                  </span>
                  <span className="text-[10px] font-semibold uppercase tracking-[0.28em] text-[#8a6a25]">
                    Göteborg
                  </span>
                </div>
              </div>
              <p className="text-sm leading-relaxed text-[#4b5563]">{t.footer.tagline}</p>
            </div>

            {/* Locations */}
            <div>
              <FooterHeading>{t.footer.locations}</FooterHeading>
              <div className="space-y-4">
                <div className="footer-info-card">
                  <div className="mb-2 flex items-center gap-2">
                    <MapPin className="h-4 w-4 shrink-0 text-[#c99a2e]" />
                    <span className="text-sm font-semibold text-[#101724]">
                      Shahi Kitchen (Askim)
                    </span>
                  </div>
                  <p className="text-sm leading-relaxed text-[#4b5563]">
                    Datavägen 10A, 436 32 Askim
                  </p>
                </div>
                <div className="footer-info-card">
                  <div className="mb-2 flex items-center gap-2">
                    <MapPin className="h-4 w-4 shrink-0 text-[#c99a2e]" />
                    <span className="text-sm font-semibold text-[#101724]">
                      Shahi Sweets (Backaplan)
                    </span>
                  </div>
                  <p className="text-sm leading-relaxed text-[#4b5563]">
                    Krokegårdsgatan 5, 417 30 Göteborg
                  </p>
                </div>
                <div className="flex flex-col gap-2 pt-1">
                  <a
                    href="tel:0739381089"
                    className="footer-link inline-flex items-center gap-2 text-sm font-medium"
                  >
                    <Phone className="h-3.5 w-3.5 text-[#c99a2e]" />
                    0739-381089
                  </a>
                  <a
                    href="mailto:hello@shahikitchen.se"
                    className="footer-link inline-flex items-center gap-2 text-sm font-medium"
                  >
                    <Mail className="h-3.5 w-3.5 text-[#c99a2e]" />
                    hello@shahikitchen.se
                  </a>
                </div>
              </div>
            </div>

            {/* Hours */}
            <div>
              <FooterHeading>{copy.openingHours}</FooterHeading>
              <div className="footer-info-card space-y-4">
                <div className="flex gap-3">
                  <Clock className="mt-0.5 h-4 w-4 shrink-0 text-[#c99a2e]" />
                  <div>
                    <p className="text-sm font-semibold text-[#101724]">Askim</p>
                    <p className="text-sm text-[#4b5563]">Mon – Sun · 11:00 – 21:00</p>
                  </div>
                </div>
                <div className="flex gap-3">
                  <Clock className="mt-0.5 h-4 w-4 shrink-0 text-[#c99a2e]" />
                  <div>
                    <p className="text-sm font-semibold text-[#101724]">Backaplan</p>
                    <p className="text-sm text-[#4b5563]">Mon – Sun · 11:00 – 21:00</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Links + Social */}
            <div>
              <FooterHeading>{t.footer.explore}</FooterHeading>
              <nav className="mb-8 flex flex-col gap-2.5">
                <Link href="/" className="footer-link text-sm font-medium">
                  {t.nav.home}
                </Link>
                <Link href="/menu" className="footer-link text-sm font-medium">
                  {t.nav.menu}
                </Link>
                <Link href="/catering" className="footer-link text-sm font-medium">
                  {t.nav.catering}
                </Link>
                <Link href="/locations" className="footer-link text-sm font-medium">
                  {t.nav.locations}
                </Link>
                <Link href="/#experience" className="footer-link text-sm font-medium">
                  {copy.experience}
                </Link>
                <Link href="/reserve" className="footer-link text-sm font-medium">
                  {copy.contactReserve}
                </Link>
              </nav>

              <FooterHeading>{t.footer.follow}</FooterHeading>
              <div className="flex gap-3">
                <a
                  href="https://www.instagram.com/Shahikitchen/"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Instagram"
                  className="footer-social-btn"
                >
                  <InstagramIcon className="h-5 w-5" />
                </a>
                <a
                  href="https://www.facebook.com/shahikitchengbg/"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Facebook"
                  className="footer-social-btn"
                >
                  <FacebookIcon className="h-5 w-5" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="footer-bottom relative px-6 py-6">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-3 text-center text-[11px] uppercase tracking-[0.18em] text-[#6B665F] sm:flex-row sm:text-left">
          <p>© {new Date().getFullYear()} Shahi Kitchen · Göteborg</p>
          <p className="normal-case tracking-normal text-[#4b5563] italic flex items-center gap-1.5">
            <Heart className="h-3.5 w-3.5 text-[#c99a2e] fill-[#c99a2e]/20" aria-hidden="true" />
            {copy.madeWith}
          </p>
        </div>
      </div>
    </footer>
  );
}