فرانت‌اند: نسخه انگلیسی با مسیر /en/ — مسیریابی دوزبانه، دیکشنری رابط، بومی‌سازی داده، تغییر زبان در هدر، ویرایش انگلیسی در پنل و پشتیبانی LTR

frontend/src/pages/ProjectDetail.tsx

@@ -8,11 +8,13 @@ import { ContactSection } from '../components/ContactSection'
 import { Lightbox } from '../components/Lightbox'
 import { useEffect } from 'react';
 import { useSite, useStatusLabel } from '../api';
+import { useLang } from '../i18n/lang';
 import { applySeo } from '../seo';
 
 export function ProjectDetail() {
   const { slug } = useParams<{ slug: string }>()
   const { projects, brand } = useSite()
+  const { t, href, lang } = useLang()
   const project = projects.find((p) => p.slug === slug)
   const statusLabel = useStatusLabel(project?.status ?? '')
   const [lightbox, setLightbox] = useState<number | null>(null)
@@ -23,21 +25,22 @@ export function ProjectDetail() {
     applySeo({
       title: `${project.title} | ${brand}`,
       description: project.summary,
-      path: `/projects/${project.slug}`,
+      path: href(`/projects/${project.slug}`),
       image: project.image,
+      lang,
     });
-  }, [project?.id]);
+  }, [project?.id, lang, href]);
 
   if (!project) {
     return (
       <section className="flex min-h-[70vh] flex-col items-center justify-center px-6 text-center">
-        <h1 className="text-section font-bold text-ivory">این پروژه پیدا نشد</h1>
+        <h1 className="text-section font-bold text-ivory">{t('projectNotFound')}</h1>
         <p className="mt-4 text-sm font-light text-ivory/60">
-          ممکن است نشانی تغییر کرده باشد. فهرست کامل پروژه‌ها را ببینید.
+          {t('projectNotFoundText')}
         </p>
-        <ButtonLink to="/projects" variant="copper" className="mt-8">
-          بازگشت به پروژه‌ها
-          <ArrowLeftIcon className="h-4 w-4" />
+        <ButtonLink to={href('/projects')} variant="copper" className="mt-8">
+          {t('backToProjects')}
+          <ArrowLeftIcon className="h-4 w-4 ltr:-scale-x-100" />
         </ButtonLink>
       </section>
     )
@@ -46,12 +49,12 @@ export function ProjectDetail() {
   const related = projects.filter((p) => p.slug !== project.slug).slice(0, 3)
   
   const facts = [
-    { label: 'موقعیت', value: project.location },
-    { label: 'سال', value: project.year },
-    { label: 'زیربنا', value: project.area },
-    { label: 'تعداد طبقات', value: project.floors },
-    { label: 'واحدها', value: project.units },
-    { label: 'کارفرما', value: project.client },
+    { label: t('specLocation'), value: project.location },
+    { label: t('specYear'), value: project.year },
+    { label: t('specArea'), value: project.area },
+    { label: t('specFloors'), value: project.floors },
+    { label: t('specUnits'), value: project.units },
+    { label: t('specClient'), value: project.client },
   ]
 
   return (
@@ -65,15 +68,15 @@ export function ProjectDetail() {
           aria-hidden="true"
         />
         <div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
-          <nav aria-label="مسیر صفحه" className="flex items-center gap-2 text-xs font-light text-ivory/50">
-            <Link to="/" className="transition-colors hover:text-copper">
-              صفحه اصلی
+          <nav aria-label={t('breadcrumbAria')} className="flex items-center gap-2 text-xs font-light text-ivory/50">
+            <Link to={href('/')} className="transition-colors hover:text-copper">
+              {t('home')}
             </Link>
-            <ChevronLeftIcon className="h-3.5 w-3.5" />
-            <Link to="/projects" className="transition-colors hover:text-copper">
-              پروژه‌ها
+            <ChevronLeftIcon className="h-3.5 w-3.5 ltr:rotate-180" />
+            <Link to={href('/projects')} className="transition-colors hover:text-copper">
+              {t('projects')}
             </Link>
-            <ChevronLeftIcon className="h-3.5 w-3.5" />
+            <ChevronLeftIcon className="h-3.5 w-3.5 ltr:rotate-180" />
             <span className="text-copper">{project.title}</span>
           </nav>
           <h1 className="mt-5 max-w-[700px] text-hero font-bold text-ivory">{project.title}</h1>
@@ -81,7 +84,7 @@ export function ProjectDetail() {
         </div>
       </section>
 
-      <section className="bg-char py-20 lg:py-28" aria-label="جزئیات پروژه">
+      <section className="bg-char py-20 lg:py-28" aria-label={t('projectDetailsAria')}>
         <div className="mx-auto grid max-w-site items-start gap-12 px-6 lg:grid-cols-2 lg:gap-16 lg:px-10">
           
           <Reveal className="order-1">
@@ -89,7 +92,7 @@ export function ProjectDetail() {
               <span aria-hidden="true" className="h-px w-8 bg-copper" />
               {statusLabel}
             </span>
-            <h2 className="mt-4 text-3xl font-bold text-ivory">درباره پروژه</h2>
+            <h2 className="mt-4 text-3xl font-bold text-ivory">{t('aboutProject')}</h2>
             
             {project.body.map((para) => (
               <p key={para} className="mt-5 text-base font-light leading-9 text-ivory/70">
@@ -99,7 +102,7 @@ export function ProjectDetail() {
 
             <dl className="mt-10 grid grid-cols-2 gap-px border border-ivory/10 bg-ivory/10">
               {facts.map((f) => (
-                <div key={f.label} className="bg-ink p-6 md:p-8 text-right">
+                <div key={f.label} className="bg-ink p-6 md:p-8 ltr:text-left rtl:text-right">
                   <dt className="text-xs font-light text-ivory/50">{f.label}</dt>
                   <dd className="mt-3 text-sm font-bold text-ivory">{f.value}</dd>
                 </div>
@@ -107,8 +110,8 @@ export function ProjectDetail() {
             </dl>
 
             <div className="mt-10">
-              <ButtonLink to="/contact" variant="outline" className="font-light">
-                پروژه‌ای مشابه دارید؟
+              <ButtonLink to={href('/contact')} variant="outline" className="font-light">
+                {t('similarProjectCta')}
               </ButtonLink>
             </div>
           </Reveal>
@@ -146,9 +149,9 @@ export function ProjectDetail() {
         </div>
       </section>
 
-      <section className="bg-ink py-20 lg:py-28" aria-label="پروژه‌های مرتبط">
+      <section className="bg-ink py-20 lg:py-28" aria-label={t('relatedProjectsAria')}>
         <div className="mx-auto max-w-site px-6 lg:px-10">
-          <h2 className="text-section font-bold text-ivory">پروژه‌های دیگر</h2>
+          <h2 className="text-section font-bold text-ivory">{t('otherProjects')}</h2>
           <div className="mt-6 h-px w-24 bg-copper/70" />
           <div className="mt-12 grid gap-6 lg:grid-cols-3">
             {related.map((item, i) => (