sanihome/src/components/home/Footer.tsx

import type { BusinessInfo, Category } from "@/lib/meshkee";

const quickLinks = ["درباره ما", "تماس با ما", "سوالات متداول", "قوانین و مقررات", "پیگیری سفارش"];

const socialLabels: Record<string, string> = {
  instagram: "IG",
  telegram: "TG",
  whatsapp: "WA",
  linkedin: "IN",
  youtube: "YT",
  aparat: "AP",
};

export function Footer({
  businessInfo,
  categories,
}: {
  businessInfo: BusinessInfo | null;
  categories: Category[];
}) {
  const socialEntries = businessInfo
    ? Object.entries(businessInfo.socialMedia).filter(([, url]) => !!url)
    : [];
  const hasContactInfo = Boolean(
    businessInfo &&
      (businessInfo.addresses.length || businessInfo.phoneNumbers.length || businessInfo.emails.length),
  );

  return (
    <footer className="border-t border-red-dark/20 bg-red-dark text-white">
      <div className="mx-auto max-w-7xl px-4 py-12">
        <div className="grid gap-8 md:grid-cols-4">
          <div>
            <div className="mb-4 flex items-center gap-2">
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-white text-base font-bold text-red-dark">
                S
              </div>
              <span className="font-display text-lg font-bold tracking-tight">
                SANIHOME
              </span>
            </div>
            {businessInfo?.about && (
              <p className="text-sm leading-relaxed text-white/70">{businessInfo.about}</p>
            )}
          </div>

          <div>
            <h4 className="mb-3 text-sm font-bold">دسترسی سریع</h4>
            <ul className="space-y-2 text-sm text-white/70">
              {quickLinks.map((link) => (
                <li key={link}>
                  <a href="#" className="transition-colors hover:text-white">
                    {link}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4 className="mb-3 text-sm font-bold">دسته‌بندی‌ها</h4>
            {categories.length === 0 ? (
              <p className="text-sm text-white/50">هنوز دسته‌بندی‌ای ثبت نشده است.</p>
            ) : (
              <ul className="space-y-2 text-sm text-white/70">
                {categories.slice(0, 5).map((cat) => (
                  <li key={cat.id}>
                    <a href="#" className="transition-colors hover:text-white">
                      {cat.name}
                    </a>
                  </li>
                ))}
              </ul>
            )}
          </div>

          <div>
            <h4 className="mb-3 text-sm font-bold">تماس با ما</h4>
            {hasContactInfo ? (
              <ul className="space-y-2 text-sm text-white/70">
                {businessInfo?.addresses.map((address) => <li key={address}>{address}</li>)}
                {businessInfo?.phoneNumbers.map((phone) => (
                  <li key={phone}>تلفن: {phone}</li>
                ))}
                {businessInfo?.emails.map((email) => <li key={email}>ایمیل: {email}</li>)}
              </ul>
            ) : (
              <p className="text-sm text-white/50">هنوز اطلاعات تماس ثبت نشده است.</p>
            )}
            {socialEntries.length > 0 && (
              <div className="mt-4 flex gap-3">
                {socialEntries.map(([key, url]) => (
                  <a
                    key={key}
                    href={url}
                    target="_blank"
                    rel="noreferrer"
                    className="font-display flex h-8 w-8 items-center justify-center rounded-full border border-white/20 text-[10px] font-bold transition-colors hover:border-white hover:bg-white/10"
                  >
                    {socialLabels[key] ?? key.slice(0, 2).toUpperCase()}
                  </a>
                ))}
              </div>
            )}
          </div>
        </div>

        <div className="mt-10 flex flex-col items-center justify-between gap-3 border-t border-white/10 pt-6 text-xs text-white/50 md:flex-row">
          <p>© ۱۴۰۵ سانی‌هوم — تمامی حقوق محفوظ است.</p>
          <p className="font-display tracking-wide uppercase">
            Designed for Sanihome
          </p>
        </div>
      </div>
    </footer>
  );
}