import { Mail, Phone, MapPin } from 'lucide-react';
import Link from 'next/link';
import Image from 'next/image';
import { FaFacebook, FaInstagram, FaYoutube } from 'react-icons/fa';
import { SiShopee } from 'react-icons/si';

const FOOTER_LINKS = {
  tautan: [
    { label: 'Beranda', href: '/' },
    { label: 'Produk', href: '/products' },
    { label: 'Resep', href: '/recipes' },
    { label: 'Aktivitas', href: '/activities' },
  ],
  lainnya: [
    { label: 'Artikel', href: '/articles' },
    { label: 'CSR', href: '/csr' },
    { label: 'Event & Promo', href: '/event-promo' },
    { label: 'Cari Agen', href: '/agen' },
  ],
};

const SOCIAL_LINKS = [
  {
    icon: FaFacebook,
    href: 'https://www.facebook.com/garamcapkapal/',
    label: 'Facebook',
  },
  {
    icon: FaInstagram,
    href: 'https://www.instagram.com/garamcapkapal/',
    label: 'Instagram',
  },
  {
    icon: SiShopee,
    href: 'https://shopee.co.id/garamcapkapal',
    label: 'Twitter',
  },
  {
    icon: FaYoutube,
    href: 'https://www.youtube.com/@garamcapkapalofficial',
    label: 'YouTube',
  },
];

const CONTACT_INFO = [
  {
    icon: MapPin,
    content: (
      <>
        Golden City Mall
        <br />
        Jl. KH Abdul Wahab Siamin Blok TC No. 2-8,
        <br />
        Dukuh Pakis, Surabaya, Jawa Timur, Indonesia
      </>
    ),
  },
  { icon: Phone, content: '+62 31 5312526' },
  { icon: Mail, content: 'marcomm@susantimegah.com' },
];

