feat: add multi-language support (Arabic, German, French, Italian)

app/components/LanguageSwitcher.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Check, ChevronDown, Globe } from "lucide-react";
+import { LOCALES, LOCALE_META } from "../lib/i18n/config";
+import { useI18n } from "../lib/i18n/context";
+
+export function LanguageSwitcher() {
+  const { locale, setLocale, dict } = useI18n();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: PointerEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) setOpen(false);
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <div className="lang-switcher" ref={ref}>
+      <button
+        type="button"
+        className="lang-trigger"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={dict.languageChange}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <Globe size={16} />
+        <span>{LOCALE_META[locale].short}</span>
+        <ChevronDown size={14} />
+      </button>
+      {open && (
+        <ul className="lang-menu" role="listbox" aria-label={dict.languageLabel}>
+          {LOCALES.map((code) => (
+            <li key={code}>
+              <button
+                type="button"
+                role="option"
+                aria-selected={code === locale}
+                className={code === locale ? "active" : ""}
+                lang={code}
+                onClick={() => {
+                  setLocale(code);
+                  setOpen(false);
+                }}
+              >
+                <span>{LOCALE_META[code].label}</span>
+                {code === locale && <Check size={14} />}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

app/components/OrganViewer.tsx

@@ -14,6 +14,7 @@ import {
 } from "lucide-react";
 import type { Hotspot, Organ } from "../lib/anatomy-data";
 import type { AnatomyViewer } from "../lib/three/viewer";
+import { useI18n } from "../lib/i18n/context";
 
 type Props = {
   organ: Organ;
@@ -24,6 +25,7 @@ type Props = {
 };
 
 export function OrganViewer({ organ, autoRotate, onAutoRotate, compare, onCompare }: Props) {
+  const { t, dict } = useI18n();
   const mountRef = useRef<HTMLDivElement>(null);
   const viewerRef = useRef<AnatomyViewer | null>(null);
   const organRef = useRef(organ);
@@ -112,21 +114,21 @@ export function OrganViewer({ organ, autoRotate, onAutoRotate, compare, onCompar
   };
 
   const tools = [
-    { id: "rotate", label: "Rotate", icon: RotateCcw },
-    { id: "zoom", label: "Zoom", icon: Search },
-    { id: "isolate", label: "Isolate", icon: CircleDashed },
-    { id: "section", label: "Cross-section", icon: ScanLine },
-    { id: "layers", label: "Layers", icon: Layers3 },
-    { id: "compare", label: "Compare", icon: Box },
-    { id: "reset", label: "Reset", icon: RotateCcw },
+    { id: "rotate", label: dict.toolRotate, icon: RotateCcw },
+    { id: "zoom", label: dict.toolZoom, icon: Search },
+    { id: "isolate", label: dict.toolIsolate, icon: CircleDashed },
+    { id: "section", label: dict.toolSection, icon: ScanLine },
+    { id: "layers", label: dict.toolLayers, icon: Layers3 },
+    { id: "compare", label: dict.toolCompare, icon: Box },
+    { id: "reset", label: dict.toolReset, icon: RotateCcw },
   ];
 
   return (
-    <section className="viewer-shell" aria-label={`${organ.name} interactive viewer`}>
+    <section className="viewer-shell" aria-label={t("viewerAria", { name: organ.name })}>
       <div className="viewer-glow" style={{ "--organ-accent": organ.accent } as React.CSSProperties} />
       <div ref={mountRef} className="three-mount" />
 
-      <div className="viewer-tools" aria-label="3D viewer tools">
+      <div className="viewer-tools" aria-label={dict.toolsAria}>
         {tools.map(({ id, label, icon: Icon }) => (
           <button
             key={id}
@@ -142,15 +144,15 @@ export function OrganViewer({ organ, autoRotate, onAutoRotate, compare, onCompar
         ))}
       </div>
 
-      <aside className="tip-note" aria-label="Viewer instructions">
-        <span><Sparkles size={15} /> Tip</span>
-        <p>Drag to rotate<br />Scroll to zoom<br />Click a dot to learn more</p>
+      <aside className="tip-note" aria-label={dict.tipAria}>
+        <span><Sparkles size={15} /> {dict.tipTitle}</span>
+        <p>{dict.tipLine1}<br />{dict.tipLine2}<br />{dict.tipLine3}</p>
       </aside>
 
       {selected && (
         <div className="hotspot-callout" ref={calloutRef} data-side="right">
           <div className="callout-body" style={{ "--hotspot-color": selected.color } as React.CSSProperties}>
-            <button className="callout-close" type="button" onClick={() => viewerRef.current?.clearSelection()} aria-label="Close">
+            <button className="callout-close" type="button" onClick={() => viewerRef.current?.clearSelection()} aria-label={dict.calloutClose}>
               <X size={13} />
             </button>
             <b>{selected.label}</b>
@@ -169,18 +171,18 @@ export function OrganViewer({ organ, autoRotate, onAutoRotate, compare, onCompar
       {loading && slowLoad && (
         <div className="model-loader" role="status" aria-live="polite">
           <div className="loader-orbit"><Maximize2 size={20} /></div>
-          <strong>Preparing the {organ.name.toLowerCase()}</strong>
+          <strong>{t("loaderPreparing", { name: organ.name })}</strong>
           <span>{Math.max(8, Math.round(progress * 100))}%</span>
         </div>
       )}
 
       <button className="auto-rotate" type="button" onClick={() => onAutoRotate(!autoRotate)} aria-pressed={autoRotate}>
-        <RotateCcw size={14} /> Auto rotate
+        <RotateCcw size={14} /> {dict.autoRotate}
         <span className={`switch ${autoRotate ? "on" : ""}`}><i /></span>
       </button>
 
       <div className="view-caption">
-        <span>3D specimen · click a dot to explore</span>
+        <span>{dict.viewCaption}</span>
         <strong>{organ.scientificName}</strong>
       </div>
     </section>