"use client";

import { Database, LockKeyhole, Sparkles } from "lucide-react";
import React, { useState } from "react";

import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

interface DataItem {
  id: string;
  title: string;
  description: string;
  image: string;
  imageAlt: string;
  icon: React.ReactNode;
}

const DATA: DataItem[] = [
  {
    id: "feature-1",
    title: "پروفایل ۳۶۰ درجه مشتری",
    description:
      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
    icon: <Sparkles className="h-6 w-6 text-white" />,
  },
  {
    id: "feature-2",
    title: "اتوماسیون مراحل فروش",
    description: "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
    icon: <Database className="h-6 w-6 text-white" />,
  },
  {
    id: "feature-3",
    title: "پیش‌بینی درآمد",
    description:
      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
    icon: <LockKeyhole className="h-6 w-6 text-white" />,
  },
];

interface Feature186Props {
  className?: string;
}

const Feature186 = ({ className }: Feature186Props) => {
  const [selection, setSelection] = useState(DATA[0].id);

  return (
    <section dir="rtl" lang="fa" className={cn("relative py-16 md:py-32", className)}>
      <div
        className="absolute top-0 right-0 left-0 z-0 h-[800px] w-screen [mask-image:radial-gradient(ellipse_at_center,white_20%,transparent_70%)] bg-repeat opacity-30"
        style={{
          backgroundImage:
            "url('/block-media/shadcnblocks/block/patterns/architect.svg')",
          backgroundSize: "60px",
        }}
      />
      <div className="relative z-10 container">
        <div className="text-right">
          <h2 className="text-xl font-medium text-balance sm:text-2xll lg:text-2xll">
            هر سرنخ را تا قرارداد دنبال کنید
          </h2>
          <p className="mt-4 text-pretty text-muted-foreground md:text-lg">
            تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
          </p>

          <div className="mt-4 lg:mt-8">
            <Tabs dir="rtl" value={selection} onValueChange={setSelection}>
              <div className="relative">
                <div className="overflow-auto">
                  <div
                    dir="rtl"
                    className="flex min-w-fit flex-col items-start overflow-y-hidden lg:mb-8"
                  >
                    <TabsList className="gap-4 bg-transparent">
                      {DATA.map((feature) => (
                        <TabsTrigger key={feature.id} value={feature.id}>
                          {feature.title}
                        </TabsTrigger>
                      ))}
                    </TabsList>
                  </div>
                  <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_left,hsl(var(--background))_0%,transparent_10%,transparent_90%,hsl(var(--background))_100%)] md:hidden" />
                </div>
              </div>

              <div className="relative w-full overflow-hidden">
                {DATA.map((feature) => (
                  <TabsContent
                    key={feature.id}
                    value={feature.id}
                    className="relative z-20"
                  >
                    <div className="aspect-3/2 w-full rounded-lg bg-accent p-6 md:p-14 md:px-24">
                      <div className="max-w-full text-right md:max-w-md">
                        <div className="flex size-12 items-center justify-center rounded-full bg-black">
                          {feature.icon}
                        </div>
                        <div className="my-4 md:my-8">
                          <h3 className="text-lg font-bold sm:text-xl lg:text-xl">
                            {feature.title}
                          </h3>
                          <p className="text-base text-pretty text-muted-foreground sm:text-lg lg:text-xl">
                            {feature.description}
                          </p>
                        </div>
                      </div>
                      <img
                        src={feature.image}
                        alt={feature.imageAlt}
                        className="mt-4 h-full w-full rounded-lg object-cover object-center md:mt-0"
                      />
                    </div>
                  </TabsContent>
                ))}
              </div>

              <div className="flex justify-center py-3 md:hidden">
                {DATA.map((feature) => (
                  <Button
                    key={feature.id}
                    variant="ghost"
                    size="sm"
                    onClick={() => {
                      setSelection(feature.id);
                    }}
                  >
                    <div
                      className={cn(
                        "size-2 rounded-full",
                        feature.id === selection ? "bg-primary" : "bg-input",
                      )}
                    />
                  </Button>
                ))}
              </div>
            </Tabs>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature186 };