create banner

src/components/home/Footer.tsx

@@ -1,4 +1,31 @@
-export function Footer() {
+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">
@@ -12,60 +39,69 @@ export function Footer() {
                 SANIHOME
               </span>
             </div>
-            <p className="text-sm leading-relaxed text-white/70">
-              فروشگاه آنلاین لوازم خانگی با بیش از ۱۵ سال سابقه. محصولات اصل،
-              گارانتی معتبر، ارسال سریع.
-            </p>
+            {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">
-              {["درباره ما", "تماس با ما", "سوالات متداول", "قوانین و مقررات", "پیگیری سفارش"].map(
-                (link) => (
-                  <li key={link}>
-                    <a href="#" className="transition-colors hover:text-white">
-                      {link}
-                    </a>
-                  </li>
-                ),
-              )}
+              {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>
-            <ul className="space-y-2 text-sm text-white/70">
-              {["یخچال و فریزر", "ماشین لباسشویی", "تلویزیون", "جاروبرقی", "لوازم آشپزخانه"].map(
-                (link) => (
-                  <li key={link}>
+            {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">
-                      {link}
+                      {cat.name}
                     </a>
                   </li>
-                ),
-              )}
-            </ul>
+                ))}
+              </ul>
+            )}
           </div>
 
           <div>
             <h4 className="mb-3 text-sm font-bold">تماس با ما</h4>
-            <ul className="space-y-2 text-sm text-white/70">
-              <li>تهران، خیابان ولیعصر</li>
-              <li>تلفن: ۰۲۱-۸۸۰۰۱۲۳۴</li>
-              <li>ایمیل: info@sanihome.ir</li>
-            </ul>
-            <div className="mt-4 flex gap-3">
-              {["IG", "TG", "WA"].map((social) => (
-                <a
-                  key={social}
-                  href="#"
-                  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"
-                >
-                  {social}
-                </a>
-              ))}
-            </div>
+            {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>