import Image from "next/image";
import Link from "next/link";
import {
  FOOTER_CATEGORIES_COL1,
  FOOTER_CATEGORIES_COL2,
  FOOTER_STORE_LINKS,
  SOCIAL_LINKS,
} from "@/data/home";

type SiteFooterProps = {
  paymentBadges?: string;
};

export default function SiteFooter({
  paymentBadges = "/images/home/banners/payment-badges.png",
}: SiteFooterProps) {
  return (
    <footer dir="rtl" className="mt-8">
      <div className="bg-[#ebebeb]">
        <div className="mx-auto flex max-w-[1920px] flex-col items-center justify-between gap-4 px-4 py-5 sm:flex-row sm:px-6 lg:px-[120px]">
          <p className="max-w-xl text-center text-sm font-light text-ink sm:text-start sm:text-base">
            برای اطلاع از جدیدترین محصولات و تخفیفات، ما را در شبکه‌های اجتماعی
            دنبال کنید.
          </p>
          <ul className="flex items-center gap-5 sm:gap-6">
            {SOCIAL_LINKS.map((social) => (
              <li key={social.id}>
                <a
                  href={social.href}
                  aria-label={social.label}
                  className="transition-opacity hover:opacity-70"
                >
                  <Image
                    src={social.icon}
                    alt=""
                    width={20}
                    height={20}
                    unoptimized
                  />
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div id="contact" className="scroll-mt-24 bg-[#242424] text-white">
        <div className="mx-auto grid max-w-[1920px] gap-8 px-4 py-10 sm:px-6 lg:grid-cols-4 lg:gap-8 lg:px-[120px] lg:py-12">
          {/* Start (right in RTL): contact */}
          <div className="text-start">
            <h3 className="mb-4 text-base font-medium sm:text-lg">
              اطلاعات تماس:
            </h3>
            <div className="space-y-2 text-sm font-light leading-relaxed sm:text-[15px]">
              <p>
                <span className="text-[#a6a6a6]">آدرس: </span>
                تهران، خیابان ولیعصر بالاتر از پارک ساعی، پلاک ۲۴۸
              </p>
              <p>
                <span className="text-[#a6a6a6]">تلفن فروشگاه: </span>
                <span dir="ltr">021-22423600</span>
              </p>
              <p>
                <span className="text-[#a6a6a6]">تلفن همراه: </span>
                <span dir="ltr">09122504800</span>
              </p>
              <p>
                <span className="text-[#a6a6a6]">آدرس ایمیل: </span>
                <span dir="ltr">Info@ManaCollecitions.com</span>
              </p>
            </div>
          </div>

          {/* Store */}
          <div className="text-start">
            <h3 className="mb-4 text-base font-bold sm:text-lg">فروشگاه</h3>
            <ul className="space-y-2 text-sm font-light sm:text-[15px]">
              {FOOTER_STORE_LINKS.map((link) => (
                <li key={link.label}>
                  <Link href={link.href} className="hover:opacity-70">
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Categories */}
          <div className="text-start">
            <h3 className="mb-4 text-base font-bold sm:text-lg">
              دسته بندی محصولات
            </h3>
            <div className="grid grid-cols-2 gap-x-6 text-sm font-light text-[#e1e1e1] sm:text-[15px]">
              <ul className="space-y-2">
                {FOOTER_CATEGORIES_COL1.map((label) => (
                  <li key={label}>
                    <Link
                      href="/categories"
                      className="hover:opacity-70"
                    >
                      {label}
                    </Link>
                  </li>
                ))}
              </ul>
              <ul className="space-y-2">
                {FOOTER_CATEGORIES_COL2.map((label) => (
                  <li key={`c2-${label}`}>
                    <Link
                      href="/categories"
                      className="hover:opacity-70"
                    >
                      {label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* End (left in RTL): map */}
          <div className="min-h-[180px] overflow-hidden rounded-[4px] bg-[#1a1a1a] sm:min-h-[200px]">
            <iframe
              title="موقعیت فروشگاه مانا کالکشن"
              src="https://maps.google.com/maps?q=Tehran%20Valiasr%20Street%20above%20Saei%20Park%20No%20248&z=16&output=embed"
              className="h-full min-h-[180px] w-full border-0 [filter:invert(92%)_hue-rotate(180deg)_brightness(0.9)_contrast(0.95)] sm:min-h-[200px]"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
          </div>
        </div>
      </div>

      <div className="bg-black text-white">
        <div className="mx-auto flex max-w-[1920px] flex-col-reverse items-center justify-between gap-4 px-4 py-4 sm:flex-row sm:px-6 lg:px-[120px]">
          <p className="text-center text-xs font-light sm:text-start sm:text-sm">
            تمامی حق و حقوق مادی معنوی وبسایت متعلق به شرکت مانا کالکشن می‌باشد.
            ۱۴۰۴-۱۴۰۵
          </p>
          <div className="relative h-8 w-[160px] sm:h-9 sm:w-[190px]">
            <Image
              src={paymentBadges}
              alt="روش‌های پرداخت"
              fill
              className="object-contain object-end"
              sizes="190px"
            />
          </div>
        </div>
      </div>
    </footer>
  );
}