salar-store/components/Footer.tsx

import Image from "next/image";
import Link from "next/link";
import { features, footerLinks } from "@/lib/data";
import { SITE } from "@/lib/site";
import { IconInstagram, IconPhone, IconPin, IconTelegram, IconWhatsapp } from "./Icons";

function MeshkeeCredit() {
  return (
    <a href={SITE.meshkeeUrl} target="_blank" rel="noopener noreferrer" dir="ltr" className="meshkee-credit">
      <span className="meshkee-credit__frame" aria-hidden="true">
        <span className="meshkee-credit__line meshkee-credit__line--l" />
        <span className="meshkee-credit__line meshkee-credit__line--t" />
        <span className="meshkee-credit__line meshkee-credit__line--r" />
        <span className="meshkee-credit__line meshkee-credit__line--b" />
      </span>
      <Image
        src="/images/logo/meshkee-white.png"
        alt="Meshkee"
        width={42}
        height={42}
        className="meshkee-credit__logo"
      />
      <span className="meshkee-credit__text">
        <span className="meshkee-credit__label">Designed And Developed By</span>
        <span className="meshkee-credit__name">Meshkee E-Commerce Team</span>
      </span>
    </a>
  );
}

export function Footer() {
  return (
    <footer className="mt-16 bg-ink text-white">
      <div className="bg-white">
        <div className="container-site grid grid-cols-2 md:grid-cols-4 gap-6 py-8">
          {features.map((item) => (
            <div key={item.title} className="flex items-center gap-3">
              <Image src={item.image} alt="" width={48} height={48} className="w-12 h-12 object-contain" />
              <h3 className="text-sm font-medium text-ink">{item.title}</h3>
            </div>
          ))}
        </div>
      </div>

      <div className="container-site py-12 grid gap-10 md:grid-cols-2 lg:grid-cols-4">
        <div className="lg:col-span-1">
          <div className="mb-4 inline-flex rounded-xl bg-white px-4 py-3">
            <Image src="/images/logo/logo.png" alt={SITE.nameFa} width={160} height={44} className="h-11 w-auto" />
          </div>
          <p className="text-sm leading-8 text-white/70 text-justify">{SITE.aboutShort}</p>
          <div className="flex items-center gap-3 mt-5">
            <a href={SITE.telegram} aria-label="تلگرام" className="grid place-items-center w-9 h-9 rounded-full bg-white/10 hover:bg-brand">
              <IconTelegram />
            </a>
            <a href={SITE.instagram} aria-label="اینستاگرام" className="grid place-items-center w-9 h-9 rounded-full bg-white/10 hover:bg-brand">
              <IconInstagram />
            </a>
            <a href={SITE.whatsapp} aria-label="واتساپ" className="grid place-items-center w-9 h-9 rounded-full bg-white/10 hover:bg-brand">
              <IconWhatsapp />
            </a>
          </div>
        </div>

        <div>
          <h4 className="mb-4 text-lg font-bold">پیوندها</h4>
          <ul className="space-y-2.5 text-sm text-white/70">
            {footerLinks.pages.map((link) => (
              <li key={link.href}>
                <Link href={link.href} className="hover:text-white">
                  {link.name}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h4 className="mb-4 text-lg font-bold">راهنمایی و پشتیبانی</h4>
          <ul className="space-y-2.5 text-sm text-white/70">
            {footerLinks.support.map((link) => (
              <li key={link.href}>
                <Link href={link.href} className="hover:text-white">
                  {link.name}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h4 className="mb-4 text-lg font-bold">راه‌های ارتباطی</h4>
          <a href={`tel:${SITE.phone}`} className="flex items-center gap-3 text-sm">
            <span className="grid place-items-center w-10 h-10 rounded-full bg-white/10 text-brand shrink-0">
              <IconPhone className="w-4 h-4" />
            </span>
            <span>
              <span className="block text-white/50 text-xs mb-0.5">تلفن تماس</span>
              <span className="font-oswald tracking-wide text-base" dir="ltr">
                {SITE.phoneDisplay}
              </span>
            </span>
          </a>
          <p className="mt-4 flex items-start gap-3 text-sm text-white/70">
            <span className="grid place-items-center w-10 h-10 rounded-full bg-white/10 text-brand shrink-0">
              <IconPin className="w-4 h-4" />
            </span>
            {SITE.address}
          </p>
        </div>
      </div>

      <div className="bg-[#1d1d1d]">
        <div className="container-site footer-bottom-bar py-4">
          <p className="footer-bottom-site">{SITE.nameFa}</p>
          <MeshkeeCredit />
        </div>
      </div>
    </footer>
  );
}