"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>
              رویدادها، KPIها و مدل اتریبیوشن را طوری تعریف می‌کنیم که تیم‌ها
              روی یک منبع حقیقت کار کنند و گزارش‌ها قابل اقدام باشند.
            </p>

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

            <p>
              برای مدیران محصول و رشد، آزمایش A/B، کوهورت و تحلیل مسیر را
              عملیاتی می‌کنیم تا اولویت ویژگی و بودجه بر اساس اثر واقعی
              تنظیم شود.
            </p>

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

            <p>
              خروجی ما فرهنگ تصمیم‌گیری مبتنی بر داده است؛ سریع‌تر، شفاف‌تر و
              هم‌راستا با اهداف فصلی.
            </p>

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

            <h2>از گزارش به اقدام</h2>
            <p>
              تحلیل زمانی ارزشمند است که مستقیماً به اولویت بعدی تیم وصل
              شود. ما متریک‌ها را به سوال کسب‌وکار ترجمه می‌کنیم: کجا نشت داریم
              و کدام اقدام بیشترین اثر را دارد؟
            </p>

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

export { Service3 };