Add about/contact/installments pages, fix category slot bugs, wire live branding

- Enlarge category carousel thumbnails (90px -> 104-140px responsive) and
  confirm the slider/categories/banner static-image slots are all reading
  correctly from the CMS (verified live, not a wiring bug)
- Fix installments page dropping "هندزفری و هدفون": it's a level-3 category,
  not level-2, so level2.find() silently missed it - use findNode() over the
  whole tree instead
- Extend gen-category-placeholders.mjs to generate a placeholder for every
  category at every level (was level-2 only), needed for the fix above
- Add /about, /contact, /installments pages
  - About: real copy transcribed from the live moalem.shop theme, real
    product photos from the API, text-only brand strip (no scraped logos)
  - Contact: ContactForm.tsx posts to the real POST /contact-submissions,
    branch cards with key-less Google Maps embeds
  - Installments: flat brand-colored hero (no photo/gradient), category
    highlights reusing the same categories slot images as the homepage
- Replace the placeholder header/footer phone number with the real one, add
  real branch addresses and Instagram/Telegram links (src/data/site.ts),
  pulled from the live theme's footer
- Wire logo/favicon to GET /website/favicon (getFavicon() in api.ts) instead
  of the static bundled files, so a dashboard upload now shows automatically;
  layout.tsx metadata is now generateMetadata() to support this. The tenant's
  uploaded logo/favicon currently belongs to a different business - the
  wiring is correct and will self-correct once that's fixed in the dashboard

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/components/Footer.tsx

@@ -1,17 +1,25 @@
 import Link from "next/link";
 import Image from "next/image";
-import { MAIN_NAV, PHONE, PHONE_HREF, SITE_NAME, SITE_TAGLINE } from "@/data/site";
+import { MAIN_NAV, PHONE, PHONE_HREF, SITE_NAME, SITE_TAGLINE, SOCIAL } from "@/data/site";
 import { categoryHref } from "@/lib/slug";
 import type { CategoryNode } from "@/lib/types";
-import { PhoneIcon } from "./icons";
+import { InstagramIcon, PhoneIcon, TelegramIcon } from "./icons";
 import { toFaDigits } from "@/lib/format";
 
-export default function Footer({ categories }: { categories: CategoryNode[] }) {
+export default function Footer({
+  categories,
+  logoUrl,
+}: {
+  categories: CategoryNode[];
+  logoUrl: string;
+}) {
   return (
     <footer className="mt-14 border-t border-line bg-surface">
       <div className="boxed grid gap-8 py-10 md:grid-cols-4">
         <div className="md:col-span-2">
-          <Image src="/images/logo.png" alt={SITE_NAME} width={130} height={36} />
+          {/* h-9 w-auto so a square dashboard logo and the wide fallback
+              wordmark both render undistorted — see Header.tsx. */}
+          <Image src={logoUrl} alt={SITE_NAME} width={140} height={40} className="h-9 w-auto object-contain" />
           <p className="mt-3 max-w-md text-[13px] leading-7 text-body">{SITE_TAGLINE}</p>
           <a
             href={PHONE_HREF}
@@ -20,6 +28,27 @@ export default function Footer({ categories }: { categories: CategoryNode[] }) {
             <PhoneIcon className="size-4" />
             {PHONE}
           </a>
+
+          <div className="mt-4 flex items-center gap-2">
+            <a
+              href={SOCIAL.instagram}
+              target="_blank"
+              rel="noreferrer"
+              aria-label="اینستاگرام موبایل معلم"
+              className="flex size-9 items-center justify-center rounded-full border border-line text-ink-soft transition hover:border-brand hover:text-brand"
+            >
+              <InstagramIcon className="size-4.5" />
+            </a>
+            <a
+              href={SOCIAL.telegram}
+              target="_blank"
+              rel="noreferrer"
+              aria-label="تلگرام موبایل معلم"
+              className="flex size-9 items-center justify-center rounded-full border border-line text-ink-soft transition hover:border-brand hover:text-brand"
+            >
+              <TelegramIcon className="size-4.5" />
+            </a>
+          </div>
         </div>
 
         <div>