فرانت‌اند: ویرایش زنده درجا — دوقلوی دیجیتال سایت برای ادمین

لایه ویرایش بصری روی سایت واقعی (بدون داشبورد جدا): - ورود ادمین از مسیر پنهان /admin/login با توکن JWT (localStorage) و AdminContext شامل isEditMode و وضعیت ذخیره (همگام/در حال ذخیره/خطا) - AdminBar شناور پایین صفحه (فقط برای کاربر واردشده): کلید حالت ویرایش، وضعیت ذخیره، خروج — حالت ویرایش در sessionStorage می‌ماند - InlineEdit: در حالت عادی دقیقاً همان HTML قبلی (بدون تغییر چیدمان)؛ در حالت ویرایش کادرخط‌چین + contentEditable با ذخیره خودکار در blur (Enter ذخیره، Esc لغو) — وایرایش‌شده روی همه متن‌های سایت: هیرو، تیتر بخش‌ها، هیرو صفحات، داستان، فرم تماس، خبرنامه، فوتر، منو، برچسب‌های وضعیت پروژه و... - کشوی عمومی EntityDrawer با پیکربندی متمرکز برای ۱۴ مجموعه (خدمات، پروژه‌ها، مقالات، نظرات، سوالات، تیم، تایم‌لاین، آمار، چرا آرامش، مدل‌های سرمایه‌گذاری، مراحل کار، دفاتر، گالری، منو): ویرایش چندفیلدی، افزودن، حذف و جابه‌جایی ترتیب (▲▼) با ذخیره خودکار هر فیلد - دکمه‌های شناور ویرایش/حذف/ترتیب فقط در حالت ویرایش روی آیتم‌ها - کشوهای یگانه: برند و لوگو، تنظیمات هیرو، فرم تماس، خبرنامه، فوتر، قبل/بعد و نقل‌قول داستان — آپلود تصویر به MinIO از همان‌جا - به‌روزرسانی خوش‌بینانه SiteContext (updateSite) پس از هر PATCH؛ مسیرها در حالت ویرایش کلیک نمی‌شوند؛ breadcrumb محافظ beforeunload
2026-09-06 21:57:46 +03:30
parent 6e422ec3dc
commit 5ed082631e
39 changed files with 1882 additions and 260 deletions
@@ -16,6 +16,9 @@ import { ArticleDetail } from './pages/ArticleDetail';
 import { FaqPage } from './pages/FaqPage';
 import { ContactPage } from './pages/ContactPage';
 import { SiteProvider, useSiteData } from './api';
