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/Header.tsx

@@ -13,7 +13,15 @@ import type { AuthUser, CategoryNode } from "@/lib/types";
 
 // Two rows: logo + search + account/cart, then the product mega menu and the
 // main nav — the same split the reference storefront uses.
-export default function Header({ menu, user }: { menu: CategoryNode[]; user: AuthUser | null }) {
+export default function Header({
+  menu,
+  user,
+  logoUrl,
+}: {
+  menu: CategoryNode[];
+  user: AuthUser | null;
+  logoUrl: string;
+}) {
   const [megaOpen, setMegaOpen] = useState(false);
 
   return (
@@ -23,7 +31,9 @@ export default function Header({ menu, user }: { menu: CategoryNode[]; user: Aut
             cart and browsing live in the fixed bottom bar instead. */}
         <div className="flex h-[70px] items-center gap-4">
           <Link href="/" className="hidden shrink-0 lg:block" aria-label={SITE_NAME}>
-            <Image src="/images/logo.png" alt={SITE_NAME} width={130} height={36} priority />
+            {/* h-9 w-auto (not a fixed box) so a square dashboard logo mark
+                and the wide fallback wordmark both render undistorted. */}
+            <Image src={logoUrl} alt={SITE_NAME} width={140} height={40} className="h-9 w-auto object-contain" priority />
           </Link>
 
           <div className="flex-1">