"use client";

import { cn } from "@/lib/utils";
interface Service3Props {
  className?: string;
}

const Service3 = ({ className }: Service3Props) => {
  const stats = [
    {
      icon: "/block-media/shadcnblocks/block/logos/adobe-icon.png",
      title: "مجموعه طراحی حرفه‌ای",
      value: "۱۰۰٪",
      description: "تسلط طراحی",
    },
    {
      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
      title: "Figma",
      value: "۵+",
      description: "سال تجربه",
    },
    {
      icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
      title: "Sketch",
      value: "۲۰۰+",
      description: "پروژه تکمیل‌شده",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("pb-32", className)}>
      {/* Full Width Hero with Background Image */}
      <div
        className="relative flex min-h-[500px] items-center justify-center bg-cover bg-center bg-no-repeat py-32"
        style={{
          backgroundImage:
            "url('/block-media/shadcnblocks/block/photos/christopher-gower-vjMgqUkS8q8-unsplash.jpg')",
        }}
      >
        {/* Dark overlay for better text readability */}
        <div className="absolute inset-0 bg-black/50"></div>

        <div className="relative z-10 container text-center">
          <div className="mx-auto flex flex-col items-center space-y-6">
            <img
              src="/block-media/shadcnblocks/block/symbols/ux-white.svg"
              alt="طراحی تجربه و رابط کاربری"
              className="w-24"
            />
            <h1 className="text-xl font-medium tracking-tight text-white md:text-2xll lg:text-2xll">
              طراحی تجربه و رابط کاربری
            </h1>
          </div>
        </div>
      </div>

      {/* Stats & Technical Section */}
      <div className="bg-muted py-16">
        <div className="container">
          <div className="mx-auto max-w-3xl">
            <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
              {stats.map((stat, index) => (
                <div
                  key={index}
                  className="rounded-lg border bg-background p-6 text-center"
                >
                  <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center">
                    <img
                      src={stat.icon}
                      alt={stat.title}
                      className="h-8 w-8 object-contain"
                    />
                  </div>
                  <div className="space-y-2">
                    <div className="text-xl font-bold">{stat.value}</div>
                    <div className="text-sm font-medium">{stat.title}</div>
                    <div className="text-xs text-muted-foreground">
                      {stat.description}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Content Section */}
      <div className="py-16">
        <div className="container">
          <div className="mx-auto prose prose-sm max-w-3xl dark:prose-invert">
            <h2>خلق تجربه‌های دیجیتال معنادار</h2>
            <p>
              ما تحقیق کاربر، معماری اطلاعات و طراحی بصری را ترکیب می‌کنیم تا
              تجربه‌هایی ارائه دهیم که تعامل و تبدیل را افزایش می‌دهند.
            </p>

            <p>
              از طریق تحقیق و آزمایش جامع کاربر، تصمیم‌های طراحی را با داده‌های
              واقعی اعتبارسنجی می‌کنیم. فرآیند طراحی تکراری ما تضمین می‌کند هر
              عنصر هدفی دارد و هم به اهداف کسب‌وکار شما کمک می‌کند و هم تجربه
              کاربری استثنایی ارائه می‌دهد.
            </p>

            <p>
              ما در ساخت سیستم‌های طراحی تخصص داریم که با رشد کسب‌وکار شما
              مقیاس‌پذیرند؛ یکپارچگی در تمام نقاط تماس را حفظ می‌کنند و در عین
              حال انعطاف لازم برای رشد و تحول آینده را دارند.
            </p>

            <p>
              رویکرد همکاری ما ذینفعان را در تمام فرآیند طراحی  از
              وایرفریم‌های اولیه تا نمونه‌های نهایی  درگیر می‌کند. این
              هم‌راستایی بین اهداف کسب‌وکار و نیازهای کاربر را تضمین می‌کند و
              محصولاتی می‌سازد که در بازار موفق می‌شوند.
            </p>

            <p>
              هر تصمیم طراحی بر پایه تحقیق و آزمایش است؛ راه‌حل‌هایی که نه‌تنها
              از نظر بصری جذاب‌اند، بلکه از نظر استراتژیک درست و از سوی
              کاربران تأیید شده‌اند.
            </p>

            <h2>خدمات طراحی تجربه و رابط کاربری ما</h2>
            <ul>
              <li>تحقیق کاربر و توسعه پرسونا</li>
              <li>معماری اطلاعات و نقشه‌برداری سفر کاربر</li>
              <li>وایرفریم و نمونه‌سازی تعاملی</li>
              <li>طراحی بصری و یکپارچه‌سازی برند</li>
              <li>آزمایش کاربردپذیری و اعتبارسنجی طراحی</li>
              <li>ایجاد و مستندسازی سیستم طراحی</li>
            </ul>

            <h2>طراحی استراتژیک برای موفقیت کسب‌وکار</h2>
            <p>
              فلسفه طراحی ما بر خلق رابط‌هایی استوار است که فاصله بین نیازهای
              کاربر و اهداف کسب‌وکار را پر می‌کنند. ما می‌دانیم طراحی تجربه و رابط کاربری
              عالی فقط به زیبایی‌شناسی محدود نیست  بلکه به خلق تعامل‌های
              معناداری مربوط است که نتیجه می‌دهند.
            </p>

            <p>
              از مفهوم اولیه تا پیاده‌سازی نهایی، تضمین می‌کنیم هر عنصر طراحی
              به تجربه کاربری یکپارچه‌ای کمک کند که ارزش‌های برند شما را منعکس
              و اهداف کسب‌وکارتان را پشتیبانی کند. طراحی‌های ما برای عملکرد،
              دسترس‌پذیری و مقیاس‌پذیری در تمام دستگاه‌ها و پلتفرم‌ها بهینه
              شده‌اند.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Service3 };