+import { AdminProvider, useAdmin } from './admin/AdminContext';
+import { AdminBar } from './admin/AdminBar';
+import { AdminLoginPage } from './admin/AdminLoginPage';

 function ScrollToTop() {
  const { pathname } = useLocation();
@@ -35,8 +38,9 @@ function AnimatedRoutes() {
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}>
-        
+
        <Routes location={location}>
+          <Route path="/admin/login" element={<AdminLoginPage />} />
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/services" element={<ServicesPage />} />
@@ -54,6 +58,22 @@ function AnimatedRoutes() {

 }

+function AppChrome() {
+  const { pathname } = useLocation();
+  const { isAuthenticated } = useAdmin();
+  const isLoginPage = pathname === '/admin/login';
+
+  return (
+    <>
+      {!isLoginPage && <Header />}
+      <AnimatedRoutes />
+      {!isLoginPage && <Footer />}
+      {!isLoginPage && <FloatingContact />}
+      {isAuthenticated && <AdminBar />}
+    </>
+  );
+}
+
 function AppShell() {
  const { data, error, reload } = useSiteData();

@@ -81,10 +101,7 @@ function AppShell() {
      ) : data ? (
        <BrowserRouter>
          <ScrollToTop />
-          <Header />
-          <AnimatedRoutes />
-          <Footer />
-          <FloatingContact />
+          <AppChrome />
        </BrowserRouter>
      ) : null}
    </div>
@@ -99,7 +116,9 @@ export function App() {

  return (
    <SiteProvider>
-      <AppShell />
+      <AdminProvider>
+        <AppShell />
+      </AdminProvider>
    </SiteProvider>
  );
 }
@@ -0,0 +1,64 @@
+import { useAdmin } from './AdminContext'
+
+const STATUS_TEXT: Record<string, string> = {
+  idle: 'همگام‌سازی شد',
+  saving: 'در حال ذخیره…',
+  error: 'خطا در ذخیره',
+}
+
+const STATUS_COLOR: Record<string, string> = {
+  idle: 'bg-emerald-400',
+  saving: 'bg-copper animate-pulse',
+  error: 'bg-red-400',
+}
+
+/** نوار شناور ادمین — فقط برای کاربر واردشده رندر می‌شود */
+export function AdminBar() {
+  const { isEditMode, toggleEditMode, saveStatus, logout } = useAdmin()
+
+  return (
+    <div
+      dir="rtl"
+      className="fixed bottom-4 right-1/2 z-[90] flex translate-x-1/2 items-center gap-5 border border-ivory/15 bg-ink/95 py-2.5 pl-6 pr-5 shadow-2xl backdrop-blur-md"
+    >
+      <span className="flex items-center gap-2 text-xs font-bold text-copper">
+        <span className="flex h-2 w-2 rounded-full bg-copper" />
+        حالت مدیریت
+      </span>
+
+      <button
+        type="button"
+        role="switch"
+        aria-checked={isEditMode}
+        onClick={toggleEditMode}
+        className="group flex items-center gap-3 text-sm font-light text-ivory/80"
+      >
+        <span
+          className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors duration-200 ${
+            isEditMode ? 'border-copper bg-copper/30' : 'border-ivory/25 bg-char'
+          }`}
+        >
+          <span
+            className={`absolute h-4 w-4 rounded-full transition-all duration-200 ${
+              isEditMode ? 'right-1 bg-copper' : 'right-6 bg-ivory/50'
+            }`}
+          />
+        </span>
+        {isEditMode ? 'حالت ویرایش فعال' : 'حالت ویرایش خاموش'}
+      </button>
+
+      <span className="flex items-center gap-2 border-r border-ivory/10 pr-5 text-xs font-light text-ivory/60">
+        <span className={`h-1.5 w-1.5 rounded-full ${STATUS_COLOR[saveStatus]}`} aria-hidden="true" />
+        {STATUS_TEXT[saveStatus]}
+      </span>
+
+      <button
+        type="button"
+        onClick={logout}
+        className="border border-ivory/20 px-3 py-1.5 text-xs font-light text-ivory/70 transition-colors duration-200 hover:border-copper hover:text-copper"
+      >
+        خروج
+      </button>
+    </div>
+  )
+}
@@ -0,0 +1,157 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import Swal from 'sweetalert2'
+import type { SiteData } from '../api'
+import { useSiteData } from '../api'
+import { adminApi, getToken, HttpError, setToken } from './adminClient'
+
+export type SaveStatus = 'idle' | 'saving' | 'error'
+
+interface AdminContextValue {
+  isAuthenticated: boolean
+  isEditMode: boolean
+  toggleEditMode: () => void
+  login: (username: string, password: string) => Promise<void>
+  logout: () => void
+  saveStatus: SaveStatus
+  /** اجرای یک عملیات ذخیره — وضعیت نوار ادمین را به‌روز می‌کند و خطاها را با دکمه تلاش دوباره نشان می‌دهد */
+  runSave: (action: () => Promise<void>) => Promise<boolean>
+}
+
+const AdminContext = createContext<AdminContextValue | null>(null)
+
+export function useAdmin(): AdminContextValue {
+  const ctx = useContext(AdminContext)
+  if (!ctx) throw new Error('useAdmin باید داخل AdminProvider استفاده شود')
+  return ctx
+}
+
+function showSaveError(error: unknown): void {
+  const message =
+    error instanceof HttpError ? error.message : 'ارتباط با سرور برقرار نشد — اتصال اینترنت را بررسی کنید'
+  Swal.fire({
+    icon: 'error',
+    title: 'ذخیره نشد',
+    text: message,
+    background: '#1e1a16',
+    color: '#F5F3EF',
+    iconColor: '#d5874c',
+    confirmButtonText: 'باشه',
+    timer: 4000,
+    timerProgressBar: true,
+    buttonsStyling: false,
+    customClass: {
+      popup: 'font-pinar border border-ivory/10 rounded-none',
+      title: 'font-pinar font-bold text-lg text-ivory',
+      htmlContainer: 'font-pinar font-light text-sm text-ivory/70',
+      confirmButton: 'bg-copper text-char font-bold px-8 py-2.5',
+    },
+  })
+}
+
+export function AdminProvider({ children }: { children: ReactNode }) {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(() => !!getToken())
+  const [isEditMode, setIsEditMode] = useState<boolean>(
+    () => sessionStorage.getItem('aramesh_edit_mode') === '1',
+  )
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle')
+  const { reload } = useSiteData()
+
+  const toggleEditMode = useCallback(() => {
+    setIsEditMode((v) => {
+      sessionStorage.setItem('aramesh_edit_mode', v ? '0' : '1')
+      return !v
+    })
+  }, [])
+
+  const login = useCallback(async (username: string, password: string) => {
+    await adminApi.login(username, password)
+    setIsAuthenticated(true)
+  }, [])
+
+  const logout = useCallback(() => {
+    setToken(null)
+    setIsAuthenticated(false)
+    setIsEditMode(false)
+    sessionStorage.removeItem('aramesh_edit_mode')
+  }, [])
+
+  const runSave = useCallback(
+    async (action: () => Promise<void>): Promise<boolean> => {
+      setSaveStatus('saving')
+      try {
+        await action()
+        setSaveStatus('idle')
+        return true
+      } catch (error) {
+        setSaveStatus('error')
+        showSaveError(error)
+        if (error instanceof HttpError && error.status === 401) {
+          logout()
+          reload()
+        }
+        return false
+      }
+    },
+    [logout, reload],
+  )
+
+  // در حالت ویرایش، کلیک روی لینک‌ها مسیریابی نمی‌کند تا ویرایش متن ممکن باشد
+  useEffect(() => {
+    if (!isEditMode) return
+    const onClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null
+      if (target?.closest('a')) e.preventDefault()
+    }
+    document.addEventListener('click', onClick, true)
+    return () => document.removeEventListener('click', onClick, true)
+  }, [isEditMode])
+
+  // در حین ذخیره‌سازی، از بسته‌شدن تصادفی صفحه جلوگیری می‌شود
+  useEffect(() => {
+    if (saveStatus !== 'saving') return
+    const guard = (e: BeforeUnloadEvent) => {
+      e.preventDefault()
+    }
+    window.addEventListener('beforeunload', guard)
+    return () => window.removeEventListener('beforeunload', guard)
+  }, [saveStatus])
+
+  const value = useMemo<AdminContextValue>(
+    () => ({
+      isAuthenticated,
+      isEditMode,
+      toggleEditMode,
+      login,
+      logout,
+      saveStatus,
+      runSave,
+    }),
+    [isAuthenticated, isEditMode, toggleEditMode, login, logout, saveStatus, runSave],
+  )
+
+  return <AdminContext.Provider value={value}>{children}</AdminContext.Provider>
+}
+
+/**
+ * پرکاربردترین کمک‌ساز ویرایش: یک فیلد واحد را PATCH می‌کند و پس از موفقیت
+ * همان تغییر را به‌صورت خوش‌بینانه در درخت داده سایت اعمال می‌کند.
+ */
+export function useFieldSaver() {
+  const { runSave } = useAdmin()
+  const { updateSite } = useSiteData()
+
+  return useCallback(
+    (
+      resource: string,
+      id: number,
+      changes: Record<string, unknown>,
+      apply: (data: SiteData) => void,
+    ): Promise<boolean> =>
+      runSave(async () => {
+        await adminApi.patch(resource, id, changes)
+        updateSite(apply)
+      }),
+    [runSave, updateSite],
+  )
+}
@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+import { Navigate, useNavigate } from 'react-router-dom'
+import { useAdmin } from './AdminContext'
+
+/** صفحه ورود ادمین — مسیر پنهان /admin/login */
+export function AdminLoginPage() {
+  const { isAuthenticated, login } = useAdmin()
+  const navigate = useNavigate()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  if (isAuthenticated) return <Navigate to="/" replace />
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault()
+    if (submitting) return
+    setError('')
+    setSubmitting(true)
+    try {
+      await login(username.trim(), password)
+      navigate('/')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'ورود ناموفق بود')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <section className="flex min-h-screen flex-col items-center justify-center bg-ink px-6" dir="rtl">
+      <div className="w-full max-w-sm border border-ivory/10 bg-char p-10">
+        <h1 className="text-xl font-bold text-ivory">ورود مدیریت</h1>
+        <p className="mt-3 text-sm font-light leading-7 text-ivory/55">
+          برای فعال‌سازی حالت ویرایش زنده سایت وارد شوید.
+        </p>
+
+        <form onSubmit={submit} className="mt-8 grid gap-5" noValidate>
+          <div>
+            <label htmlFor="admin-username" className="block text-sm font-bold text-ivory/90">
+              نام کاربری
+            </label>
+            <input
+              id="admin-username"
+              type="text"
+              dir="ltr"
+              autoComplete="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="mt-2 w-full border border-ivory/20 bg-ink/50 px-4 py-3 text-sm text-ivory transition-colors duration-200 focus:border-copper focus:outline-none"
+            />
+          </div>
+          <div>
+            <label htmlFor="admin-password" className="block text-sm font-bold text-ivory/90">
+              رمز عبور
+            </label>
+            <input
+              id="admin-password"
+              type="password"
+              dir="ltr"
+              autoComplete="current-password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="mt-2 w-full border border-ivory/20 bg-ink/50 px-4 py-3 text-sm text-ivory transition-colors duration-200 focus:border-copper focus:outline-none"
+            />
+          </div>
+
+          {error && (
+            <p className="border-r-2 border-red-400/70 pr-3 text-xs font-light leading-6 text-red-300">{error}</p>
+          )}
+
+          <button
+            type="submit"
+            disabled={submitting}
+            className="mt-2 bg-copper px-8 py-3 text-sm font-bold text-char transition-transform duration-200 hover:scale-[1.02] disabled:opacity-50"
+          >
+            {submitting ? 'در حال ورود…' : 'ورود'}
+          </button>
+        </form>
+      </div>
+    </section>
+  )
+}
@@ -0,0 +1,208 @@
+import { useState } from 'react'
+import type { ReactNode } from 'react'
+import { ArrowDownIcon, ArrowUpIcon, PencilIcon, PlusIcon, Trash2Icon } from 'lucide-react'
+import Swal from 'sweetalert2'
+import { useSiteData } from '../api'
+import { useAdmin } from './AdminContext'
+import { adminApi } from './adminClient'
+import { ENTITIES } from './entities'
+import { EntityDrawer } from './EntityDrawer'
+
+type ItemWithId = Record<string, unknown> & { id: number }
+
+function useEntityList(resource: string): ItemWithId[] {
+  const { data } = useSiteData()
+  const config = ENTITIES[resource]
+  if (!config) throw new Error(`منبع ناشناخته: ${resource}`)
+  return (data?.[config.dataKey as keyof NonNullable<typeof data>] ?? []) as ItemWithId[]
+}
+
+function PillButton({
+  onClick,
+  label,
+  children,
+  danger = false,
+}: {
+  onClick: () => void
+  label: string
+  children: ReactNode
+  danger?: boolean
+}) {
+  return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      onClick={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        onClick()
+      }}
+      className={`flex h-7 w-7 items-center justify-center border backdrop-blur-sm transition-colors duration-150 ${
+        danger
+          ? 'border-red-400/40 bg-ink/90 text-red-300 hover:bg-red-500/20'
+          : 'border-copper/50 bg-ink/90 text-copper hover:bg-copper hover:text-char'
+      }`}
+    >
+      {children}
+    </button>
+  )
+}
+
+/**
+ * بسته‌بندی آیتم‌های مجموعه‌ها — فقط در حالت ویرایش ادمین، دکمه‌های شناور
+ * (ویرایش / بالا / پایین / حذف) روی آیتم نشان می‌دهد؛ در حالت عادی خروجی یکسان است.
+ */
+export function EditableItem({
+  resource,
+  item,
+  children,
+  className = '',
+}: {
+  resource: string
+  item: ItemWithId
+  children: ReactNode
+  className?: string
+}) {
+  const { isAuthenticated, isEditMode, runSave } = useAdmin()
+  const { reload } = useSiteData()
+  const config = ENTITIES[resource]
+  const list = useEntityList(resource)
+  const [drawerOpen, setDrawerOpen] = useState(false)
+
+  if (!config) return <>{children}</>
+  if (!isAuthenticated || !isEditMode) return <>{children}</>
+
+  const index = list.findIndex((x) => x.id === item.id)
+
+  const move = (delta: number) => {
+    const target = index + delta
+    if (target < 0 || target >= list.length) return
+    const ids = list.map((x) => x.id)
+    ;[ids[index], ids[target]] = [ids[target], ids[index]]
+    void runSave(async () => {
+      await adminApi.reorder(config.resource, ids)
+      reload()
+    })
+  }
+
+  const remove = async () => {
+    const result = await Swal.fire({
+      icon: 'warning',
+      title: 'حذف رکورد',
+      text: `«${String(item[config.titleKey] ?? '')}» برای همیشه حذف شود؟`,
+      background: '#1e1a16',
+      color: '#F5F3EF',
+      iconColor: '#d5874c',
+      showCancelButton: true,
+      confirmButtonText: 'حذف',
+      cancelButtonText: 'انصراف',
+      buttonsStyling: false,
+      customClass: {
+        popup: 'font-pinar border border-ivory/10',
+        confirmButton: 'bg-red-500 text-white font-bold px-8 py-2.5 mx-2',
+        cancelButton: 'border border-ivory/30 text-ivory font-light px-8 py-2.5 mx-2',
+      },
+    })
+    if (!result.isConfirmed) return
+    void runSave(async () => {
+      await adminApi.remove(config.resource, item.id)
+      reload()
+    })
+  }
+
+  return (
+    <div className={`relative group/editable ${className}`}>
+      <div className="absolute left-2 top-2 z-30 flex flex-col gap-1.5 opacity-0 transition-opacity duration-150 group-hover/editable:opacity-100">
+        <PillButton onClick={() => setDrawerOpen(true)} label="ویرایش">
+          <PencilIcon className="h-3.5 w-3.5" />
+        </PillButton>
+        {index > 0 && (
+          <PillButton onClick={() => move(-1)} label="انتقال به قبل">
+            <ArrowUpIcon className="h-3.5 w-3.5" />
+          </PillButton>
+        )}
+        {index < list.length - 1 && (
+          <PillButton onClick={() => move(1)} label="انتقال به بعد">
+            <ArrowDownIcon className="h-3.5 w-3.5" />
+          </PillButton>
+        )}
+        <PillButton onClick={remove} label="حذف" danger>
+          <Trash2Icon className="h-3.5 w-3.5" />
+        </PillButton>
+      </div>
+
+      {children}
+
+      {drawerOpen && (
+        <EntityDrawer config={config} item={item} deletable onClose={() => setDrawerOpen(false)} />
+      )}
+    </div>
+  )
+}
+
+/** دکمه افزودن آیتم جدید به یک مجموعه — فقط در حالت ویرایش */
+export function AddItemButton({ resource }: { resource: string }) {
+  const { isAuthenticated, isEditMode, runSave } = useAdmin()
+  const { reload } = useSiteData()
+  const config = ENTITIES[resource]
+  const [newItem, setNewItem] = useState<ItemWithId | null>(null)
+
+  if (!config || !isAuthenticated || !isEditMode) return null
+
+  const create = () => {
+    void runSave(async () => {
+      const created = await adminApi.create<ItemWithId>(config.resource, config.defaults)
+      reload()
+      setNewItem(created)
+    })
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={create}
+        className="flex min-h-40 w-full flex-col items-center justify-center gap-2 border border-dashed border-copper/40 bg-copper/5 text-copper transition-colors duration-200 hover:bg-copper/10"
+      >
+        <PlusIcon className="h-6 w-6" />
+        <span className="text-sm font-light">افزودن {config.title}</span>
+      </button>
+
+      {newItem && (
+        <EntityDrawer config={config} item={newItem} deletable onClose={() => setNewItem(null)} />
+      )}
+    </>
+  )
+}
+
+/** دکمه شناور بازکردن کشوی یک رکورد یگانه (برند، هیرو، فرم تماس و...) — فقط در حالت ویرایش */
+export function SingletonPill({
+  resource,
+  label,
+  className = '',
+}: {
+  resource: string
+  label: string
+  className?: string
+}) {
+  const { isAuthenticated, isEditMode } = useAdmin()
+  const config = ENTITIES[resource]
+  const { data } = useSiteData()
+  const [drawerOpen, setDrawerOpen] = useState(false)
+
+  if (!config || !isAuthenticated || !isEditMode) return null
+  const item = data?.[config.dataKey as keyof NonNullable<typeof data>] as ItemWithId | undefined
+  if (!item) return null
+
+  return (
+    <>
+      <span className={className}>
+        <PillButton onClick={() => setDrawerOpen(true)} label={label}>
+          <PencilIcon className="h-3.5 w-3.5" />
+        </PillButton>
+      </span>
+      {drawerOpen && <EntityDrawer config={config} item={item} onClose={() => setDrawerOpen(false)} />}
+    </>
+  )
+}
@@ -0,0 +1,250 @@
+import { useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { PlusIcon, Trash2Icon, XIcon } from 'lucide-react'
+import Swal from 'sweetalert2'
+import { useSiteData } from '../api'
+import { useAdmin, useFieldSaver } from './AdminContext'
+import { adminApi } from './adminClient'
+import type { EntityConfig, FieldConfig } from './entities'
+import { ImageField } from '../components/admin/ImageField'
+
+type EntityDrawerProps = {
+  config: EntityConfig
+  /** رکورد یگانه یا آیتم مجموعه — باید id داشته باشد */
+  item: Record<string, unknown> & { id: number }
+  onClose: () => void
+  /** فقط برای مجموعه‌ها: حذف آیتم */
+  deletable?: boolean
+}
+
+export function EntityDrawer({ config, item, onClose, deletable = false }: EntityDrawerProps) {
+  const save = useFieldSaver()
+  const { runSave } = useAdmin()
+  const { reload } = useSiteData()
+  const [deleting, setDeleting] = useState(false)
+
+  const saveField = (name: string, value: unknown) =>
+    save(config.resource, item.id, { [name]: value }, (d) => {
+      const target = d[config.dataKey as keyof typeof d] as unknown
+      const node =
+        config.kind === 'singleton'
+          ? (target as Record<string, unknown>)
+          : (target as { id: number }[]).find((x) => x.id === item.id)
+      if (node) (node as Record<string, unknown>)[name] = value
+    })
+
+  const remove = async () => {
+    const result = await Swal.fire({
+      icon: 'warning',
+      title: 'حذف رکورد',
+      text: `«${String(item[config.titleKey] ?? '')}» برای همیشه حذف شود؟`,
+      background: '#1e1a16',
+      color: '#F5F3EF',
+      iconColor: '#d5874c',
+      showCancelButton: true,
+      confirmButtonText: 'حذف',
+      cancelButtonText: 'انصراف',
+      buttonsStyling: false,
+      customClass: {
+        popup: 'font-pinar border border-ivory/10',
+        confirmButton: 'bg-red-500 text-white font-bold px-8 py-2.5 mx-2',
+        cancelButton: 'border border-ivory/30 text-ivory font-light px-8 py-2.5 mx-2',
+      },
+    })
+    if (!result.isConfirmed) return
+    setDeleting(true)
+    await runSave(async () => {
+      await adminApi.remove(config.resource, item.id)
+      reload()
+      onClose()
+    })
+    setDeleting(false)
+  }
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        key="backdrop"
+        className="fixed inset-0 z-[95] bg-char/70 backdrop-blur-sm"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <motion.aside
+        key="drawer"
+        dir="rtl"
+        role="dialog"
+        aria-label={`ویرایش ${config.title}`}
+        className="fixed inset-y-0 left-0 z-[96] flex w-full max-w-md flex-col border-e border-ivory/10 bg-ink shadow-2xl"
+        initial={{ x: '-100%' }}
+        animate={{ x: 0 }}
+        exit={{ x: '-100%' }}
+        transition={{ duration: 0.25, ease: [0.23, 1, 0.32, 1] }}
+      >
+        <header className="flex items-center justify-between border-b border-ivory/10 px-6 py-4">
+          <div>
+            <p className="text-xs font-light text-copper">
+              {config.kind === 'singleton' ? 'تنظیمات بخش' : 'ویرایش رکورد'}
+            </p>
+            <h2 className="mt-1 text-lg font-bold text-ivory">{config.title}</h2>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="بستن"
+            className="flex h-9 w-9 items-center justify-center border border-ivory/20 text-ivory/70 transition-colors hover:border-copper hover:text-copper"
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        </header>
+
+        <div className="flex-1 overflow-y-auto px-6 py-6">
+          <div className="grid gap-6">
+            {config.fields.map((field) => (
+              <FieldControl
+                key={field.name}
+                field={field}
+                value={item[field.name]}
+                onSave={(value) => saveField(field.name, value)}
+              />
+            ))}
+          </div>
+        </div>
+
+        {deletable && (
+          <footer className="border-t border-ivory/10 px-6 py-4">
+            <button
+              type="button"
+              onClick={remove}
+              disabled={deleting}
+              className="flex items-center gap-2 border border-red-400/40 px-4 py-2 text-xs font-light text-red-300 transition-colors hover:bg-red-500/10 disabled:opacity-50"
+            >
+              <Trash2Icon className="h-3.5 w-3.5" />
+              حذف این رکورد
+            </button>
+          </footer>
+        )}
+      </motion.aside>
+    </AnimatePresence>
+  )
+}
+
+function FieldControl({
+  field,
+  value,
+  onSave,
+}: {
+  field: FieldConfig
+  value: unknown
+  onSave: (value: unknown) => Promise<boolean>
+}) {
+  const [text, setText] = useState<string>(String(value ?? ''))
+
+  const commitText = async () => {
+    const next = field.type === 'number' ? Number(text) || 0 : text
+    if (String(value ?? '') === String(next)) return
+    await onSave(next)
+  }
+
+  if (field.type === 'image') {
+    return <ImageField label={field.label} value={String(value ?? '')} onSave={(url) => onSave(url)} />
+  }
+
+  if (field.type === 'list') {
+    return <ListField field={field} value={value} onSave={onSave} />
+  }
+
+  if (field.type === 'textarea') {
+    return (
+      <div>
+        <p className="text-xs font-bold text-ivory/80">{field.label}</p>
+        <textarea
+          dir="auto"
+          rows={4}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onBlur={commitText}
+          className="mt-2 w-full resize-y border border-ivory/15 bg-char px-3 py-2 text-sm font-light leading-8 text-ivory focus:border-copper focus:outline-none"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <p className="text-xs font-bold text-ivory/80">{field.label}</p>
+      {field.hint && <p className="mt-1 text-[10px] font-light text-ivory/40">{field.hint}</p>}
+      <input
+        dir={field.type === 'number' ? 'ltr' : 'auto'}
+        type={field.type === 'number' ? 'number' : 'text'}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onBlur={commitText}
+        className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
+      />
+    </div>
+  )
+}
+
+/** ویرایش آرایه خطی (پاراگراف‌ها، گالری، نکات) — هر تغییر ذخیره می‌شود */
+function ListField({
+  field,
+  value,
+  onSave,
+}: {
+  field: FieldConfig
+  value: unknown
+  onSave: (value: unknown) => Promise<boolean>
+}) {
+  const [lines, setLines] = useState<string[]>(Array.isArray(value) ? (value as string[]) : [])
+
+  const update = (next: string[]) => {
+    setLines(next)
+    void onSave(next)
+  }
+
+  return (
+    <div>
+      <p className="text-xs font-bold text-ivory/80">{field.label}</p>
+      {field.hint && <p className="mt-1 text-[10px] font-light text-ivory/40">{field.hint}</p>}
+      <div className="mt-2 grid gap-2">
+        {lines.map((line, i) => (
+          <div key={i} className="flex items-start gap-2">
+            <textarea
+              dir="auto"
+              rows={line.length > 60 ? 3 : 1}
+              value={line}
+              onChange={(e) => {
+                const next = [...lines]
+                next[i] = e.target.value
+                setLines(next)
+              }}
+              onBlur={() => {
+                if (line !== (value as string[])[i]) update(lines)
+              }}
+              className="flex-1 resize-y border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
+            />
+            <button
+              type="button"
+              aria-label="حذف خط"
+              onClick={() => update(lines.filter((_, j) => j !== i))}
+              className="mt-1 text-ivory/40 transition-colors hover:text-red-300"
+            >
+              <XIcon className="h-4 w-4" />
+            </button>
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={() => update([...lines, ''])}
+          className="flex w-fit items-center gap-1.5 border border-dashed border-ivory/25 px-3 py-1.5 text-xs font-light text-ivory/60 transition-colors hover:border-copper hover:text-copper"
+        >
+          <PlusIcon className="h-3 w-3" />
+          افزودن خط
+        </button>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,86 @@
+// لایه تماس ادمین — همه درخواست‌ها با توکن Bearer و مدیریت خطای یکسان
+import { API_URL } from '../config'
+
+const TOKEN_KEY = 'aramesh_admin_token'
+
+export const getToken = (): string | null => localStorage.getItem(TOKEN_KEY)
+export const setToken = (token: string | null): void => {
+  if (token) localStorage.setItem(TOKEN_KEY, token)
+  else localStorage.removeItem(TOKEN_KEY)
+}
+
+export class HttpError extends Error {
+  constructor(
+    public status: number,
+    message: string,
+  ) {
+    super(message)
+  }
+}
+
+async function authFetch<T>(path: string, options: RequestInit = {}): Promise<T> {
+  const token = getToken()
+  const isFormData = options.body instanceof FormData
+  const res = await fetch(`${API_URL}${path}`, {
+    ...options,
+    headers: {
+      ...(options.headers ?? {}),
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...(options.body && !isFormData ? { 'Content-Type': 'application/json' } : {}),
+    },
+  })
+
+  if (res.status === 401) {
+    setToken(null)
+    throw new HttpError(401, 'نشست شما منقضی شده — دوباره وارد شوید')
+  }
+  if (!res.ok) {
+    const data = (await res.json().catch(() => null)) as { detail?: unknown } | null
+    const detail =
+      typeof data?.detail === 'string'
+        ? data.detail
+        : res.status === 409
+          ? 'رکوردی با این مقدار تکراری وجود دارد'
+          : 'خطا در ذخیره‌سازی — دوباره تلاش کنید'
+    throw new HttpError(res.status, detail)
+  }
+  return res.status === 204 ? (null as T) : ((await res.json()) as T)
+}
+
+export const adminApi = {
+  login: async (username: string, password: string): Promise<string> => {
+    const res = await fetch(`${API_URL}/api/auth/login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password }),
+    })
+    if (!res.ok) {
+      const data = (await res.json().catch(() => null)) as { detail?: unknown } | null
+      throw new HttpError(
+        res.status,
+        typeof data?.detail === 'string' ? data.detail : 'ورود ناموفق بود',
+      )
+    }
+    const data = (await res.json()) as { access_token: string }
+    setToken(data.access_token)
+    return data.access_token
+  },
+
+  patch: <T = unknown>(resource: string, id: number, partial: Record<string, unknown>) =>
+    authFetch<T>(`/api/admin/${resource}/${id}`, { method: 'PATCH', body: JSON.stringify(partial) }),
+
+  create: <T = unknown>(resource: string, data: Record<string, unknown>) =>
+    authFetch<T>(`/api/admin/${resource}`, { method: 'POST', body: JSON.stringify(data) }),
+
+  remove: (resource: string, id: number) =>
+    authFetch<null>(`/api/admin/${resource}/${id}`, { method: 'DELETE' }),
+
+  reorder: <T = unknown>(resource: string, ids: number[]) =>
+    authFetch<T[]>(`/api/admin/${resource}/reorder`, { method: 'POST', body: JSON.stringify({ ids }) }),
+
+  upload: async (file: File): Promise<{ url: string; key: string }> => {
+    const fd = new FormData()
+    fd.append('file', file)
+    return authFetch('/api/admin/upload', { method: 'POST', body: fd })
+  },
+}
@@ -0,0 +1,187 @@
+import type { SiteData } from '../api'
+
+export type FieldType = 'text' | 'textarea' | 'number' | 'image' | 'list'
+
+export type FieldConfig = {
+  name: string
+  label: string
+  type: FieldType
+  hint?: string
+}
+
+export type EntityConfig = {
+  /** مسیر منبع در پنل مدیریت، مثل services یا why-us */
+  resource: string
+  /** کلید همان منبع در پاسخ GET /api/site */
+  dataKey: string
+  title: string
+  /** مجموعه یا رکورد یگانه */
+  kind: 'collection' | 'singleton'
+  /** فیلدی که عنوان آیتم را نشان می‌دهد */
+  titleKey: string
+  fields: FieldConfig[]
+  /** مقادیر پیش‌فرض برای «افزودن» */
+  defaults: Record<string, unknown>
+}
+
+const F = (name: string, label: string, type: FieldType = 'text', hint?: string): FieldConfig => ({
+  name,
+  label,
+  type,
+  hint,
+})
+
+/** پیکربندی همه منابع قابل ویرایش — هم مجموعه‌ها و هم رکوردهای یگانه */
+export const ENTITIES: Record<string, EntityConfig> = {
+  services: {
+    resource: 'services', dataKey: 'services', title: 'خدمات', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('desc', 'توضیح', 'textarea'), F('icon', 'آیکون', 'text', 'draft / tower / mall / villa / renew / manage / invest / landscape')],
+    defaults: { title: 'خدمت جدید', desc: '', icon: 'draft' },
+  },
+  projects: {
+    resource: 'projects', dataKey: 'projects', title: 'پروژه‌ها', kind: 'collection',
+    titleKey: 'title',
+    fields: [
+      F('title', 'عنوان'), F('slug', 'نشانی (slug)'), F('location', 'موقعیت'),
+      F('year', 'سال'), F('status', 'وضعیت', 'text', 'done یا progress'),
+      F('image', 'تصویر شاخص', 'image'), F('gallery', 'گالری (هر خط یک URL)', 'list'),
+      F('area', 'زیربنا'), F('floors', 'طبقات'), F('units', 'واحدها'), F('client', 'کارفرما'),
+      F('summary', 'خلاصه', 'textarea'), F('body', 'متن پروژه (هر پاراگراف یک خط)', 'list'),
+    ],
+    defaults: { title: 'پروژه جدید', slug: `project-${Date.now()}`, location: '', year: '', status: 'done', image: '', gallery: [], area: '', floors: '', units: '', client: '', summary: '', body: [] },
+  },
+  articles: {
+    resource: 'articles', dataKey: 'articles', title: 'مقالات', kind: 'collection',
+    titleKey: 'title',
+    fields: [
+      F('title', 'عنوان'), F('slug', 'نشانی (slug)'), F('date', 'تاریخ'), F('category', 'دسته'),
+      F('image', 'تصویر شاخص', 'image'), F('read', 'زمان مطالعه'), F('excerpt', 'چکیده', 'textarea'),
+      F('body', 'متن مقاله (هر پاراگراف یک خط)', 'list'),
+    ],
+    defaults: { title: 'مقاله جدید', slug: `article-${Date.now()}`, date: '', category: '', image: '', read: '', excerpt: '', body: [] },
+  },
+  testimonials: {
+    resource: 'testimonials', dataKey: 'testimonials', title: 'نظرات مشتریان', kind: 'collection',
+    titleKey: 'name',
+    fields: [F('name', 'نام'), F('role', 'سمت'), F('quote', 'متن نظر', 'textarea')],
+    defaults: { name: 'نظر جدید', role: '', quote: '' },
+  },
+  faqs: {
+    resource: 'faqs', dataKey: 'faqs', title: 'سوالات متداول', kind: 'collection',
+    titleKey: 'question',
+    fields: [F('question', 'سوال'), F('answer', 'پاسخ', 'textarea')],
+    defaults: { question: 'سوال جدید', answer: '' },
+  },
+  team: {
+    resource: 'team', dataKey: 'team', title: 'تیم', kind: 'collection',
+    titleKey: 'name',
+    fields: [F('name', 'نام'), F('role', 'سمت'), F('bio', 'معرفی', 'textarea')],
+    defaults: { name: 'عضو جدید', role: '', bio: '' },
+  },
+  timeline: {
+    resource: 'timeline', dataKey: 'timeline', title: 'تایم‌لاین', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('year', 'سال'), F('title', 'عنوان'), F('desc', 'توضیح', 'textarea'), F('image', 'تصویر', 'image')],
+    defaults: { year: '۱۴۰۰', title: 'رویداد جدید', desc: '', image: '' },
+  },
+  stats: {
+    resource: 'stats', dataKey: 'stats', title: 'آمار', kind: 'collection',
+    titleKey: 'label',
+    fields: [F('label', 'برچسب'), F('value', 'عدد', 'number'), F('suffix', 'پسوند (مثل + یا هزار)')],
+    defaults: { label: 'شاخص جدید', value: 0, suffix: '' },
+  },
+  why_us: {
+    resource: 'why-us', dataKey: 'why_us', title: 'چرا آرامش', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('desc', 'توضیح', 'textarea')],
+    defaults: { title: 'مورد جدید', desc: '' },
+  },
+  investment_models: {
+    resource: 'investment-models', dataKey: 'investment_models', title: 'مدل‌های سرمایه‌گذاری', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('desc', 'توضیح', 'textarea'), F('points', 'نکات (هر خط یک مورد)', 'list')],
+    defaults: { title: 'مدل جدید', desc: '', points: [] },
+  },
+  process_steps: {
+    resource: 'process-steps', dataKey: 'process_steps', title: 'مراحل فرآیند کار', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('step', 'شماره مرحله'), F('title', 'عنوان'), F('desc', 'توضیح', 'textarea')],
+    defaults: { step: '۰۱', title: 'مرحله جدید', desc: '' },
+  },
+  offices: {
+    resource: 'offices', dataKey: 'offices', title: 'دفاتر', kind: 'collection',
+    titleKey: 'city',
+    fields: [F('city', 'شهر'), F('address', 'نشانی', 'textarea'), F('hours', 'ساعات کاری')],
+    defaults: { city: 'شهر جدید', address: '', hours: '' },
+  },
+  gallery: {
+    resource: 'gallery', dataKey: 'gallery', title: 'گالری تصاویر', kind: 'collection',
+    titleKey: 'alt',
+    fields: [F('src', 'تصویر', 'image'), F('alt', 'متن جایگزین')],
+    defaults: { src: '', alt: 'تصویر گالری' },
+  },
+  nav: {
+    resource: 'nav', dataKey: 'nav', title: 'منوی ناوبری', kind: 'collection',
+    titleKey: 'label',
+    fields: [F('label', 'عنوان'), F('href', 'مسیر (مثل /about)')],
+    defaults: { label: 'آیتم جدید', href: '/' },
+  },
+
+  // ---------- رکوردهای یگانه ----------
+  brand: {
+    resource: 'brand', dataKey: 'brand', title: 'برند و تماس', kind: 'singleton',
+    titleKey: 'name',
+    fields: [F('name', 'نام برند'), F('logo', 'لوگو', 'image'), F('hero', 'تصویر هیرو', 'image'), F('contact_bg', 'پس‌زمینه بخش تماس', 'image'), F('phone', 'تلفن نمایشی'), F('phone_href', 'لینک تلفن'), F('email', 'ایمیل'), F('address', 'نشانی', 'textarea')],
+    defaults: {},
+  },
+  hero: {
+    resource: 'hero', dataKey: 'hero', title: 'تنظیمات هیرو', kind: 'singleton',
+    titleKey: 'title',
+    fields: [F('title_highlight', 'واژه مسیِ تیتر'), F('badge_value', 'عدد کارت کنار'), F('badge_label', 'متن کارت کنار', 'textarea'), F('cta_primary_label', 'متن دکمه اصلی'), F('cta_primary_href', 'لینک دکمه اصلی'), F('cta_secondary_label', 'متن دکمه دوم'), F('cta_secondary_href', 'لینک دکمه دوم'), F('scroll_label', 'متن اسکرول'), F('kicker', 'متن بالای تیتر', 'textarea')],
+    defaults: {},
+  },
+  story: {
+    resource: 'story', dataKey: 'story', title: 'تصاویر بخش درباره ما', kind: 'singleton',
+    titleKey: 'title',
+    fields: [F('quote', 'نقل‌قول مدیرعامل', 'textarea'), F('quote_author', 'استناد نقل‌قول'), F('stat1_value', 'آمار ۱ — عدد'), F('stat1_label', 'آمار ۱ — برچسب'), F('stat2_value', 'آمار ۲ — عدد'), F('stat2_label', 'آمار ۲ — برچسب'), F('link_label', 'متن دکمه'), F('link_href', 'لینک دکمه')],
+    defaults: {},
+  },
+  before_after: {
+    resource: 'before-after', dataKey: 'before_after', title: 'بخش قبل/بعد', kind: 'singleton',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('lead', 'توضیح', 'textarea'), F('before', 'تصویر قبل', 'image'), F('after', 'تصویر بعد', 'image'), F('before_label', 'برچسب قبل'), F('after_label', 'برچسب بعد')],
+    defaults: {},
+  },
+  contact_section: {
+    resource: 'contact-section', dataKey: 'contact_section', title: 'فرم تماس', kind: 'singleton',
+    titleKey: 'title',
+    fields: [
+      F('label', 'برچسب بالا'), F('title', 'عنوان'), F('lead', 'توضیح', 'textarea'),
+      F('address_label', 'برچسب نشانی'), F('phone_label', 'برچسب تلفن'), F('email_label', 'برچسب ایمیل'),
+      F('name_label', 'برچسب نام'), F('name_placeholder', 'جای‌نگهدار نام'),
+      F('phone_field_label', 'برچسب تلفن (فرم)'), F('phone_placeholder', 'جای‌نگهدار تلفن'),
+      F('note_label', 'برچسب توضیحات'), F('note_optional_label', 'برچسب اختیاری'), F('note_placeholder', 'جای‌نگهدار توضیحات'),
+      F('submit_label', 'متن دکمه ارسال'), F('sending_label', 'متن در حال ارسال'),
+      F('success_title', 'عنوان پیام موفقیت'), F('success_text', 'متن پیام موفقیت', 'textarea'), F('success_button_label', 'دکمه پیام موفقیت'),
+    ],
+    defaults: {},
+  },
+  newsletter: {
+    resource: 'newsletter', dataKey: 'newsletter', title: 'خبرنامه', kind: 'singleton',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('lead', 'توضیح', 'textarea'), F('placeholder', 'جای‌نگهدار ایمیل'), F('button_label', 'متن دکمه'), F('sending_label', 'متن در حال ارسال'), F('success_text', 'پیام موفقیت')],
+    defaults: {},
+  },
+  footer: {
+    resource: 'footer', dataKey: 'footer', title: 'فوتر', kind: 'singleton',
+    titleKey: 'pages_heading',
+    fields: [F('about_text', 'متن معرفی', 'textarea'), F('pages_heading', 'تیتر ستون صفحات'), F('services_heading', 'تیتر ستون خدمات'), F('contact_heading', 'تیتر ستون تماس'), F('copyright', 'متن کپی‌رایت'), F('tagline', 'شعار پایین')],
+    defaults: {},
+  },
+}
+
+/** دسترسی به آرایه/شیء منبع از درخت داده سایت */
+export function getEntityData(data: SiteData, config: EntityConfig): Record<string, unknown> & { id: number }[] | (Record<string, unknown> & { id: number }) {
+  return data[config.dataKey as keyof SiteData] as never
+}
@@ -159,9 +159,16 @@ interface SiteContextValue {
  data: SiteData | null
  error: boolean
  reload: () => void
+  /** به‌روزرسانی خوش‌بینانه درخت داده — پس از موفقیت PATCH استفاده می‌شود */
+  updateSite: (mutate: (data: SiteData) => void) => void
 }