export default function Footer() {
  return (
    <footer className="bg-[#FFFDF5] border-t border-[#E8E0CC]/80 pt-8 pb-8 relative">
      {/* Background decorative blobs */}
      <div className="absolute top-0 right-0 w-[400px] h-[400px] bg-[#FFD738]/8 rounded-full blur-[120px] pointer-events-none overflow-hidden" />
      <div className="absolute bottom-0 left-0 w-[300px] h-[300px] bg-[#FFD738]/6 rounded-full blur-[100px] pointer-events-none overflow-hidden" />

      {/* Mascots Centered — positioned above the footer */}
      <div className="absolute left-1/2 -translate-x-1/2 -top-40 md:-top-110 z-20 pointer-events-none">
        <Image
          src="/images/mascots/salta-saltu-salto-with-garamkapal-pose.avif"
          width={729}
          height={334}
          alt="Mascots Salta Saltu Salto"
          quality={100}
          unoptimized={true}
          className="w-auto h-75 md:h-182 object-contain drop-shadow-2xl"
        />
      </div>

      <div className="container mx-auto px-4 relative z-10 pt-12 md:pt-20">
        {/* Main Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-10 gap-8 md:gap-10 mb-3 md:mb-6">
          {/* Brand */}
          <div className="md:col-span-2 lg:col-span-3">
            <Link
              href="/"
              className="flex items-center gap-3 mb-4 md:mb-5 group w-fit"
            >
              <div className="relative">
                <div className="absolute inset-0 bg-[#FFD738]/30 rounded-full blur-md group-hover:blur-lg transition-all" />
                <Image
                  src="/logo.avif"
                  width={44}
                  height={44}
                  alt="Garam Cap Kapal"
                  className="relative z-10"
                />
              </div>
              <div>
                <p className="font-black text-[#1C1D1F] text-base uppercase tracking-wider leading-none">
                  Garam <span className="text-[#D4A000]">Cap Kapal</span>
                </p>
                <p className="text-[10px] font-bold text-[#9CA3AF] uppercase tracking-widest mt-0.5">
                  Sejak 1978
                </p>
              </div>
            </Link>

            <p className="text-[#6B7280] text-sm leading-relaxed mb-5 md:mb-6 max-w-xs">
              Memberikan rasa terbaik untuk setiap masakan keluarga Indonesia
              sejak 1978.{' '}
              <span className="text-[#D4A000] font-bold">
                #RasaAsliIndonesia
              </span>
            </p>

            {/* Social Links */}
            <div className="flex gap-2">
              {SOCIAL_LINKS.map(({ icon: Icon, href, label }) => (
                <Link
                  key={label}
                  href={href}
                  target="_blank"
                  aria-label={label}
                  className="w-9 h-9 rounded-xl bg-white/60 backdrop-blur-sm border border-[#E8E0CC]/80 flex items-center justify-center text-[#9CA3AF] hover:text-[#D4A000] hover:border-[#FFD738]/50 hover:bg-[#FFF9E8] transition-all duration-200 shadow-sm"
                >
                  <Icon size={16} />
                </Link>
              ))}
            </div>
          </div>

          {/* Links Wrapper (Side by side on mobile) */}
          <div className="grid grid-cols-2 gap-4 sm:gap-8 lg:contents">
            {/* Quick Links */}
            <div className="lg:col-span-2">
              <h3 className="font-black uppercase text-xs tracking-[0.2em] mb-4 md:mb-5 text-[#1C1D1F] flex items-center gap-2">
                <span className="w-3 md:w-4 h-0.5 bg-[#FFD738] inline-block" />
                TAUTAN
              </h3>
              <ul className="space-y-2 md:space-y-2.5">
                {FOOTER_LINKS.tautan.map(({ label, href }) => (
                  <li key={href}>
                    <Link
                      href={href}
                      className="text-sm font-medium text-[#6B7280] hover:text-[#D4A000] hover:translate-x-1 inline-flex items-center gap-1.5 transition-all duration-200 group"
                    >
                      <span className="w-1 h-1 rounded-full bg-[#E8E0CC] group-hover:bg-[#FFD738] transition-colors shrink-0" />
                      {label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            {/* More Links */}
            <div className="lg:col-span-2">
              <h3 className="font-black uppercase text-xs tracking-[0.2em] mb-4 md:mb-5 text-[#1C1D1F] flex items-center gap-2">
                <span className="w-3 md:w-4 h-0.5 bg-[#FFD738] inline-block" />
                LAINNYA
              </h3>
              <ul className="space-y-2 md:space-y-2.5">
                {FOOTER_LINKS.lainnya.map(({ label, href }) => (
                  <li key={href}>
                    <Link
                      href={href}
                      className="text-sm font-medium text-[#6B7280] hover:text-[#D4A000] hover:translate-x-1 inline-flex items-center gap-1.5 transition-all duration-200 group"
                    >
                      <span className="w-1 h-1 rounded-full bg-[#E8E0CC] group-hover:bg-[#FFD738] transition-colors shrink-0" />
                      {label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* Contact + Newsletter */}
          <div className="space-y-8 md:space-y-10 lg:space-y-0 lg:contents">
            {/* Contact */}
            <div className="lg:col-span-3">
              <h3 className="font-black uppercase text-xs tracking-[0.2em] mb-4 md:mb-5 text-[#1C1D1F] flex items-center gap-2">
                <span className="w-3 md:w-4 h-0.5 bg-[#FFD738] inline-block" />
                KONTAK
              </h3>
              <ul className="space-y-3">
                {CONTACT_INFO.map(({ icon: Icon, content }, i) => (
                  <li key={i} className="flex items-start gap-3 group">
                    <div className="w-7 h-7 rounded-lg bg-[#FFF9E8] border border-[#E8E0CC]/80 flex items-center justify-center shrink-0 mt-0.5 group-hover:border-[#FFD738]/50 transition-colors">
                      <Icon size={13} className="text-[#D4A000]" />
                    </div>
                    <span className="text-sm text-[#6B7280] leading-relaxed group-hover:text-[#1C1D1F] transition-colors">
                      {content}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
        {/* Bottom bar */}
        <div className="border-t border-[#E8E0CC]/60 pt-2 flex flex-col md:flex-row justify-between items-center gap-3">
          <p className="text-xs text-[#9CA3AF] font-medium">
            © 2024 Garam Cap Kapal. All rights reserved.
          </p>
          <div className="flex gap-6">
            {['Privacy Policy', 'Terms of Service'].map((item) => (
              <a
                key={item}
                href="#"
                className="text-xs text-[#9CA3AF] hover:text-[#D4A000] font-medium transition-colors"
              >
                {item}
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}