REPLACED - Swap dock SVG icons with Apple-style PNGs for light/dark themes

Replace placeholder SVG dock icons with high-quality Apple-style PNG icons
(Contacts, Photos, App Store, Messages) with light and dark variants that
switch based on the active theme via next-themes.

components/layout/site-dock.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
+import { useTheme } from "next-themes";
 import { useState } from "react";
 
 import { FloatingControls } from "@/components/layout/floating-controls";
@@ -28,17 +29,15 @@ type NavKey = "about" | "portfolio" | "products" | "contact";
 type NavItem = {
   key: NavKey;
   path: string;
-  /** Icon file under /public. Swap these for real macOS app icons anytime. */
-  icon: string;
   disabled?: boolean;
 };
 
 // "Home" is intentionally omitted — the logo (first dock icon) is the home link.
 const navItems: NavItem[] = [
-  { key: "about", path: "/about", icon: "/dock/about.svg" },
-  { key: "portfolio", path: "/portfolio", icon: "/dock/portfolio.svg" },
-  { key: "products", path: "/products", icon: "/dock/products.svg", disabled: true },
-  { key: "contact", path: "/contact", icon: "/dock/contact.svg" },
+  { key: "about", path: "/about" },
+  { key: "portfolio", path: "/portfolio" },
+  { key: "products", path: "/products", disabled: true },
+  { key: "contact", path: "/contact" },
 ];
 
 function isNavItemActive(currentPath: string, itemPath: string) {
@@ -54,6 +53,8 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
   const t = useTranslations("navigation");
   const reducedMotion = useReducedMotion();
   const [bouncing, setBouncing] = useState<string | null>(null);
+  const { theme, resolvedTheme } = useTheme();
+  const activeTheme = theme === "system" ? resolvedTheme : theme;
 
   const currentPath = stripLocalePrefix(pathname);
   const homeHref = getLocalizedPath(locale, "/", defaultLocale);
@@ -111,23 +112,25 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
           <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
 
           {/* ── Pages (icon art carries its own squircle shape) ── */}
-          {navItems.map(({ key, path, icon: iconSrc, disabled }) => {
+          {navItems.map(({ key, path, disabled }) => {
             const itemPath = path || "/";
             const isActive = isNavItemActive(currentPath, itemPath);
             const label = t(key);
+            const variant = activeTheme === "dark" ? "dark" : "light";
+            const src = `/dock/${key}-${variant}.png`;
 
             const icon = (
               <motion.span
-                className="flex h-full w-full items-center justify-center"
+                className="flex h-full w-full items-center justify-center overflow-hidden rounded-[22%]"
                 {...(disabled ? {} : bounceProps(key))}
               >
                 <Image
-                  src={iconSrc}
+                  src={src}
                   alt={label}
                   width={104}
                   height={104}
                   sizes="104px"
-                  className={cn("h-full w-full object-contain", disabled && "opacity-55")}
+                  className={cn("h-[110%] w-[110%] object-cover", disabled && "opacity-55")}
                 />
               </motion.span>
             );