IMPROVED - Use swappable image icons and move controls to a corner dock

- Dock icons are now real SVG files under public/dock/ (macOS squircle
  look, active variants), so they can be replaced with custom art later.
- Full-bleed icons (DockIcon padding 0), fixed logo src to stop the
  refresh flash.
- Remove the top menu bar entirely; relocate theme/language/sound (+admin)
  into a corner control dock that expands on click.

components/layout/site-dock.tsx

@@ -1,25 +1,16 @@
 "use client";
 
-import { ShieldCheck } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useTheme } from "next-themes";
 import { useLocale, useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
 
-import { DockAppIcon, type DockSymbol } from "@/components/layout/dock-app-icon";
-import { LocaleToggle } from "@/components/layout/locale-toggle";
-import { SoundToggle } from "@/components/sound-toggle";
-import { ThemeToggle } from "@/components/theme-toggle";
+import { FloatingControls } from "@/components/layout/floating-controls";
 import { Dock, DockIcon } from "@/components/ui/dock";
-import { buildAdminUrl } from "@/lib/admin-routing";
 import { getLocalizedPath, stripLocalePrefix, type AppLocale } from "@/lib/locale";
 import { cn } from "@/lib/utils";
 
 type SiteDockProps = {
-  lightLogoUrl?: string | null;
-  darkLogoUrl?: string | null;
   defaultLocale: AppLocale;
   /**
    * Server-computed via `isSuperAdmin()` in the parent layout. This client
@@ -30,8 +21,10 @@ type SiteDockProps = {
   isSuperAdmin?: boolean;
 };
 
+type NavKey = "home" | "about" | "portfolio" | "products" | "contact";
+
 type NavItem = {
-  key: DockSymbol;
+  key: NavKey;
   path: string;
   disabled?: boolean;
 };
@@ -51,134 +44,16 @@ function isNavItemActive(currentPath: string, itemPath: string) {
   return currentPath === itemPath || currentPath.startsWith(`${itemPath}/`);
 }
 
-function MenuClock({ locale }: { locale: string }) {
-  const [time, setTime] = useState("");
-
-  useEffect(() => {
-    const format = () =>
-      setTime(
-        new Date().toLocaleTimeString(locale === "ar" ? "ar" : locale, {
-          hour: "2-digit",
-          minute: "2-digit",
-        }),
-      );
-    format();
-    const id = setInterval(format, 20_000);
-    return () => clearInterval(id);
-  }, [locale]);
-
-  return (
-    <span
-      suppressHydrationWarning
-      className="hidden select-none px-1 text-xs font-semibold tabular-nums text-foreground/65 sm:inline"
-    >
-      {time || "--:--"}
-    </span>
-  );
-}
-
-export function SiteDock({
-  lightLogoUrl,
-  darkLogoUrl,
-  defaultLocale,
-  isSuperAdmin = false,
-}: SiteDockProps) {
+export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps) {
   const locale = useLocale();
   const pathname = usePathname();
   const t = useTranslations("navigation");
-  const { theme, resolvedTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const isArabic = locale === "ar";
   const currentPath = stripLocalePrefix(pathname);
   const homeHref = getLocalizedPath(locale, "/", defaultLocale);
-  const adminHref = buildAdminUrl("/");
-
-  const activeTheme = theme === "system" ? resolvedTheme : theme;
-  const isDark = mounted && activeTheme === "dark";
-  const logoSrc = isDark
-    ? darkLogoUrl || lightLogoUrl || "/logos/dark-primary.svg"
-    : lightLogoUrl || darkLogoUrl || "/logos/light-primary.svg";
-
-  const brandSubtitle = isArabic
-    ? "مطوّر ويب · فريلانسر"
-    : "Webdesigner Bremen · Freelancer";
-
-  const controlButtonClassName =
-    "h-8 w-8 rounded-full border border-transparent text-foreground/70 hover:bg-accent hover:text-foreground";
 
   return (
     <>
-      {/* ===== Top menu bar (macOS-style utility strip) ===== */}
-      <header
-        className="fixed inset-x-0 top-0 z-40 border-b border-border/60 bg-background/70 backdrop-blur-chrome"
-        style={{ paddingTop: "env(safe-area-inset-top, 0px)" }}
-      >
-        <div className="mx-auto flex h-12 max-w-[100rem] items-center gap-3 px-4 sm:px-6">
-          <Link
-            href={homeHref}
-            className="flex items-center gap-2 rounded-full px-1 py-1 font-black tracking-tight"
-            aria-label="mohfarawati"
-          >
-            <span className="h-2 w-2 rounded-full bg-primary shadow-[0_0_10px_hsl(var(--primary))]" />
-            <span className="text-sm" dir={isArabic ? "rtl" : undefined}>
-              {isArabic ? (
-                <>
-                  <span className="text-[hsl(var(--hero-ink))] dark:text-foreground">محمد</span>{" "}
-                  <span className="text-primary">فرواتي</span>
-                </>
-              ) : (
-                <>
-                  <span className="text-[hsl(var(--hero-ink))] dark:text-foreground">MOH</span>
-                  <span className="text-primary">FARAWATI</span>
-                </>
-              )}
-            </span>
-          </Link>
-
-          <span
-            className="hidden border-s border-border/60 ps-3 text-xs font-medium text-foreground/60 md:inline"
-            dir={isArabic ? "rtl" : undefined}
-          >
-            {brandSubtitle}
-          </span>
-
-          <div className="ms-auto flex items-center gap-1">
-            <MenuClock locale={locale} />
-            <LocaleToggle
-              locale={locale}
-              defaultLocale={defaultLocale}
-              className={controlButtonClassName}
-            />
-            <SoundToggle
-              ariaLabel={t("soundMute")}
-              mutedAriaLabel={t("soundUnmute")}
-              variant="ghost"
-              className={controlButtonClassName}
-            />
-            <ThemeToggle
-              ariaLabel={t("themeToggle")}
-              variant="ghost"
-              className={controlButtonClassName}
-            />
-            {isSuperAdmin ? (
-              <a
-                href={adminHref}
-                aria-label="Open admin dashboard"
-                className="ms-1 inline-flex h-8 items-center gap-1.5 rounded-full border border-border/60 bg-background/60 px-3 text-xs font-semibold text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
-              >
-                <ShieldCheck className="h-4 w-4" />
-                <span className="hidden lg:inline">Admin</span>
-              </a>
-            ) : null}
-          </div>
-        </div>
-      </header>
-
       {/* ===== Bottom dock (Magic UI) — primary navigation ===== */}
       <div
         className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4"
@@ -186,12 +61,12 @@ export function SiteDock({
       >
         <Dock
           direction="bottom"
-          iconSize={50}
-          iconMagnification={86}
+          iconSize={52}
+          iconMagnification={90}
           iconDistance={160}
           className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
         >
-          {/* Logo — first icon in the dock */}
+          {/* Logo — first icon in the dock (fixed src, no theme swap → no flash) */}
           <DockIcon className="group relative overflow-visible rounded-[26%] bg-white shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-black/10">
             <Link
               href={homeHref}
@@ -199,16 +74,13 @@ export function SiteDock({
               className="flex h-full w-full items-center justify-center rounded-[inherit]"
             >
               <Image
-                src={logoSrc}
+                src="/logos/light-primary.svg"
                 alt="mohfarawati"
-                width={96}
-                height={96}
-                sizes="96px"
+                width={104}
+                height={104}
+                sizes="104px"
                 priority
-                className={cn(
-                  "h-full w-full rounded-[inherit] object-contain transition-opacity duration-300",
-                  mounted ? "opacity-100" : "opacity-0",
-                )}
+                className="h-full w-full rounded-[inherit] object-contain"
               />
             </Link>
             <DockTip label="mohfarawati" />
@@ -220,8 +92,18 @@ export function SiteDock({
             const itemPath = path || "/";
             const isActive = isNavItemActive(currentPath, itemPath);
             const label = t(key);
+            const src = `/dock/${key}${isActive ? "-active" : ""}.svg`;
 
-            const icon = <DockAppIcon symbol={key} active={isActive} disabled={disabled} />;
+            const icon = (
+              <Image
+                src={src}
+                alt={label}
+                width={104}
+                height={104}
+                sizes="104px"
+                className={cn("h-full w-full rounded-[inherit] object-contain", disabled && "opacity-55")}
+              />
+            );
 
             return (
               <DockIcon
@@ -257,6 +139,9 @@ export function SiteDock({
           })}
         </Dock>
       </div>
+
+      {/* ===== Corner controls — theme / language / sound / admin ===== */}
+      <FloatingControls locale={locale} defaultLocale={defaultLocale} isSuperAdmin={isSuperAdmin} />
     </>
   );
 }