"use client";

import {
  Eye,
  FileText,
  Languages,
  Mic,
  MonitorSmartphone,
  Scissors,
  Subtitles,
  XCircle,
} from "lucide-react";
import { useState } from "react";

import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

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

const FEATURES: FeatureItem[] = [
  {
    id: "clips",
    title: "داشبورد سفارشی",
    description:
      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    icon: <Scissors className="size-5" />,
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "گزارش عملکرد",
  },
  {
    id: "translation",
    title: "فیلتر پیشرفته",
    description:
      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
    icon: <Languages className="size-5" />,
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "داشبورد تحلیل داده",
  },
  {
    id: "eye-contact",
    title: "نمودار روند",
    description:
      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
    icon: <Eye className="size-5" />,
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "نمودار شاخص کلیدی",
  },
  {
    id: "studio-sound",
    title: "هشدار آستانه",
    description:
      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
    icon: <Mic className="size-5" />,
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    imageAlt: "گزارش عملکرد",
  },
  {
    id: "remove-filler",
    title: "گزارش زمان‌بندی‌شده",
    description:
      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    icon: <XCircle className="size-5" />,
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
    imageAlt: "داشبورد تحلیل داده",
  },
  {
    id: "green-screen",
    title: "تحلیل کوHORT",
    description:
      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
    icon: <MonitorSmartphone className="size-5" />,
    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
    imageAlt: "نمودار شاخص کلیدی",
  },
  {
    id: "transcription",
    title: "مقایسه دوره‌ای",
    description:
      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
    icon: <FileText className="size-5" />,
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "گزارش عملکرد",
  },
  {
    id: "captions",
    title: "خروجی گزارش",
    description:
      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
    icon: <Subtitles className="size-5" />,
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "داشبورد تحلیل داده",
  },
];

interface Feature225Props {
  className?: string;
}

const Feature225 = ({ className }: Feature225Props) => {
  const [activeTab, setActiveTab] = useState<string>(FEATURES[0].id);

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("w-full bg-background py-12 md:py-24 lg:py-32", className)}
    >
      <div className="container px-4 md:px-6">
        <div className="flex flex-col items-center justify-center space-y-4 text-center">
          <h2 className="text-3xl font-bold tracking-tighter text-balance sm:text-xl md:text-2xll">
            داده پراکنده را به تصمیم تبدیل کنید
          </h2>
          <p className="max-w-[700px] text-pretty text-muted-foreground md:text-xl/relaxed">
            گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
          </p>
        </div>

        <div className="mt-16">
          <Tabs
            defaultValue={FEATURES[0].id}
            value={activeTab}
            onValueChange={setActiveTab}
            className="w-full"
          >
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
              {FEATURES.map((feature) => (
                <Card
                  key={feature.id}
                  className={cn(
                    "cursor-pointer overflow-hidden transition-all hover:shadow-md",
                    activeTab === feature.id ? "ring-2 ring-primary" : "",
                  )}
                  onClick={() => setActiveTab(feature.id)}
                >
                  <CardContent className="p-6">
                    <div className="flex flex-col items-start space-y-2 text-start">
                      <div className="flex items-center gap-2">
                        <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
                          {feature.icon}
                        </div>
                        <h3 className="text-lg font-semibold text-balance">
                          {feature.title}
                        </h3>
                      </div>
                      <p className="text-sm text-pretty text-muted-foreground">
                        {feature.description}
                      </p>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

            <div className="sr-only">
              <TabsList>
                {FEATURES.map((feature) => (
                  <TabsTrigger key={feature.id} value={feature.id}>
                    {feature.title}
                  </TabsTrigger>
                ))}
              </TabsList>
            </div>

            <div className="mt-8">
              {FEATURES.map((feature) => (
                <TabsContent
                  key={feature.id}
                  value={feature.id}
                  className="mt-0 rounded-lg border bg-card p-0 shadow-sm"
                >
                  <div className="aspect-video w-full overflow-hidden rounded-t-lg">
                    {feature.image ? (
                      <img
                        src={feature.image}
                        alt={feature.imageAlt}
                        className="size-full object-cover"
                      />
                    ) : (
                      <div className="flex size-full items-center justify-center bg-muted">
                        <p className="text-muted-foreground">داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.</p>
                      </div>
                    )}
                  </div>
                </TabsContent>
              ))}
            </div>
          </Tabs>
        </div>
      </div>
    </section>
  );
};

export { Feature225 };