-const SiteContext = createContext<SiteContextValue>({ data: null, error: false, reload: () => {} })
+const SiteContext = createContext<SiteContextValue>({
+  data: null,
+  error: false,
+  reload: () => {},
+  updateSite: () => {},
+})

 export function SiteProvider({ children }: { children: ReactNode }) {
  const [data, setData] = useState<SiteData | null>(null)
@@ -197,7 +204,20 @@ export function SiteProvider({ children }: { children: ReactNode }) {
    load()
  }, [load])

-  return <SiteContext.Provider value={{ data, error, reload }}>{children}</SiteContext.Provider>
+  const updateSite = useCallback((mutate: (data: SiteData) => void) => {
+    setData((prev) => {
+      if (!prev) return prev
+      const next = structuredClone(prev)
+      mutate(next)
+      return next
+    })
+  }, [])
+
+  return (
+    <SiteContext.Provider value={{ data, error, reload, updateSite }}>
+      {children}
+    </SiteContext.Provider>
+  )
 }

 export function useSiteData(): SiteContextValue {
@@ -4,14 +4,28 @@ import Swal from 'sweetalert2'
 import { Reveal } from './Reveal'
 import { Button } from './Button'
 import { useSite } from '../api'
+import { useFieldSaver } from '../admin/AdminContext'
+import { InlineEdit } from './admin/InlineEdit'
+import { SingletonPill } from '../admin/Editable'
 import { API_URL } from '../config'

 export function ContactSection() {
  const { brand, contact_section: content } = useSite()
+  const save = useFieldSaver()
  const [form, setForm] = useState({ name: '', phone: '', note: '' })
  const [sent, setSent] = useState(false)
  const [sending, setSending] = useState(false)

+  const saveContent = (field: string, value: string) =>
+    save('contact-section', content.id, { [field]: value }, (d) => {
+      ;(d.contact_section as unknown as Record<string, unknown>)[field] = value
+    })
+
+  const saveBrand = (field: string, value: string) =>
+    save('brand', brand.id, { [field]: value }, (d) => {
+      ;(d.brand as unknown as Record<string, unknown>)[field] = value
+    })
+
  const showErrorAlert = (title: string, text: string) => {
    Swal.fire({
      icon: 'warning',
@@ -93,15 +107,17 @@ export function ContactSection() {

      <div className="relative mx-auto max-w-site px-6 lg:px-10">
        <div className="mx-auto grid max-w-6xl items-stretch gap-6 lg:grid-cols-12">
-          
+
          <div className="border border-ivory/20 bg-char/45 p-8 backdrop-blur-[8px] md:p-10 lg:col-span-5">
            <Reveal>
-              <p className="text-sm font-light text-copper">{content.label}</p>
+              <p className="text-sm font-light text-copper">
+                <InlineEdit value={content.label} onSave={(v) => saveContent('label', v)} />
+              </p>
              <h2 id="contact-title" className="mt-5 text-section font-bold text-ivory">
-                {content.title}
+                <InlineEdit value={content.title} onSave={(v) => saveContent('title', v)} />
              </h2>
              <p className="mt-6 text-base font-light leading-9 text-ivory/75">
-                {content.lead}
+                <InlineEdit multiline value={content.lead} onSave={(v) => saveContent('lead', v)} />
              </p>
            </Reveal>

@@ -110,33 +126,41 @@ export function ContactSection() {
                <li className="flex items-start gap-4">
                  <MapPinIcon className="mt-1 h-5 w-5 shrink-0 text-copper" />
                  <div>
-                    <p className="text-sm font-bold text-ivory">{content.address_label}</p>
-                    <p className="mt-1 text-sm font-light leading-7 text-ivory/70">{brand.address}</p>
+                    <p className="text-sm font-bold text-ivory">
+                      <InlineEdit value={content.address_label} onSave={(v) => saveContent('address_label', v)} />
+                    </p>
+                    <p className="mt-1 text-sm font-light leading-7 text-ivory/70">
+                      <InlineEdit value={brand.address} onSave={(v) => saveBrand('address', v)} />
+                    </p>
                  </div>
                </li>
                <li className="flex items-start gap-4">
                  <PhoneIcon className="mt-1 h-5 w-5 shrink-0 text-copper" />
                  <div>
-                    <p className="text-sm font-bold text-ivory">{content.phone_label}</p>
+                    <p className="text-sm font-bold text-ivory">
+                      <InlineEdit value={content.phone_label} onSave={(v) => saveContent('phone_label', v)} />
+                    </p>
                    <a
                      href={brand.phone_href}
                      dir="ltr"
                      className="mt-1 block text-sm font-light text-ivory/70 transition-colors hover:text-copper"
                    >
-                      {brand.phone}
+                      <InlineEdit value={brand.phone} onSave={(v) => saveBrand('phone', v)} />
                    </a>
                  </div>
                </li>
                <li className="flex items-start gap-4">
                  <MailIcon className="mt-1 h-5 w-5 shrink-0 text-copper" />
                  <div>
-                    <p className="text-sm font-bold text-ivory">{content.email_label}</p>
+                    <p className="text-sm font-bold text-ivory">
+                      <InlineEdit value={content.email_label} onSave={(v) => saveContent('email_label', v)} />
+                    </p>
                    <a
                      href={`mailto:${brand.email}`}
                      dir="ltr"
                      className="mt-1 block text-sm font-light text-ivory/70 transition-colors hover:text-copper"
                    >
-                      {brand.email}
+                      <InlineEdit value={brand.email} onSave={(v) => saveBrand('email', v)} />
                    </a>
                  </div>
                </li>
@@ -144,13 +168,16 @@ export function ContactSection() {
            </Reveal>
          </div>

-          <div className="border border-ivory/20 bg-char/45 p-8 backdrop-blur-[9px] md:p-10 lg:col-span-7">
+          <div className="relative border border-ivory/20 bg-char/45 p-8 backdrop-blur-[9px] md:p-10 lg:col-span-7">
+            <SingletonPill resource="contact_section" label="ویرایش برچسب‌ها و متن‌های فرم" className="absolute left-4 top-4" />
            {sent ? (
              <div className="flex h-full flex-col items-center justify-center py-14 text-center">
                <CheckCircle2Icon className="h-12 w-12 text-copper" />
-                <h3 className="mt-6 text-xl font-bold text-ivory">{content.success_title}</h3>
+                <h3 className="mt-6 text-xl font-bold text-ivory">
+                  <InlineEdit value={content.success_title} onSave={(v) => saveContent('success_title', v)} />
+                </h3>
                <p className="mt-3 max-w-sm text-sm font-light leading-8 text-ivory/70">
-                  {content.success_text}
+                  <InlineEdit multiline value={content.success_text} onSave={(v) => saveContent('success_text', v)} />
                </p>
                <Button
                  type="button"
@@ -161,14 +188,14 @@ export function ContactSection() {
                    setForm({ name: '', phone: '', note: '' })
                  }}
                >
-                  {content.success_button_label}
+                  <InlineEdit value={content.success_button_label} onSave={(v) => saveContent('success_button_label', v)} />
                </Button>
              </div>
            ) : (
              <form onSubmit={submit} noValidate className="grid gap-6 md:grid-cols-2">
                <div>
                  <label htmlFor="contact-name" className="block text-sm font-bold text-ivory/90">
-                    {content.name_label}
+                    <InlineEdit value={content.name_label} onSave={(v) => saveContent('name_label', v)} />
                  </label>
                  <input
                    id="contact-name"
@@ -182,7 +209,7 @@ export function ContactSection() {

                <div>
                  <label htmlFor="contact-phone" className="block text-sm font-bold text-ivory/90">
-                    {content.phone_field_label} <span className="text-copper">*</span>
+                    <InlineEdit value={content.phone_field_label} onSave={(v) => saveContent('phone_field_label', v)} /> <span className="text-copper">*</span>
                  </label>
                  <input
                    id="contact-phone"
@@ -198,7 +225,7 @@ export function ContactSection() {

                <div className="md:col-span-2">
                  <label htmlFor="contact-note" className="block text-sm font-bold text-ivory/90">
-                    {content.note_label} <span className="font-light text-ivory/50">{content.note_optional_label}</span>
+                    <InlineEdit value={content.note_label} onSave={(v) => saveContent('note_label', v)} /> <span className="font-light text-ivory/50">{content.note_optional_label}</span>
                  </label>
                  <textarea
                    id="contact-note"
@@ -212,7 +239,9 @@ export function ContactSection() {

                <div className="md:col-span-2">
                  <Button type="submit" variant="copper" className="w-full md:w-auto md:px-12" disabled={sending}>
-                    {sending ? content.sending_label : content.submit_label}
+                    {sending ? content.sending_label : (
+                      <InlineEdit value={content.submit_label} onSave={(v) => saveContent('submit_label', v)} />
+                    )}
                  </Button>
                </div>
              </form>
@@ -222,4 +251,4 @@ export function ContactSection() {
      </div>
    </section>
  )
-}
+}
@@ -2,6 +2,9 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { InstagramIcon, LinkedinIcon, MailIcon, MapPinIcon, PhoneIcon, SendIcon } from 'lucide-react';
 import { useSite } from '../api';
+import { useFieldSaver } from '../admin/AdminContext';
+import { InlineEdit } from './admin/InlineEdit';
+import { AddItemButton, EditableItem, SingletonPill } from '../admin/Editable';

 const SOCIAL_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
  instagram: InstagramIcon,
@@ -11,14 +14,30 @@ const SOCIAL_ICONS: Record<string, React.ComponentType<{ className?: string }>>

 export function Footer() {
  const { brand, services, nav, footer } = useSite();
+  const save = useFieldSaver();
+
+  const saveFooter = (field: string, value: string) =>
+    save('footer', footer.id, { [field]: value }, (d) => {
+      ;(d.footer as unknown as Record<string, unknown>)[field] = value;
+    });
+
+  const saveNav = (id: number, changes: Record<string, unknown>) =>
+    save('nav', id, changes, (d) => {
+      const item = d.nav.find((n) => n.id === id);
+      if (item) Object.assign(item, changes);
+    });
+
  return (
    <footer className="border-t border-ivory/10 bg-char">
      <div className="mx-auto max-w-site px-6 py-16 lg:px-10">
        <div className="grid gap-12 lg:grid-cols-12">
          <div className="lg:col-span-4">
-            <img src={brand.logo} alt={brand.name} className="h-20 w-auto object-contain" />
+            <div className="relative w-fit">
+              <img src={brand.logo} alt={brand.name} className="h-20 w-auto object-contain" />
+              <SingletonPill resource="brand" label="ویرایش برند، لوگو و تماس" className="absolute -left-10 top-1/2 -translate-y-1/2" />
+            </div>
            <p className="mt-6 max-w-sm text-sm font-light leading-8 text-ivory/55">
-              {footer.about_text}
+              <InlineEdit multiline value={footer.about_text} onSave={(v) => saveFooter('about_text', v)} />
            </p>
            <div className="mt-6 flex gap-3">
              {footer.socials.map(({ label, href, icon }) => {
@@ -38,26 +57,38 @@ export function Footer() {
          </div>

          <div className="lg:col-span-2">
-            <h3 className="text-sm font-bold text-copper">{footer.pages_heading}</h3>
+            <h3 className="text-sm font-bold text-copper">
+              <InlineEdit value={footer.pages_heading} onSave={(v) => saveFooter('pages_heading', v)} />
+            </h3>
            <ul className="mt-5 space-y-3">
              {nav.map((item) =>
-              <li key={item.href}>
-                  <Link
+              <EditableItem key={item.id} resource="nav" item={item}>
+                <li>
+                    <Link
                  to={item.href}
                  className="text-sm font-light text-ivory/60 transition-colors duration-200 ease-lux hover:text-copper">

-                    {item.label}
+                    <InlineEdit
+                      value={item.label}
+                      onSave={(v) => saveNav(item.id, { label: v })}
+                    />
                  </Link>
                </li>
+              </EditableItem>
              )}
            </ul>
+            <div className="mt-4">
+              <AddItemButton resource="nav" />
+            </div>
          </div>

          <div className="lg:col-span-3">
-            <h3 className="text-sm font-bold text-copper">{footer.services_heading}</h3>
+            <h3 className="text-sm font-bold text-copper">
+              <InlineEdit value={footer.services_heading} onSave={(v) => saveFooter('services_heading', v)} />
+            </h3>
            <ul className="mt-5 space-y-3">
              {services.map((service) =>
-              <li key={service.title} className="text-sm font-light text-ivory/60">
+              <li key={service.id} className="text-sm font-light text-ivory/60">
                  {service.title}
                </li>
              )}
@@ -65,7 +96,9 @@ export function Footer() {
          </div>

          <div className="lg:col-span-3">
-            <h3 className="text-sm font-bold text-copper">{footer.contact_heading}</h3>
+            <h3 className="text-sm font-bold text-copper">
+              <InlineEdit value={footer.contact_heading} onSave={(v) => saveFooter('contact_heading', v)} />
+            </h3>
            <ul className="mt-5 space-y-4 text-sm font-light text-ivory/60">
              <li className="flex items-start gap-3">
                <MapPinIcon className="mt-1 h-4 w-4 shrink-0 text-copper" />
@@ -88,8 +121,12 @@ export function Footer() {
        </div>

        <div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-ivory/10 pt-6 text-xs font-light text-ivory/40 md:flex-row">
-          <p>{footer.copyright}</p>
-          <p>{footer.tagline}</p>
+          <p>
+            <InlineEdit value={footer.copyright} onSave={(v) => saveFooter('copyright', v)} />
+          </p>
+          <p>
+            <InlineEdit value={footer.tagline} onSave={(v) => saveFooter('tagline', v)} />
+          </p>
        </div>
      </div>
    </footer>);
@@ -2,9 +2,19 @@ import React, { useEffect, useState } from "react";
 import { Link, NavLink, useLocation } from "react-router-dom";
 import { MenuIcon, PhoneIcon, XIcon } from "lucide-react";
 import { useSite } from "../api";
+import { useFieldSaver } from "../admin/AdminContext";
+import { InlineEdit } from "./admin/InlineEdit";
+import { EditableItem, SingletonPill } from "../admin/Editable";

 export function Header() {
  const { brand, nav } = useSite();
+  const save = useFieldSaver();
+
+  const saveNav = (id: number, changes: Record<string, unknown>) =>
+    save("nav", id, changes, (d) => {
+      const item = d.nav.find((n) => n.id === id);
+      if (item) Object.assign(item, changes);
+    });
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const { pathname } = useLocation();
@@ -28,6 +38,7 @@ export function Header() {
      }`}
    >
      <div className="mx-auto flex max-w-site items-center justify-between gap-8 px-6 py-4 lg:px-10">
+        <div className="relative flex items-center">
        <Link
          to="/"
          className="flex items-center gap-3"
@@ -41,11 +52,14 @@ export function Header() {
            }`}
          />
        </Link>
+          <SingletonPill resource="brand" label="ویرایش برند و لوگو" className="absolute -left-10 top-1/2 -translate-y-1/2" />
+        </div>

        <nav aria-label="ناوبری اصلی" className="hidden xl:block">
          <ul className="flex items-center gap-7">
            {nav.map((item) => (
-              <li key={item.href}>
+              <EditableItem key={item.id} resource="nav" item={item}>
+              <li>
                <NavLink
                  to={item.href}
                  className={({ isActive }) =>
@@ -56,7 +70,10 @@ export function Header() {
                >
                  {({ isActive }) => (
                    <>
-                      {item.label}
+                      <InlineEdit
+                        value={item.label}
+                        onSave={(v) => saveNav(item.id, { label: v })}
+                      />
                      <span
                        className={`absolute -bottom-0.5 left-0 right-0 h-px w-full origin-center bg-copper transition-transform duration-300 ease-lux ${
                          isActive
@@ -68,6 +85,7 @@ export function Header() {
                  )}
                </NavLink>
              </li>
+              </EditableItem>
            ))}
          </ul>
        </nav>
@@ -109,7 +127,8 @@ export function Header() {
        >
          <ul className="grid gap-1">
            {nav.map((item) => (
-              <li key={item.href}>
+              <EditableItem key={item.id} resource="nav" item={item}>
+              <li>
                <NavLink
                  to={item.href}
                  className={({ isActive }) =>
@@ -118,9 +137,13 @@ export function Header() {
                    }`
                  }
                >
-                  {item.label}
+                  <InlineEdit
+                    value={item.label}
+                    onSave={(v) => saveNav(item.id, { label: v })}
+                  />
                </NavLink>
              </li>
+              </EditableItem>
            ))}
          </ul>
        </nav>
@@ -2,52 +2,80 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import { motion } from 'framer-motion'
 import { ChevronLeftIcon } from 'lucide-react'
+import { usePageHero } from '../api'
+import { useFieldSaver } from '../admin/AdminContext'
+import { InlineEdit } from './admin/InlineEdit'
+import { ImageField } from './admin/ImageField'

 type PageHeroProps = {
-  title: string
-  lead: string
-  image: string
+  /** کلید هیرو صفحه در دیتابیس — عنوان/توضیح درجا ویرایش‌پذیر می‌شوند */
+  pageKey: string
 }

-export function PageHero({ title, lead, image }: PageHeroProps) {
+export function PageHero({ pageKey }: PageHeroProps) {
+  const hero = usePageHero(pageKey)
+  const save = useFieldSaver()
+
+  const saveField = (field: 'title' | 'lead' | 'image', value: string) =>
+    save('page-heroes', hero.id, { [field]: value }, (d) => {
+      const h = d.page_heroes.find((p) => p.id === hero.id)
+      if (h) (h as Record<string, unknown>)[field] = value
+    })
+
  return (
    <section className="relative flex h-[58vh] min-h-[420px] items-end overflow-hidden">
-      {image && <img src={image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />}
-      
+      {hero.image && <img src={hero.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />}
+
      <div className="absolute inset-0 bg-ink/50" aria-hidden="true" />
-      
+
      <div
        className="absolute inset-0"
        style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.1) 70%)' }}
        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">
            صفحه اصلی
          </Link>
          <ChevronLeftIcon className="h-3.5 w-3.5" />
-          <span className="text-copper">{title}</span>
+          <span className="text-copper">{hero.title}</span>
        </nav>
        <motion.h1
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, ease: [0.23, 1, 0.32, 1] }}
-          className="mt-5 max-w-[700px] text-hero font-bold text-ivory"
+          className="mt-5 max-w-[700px]"
        >
-          {title}
+          <InlineEdit
+            as="span"
+            value={hero.title}
+            onSave={(v) => saveField('title', v)}
+            className="block text-hero font-bold text-ivory"
+          />
        </motion.h1>
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.1, ease: [0.23, 1, 0.32, 1] }}
-          className="mt-5 max-w-2xl text-base font-light leading-9 text-ivory/65"
+          className="mt-5 max-w-2xl"
        >
-          {lead}
+          <InlineEdit
+            as="span"
+            multiline
+            value={hero.lead}
+            onSave={(v) => saveField('lead', v)}
+            className="block text-base font-light leading-9 text-ivory/65"
+          />
        </motion.p>
        <div className="mt-8 h-px w-28 bg-copper" />
+
+        {/* ویرایش تصویر پس‌زمینه — فقط در حالت ویرایش ادمین */}
+        <div className="mt-6 [&>div]:!mt-0">
+          <ImageField label="تصویر پس‌زمینه" value={hero.image} onSave={(url) => saveField('image', url)} />
+        </div>
      </div>
    </section>
  )
-}
+}
@@ -1,29 +1,58 @@
 import React from 'react'
 import { Reveal } from './Reveal'
+import { useSectionHeading } from '../api'
+import { useFieldSaver } from '../admin/AdminContext'
+import { InlineEdit } from './admin/InlineEdit'

 type SectionHeadingProps = {
-  title: string
+  /** در صورت ارسال، تیتر و توضیح از دیتابیس خوانده و به‌صورت درجا ویرایش‌پذیر می‌شوند */
+  headingKey?: string
+  title?: string
  lead?: string
  align?: 'right' | 'center'
  tone?: 'copper' | 'ivory'
 }

 export function SectionHeading({
+  headingKey,
  title,
  lead,
  align = 'right',
  tone = 'ivory',
 }: SectionHeadingProps) {
+  const heading = useSectionHeading(headingKey ?? '')
+  const save = useFieldSaver()
+  const isDb = !!headingKey
+  const currentTitle = isDb ? heading.title : (title ?? '')
+  const currentLead = isDb ? heading.lead : (lead ?? '')
  const isCenter = align === 'center'
+
+  const saveField = (field: 'title' | 'lead', value: string) =>
+    save('section-headings', heading.id, { [field]: value }, (d) => {
+      const h = d.section_headings.find((s) => s.id === heading.id)
+      if (h) (h as Record<string, unknown>)[field] = value
+    })
+
  return (
    <Reveal className={isCenter ? 'mx-auto max-w-2xl text-center' : 'max-w-2xl text-right'}>
-      <h2 className={`text-section font-bold ${tone === 'copper' ? 'text-copper' : 'text-ivory'}`}>
-        {title}
-      </h2>
-      
-      {lead && <p className="mt-5 text-base font-light leading-9 text-ivory/60">{lead}</p>}
-      
+      <InlineEdit
+        as="h2"
+        value={currentTitle}
+        onSave={(v) => saveField('title', v)}
+        className={`text-section font-bold ${tone === 'copper' ? 'text-copper' : 'text-ivory'}`}
+      />
+
+      {currentLead && (
+        <InlineEdit
+          as="p"
+          multiline
+          value={currentLead}
+          onSave={(v) => saveField('lead', v)}
+          className="mt-5 text-base font-light leading-9 text-ivory/60"
+        />
+      )}
+
      <div className={`mt-6 h-px w-24 bg-copper/70 ${isCenter ? 'mx-auto' : ''}`} />
    </Reveal>
  )
-}
+}
@@ -0,0 +1,81 @@
+import { useRef, useState } from 'react'
+import { ImagePlusIcon, Loader2Icon } from 'lucide-react'
+import { adminApi } from '../../admin/adminClient'
+import { useAdmin } from '../../admin/AdminContext'
+
+type ImageFieldProps = {
+  label: string
+  value: string
+  onSave: (url: string) => Promise<boolean>
+}
+
+/**
+ * انتخاب و آپلود تصویر به MinIO — در کشوهای ویرایش استفاده می‌شود.
+ * پس از آپلود موفق، URL نسبی /media/... ذخیره می‌شود.
+ */
+export function ImageField({ label, value, onSave }: ImageFieldProps) {
+  const { runSave, isAuthenticated, isEditMode } = useAdmin()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [uploading, setUploading] = useState(false)
+
+  if (!isAuthenticated || !isEditMode) return null
+
+  const pick = async (file: File | undefined) => {
+    if (!file) return
+    setUploading(true)
+    try {
+      await runSave(async () => {
+        const { url } = await adminApi.upload(file)
+        const ok = await onSave(url)
+        if (!ok) throw new Error('ذخیره نشد')
+      })
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return (
+    <div>
+      <p className="text-xs font-bold text-ivory/80">{label}</p>
+      <div className="mt-2 flex items-center gap-3">
+        {value ? (
+          <img
+            src={value}
+            alt={label}
+            className="h-16 w-24 border border-ivory/15 object-cover"
+          />
+        ) : (
+          <div className="flex h-16 w-24 items-center justify-center border border-dashed border-ivory/20 text-ivory/30">
+            —
+          </div>
+        )}
+        <div className="min-w-0 flex-1">
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            disabled={uploading}
+            className="flex items-center gap-2 border border-ivory/20 px-4 py-2 text-xs font-light text-ivory/80 transition-colors duration-200 hover:border-copper hover:text-copper disabled:opacity-50"
+          >
+            {uploading ? (
+              <Loader2Icon className="h-3.5 w-3.5 animate-spin" />
+            ) : (
+              <ImagePlusIcon className="h-3.5 w-3.5" />
+            )}
+            {uploading ? 'در حال آپلود…' : 'انتخاب تصویر'}
+          </button>
+          {value && <p className="mt-1.5 truncate text-[10px] font-light text-ivory/35" dir="ltr">{value}</p>}
+        </div>
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
+        className="hidden"
+        onChange={(e) => {
+          void pick(e.target.files?.[0])
+          e.target.value = ''
+        }}
+      />
+    </div>
+  )
+}
@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from 'react'
+import type { CSSProperties, ElementType, KeyboardEvent } from 'react'
+import { useAdmin } from '../../admin/AdminContext'
+
+type InlineEditProps = {
+  value: string
+  /** ذخیره async — در صورت خطا، متن به مقدار قبلی برمی‌گردد */
+  onSave: (value: string) => Promise<boolean> | boolean | void
+  as?: ElementType
+  /** چندخطی: Enter خط جدید می‌گذارد و فقط blur ذخیره می‌کند */
+  multiline?: boolean
+  className?: string
+  style?: CSSProperties
+  'aria-label'?: string
+}
+
+/**
+ * ویرایش درجا متن — در حالت عادی دقیقاً همان HTML قبلی را رندر می‌کند
+ * (بدون هیچ تغییر چیدمان) و فقط در Edit Mode برای ادمین قابل ویرایش می‌شود.
+ */
+export function InlineEdit({
+  value,
+  onSave,
+  as: Tag = 'span',
+  multiline = false,
+  className = '',
+  style,
+  ...rest
+}: InlineEditProps) {
+  const { isAuthenticated, isEditMode } = useAdmin()
+  const editing = isAuthenticated && isEditMode
+  const ref = useRef<HTMLElement>(null)
+  const [focused, setFocused] = useState(false)
+
+  // همگام‌سازی متن فقط وقتی المان در حال ویرایش نیست (پرش نشانگر رخ ندهد)
+  useEffect(() => {
+    const el = ref.current
+    if (el && !focused && el.innerText !== value) el.innerText = value
+  }, [value, focused])
+
+  if (!editing) {
+    return (
+      <Tag className={className} style={style} {...rest}>
+        {value}
+      </Tag>
+    )
+  }
+
+  const commit = async () => {
+    const el = ref.current
+    if (!el) return
+    setFocused(false)
+    const next = el.innerText.replace(/\u00a0/g, ' ')
+    if (next === value) return
+    el.innerText = value // بازگشت فوری به مقدار فعلی؛ در صورت موفقیت، به‌روزرسانی خوش‌بینانه متن تازه می‌آید
+    await onSave(next)
+  }
+
+  const onKeyDown = (e: KeyboardEvent<HTMLElement>) => {
+    if (!multiline && e.key === 'Enter') {
+      e.preventDefault()
+      ;(e.currentTarget as HTMLElement).blur()
+    }
+    if (e.key === 'Escape') {
+      if (ref.current) ref.current.innerText = value
+      ;(e.currentTarget as HTMLElement).blur()
+    }
+  }
+
+  return (
+    <Tag
+      ref={ref as never}
+      contentEditable
+      suppressContentEditableWarning
+      spellCheck={false}
+      data-inline-edit
+      aria-label={rest['aria-label']}
+      className={`${className} cursor-text rounded-sm transition-[outline-color,background-color] duration-150 outline-1 outline-dashed outline-transparent hover:bg-copper/5 hover:outline-copper/40 focus:bg-copper/5 focus:outline-copper focus:outline-solid`}
+      style={style}
+      onFocus={() => setFocused(true)}
+      onBlur={commit}
+      onKeyDown={onKeyDown}
+    >
+      {value}
+    </Tag>
+  )
+}
@@ -4,28 +4,43 @@ import { Reveal } from '../Reveal';
 import { ButtonLink } from '../Button';
 import { ArticleCard } from '../ArticleCard';
 import { useSectionHeading, useSite } from '../../api';
+import { useFieldSaver } from '../../admin/AdminContext';
+import { InlineEdit } from '../admin/InlineEdit';
+import { AddItemButton, EditableItem } from '../../admin/Editable';

 export function Articles() {
  const { articles } = useSite();
  const heading = useSectionHeading('articles');
+  const save = useFieldSaver();
+
+  const saveHeading = (field: 'label' | 'title' | 'lead' | 'cta_label', value: string) =>
+    save('section-headings', heading.id, { [field]: value }, (d) => {
+      const h = d.section_headings.find((s) => s.id === heading.id);
+      if (h) (h as Record<string, unknown>)[field] = value;
+    });
+
  return (
    <section className="bg-char py-24 lg:py-32" aria-labelledby="articles-title">
      <div className="mx-auto max-w-site px-6 lg:px-10">
        <Reveal className="max-w-2xl text-right">
-          <p className="text-sm font-light text-copper">{heading.label}</p>
+          <p className="text-sm font-light text-copper">
+            <InlineEdit value={heading.label} onSave={(v) => saveHeading('label', v)} />
+          </p>
          <h2 id="articles-title" className="mt-5 text-section font-bold text-ivory">
-            {heading.title}
+            <InlineEdit value={heading.title} onSave={(v) => saveHeading('title', v)} />
          </h2>
          <p className="mt-5 text-base font-light leading-9 text-ivory/60">
-            {heading.lead}
+            <InlineEdit multiline value={heading.lead} onSave={(v) => saveHeading('lead', v)} />
          </p>
          <div className="mt-6 h-px w-24 bg-copper/70" />
        </Reveal>

        <div className="mt-14 grid gap-6 lg:grid-cols-3">
          {articles.slice(0, 3).map((article, i) =>
-          <Reveal key={article.slug} delay={0.06 * i} className="h-full">
-              <ArticleCard article={article} />
+          <Reveal key={article.id} delay={0.06 * i} className="h-full">
+              <EditableItem resource="articles" item={article} className="h-full">
+                <ArticleCard article={article} />
+              </EditableItem>
            </Reveal>
          )}
        </div>
@@ -34,13 +49,16 @@ export function Articles() {
          <Reveal delay={0.1}>
            <div className="mt-12 flex justify-center">
              <ButtonLink to={heading.cta_href} variant="outline" className="font-light">
-                {heading.cta_label}
+                <InlineEdit value={heading.cta_label} onSave={(v) => saveHeading('cta_label', v)} />
                <ArrowLeftIcon className="h-4 w-4" />
              </ButtonLink>
            </div>
          </Reveal>
        )}
+        <div className="mt-6">
+          <AddItemButton resource="articles" />
+        </div>
      </div>
    </section>);

-}
+}
@@ -3,6 +3,7 @@ import { MoveHorizontalIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { SectionHeading } from '../SectionHeading'
 import { useSite } from '../../api'
+import { SingletonPill } from '../../admin/Editable'

 export function BeforeAfter() {
  const { before_after } = useSite()
@@ -54,6 +55,10 @@ export function BeforeAfter() {
          align="center"
        />

+        <div className="flex justify-start">
+          <SingletonPill resource="before_after" label="ویرایش تصاویر و برچسب‌های قبل/بعد" />
+        </div>
+
        <Reveal delay={0.1}>
          <div
            ref={containerRef}
@@ -3,7 +3,8 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { PlusIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { SectionHeading } from '../SectionHeading'
-import { useSectionHeading, useSite } from '../../api'
+import { useSite } from '../../api'
+import { AddItemButton, EditableItem } from '../../admin/Editable'

 type FaqProps = {
  hideHeading?: boolean;
@@ -11,19 +12,19 @@ type FaqProps = {

 export function Faq({ hideHeading = false }: FaqProps) {
  const { faqs } = useSite()
-  const heading = useSectionHeading('faq')
  const [open, setOpen] = useState<number | null>(0)

  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="faq-title">
-    
+
      <div className={hideHeading ? "mx-auto max-w-4xl px-6 lg:px-10" : "mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10"}>
-        
+
        {!hideHeading && (
          <div className="lg:col-span-4">
            <SectionHeading
-              title={heading.title}
-              lead={heading.lead}
+              title="سوالات متداول"
+              lead="پاسخ کوتاه به پرتکرارترین پرسش‌های سرمایه‌گذاران و خریداران."
+              headingKey="faq"
            />
          </div>
        )}
@@ -33,43 +34,48 @@ export function Faq({ hideHeading = false }: FaqProps) {
            {faqs.map((faq, i) => {
              const isOpen = open === i
              return (
-                <Reveal key={faq.question} delay={0.04 * i}>
-                  <li className="border-b border-ivory/10">
-                    <button
-                      type="button"
-                      onClick={() => setOpen(isOpen ? null : i)}
-                      aria-expanded={isOpen}
-                      className="flex w-full items-center justify-between gap-6 py-6 text-right transition-colors duration-200 ease-lux hover:text-copper"
-                    >
-                      <span className={`text-base font-bold md:text-lg ${isOpen ? 'text-copper' : 'text-ivory'}`}>
-                        {faq.question}
-                      </span>
-                      <PlusIcon
-                        className={`h-5 w-5 shrink-0 text-copper transition-transform duration-300 ease-lux ${
-                          isOpen ? 'rotate-45' : ''
-                        }`}
-                      />
-                    </button>
-                    <AnimatePresence initial={false}>
-                      {isOpen && (
-                        <motion.div
-                          initial={{ height: 0, opacity: 0 }}
-                          animate={{ height: 'auto', opacity: 1 }}
-                          exit={{ height: 0, opacity: 0 }}
-                          transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
-                          className="overflow-hidden"
-                        >
-                          <p className="pb-7 pl-10 text-sm font-light leading-9 text-ivory/60">{faq.answer}</p>
-                        </motion.div>
-                      )}
-                    </AnimatePresence>
-                  </li>
+                <Reveal key={faq.id} delay={0.04 * i}>
+                  <EditableItem resource="faqs" item={faq}>
+                    <li className="border-b border-ivory/10">
+                      <button
+                        type="button"
+                        onClick={() => setOpen(isOpen ? null : i)}
+                        aria-expanded={isOpen}
+                        className="flex w-full items-center justify-between gap-6 py-6 text-right transition-colors duration-200 ease-lux hover:text-copper"
+                      >
+                        <span className={`text-base font-bold md:text-lg ${isOpen ? 'text-copper' : 'text-ivory'}`}>
+                          {faq.question}
+                        </span>
+                        <PlusIcon
+                          className={`h-5 w-5 shrink-0 text-copper transition-transform duration-300 ease-lux ${
+                            isOpen ? 'rotate-45' : ''
+                          }`}
+                        />
+                      </button>
+                      <AnimatePresence initial={false}>
+                        {isOpen && (
+                          <motion.div
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: 'auto', opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
+                            className="overflow-hidden"
+                          >
+                            <p className="pb-7 pl-10 text-sm font-light leading-9 text-ivory/60">{faq.answer}</p>
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </li>
+                  </EditableItem>
                </Reveal>
              )
            })}
          </ul>
+          <div className="mt-8">
+            <AddItemButton resource="faqs" />
+          </div>
        </div>
      </div>
    </section>
  )
-}
+}
@@ -6,16 +6,27 @@ import { ButtonLink } from '../Button'
 import { ProjectCard } from '../ProjectCard'
 import { SectionHeading } from '../SectionHeading'
 import { useSectionHeading, useSite, useStatusLabel } from '../../api'
+import { useFieldSaver } from '../../admin/AdminContext'
+import { InlineEdit } from '../admin/InlineEdit'
+import { AddItemButton, EditableItem } from '../../admin/Editable'
 import type { ProjectStatus } from '../../data/site'

 export function FeaturedProjects() {
-  const { projects } = useSite()
+  const { projects, status_labels } = useSite()
  const heading = useSectionHeading('featured_projects')
-  const doneLabel = useStatusLabel('done')
-  const progressLabel = useStatusLabel('progress')
+  const save = useFieldSaver()
+  const saveStatusLabel = (key: string, value: string) => {
+    const label = status_labels.find((s) => s.key === key)
+    if (!label) return
+    void save('status-labels', label.id, { label: value }, (d) => {
+      const s = d.status_labels.find((x) => x.id === label.id)
+      if (s) s.label = value
+    })
+  }
+
  const FILTERS: { key: ProjectStatus; label: string }[] = [
-    { key: 'done', label: doneLabel },
-    { key: 'progress', label: progressLabel },
+    { key: 'done', label: useStatusLabel('done') },
+    { key: 'progress', label: useStatusLabel('progress') },
  ]
  const [status, setStatus] = useState<ProjectStatus>('done')
  const list = projects.filter((p) => p.status === status).slice(0, 3)
@@ -23,7 +34,7 @@ export function FeaturedProjects() {
  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="projects-title">
      <div className="mx-auto max-w-site px-6 lg:px-10">
-        <SectionHeading title={heading.title} lead={heading.lead} />
+        <SectionHeading title={heading.title} lead={heading.lead} headingKey="featured_projects" />

        <div className="mt-10 flex flex-wrap items-center gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
          {FILTERS.map((filter) => (
@@ -46,7 +57,10 @@ export function FeaturedProjects() {
                />
              )}
              <span className="relative z-10 transition-colors duration-300 ease-out group-hover:text-char">
-                {filter.label}
+                <InlineEdit
+                  value={filter.label}
+                  onSave={(v) => saveStatusLabel(filter.key, v)}
+                />
              </span>
            </button>
          ))}
@@ -55,7 +69,7 @@ export function FeaturedProjects() {
        <div className="mt-10 min-h-[420px]">
          <AnimatePresence mode="wait">
            <motion.div
-              key={status} 
+              key={status}
              initial={{ opacity: 0, y: 15 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -15 }}
@@ -64,13 +78,15 @@ export function FeaturedProjects() {
            >
              {list.map((project, i) => (
                <motion.div
-                  key={project.slug}
+                  key={project.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: i * 0.1, ease: [0.23, 1, 0.32, 1] }}
                  className="h-full"
                >
-                  <ProjectCard project={project} />
+                  <EditableItem resource="projects" item={project} className="h-full">
+                    <ProjectCard project={project} />
+                  </EditableItem>
                </motion.div>
              ))}
            </motion.div>
@@ -81,7 +97,15 @@ export function FeaturedProjects() {
          <Reveal delay={0.1}>
            <div className="mt-12 flex justify-center">
              <ButtonLink to={heading.cta_href} variant="outline" className="font-light">
-                {heading.cta_label}
+                <InlineEdit
+                  value={heading.cta_label}
+                  onSave={(v) =>
+                    save('section-headings', heading.id, { cta_label: v }, (d) => {
+                      const h = d.section_headings.find((s) => s.id === heading.id)
+                      if (h) h.cta_label = v
+                    })
+                  }
+                />
                <ArrowLeftIcon className="h-4 w-4" />
              </ButtonLink>
            </div>
@@ -90,4 +114,4 @@ export function FeaturedProjects() {
      </div>
    </section>
  )
-}
+}
@@ -3,11 +3,11 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronLeftIcon, ChevronRightIcon, XIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { SectionHeading } from '../SectionHeading'
-import { useSectionHeading, useSite } from '../../api'
+import { useSite } from '../../api'
+import { AddItemButton, EditableItem } from '../../admin/Editable'

 export function Gallery() {
  const { gallery } = useSite()
-  const heading = useSectionHeading('gallery')
  const [active, setActive] = useState<number | null>(null)

  const close = useCallback(() => setActive(null), [])
@@ -30,33 +30,37 @@ export function Gallery() {
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="gallery-title">
      <div className="mx-auto max-w-site px-6 lg:px-10">
        <SectionHeading
-          title={heading.title}
-          lead={heading.lead}
+          title="گالری تصاویر"
+          lead="قاب‌هایی از کارگاه‌ها و پروژه‌های تحویل‌شده گروه ساختمانی آرامش."
+          headingKey="gallery"
          align="center"
        />

        <div className="mt-14 grid grid-cols-2 gap-4 lg:grid-cols-3">
          {gallery.map((image, i) => (
            <Reveal key={image.id} delay={0.04 * i}>
-              <button
-                type="button"
-                onClick={() => setActive(i)}
-                className="group block w-full overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
-                aria-label={`بزرگ‌نمایی تصویر شماره ${(i + 1).toLocaleString('fa-IR')}`}
-              >
-                <img
-                  src={image.src}
-                  alt={image.alt}
-                  className="aspect-[4/3] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
-                />
-              </button>
+              <EditableItem resource="gallery" item={image}>
+                <button
+                  type="button"
+                  onClick={() => setActive(i)}
+                  className="group block w-full overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
+                  aria-label={`بزرگ‌نمایی تصویر شماره ${(i + 1).toLocaleString('fa-IR')}`}
+                >
+                  <img
+                    src={image.src}
+                    alt={image.alt}
+                    className="aspect-[4/3] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
+                  />
+                </button>
+              </EditableItem>
            </Reveal>
          ))}
+          <AddItemButton resource="gallery" />
        </div>
      </div>

      <AnimatePresence>
-        {active !== null && (
+        {active !== null && gallery[active] && (
          <motion.div
            className="fixed inset-0 z-[80] flex items-center justify-center bg-char/80 backdrop-blur-lg p-6"
            initial={{ opacity: 0 }}
@@ -116,4 +120,4 @@ export function Gallery() {
      </AnimatePresence>
    </section>
  )
-}
+}
@@ -3,14 +3,23 @@ import { motion, useScroll, useTransform } from 'framer-motion'
 import { ArrowLeftIcon, ChevronDownIcon } from 'lucide-react'
 import { ButtonLink } from '../Button'
 import { useSite } from '../../api'
+import { useFieldSaver } from '../../admin/AdminContext'
+import { InlineEdit } from '../admin/InlineEdit'
+import { SingletonPill } from '../../admin/Editable'

 export function Hero() {
  const { brand, hero } = useSite()
+  const save = useFieldSaver()
  const { scrollY } = useScroll()
  const imageY = useTransform(scrollY, [0, 700], [0, 110])
  const contentY = useTransform(scrollY, [0, 700], [0, -55])
  const overlay = useTransform(scrollY, [0, 600], [0.5, 0.78])

+  const saveHero = (field: string, value: unknown) =>
+    save('hero', hero.id, { [field]: value }, (d) => {
+      ;(d.hero as unknown as Record<string, unknown>)[field] = value
+    })
+
  // واژه highlight در میانه تیتر با رنگ مسی رندر می‌شود
  const renderTitle = () => {
    if (hero.title_highlight && hero.title.includes(hero.title_highlight)) {
@@ -55,7 +64,7 @@ export function Hero() {
            transition={{ duration: 0.7, delay: 2.1, ease: [0.23, 1, 0.32, 1] }}
            className="text-sm font-light text-copper"
          >
-            {hero.kicker}
+            <InlineEdit value={hero.kicker} onSave={(v) => saveHero('kicker', v)} />
          </motion.p>

          <motion.h1
@@ -64,7 +73,7 @@ export function Hero() {
            transition={{ duration: 0.85, delay: 2.2, ease: [0.23, 1, 0.32, 1] }}
            className="mt-6 text-hero font-bold text-ivory"
          >
-            {renderTitle()}
+            <InlineEdit value={hero.title} onSave={(v) => saveHero('title', v)} aria-label="تیتر اصلی صفحه" />
          </motion.h1>

          <motion.p
@@ -73,7 +82,7 @@ export function Hero() {
            transition={{ duration: 0.85, delay: 2.32, ease: [0.23, 1, 0.32, 1] }}
            className="mt-7 max-w-xl text-base font-light leading-9 text-ivory/70"
          >
-            {hero.subtitle}
+            <InlineEdit multiline value={hero.subtitle} onSave={(v) => saveHero('subtitle', v)} />
          </motion.p>

          <motion.div
@@ -83,11 +92,11 @@ export function Hero() {
            className="mt-10 flex flex-wrap items-center gap-4"
          >
            <ButtonLink to={hero.cta_primary_href} variant="copper">
-              {hero.cta_primary_label}
+              <InlineEdit value={hero.cta_primary_label} onSave={(v) => saveHero('cta_primary_label', v)} />
              <ArrowLeftIcon className="h-4 w-4" />
            </ButtonLink>
            <ButtonLink to={hero.cta_secondary_href} variant="outline" className="font-light">
-              {hero.cta_secondary_label}
+              <InlineEdit value={hero.cta_secondary_label} onSave={(v) => saveHero('cta_secondary_label', v)} />
            </ButtonLink>
          </motion.div>
        </div>
@@ -98,8 +107,12 @@ export function Hero() {
          transition={{ duration: 0.9, delay: 2.6, ease: [0.23, 1, 0.32, 1] }}
          className="absolute bottom-28 left-6 hidden w-60 border border-ivory/15 bg-char/60 p-6 backdrop-blur-md lg:block lg:left-10"
        >
-          <p className="text-3xl font-bold text-copper">{hero.badge_value}</p>
-          <p className="mt-2 text-sm font-light leading-7 text-ivory/70">{hero.badge_label}</p>
+          <p className="text-3xl font-bold text-copper">
+            <InlineEdit value={hero.badge_value} onSave={(v) => saveHero('badge_value', v)} />
+          </p>
+          <p className="mt-2 text-sm font-light leading-7 text-ivory/70">
+            <InlineEdit multiline value={hero.badge_label} onSave={(v) => saveHero('badge_label', v)} />
+          </p>
        </motion.div>
      </motion.div>

@@ -108,9 +121,17 @@ export function Hero() {
        aria-label="رفتن به بخش بعدی"
        className="absolute bottom-8 right-1/2 z-10 flex translate-x-1/2 flex-col items-center gap-2 text-ivory/50 transition-colors duration-200 ease-lux hover:text-copper"
      >
-        <span className="text-xs font-light">{hero.scroll_label}</span>
+        <span className="text-xs font-light">
+          <InlineEdit value={hero.scroll_label} onSave={(v) => saveHero('scroll_label', v)} />
+        </span>
        <ChevronDownIcon className="h-4 w-4 animate-bounce" />
      </a>
+
+      <SingletonPill
+        resource="hero"
+        label="تنظیمات هیرو (واژه مسی، دکمه‌ها)"
+        className="absolute left-6 top-24 z-20 lg:left-10"
+      />
    </section>
  )
 }
@@ -4,14 +4,23 @@ import Swal from 'sweetalert2'
 import { Reveal } from '../Reveal'
 import { Button } from '../Button'
 import { useSite } from '../../api'
+import { useFieldSaver } from '../../admin/AdminContext'
+import { InlineEdit } from '../admin/InlineEdit'
+import { SingletonPill } from '../../admin/Editable'
 import { API_URL } from '../../config'

 export function Newsletter() {
  const { newsletter } = useSite()
+  const save = useFieldSaver()
  const [email, setEmail] = useState('')
  const [status, setStatus] = useState<'idle' | 'error' | 'done'>('idle')
  const [sending, setSending] = useState(false)

+  const saveContent = (field: string, value: string) =>
+    save('newsletter', newsletter.id, { [field]: value }, (d) => {
+      ;(d.newsletter as unknown as Record<string, unknown>)[field] = value
+    })
+
  const showErrorAlert = (title: string, text: string) => {
    Swal.fire({
      icon: 'warning',
@@ -87,14 +96,15 @@ export function Newsletter() {
  }

  return (
-    <section className="bg-copper py-16" aria-labelledby="newsletter-title">
+    <section className="relative bg-copper py-16" aria-labelledby="newsletter-title">
+      <SingletonPill resource="newsletter" label="ویرایش متن‌های خبرنامه" className="absolute left-4 top-4" />
      <div className="mx-auto grid max-w-site items-center gap-8 px-6 lg:grid-cols-2 lg:px-10">
        <Reveal>
          <h2 id="newsletter-title" className="text-2xl font-bold leading-relaxed text-char md:text-3xl">
-            {newsletter.title}
+            <InlineEdit value={newsletter.title} onSave={(v) => saveContent('title', v)} />
          </h2>
          <p className="mt-3 max-w-md text-sm font-light leading-8 text-char/75">
-            {newsletter.lead}
+            <InlineEdit multiline value={newsletter.lead} onSave={(v) => saveContent('lead', v)} />
          </p>
        </Reveal>

@@ -127,11 +137,13 @@ export function Newsletter() {

            <Button type="submit" variant="dark-ivory" disabled={sending}>
              <SendIcon className="h-4 w-4" />
-              {sending ? newsletter.sending_label : newsletter.button_label}
+              {sending ? newsletter.sending_label : (
+                <InlineEdit value={newsletter.button_label} onSave={(v) => saveContent('button_label', v)} />
+              )}
            </Button>
          </form>
        </Reveal>
      </div>
    </section>
  )
-}
+}
@@ -2,41 +2,55 @@ import React from 'react'
 import { Reveal } from '../Reveal'
 import { ServiceIcon } from '../ServiceIcon'
 import { useSectionHeading, useSite } from '../../api'
+import { useFieldSaver } from '../../admin/AdminContext'
+import { InlineEdit } from '../admin/InlineEdit'
+import { AddItemButton, EditableItem } from '../../admin/Editable'

 export function Services() {
  const { services } = useSite()
  const heading = useSectionHeading('services')
+  const save = useFieldSaver()
+
+  const saveHeading = (field: 'title' | 'lead', value: string) =>
+    save('section-headings', heading.id, { [field]: value }, (d) => {
+      const h = d.section_headings.find((s) => s.id === heading.id)
+      if (h) h[field] = value
+    })
+
  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="services-title">
      <div className="mx-auto max-w-site px-6 lg:px-10">
        <Reveal className="max-w-2xl text-right">

          <h2 id="services-title" className="text-section font-bold text-ivory">
-           {heading.title}
+            <InlineEdit value={heading.title} onSave={(v) => saveHeading('title', v)} />
          </h2>
          <p className="mt-5 text-base font-light leading-9 text-ivory/60">
-            {heading.lead}
+            <InlineEdit multiline value={heading.lead} onSave={(v) => saveHeading('lead', v)} />
          </p>
          <div className="mt-6 h-px w-24 bg-copper/70" />
        </Reveal>

        <div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {services.map((service, i) => (
-            <Reveal key={service.title} delay={0.04 * i} className="h-full">
-              <article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-8 text-center transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
-                <ServiceIcon
-                  name={service.icon}
-                  className="h-12 w-12 text-copper/85 transition-colors duration-300 ease-out group-hover:text-copper"
-                />
-                <h3 className="mt-6 text-lg font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
-                  {service.title}
-                </h3>
-                <p className="mt-3 text-sm font-light leading-8 text-ivory/55">{service.desc}</p>
-              </article>
+            <Reveal key={service.id} delay={0.04 * i} className="h-full">
+              <EditableItem resource="services" item={service} className="h-full">
+                <article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-8 text-center transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
+                  <ServiceIcon
+                    name={service.icon}
+                    className="h-12 w-12 text-copper/85 transition-colors duration-300 ease-out group-hover:text-copper"
+                  />
+                  <h3 className="mt-6 text-lg font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
+                    {service.title}
+                  </h3>
+                  <p className="mt-3 text-sm font-light leading-8 text-ivory/55">{service.desc}</p>
+                </article>
+              </EditableItem>
            </Reveal>
          ))}
+          <AddItemButton resource="services" />
        </div>
      </div>
    </section>
  )
-}
+}
@@ -1,6 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useInView } from 'framer-motion';
 import { useSite } from '../../api';
+import { useFieldSaver } from '../../admin/AdminContext';
+import { AddItemButton, EditableItem } from '../../admin/Editable';
+import { InlineEdit } from '../admin/InlineEdit';

 function toFa(n: number) {
  return n.toLocaleString('fa-IR');
@@ -29,19 +32,39 @@ function Counter({ value }: {value: number;}) {

 export function Stats() {
  const { stats } = useSite();
+  const save = useFieldSaver();
+
  return (
    <section className="bg-char py-16" aria-label="آمار و ارقام">
      <div className="mx-auto grid max-w-site grid-cols-2 gap-y-12 px-6 lg:grid-cols-4 lg:px-10">
        {stats.map((stat) =>
-        <div key={stat.label} className="text-center">
+        <EditableItem key={stat.id} resource="stats" item={stat}>
+          <div className="text-center">
            <p className="text-4xl font-bold text-copper md:text-5xl">
              <Counter value={stat.value} />
-              {stat.suffix && <span className="mr-1 text-2xl">{stat.suffix}</span>}
+              <InlineEdit
+                value={stat.suffix}
+                onSave={(v) => save('stats', stat.id, { suffix: v }, (d) => {
+                  const s = d.stats.find((x) => x.id === stat.id);
+                  if (s) s.suffix = v;
+                })}
+                className="mr-1 text-2xl"
+              />
+            </p>
+            <p className="mt-3 text-sm font-light text-ivory/55">
+              <InlineEdit
+                value={stat.label}
+                onSave={(v) => save('stats', stat.id, { label: v }, (d) => {
+                  const s = d.stats.find((x) => x.id === stat.id);
+                  if (s) s.label = v;
+                })}
+              />
            </p>
-            <p className="mt-3 text-sm font-light text-ivory/55">{stat.label}</p>
          </div>
+        </EditableItem>
        )}
+        <AddItemButton resource="stats" />
      </div>
    </section>);

-}
+}
@@ -3,6 +3,9 @@ import { ArrowLeftIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { ButtonLink } from '../Button'
 import { useSite } from '../../api'
+import { useFieldSaver } from '../../admin/AdminContext'
+import { InlineEdit } from '../admin/InlineEdit'
+import { SingletonPill } from '../../admin/Editable'

 type StoryProps = {
  showLink?: boolean;
@@ -14,6 +17,19 @@ type StoryProps = {

 export function Story({ showLink = true, showLabel = true, showQuote = false, alignTop = false, children }: StoryProps) {
  const { story } = useSite()
+  const save = useFieldSaver()
+
+  const saveStory = (field: string, value: unknown) =>
+    save('story', story.id, { [field]: value }, (d) => {
+      ;(d.story as unknown as Record<string, unknown>)[field] = value
+    })
+
+  const saveParagraph = (index: number, value: string) => {
+    const paragraphs = [...story.paragraphs]
+    paragraphs[index] = value
+    void saveStory('paragraphs', paragraphs)
+  }
+
  return (
    <section id="story" className="bg-ink py-24 lg:py-32" aria-labelledby="story-title">
      <div className={`mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-2 lg:px-10 ${alignTop ? 'items-start' : 'items-center'}`}>
@@ -21,7 +37,7 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
          {showLabel && (
            <Reveal>
              <h2 id="story-title" className="text-section font-bold text-ivory">
-                {story.title}
+                <InlineEdit value={story.title} onSave={(v) => saveStory('title', v)} />
              </h2>
              <div className="mt-6 h-px w-24 bg-copper/70" />
            </Reveal>
@@ -30,7 +46,7 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
          <Reveal delay={0.08}>
            {story.paragraphs.map((paragraph, i) => (
              <p key={i} className={`text-base font-light leading-9 text-ivory/65 ${i === 0 ? 'mt-8' : 'mt-5'}`}>
-                {paragraph}
+                <InlineEdit multiline value={paragraph} onSave={(v) => saveParagraph(i, v)} />
              </p>
            ))}
          </Reveal>
@@ -38,12 +54,20 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
          <Reveal delay={0.16}>
            <div className="mt-10 grid grid-cols-2 gap-8 border-t border-ivory/10 pt-8">
              <div>
-                <p className="text-2xl font-bold text-copper">{story.stat1_value}</p>
-                <p className="mt-2 text-sm font-light text-ivory/55">{story.stat1_label}</p>
+                <p className="text-2xl font-bold text-copper">
+                  <InlineEdit value={story.stat1_value} onSave={(v) => saveStory('stat1_value', v)} />
+                </p>
+                <p className="mt-2 text-sm font-light text-ivory/55">
+                  <InlineEdit value={story.stat1_label} onSave={(v) => saveStory('stat1_label', v)} />
+                </p>
              </div>
              <div>
-                <p className="text-2xl font-bold text-copper">{story.stat2_value}</p>
-                <p className="mt-2 text-sm font-light text-ivory/55">{story.stat2_label}</p>
+                <p className="text-2xl font-bold text-copper">
+                  <InlineEdit value={story.stat2_value} onSave={(v) => saveStory('stat2_value', v)} />
+                </p>
+                <p className="mt-2 text-sm font-light text-ivory/55">
+                  <InlineEdit value={story.stat2_label} onSave={(v) => saveStory('stat2_label', v)} />
+                </p>
              </div>
            </div>
          </Reveal>
@@ -51,8 +75,12 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
          {showQuote && story.quote && (
            <Reveal delay={0.2}>
              <div className="mt-12 border-r-2 border-copper bg-char/40 p-6">
-                <p className="text-sm font-light leading-8 text-ivory/80">{story.quote}</p>
-                <p className="mt-5 text-sm font-bold text-copper">{story.quote_author}</p>
+                <p className="text-sm font-light leading-8 text-ivory/80">
+                  <InlineEdit multiline value={story.quote} onSave={(v) => saveStory('quote', v)} />
+                </p>
+                <p className="mt-5 text-sm font-bold text-copper">
+                  <InlineEdit value={story.quote_author} onSave={(v) => saveStory('quote_author', v)} />
+                </p>
              </div>
            </Reveal>
          )}
@@ -60,7 +88,7 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
          {showLink && (
            <Reveal delay={0.22}>
              <ButtonLink to={story.link_href} variant="outline" className="mt-10 font-light">
-                {story.link_label}
+                <InlineEdit value={story.link_label} onSave={(v) => saveStory('link_label', v)} />
                <ArrowLeftIcon className="h-4 w-4" />
              </ButtonLink>
            </Reveal>
@@ -73,7 +101,8 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
          )}
        </div>

-        <div className="grid grid-cols-2 gap-4">
+        <div className="relative grid grid-cols-2 gap-4">
+          <SingletonPill resource="story" label="تصاویر و نقل‌قول بخش درباره ما" className="absolute -top-10 right-0" />
          {story.bento.map((item, i) => (
            <Reveal key={item.src + i} delay={0.06 * i}>
              <div className="overflow-hidden">
@@ -1,37 +1,41 @@
 import React from 'react'
 import { Reveal } from '../Reveal'
 import { SectionHeading } from '../SectionHeading'
-import { useSectionHeading, useSite } from '../../api'
+import { useSite } from '../../api'
+import { AddItemButton, EditableItem } from '../../admin/Editable'

 export function Team() {
  const { team } = useSite()
-  const heading = useSectionHeading('team')
  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="team-title">
      <div className="mx-auto max-w-site px-6 lg:px-10">
        <SectionHeading
-          title={heading.title}
-          lead={heading.lead}
+          title="تیم ما"
+          lead="کسانی که تصمیم‌های اصلی هر پروژه را می‌گیرند و پاسخ‌گوی آن هستند."
+          headingKey="team"
          align="center"
        />

        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {team.map((member, i) => (
-            <Reveal key={member.name} delay={0.06 * i} className="h-full">
-              <article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-10 text-center transition-[transform,box-shadow,border-color] duration-500 ease-out hover:-translate-y-3 hover:border-copper/50 hover:shadow-lift">
-                <div className="flex h-24 w-24 items-center justify-center rounded-full border border-copper/30 text-3xl font-bold text-copper transition-colors duration-500 group-hover:border-copper">
-                  {member.name.trim().charAt(0)}
-                </div>
-                <h3 className="mt-8 text-lg font-bold text-ivory">{member.name}</h3>
-                <p className="mt-2 text-sm font-light text-copper">{member.role}</p>
-                <p className="mt-6 border-t border-ivory/10 pt-6 text-sm font-light text-ivory/60">
-                  {member.bio}
-                </p>
-              </article>
+            <Reveal key={member.id} delay={0.06 * i} className="h-full">
+              <EditableItem resource="team" item={member} className="h-full">
+                <article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-10 text-center transition-[transform,box-shadow,border-color] duration-500 ease-out hover:-translate-y-3 hover:border-copper/50 hover:shadow-lift">
+                  <div className="flex h-24 w-24 items-center justify-center rounded-full border border-copper/30 text-3xl font-bold text-copper transition-colors duration-500 group-hover:border-copper">
+                    {member.name.trim().charAt(0)}
+                  </div>
+                  <h3 className="mt-8 text-lg font-bold text-ivory">{member.name}</h3>
+                  <p className="mt-2 text-sm font-light text-copper">{member.role}</p>
+                  <p className="mt-6 border-t border-ivory/10 pt-6 text-sm font-light text-ivory/60">
+                    {member.bio}
+                  </p>
+                </article>
+              </EditableItem>
            </Reveal>
          ))}
+          <AddItemButton resource="team" />
        </div>
      </div>
    </section>
  )
-}
+}
@@ -2,13 +2,14 @@ import React, { useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { ChevronLeftIcon, ChevronRightIcon, QuoteIcon } from 'lucide-react';
 import { SectionHeading } from '../SectionHeading';
-import { useSectionHeading, useSite } from '../../api';
+import { useSite } from '../../api';
+import { EditableItem } from '../../admin/Editable';

 export function Testimonials() {
  const { testimonials } = useSite();
-  const heading = useSectionHeading('testimonials');
  const [index, setIndex] = useState(0);
-  const item = testimonials[index];
+  const current = testimonials[Math.min(index, Math.max(testimonials.length - 1, 0))];
+  if (!current) return null;

  const go = (dir: number) => {
    setIndex((prev) => (prev + dir + testimonials.length) % testimonials.length);
@@ -17,23 +18,25 @@ export function Testimonials() {
  return (
    <section className="border-y border-ivory/10 bg-char py-24 lg:py-32" aria-labelledby="testimonials-title">
      <div className="mx-auto max-w-site px-6 lg:px-10">
-        <SectionHeading title={heading.title} align="center" />
+        <SectionHeading headingKey="testimonials" align="center" />

        <div className="relative mx-auto mt-14 max-w-3xl text-center">
          <QuoteIcon className="mx-auto h-8 w-8 text-copper/60" aria-hidden="true" />
          <AnimatePresence mode="wait">
            <motion.blockquote
-              key={item.name}
+              key={current.id}
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -12 }}
              transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}>
-              
-              <p className="mt-8 text-lg font-light leading-[2.4rem] text-ivory/85 md:text-xl">«{item.quote}»</p>
-              <footer className="mt-8">
-                <p className="text-base font-bold text-copper">{item.name}</p>
-                <p className="mt-1 text-sm font-light text-ivory/45">{item.role}</p>
-              </footer>
+
+              <EditableItem resource="testimonials" item={current}>
+                <p className="mt-8 text-lg font-light leading-[2.4rem] text-ivory/85 md:text-xl">«{current.quote}»</p>
+                <footer className="mt-8">
+                  <p className="text-base font-bold text-copper">{current.name}</p>
+                  <p className="mt-1 text-sm font-light text-ivory/45">{current.role}</p>
+                </footer>
+              </EditableItem>
            </motion.blockquote>
          </AnimatePresence>

@@ -43,13 +46,13 @@ export function Testimonials() {
              onClick={() => go(1)}
              aria-label="نظر قبلی"
              className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
-              
+
              <ChevronRightIcon className="h-5 w-5" />
            </button>
            <div className="flex gap-2" role="tablist" aria-label="انتخاب نظر">
              {testimonials.map((t, i) =>
              <button
-                key={t.name}
+                key={t.id}
                type="button"
                role="tab"
                aria-selected={i === index}
@@ -66,7 +69,7 @@ export function Testimonials() {
              onClick={() => go(-1)}
              aria-label="نظر بعدی"
              className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
-              
+
              <ChevronLeftIcon className="h-5 w-5" />
            </button>
          </div>
@@ -74,4 +77,4 @@ export function Testimonials() {
      </div>
    </section>);

-}
+}
@@ -1,7 +1,8 @@
 import React, { useRef } from 'react'
 import { motion, useScroll, useTransform, useInView } from 'framer-motion'
-import { useSectionHeading, useSite, type TimelineItem } from '../../api'
+import { useSite, type TimelineItem } from '../../api'
 import { SectionHeading } from '../SectionHeading'
+import { AddItemButton, EditableItem } from '../../admin/Editable'

 const ease = [0.23, 1, 0.32, 1] as const

@@ -31,11 +32,13 @@ function Item({ item, index }: { item: Milestone; index: number }) {
        animate={active ? { opacity: 1, y: 0 } : { opacity: 0, y: 24 }}
        transition={{ duration: 0.55, ease }}
      >
-        <div className="border border-ivory/10 bg-ink p-6 md:p-7">
-          <span className="text-sm font-light text-copper">{item.year}</span>
-          <h3 className="mt-3 text-lg font-bold text-ivory">{item.title}</h3>
-          <p className="mt-3 text-sm font-light leading-8 text-ivory/60">{item.desc}</p>
-        </div>
+        <EditableItem resource="timeline" item={item}>
+          <div className="border border-ivory/10 bg-ink p-6 md:p-7">
+            <span className="text-sm font-light text-copper">{item.year}</span>
+            <h3 className="mt-3 text-lg font-bold text-ivory">{item.title}</h3>
+            <p className="mt-3 text-sm font-light leading-8 text-ivory/60">{item.desc}</p>
+          </div>
+        </EditableItem>
      </motion.div>
    </li>
  )
@@ -43,7 +46,6 @@ function Item({ item, index }: { item: Milestone; index: number }) {

 export function Timeline() {
  const { timeline } = useSite()
-  const heading = useSectionHeading('timeline')
  const ref = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({
    target: ref,
@@ -54,11 +56,12 @@ export function Timeline() {
  return (
    <section className="bg-char py-24 md:py-32" aria-labelledby="timeline-title">
      <div className="mx-auto w-full max-w-site px-6 lg:px-10">
-        
+
        <div className="mb-16">
          <SectionHeading
-            title={heading.title}
-            lead={heading.lead}
+            title="مسیر ما"
+            lead="از یک دفتر چهارنفره تا ۴۷ پروژه. خط زمان پروژه‌های ما را ببینید."
+            headingKey="timeline"
            align="center"
          />
        </div>
@@ -76,9 +79,12 @@ export function Timeline() {

          <ol className="flex flex-col gap-12 md:gap-16">
            {timeline.map((item, i) => (
-              <Item key={item.year} item={item} index={i} />
+              <Item key={item.id} item={item} index={i} />
            ))}
          </ol>
+          <div className="mt-12">
+            <AddItemButton resource="timeline" />
+          </div>
        </div>
      </div>
    </section>
@@ -2,17 +2,29 @@ import React from 'react';
 import { Reveal } from '../Reveal';
 import { SectionHeading } from '../SectionHeading';
 import { useSectionHeading, useSite } from '../../api';
+import { AddItemButton, EditableItem, SingletonPill } from '../../admin/Editable';
+import { InlineEdit } from '../admin/InlineEdit';
+import { useFieldSaver } from '../../admin/AdminContext';

 export function WhyUs() {
  const { why_us } = useSite();
  const heading = useSectionHeading('why_us');
+  const save = useFieldSaver();
+
+  const saveItem = (id: number, changes: Record<string, unknown>) =>
+    save('why-us', id, changes, (d) => {
+      const it = d.why_us.find((x) => x.id === id);
+      if (it) Object.assign(it, changes);
+    });
+
  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="why-title">
      <div className="mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10">
        <div className="lg:col-span-5">
          <SectionHeading
            title={heading.title}
-            lead={heading.lead} />
+            lead={heading.lead}
+            headingKey="why_us" />

          {heading.image && (
            <Reveal delay={0.12}>
@@ -28,17 +40,33 @@ export function WhyUs() {
        <div className="lg:col-span-7">
          <div className="grid gap-x-10 gap-y-px sm:grid-cols-2">
            {why_us.map((item, i) =>
-            <Reveal key={item.title} delay={0.05 * i}>
+            <Reveal key={item.id} delay={0.05 * i}>
+              <EditableItem resource="why_us" item={item}>
                <div className="flex h-full flex-col border-t border-ivory/10 py-8">
                  <span className="text-xs font-light text-copper">۰{(i + 1).toLocaleString('fa-IR')}</span>
-                  <h3 className="mt-4 text-lg font-bold text-ivory">{item.title}</h3>
-                  <p className="mt-3 text-sm font-light leading-8 text-ivory/55">{item.desc}</p>
+                  <h3 className="mt-4 text-lg font-bold text-ivory">
+                    <InlineEdit
+                      value={item.title}
+                      onSave={(v) => saveItem(item.id, { title: v })}
+                    />
+                  </h3>
+                  <p className="mt-3 text-sm font-light leading-8 text-ivory/55">
+                    <InlineEdit
+                      multiline
+                      value={item.desc}
+                      onSave={(v) => saveItem(item.id, { desc: v })}
+                    />
+                  </p>
                </div>
+              </EditableItem>
              </Reveal>
            )}
          </div>
+          <div className="mt-8">
+            <AddItemButton resource="why_us" />
+          </div>
        </div>
      </div>
    </section>);

-}
+}
@@ -1,6 +1,7 @@
 // انواع مشترک داده‌ها — همه محتوای متنی سایت از بک‌اند (GET /api/site) بارگذاری می‌شود.

 export type Service = {
+  id: number;
  title: string;
  desc: string;
  icon: 'draft' | 'tower' | 'mall' | 'villa' | 'renew' | 'manage' | 'invest' | 'landscape';
@@ -9,6 +10,7 @@ export type Service = {
 export type ProjectStatus = 'done' | 'progress';

 export type Project = {
+  id: number;
  slug: string;
  title: string;
  location: string;
@@ -25,5 +27,6 @@ export type Project = {
 };

 export type Article = {
+  id: number;
  slug: string; title: string; date: string; category: string; image: string; read: string; excerpt: string; body: string[];
 };
@@ -6,13 +6,11 @@ import { Timeline } from '../components/home/Timeline'
 import { WhyUs } from '../components/home/WhyUs'
 import { Team } from '../components/home/Team'
 import { ContactSection } from '../components/ContactSection'
-import { usePageHero } from '../api'

 export function About() {
-  const hero = usePageHero('about')
-  return (
+    return (
    <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="about" />

      <Story showLink={false} showLabel={false} showQuote={true} alignTop={true} />

@@ -5,20 +5,21 @@ import { PageHero } from '../components/PageHero'
 import { Reveal } from '../components/Reveal'
 import { ArticleCard } from '../components/ArticleCard'
 import { Newsletter } from '../components/home/Newsletter'
-import { usePageHero, useSite } from '../api'
+import { useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'

 export function Blog() {
  const { articles } = useSite()
-  const hero = usePageHero('blog')
-  const [featured, ...rest] = articles
+    const [featured, ...rest] = articles

  return (
    <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="blog" />

      <section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
        <div className="mx-auto max-w-site px-6 lg:px-10">
          <Reveal>
+            <EditableItem resource="articles" item={featured}>
            <Link
              to={`/blog/${featured.slug}`}
              className="group grid items-stretch border border-ivory/10 bg-char transition-[transform,box-shadow,border-color] duration-300 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift lg:grid-cols-2"
@@ -52,14 +53,18 @@ export function Blog() {
                </div>
              </div>
            </Link>
+            </EditableItem>
          </Reveal>

          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {rest.map((article, i) => (
-              <Reveal key={article.slug} delay={0.05 * i} className="h-full">
-                <ArticleCard article={article} />
+              <Reveal key={article.id} delay={0.05 * i} className="h-full">
+                <EditableItem resource="articles" item={article} className="h-full">
+                  <ArticleCard article={article} />
+                </EditableItem>
              </Reveal>
            ))}
+            <AddItemButton resource="articles" />
          </div>
        </div>
      </section>
@@ -2,20 +2,21 @@ import React from 'react'
 import { PageHero } from '../components/PageHero'
 import { ContactSection } from '../components/ContactSection'
 import { Reveal } from '../components/Reveal'
-import { usePageHero, useSite } from '../api'
+import { useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'

 export function ContactPage() {
  const { offices } = useSite()
-  const hero = usePageHero('contact')
-
+  
  return (
    <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="contact" />

      <section className="bg-ink py-24" aria-label="دفاتر ما">
        <div className="mx-auto grid max-w-site gap-6 px-6 md:grid-cols-3 lg:px-10">
          {offices.map((office, i) => (
            <Reveal key={office.id} delay={0.06 * i} className="h-full">
+              <EditableItem resource="offices" item={office} className="h-full">
              <article className="flex h-full flex-col border border-ivory/10 bg-char px-8 py-12 text-center transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
                <h2 className="text-2xl font-bold text-copper">{office.city}</h2>
                <p className="mt-6 text-sm font-light leading-9 text-ivory/70">{office.address}</p>
@@ -25,8 +26,10 @@ export function ContactPage() {
                  </p>
                </div>
              </article>
+              </EditableItem>
            </Reveal>
          ))}
+          <AddItemButton resource="offices" />
        </div>
      </section>

@@ -2,13 +2,11 @@ import React from 'react'
 import { PageHero } from '../components/PageHero'
 import { Faq } from '../components/home/Faq'
 import { ContactSection } from '../components/ContactSection'
-import { usePageHero } from '../api'

 export function FaqPage() {
-  const hero = usePageHero('faq')
-  return (
+    return (
    <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="faq" />

      <Faq hideHeading={true} />

@@ -4,16 +4,16 @@ import { Reveal } from '../components/Reveal'
 import { SectionHeading } from '../components/SectionHeading'
 import { Stats } from '../components/home/Stats'
 import { ContactSection } from '../components/ContactSection'
-import { usePageHero, useSectionHeading, useSite } from '../api'
+import { useSectionHeading, useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'

 export function Investment() {
  const { investment_models } = useSite()
-  const hero = usePageHero('investment')
-  const heading = useSectionHeading('investment_models')
+    const heading = useSectionHeading('investment_models')

  return (
    <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="investment" />

      <section className="bg-ink py-24 lg:py-32" aria-labelledby="models-title">
        <div className="mx-auto max-w-site px-6 lg:px-10">
@@ -21,6 +21,7 @@ export function Investment() {
          <div className="mt-14 grid gap-6 lg:grid-cols-3">
            {investment_models.map((model, i) => (
              <Reveal key={model.id} delay={0.06 * i} className="h-full">
+                <EditableItem resource="investment_models" item={model} className="h-full">
                <article className="group flex h-full flex-col border border-ivory/10 bg-char p-10 transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
                  <p className="text-sm font-bold text-copper/80">۰{(i + 1).toLocaleString('fa-IR')}</p>

@@ -41,8 +42,10 @@ export function Investment() {
                    </ul>
                  </div>
                </article>
+                </EditableItem>
              </Reveal>
            ))}
+            <AddItemButton resource="investment_models" />
          </div>
        </div>
      </section>
@@ -5,11 +5,24 @@ import { ProjectCard } from '../components/ProjectCard';
 import { Gallery } from '../components/home/Gallery';
 import { ContactSection } from '../components/ContactSection';
 import type { ProjectStatus } from '../data/site';
-import { usePageHero, useSite, useStatusLabel } from '../api';
+import { useSite, useStatusLabel } from '../api';
+import { useFieldSaver } from '../admin/AdminContext';
+import { InlineEdit } from '../components/admin/InlineEdit';
+import { AddItemButton, EditableItem } from '../admin/Editable';

 export function Projects() {
-  const { projects } = useSite();
-  const hero = usePageHero('projects');
+  const { projects, status_labels } = useSite();
+  const save = useFieldSaver();
+
+  const saveStatusLabel = (key: string, value: string) => {
+    const label = status_labels.find((s) => s.key === key);
+    if (!label) return;
+    void save('status-labels', label.id, { label: value }, (d) => {
+      const s = d.status_labels.find((x) => x.id === label.id);
+      if (s) s.label = value;
+    });
+  };
+
  const doneLabel = useStatusLabel('done');
  const progressLabel = useStatusLabel('progress');
  const FILTERS: {key: ProjectStatus;label: string;}[] = [
@@ -20,7 +33,7 @@ export function Projects() {

  return (
    <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="projects" />
      

      <section className="bg-ink py-24 lg:py-32" aria-label="فهرست پروژه‌ها">
@@ -46,7 +59,10 @@ export function Projects() {

              }
                <span className="relative z-10 transition-colors duration-300 ease-lux group-hover:text-char">
-                  {filter.label}
+                  <InlineEdit
+                    value={filter.label}
+                    onSave={(v) => saveStatusLabel(filter.key, v)}
+                  />
                </span>
              </button>
            )}
@@ -54,10 +70,13 @@ export function Projects() {

          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {list.map((project, i) =>
-            <Reveal key={project.slug} delay={0.05 * i} className="h-full">
-                <ProjectCard project={project} imageClass="h-80" />
+            <Reveal key={project.id} delay={0.05 * i} className="h-full">
+                <EditableItem resource="projects" item={project} className="h-full">
+                  <ProjectCard project={project} imageClass="h-80" />
+                </EditableItem>
              </Reveal>
            )}
+            <AddItemButton resource="projects" />
          </div>
        </div>
      </section>
@@ -5,16 +5,16 @@ import { Faq } from '../components/home/Faq'
 import { ContactSection } from '../components/ContactSection'
 import { Reveal } from '../components/Reveal'
 import { SectionHeading } from '../components/SectionHeading'
-import { usePageHero, useSectionHeading, useSite } from '../api'
+import { useSectionHeading, useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'

 export function ServicesPage() {
  const { process_steps } = useSite()
-  const hero = usePageHero('services')
-  const heading = useSectionHeading('process')
+    const heading = useSectionHeading('process')

  return (
    <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="services" />

      <Services />

@@ -24,13 +24,16 @@ export function ServicesPage() {
          <div className="mt-14 grid gap-px bg-ivory/10 md:grid-cols-2 lg:grid-cols-4">
            {process_steps.map((item, i) => (
              <Reveal key={item.id} delay={0.06 * i} className="h-full">
+                <EditableItem resource="process_steps" item={item} className="h-full">
                <div className="flex h-full flex-col justify-center bg-char px-6 py-14 text-center">
                  <p className="text-4xl font-bold text-copper">{item.step}</p>
                  <h3 className="mt-6 text-xl font-bold text-ivory">{item.title}</h3>
                  <p className="mt-4 text-base font-light leading-9 text-ivory/60">{item.desc}</p>
                </div>
+                </EditableItem>
              </Reveal>
            ))}
+            <AddItemButton resource="process_steps" />
          </div>
        </div>
      </section>