"use client";

import {
  BookOpen,
  Code,
  Droplet,
  Layout,
  Map,
  Palette,
  Pen,
  Smartphone,
  TestTube,
  Users,
} from "lucide-react";

import { cn } from "@/lib/utils";

interface Service6Props {
  className?: string;
}

const Service6 = ({ className }: Service6Props) => {
  const services = [
    {
      icon: Users,
      title: "ممیزی فنی و تحلیل کلمات کلیدی",
    },
    {
      icon: Map,
      title: "نقشه محتوا و خوشه‌بندی موضوعی",
    },
    {
      icon: Pen,
      title: "بهینه‌سازی صفحات پول‌ساز",
    },
    {
      icon: Palette,
      title: "سئوی فنی و بهبود ایندکس",
    },
    {
      icon: TestTube,
      title: "لینک‌سازی امن و اعتبار دامنه",
    },
    {
      icon: BookOpen,
      title: "گزارش رتبه، ترافیک و تبدیل ارگانیک",
    },
  ];

  const stats = [
    {
      icon: "/block-media/shadcnblocks/block/logos/adobe-icon.png",
      title: "پوشش فنی سایت",
      description: "ممیزی کامل",
    },
    {
      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
      title: "Figma",
      description: "سال تجربه",
    },
    {
      icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
      title: "Sketch",
      description: "پروژه سئو تکمیل‌شده",
    },
  ];

  const relatedServices = [
    {
      icon: Droplet,
      title: "محتوای B2B",
      description: "مقالات و صفحات محصول با هدف تبدیل",
      link: "#",
    },
    {
      icon: Code,
      title: "سئوی فنی",
      description: "سرعت، ایندکس و ساختار سایت",
      link: "#",
    },
    {
      icon: Smartphone,
      title: "SEO محلی و بین‌المللی",
      description: "استراتژی چندمنطقه‌ای برای رشد ارگانیک",
      link: "#",
    },
    {
      icon: Layout,
      title: "تحلیل رقبای جستجو",
      description: "شکاف محتوا و فرصت‌های رتبه",
      link: "#",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container max-w-3xl">
        {/* Icon and Intro */}
        <div className="mb-12 space-y-8 text-center">
          <div className="flex justify-center">
            <div className="rounded-lg bg-muted p-4">
              <img
                src="/block-media/shadcnblocks/block/symbols/ux.svg"
                alt="خدمات سئو"
                className="h-12 dark:invert"
              />
            </div>
          </div>

          <div className="space-y-6">
            <h1 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
              خدمات سئو
            </h1>
            <p className="text-xl leading-relaxed text-muted-foreground">
              ترافیک ارگانیک را به سرنخ واجد شرایط تبدیل می‌کنیم. تمرکز ما روی
              کلماتی است که نیت خرید دارند و صفحاتی که واقعاً می‌فروشند، نه
              صرفاً افزایش نمایش بی‌هدف.
            </p>
          </div>
        </div>

        {/* Expertise Section */}
        <div className="mb-16">
          <h2 className="mb-8 text-center text-xl font-semibold tracking-tight md:text-3xl">
            تخصص ما
          </h2>
          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
            {stats.map((stat, index) => (
              <div
                key={index}
                className="rounded-lg bg-muted/50 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-sm font-medium">{stat.title}</div>
                  <div className="text-xs text-muted-foreground">
                    {stat.description}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

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

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

          <p>
            گزارش‌ها روی ترافیک واجد شرایط، سرنخ ارگانیک و درآمد منتسب تمرکز
            دارند. تیم شما می‌بیند کدام صفحه نتیجه می‌دهد و کجا باید سرمایه
            محتوایی بگذارید.
          </p>

          <p>
            تغییرات فنی را با اولویت اثر کسب‌وکار اجرا می‌کنیم تا منابع مهندسی
            روی مشکلات با بیشترین تاثیر صرف شود.
          </p>

          <p>
            نتیجه: کانال ارگانیک پایدار که هزینه جذب را در بلندمدت کاهش
            می‌دهد.
          </p>

          <h2>خدمات سئو ما</h2>
          <div className="space-y-3">
            {services.map((service, index) => {
              const Icon = service.icon;
              return (
                <div key={index} className="flex items-center gap-3">
                  <Icon className="h-5 w-5 text-primary" />
                  <span>{service.title}</span>
                </div>
              );
            })}
          </div>

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

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

        {/* Related Services */}
        <div className="rounded-lg">
          <h2 className="mb-8 text-center text-xl font-semibold tracking-tight md:text-3xl">
            خدمات مرتبط
          </h2>
          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
            {relatedServices.map((service, index) => {
              const Icon = service.icon;
              return (
                <div key={index} className="group rounded-lg bg-muted/50">
                  <a
                    href={service.link}
                    className="block space-y-2 rounded-lg p-6 transition-colors hover:bg-muted"
                  >
                    <div className="flex items-center gap-3">
                      <Icon className="h-5 w-5 text-muted-foreground group-hover:text-primary" />
                      <div className="text-lg font-medium group-hover:text-primary">
                        {service.title}
                      </div>
                    </div>
                    <div className="text-sm text-muted-foreground">
                      {service.description}
                    </div>
                  </a>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Service6 };