import { ArrowRight } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const cards = [
  {
    href: "#",
    title: "داشبورد سفارشی",
    description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    image:
      "/block-media/external/unsplash/photo-1698516923132-b0236bc8f3ef.jpg",
    imageAlt: "گزارش عملکرد",
  },
  {
    href: "#",
    title: "فیلتر پیشرفته",
    description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
    image:
      "/block-media/external/unsplash/photo-1698402167275-7fbceb30989b.jpg",
    imageAlt: "داشبورد تحلیل داده",
  },
  {
    href: "#",
    title: "نمودار روند",
    description: "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
    image:
      "/block-media/external/unsplash/photo-1698402178229-863420a8ecf6.jpg",
    imageAlt: "نمودار شاخص کلیدی",
  },
];

interface Feature98Props {
  className?: string;
}

const Feature98 = ({ className }: Feature98Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative w-full overflow-hidden py-32", className)}
    >
      <div className="min-w-0">
        <div className="container min-w-0">
          <div className="grid min-w-0 gap-8 lg:grid-cols-5 lg:gap-20">
            <div className="min-w-0 lg:col-span-3">
              <p className="text-balance text-lg text-muted-foreground">
                گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
              </p>
              <h2 className="mt-6 text-balance text-xl lg:text-2xll">
                داده پراکنده را به تصمیم تبدیل کنید
              </h2>
            </div>
            <div className="min-w-0 lg:col-span-2">
              <p className="text-balance text-lg text-muted-foreground">
                داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.
              </p>
              <div className="mt-10 flex min-w-0 flex-wrap gap-2">
                <Button
                  size="lg"
                  className="h-auto max-w-full whitespace-normal text-balance"
                >
                  شاخص‌های مهم را شخصی‌سازی کنید و تغییرات غیرعادی را زودتر تشخیص دهید. تیم‌ها با دید مشترک، سریع‌تر هم‌راستا می‌شوند.
                </Button>
                <Button size="lg" variant="secondary" className="shrink-0">
                  تحلیل داده
                </Button>
              </div>
            </div>
          </div>
        </div>
        <Separator className="mt-24 mb-6" />
        <div className="container grid min-w-0 gap-8 lg:grid-cols-3">
          {cards.map((card) => (
            <a
              key={card.title}
              href={card.href}
              className="group relative grid min-w-0 overflow-hidden sm:grid-cols-2 lg:grid-cols-1"
            >
              <div className="absolute start-0 top-0 z-20 flex w-full min-w-0 justify-between gap-2 p-6 text-background sm:bottom-0 sm:start-1/2 sm:w-1/2 sm:flex-col lg:bottom-auto lg:start-0 lg:w-full lg:flex-row lg:items-center">
                <div className="min-w-0">
                  <h3 className="text-lg font-medium">{card.title}</h3>
                  <p className="text-balance">{card.description}</p>
                </div>
                <span className="flex size-12 shrink-0 items-center justify-center rounded-full bg-background text-primary sm:self-end lg:size-14 lg:self-auto">
                  <ArrowRight className="rtl:rotate-180" />
                </span>
              </div>
              <img
                src={card.image}
                alt={card.imageAlt}
                className="max-w-full scale-105 transition-all duration-500 group-hover:scale-[1.1]"
              />
              <div className="z-10 bg-primary" />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature98 };