/**
 * GLOBAL FOOTER
 * 
 * Appears at the bottom of every page.
 * 
 * Contains:
 * - Brand + short tagline
 * - Both physical locations with full addresses + phone/email
 * - Opening hours (same for both branches)
 * - Quick links + social profiles
 * 
 * Note: The phone numbers and addresses here are the canonical source.
 * If the restaurant ever changes them, update this file + the contact section
 * on the homepage + the locations page.
 */

import Link from "next/link";
import { useLanguage } from "@/lib/language-context";
import { getTranslation } from "@/lib/translations";

export default function Footer() {
  const { language } = useLanguage();
  const t = getTranslation(language);
  return (
    <footer className="bg-[#F5F1E9] border-t border-[#EDE6D9] pt-14 pb-10 text-[#6B665F]">
      <div className="max-w-7xl mx-auto px-6">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-y-12 gap-x-8">
          {/* Brand */}
          <div>
            <div className="flex items-center gap-3 mb-4">
              <div className="w-12 h-12 rounded-xl overflow-hidden border border-[#c99a2e]/30 bg-white p-1 shadow-sm">
                <img 
                  src="/images/logo/logo1.png" 
                  alt="Shahi Kitchen Logo" 
                  className="w-full h-full object-contain" 
                />
              </div>
              <span className="text-[#2C2A26] font-medium tracking-[-0.3px]">Shahi Kitchen</span>
            </div>
            <p className="text-sm leading-relaxed">
              {t.footer.tagline}
            </p>
          </div>

          {/* Contact - Both Locations */}
          <div>
            <div className="text-[#2C2A26] text-sm tracking-[1.5px] mb-4">{t.footer.locations}</div>
            <div className="space-y-4 text-sm">
              <div>
                <div className="font-medium text-[#2C2A26]">Shahi Kitchen (Askim / Sisjön)</div>
                <div>Datavägen 10A, 436 32 Askim</div>
              </div>
              <div>
                <div className="font-medium text-[#2C2A26]">Shahi Sweets (Backaplan)</div>
                <div>Krokegårdsgatan 5, 417 30 Göteborg</div>
              </div>
              <div>
                <a href="tel:0739381089" className="block hover:text-[#B38B4D] transition-colors">
                  0739-381089
                </a>
                <a href="mailto:hello@shahikitchen.se" className="block hover:text-[#B38B4D] transition-colors">
                  hello@shahikitchen.se
                </a>
              </div>
            </div>
          </div>

          {/* Hours */}
          <div>
            <div className="text-[#2C2A26] text-sm tracking-[1.5px] mb-4">{language === 'sv' ? 'ÖPPETTIDER' : 'OPENING HOURS'}</div>
            <div className="text-sm space-y-1">
              <div><span className="font-medium">Askim:</span> Mon–Sun 11:00–21:00</div>
              <div><span className="font-medium">Backaplan:</span> Mon–Sun 11:00–21:00</div>
            </div>
          </div>

          {/* Quick Links + Social */}
          <div>
            <div className="text-[#2C2A26] text-sm tracking-[1.5px] mb-4">{t.footer.explore}</div>
            <div className="flex flex-col gap-1.5 text-sm mb-8">
              <Link href="/" className="hover:text-[#B38B4D] transition-colors">{t.nav.home}</Link>
              <Link href="/menu" className="hover:text-[#B38B4D] transition-colors">{t.nav.menu}</Link>
              <Link href="/#experience" className="hover:text-[#B38B4D] transition-colors">{language === 'sv' ? 'Vår Upplevelse' : 'Our Experience'}</Link>
              <Link href="/#contact" className="hover:text-[#B38B4D] transition-colors">{language === 'sv' ? 'Kontakt &amp; Boka' : 'Contact &amp; Reserve'}</Link>
            </div>

            <div className="text-[#2C2A26] text-sm tracking-[1.5px] mb-3">{t.footer.follow}</div>
            <div className="flex gap-5 text-sm">
              <a 
                href="https://www.instagram.com/Shahikitchen/" 
                target="_blank" 
                rel="noopener noreferrer"
                className="hover:text-[#B38B4D] transition-colors"
              >
                Instagram
              </a>
              <a 
                href="https://www.facebook.com/shahikitchengbg/" 
                target="_blank" 
                rel="noopener noreferrer"
                className="hover:text-[#B38B4D] transition-colors"
              >
                Facebook
              </a>
            </div>
          </div>
        </div>

        <div className="mt-14 pt-8 border-t border-[#EDE6D9] text-xs tracking-widest flex flex-col md:flex-row md:items-center justify-between gap-y-2 text-[#8A8478]">
          <div>© {new Date().getFullYear()} SHAHI KITCHEN • GÖTEBORG. ALL RIGHTS RESERVED.</div>
          <div>{language === 'sv' ? 'Tillagat med tradition och hjärta.' : 'Made with tradition and heart.'}</div>
        </div>
      </div>
    </footer>
  );
}