mr_decor/app/after-sales/page.tsx

import type { Metadata } from "next";
import { Clock3, Paintbrush2, ShieldCheck, Wrench } from "lucide-react";
import { MeteorTitleBackground } from "@/components/utilities/meteor-title-background";

export const metadata: Metadata = {
  title: "خدمات پس از فروش",
  description:
    "خدمات پس از فروش مستر دکور برای استند و ملزومات ویترین طلافروشی شامل تعویض روکش، تعمیرات تخصصی و پشتیبانی اجرایی است.",
};

const serviceItems = [
  "تعویض روکش استندهای دکوری با هماهنگی رنگ و متریال جدید",
  "ترمیم خط و خش، لب پریدگی و بازسازی نقاط آسیب دیده بدنه",
  "تعمیر کشوهای ریلی، رگلاژ، تعویض ریل و رفع گیرکردن یا لقی",
  "تنظیم و تعمیر یراق آلات درب و محفظه های نمایشی",
  "بازدید دوره ای برای پیشگیری از خرابی و افزایش طول عمر تجهیزات",
];

const supportStats = [
  {
    icon: Paintbrush2,
    title: "تعویض روکش",
    description: "بازسازی ظاهر استندها با حفظ هویت بصری فروشگاه",
  },
  {
    icon: Wrench,
    title: "تعمیر کشو",
    description: "رفع خرابی ریل و مکانیزم برای کارکرد روان روزانه",
  },
  {
    icon: Clock3,
    title: "زمان بندی منعطف",
    description: "هماهنگی مراجعه در ساعات کم تردد فروشگاه",
  },
  {
    icon: ShieldCheck,
    title: "کیفیت اجرا",
    description: "تحویل نهایی پس از تست عملکرد و کنترل کیفی",
  },
];

export default function AfterSalesPage() {
  return (
    <main className="min-h-screen pb-24 pt-16 md:pt-20">
      <section className="relative overflow-hidden bg-muted/60 py-20 md:py-24">
        <MeteorTitleBackground className="opacity-100" />
        <div className="mx-auto w-full max-w-7xl px-4 sm:px-6" dir="rtl">
          <div className="mx-auto max-w-4xl text-center">
            <div className="relative z-10 rounded-2xl px-4 py-6 sm:px-8">
              <h1 className="text-heading-1 font-bold text-foreground">
                خدمات پس از فروش مستر دکور
              </h1>
              <p className="mt-5 text-body text-muted-foreground">
                کیفیت ویترین فقط به روز تحویل محدود نمی شود. خدمات پس از فروش مستر
                دکور کمک می کند استندهای شما همیشه حرفه ای، منظم و آماده نمایش موثر
                سرویس های طلا و جواهر باقی بمانند.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="py-14 md:py-16">
        <div className="mx-auto grid w-full max-w-7xl gap-10 px-4 sm:px-6 lg:grid-cols-3" dir="rtl">
          <div className="space-y-8 lg:col-span-2">
            <div className="space-y-4">
              <h2 className="text-heading-4 font-semibold text-foreground text-xl">
                تعویض روکش استندهای دکوری
              </h2>
              <p className="text-body text-muted-foreground">
                روکش استندها در فضای پررفت وآمد طلافروشی به مرور زمان دچار افت
                کیفیت ظاهری می شود. تیم ما با بررسی دقیق نوع متریال، شرایط نور و
                سبک چیدمان فروشگاه، روکش جدید را انتخاب و اجرا می کند تا ظاهر
                استندها دوباره یکدست، تمیز و هماهنگ با برند شما شود.
              </p>
              <p className="text-body text-muted-foreground">
                در فرآیند تعویض روکش، تلاش می کنیم کمترین اختلال در فعالیت روزانه
                فروشگاه ایجاد شود و نتیجه نهایی علاوه بر زیبایی، مقاومت مناسب در
                برابر سایش و نظافت مداوم داشته باشد.
              </p>
            </div>

            <div className="space-y-4">
              <h2 className="text-heading-4 font-semibold text-foreground text-xl">
                تعمیر کشو و مکانیزم حرکتی
              </h2>
              <p className="text-body text-muted-foreground">
                کشوهای استند در استفاده مداوم ممکن است دچار گیرکردن، صدای اضافی،
                لقی یا بسته نشدن کامل شوند. خدمات تعمیر کشو شامل رگلاژ تخصصی،
                تعمیر یا تعویض ریل، بررسی اتصالات داخلی و تنظیم مجدد حرکات کشو است
                تا عملکرد روان و قابل اعتماد به سیستم برگردد.
              </p>
              <p className="text-body text-muted-foreground">
                پس از پایان تعمیر، همه بخش ها تست می شوند تا هنگام استفاده سریع
                در محیط فروش، کشو بدون تنش و با ایمنی کامل باز و بسته شود.
              </p>
            </div>

            <div className="space-y-4">
              <h3 className="text-heading-5 font-semibold text-foreground text-lg">
                خدمات قابل ارائه در یک نگاه
              </h3>
              <div className="space-y-3">
                {serviceItems.map((item) => (
                  <div
                    key={item}
                    className="rounded-xl border border-border bg-card px-4 py-3"
                  >
                    <p className="text-body text-foreground">{item}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <aside className="lg:col-span-1">
            <div className="rounded-2xl border border-border bg-muted/50 p-5 lg:sticky lg:top-24">
              <h3 className="text-heading-5 font-semibold text-foreground text-lg">
                مزیت خدمات ما
              </h3>
              <div className="mt-5 space-y-4">
                {supportStats.map((stat) => {
                  const Icon = stat.icon;
                  return (
                    <div key={stat.title} className="flex items-start gap-3">
                      <span className="mt-0.5 flex h-9 w-9 items-center justify-center rounded-lg bg-card">
                        <Icon className="h-4 w-4 text-primary" />
                      </span>
                      <div className="space-y-1">
                        <p className="text-body-sm font-medium text-foreground">
                          {stat.title}
                        </p>
                        <p className="text-caption text-muted-foreground">
                          {stat.description}
                        </p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}