import type { LucideIcon } from "lucide-react";
import {
  ArrowUpRight,
  AudioLines,
  Box,
  Fingerprint,
  LocateFixed,
} from "lucide-react";
import React from "react";

import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface TeamFeature {
  id: string;
  icon: LucideIcon;
  title: string;
  description: string;
  href: string;
}

const TEAM_FEATURES: TeamFeature[] = [
  {
    id: "openai-scaling",
    icon: LocateFixed,
    title:
      "پاسخ آماده",
    description: "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
    href: "#",
  },
  {
    id: "collaborative-innovation",
    icon: AudioLines,
    title: "SLA هوشمند",
    description: "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
    href: "#",
  },
  {
    id: "agile-development",
    icon: Box,
    title: "نظرسنجی رضایت",
    description: "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
    href: "#",
  },
  {
    id: "cross-functional",
    icon: Fingerprint,
    title: "تخصیص خودکار",
    description: "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
    href: "#",
  },
];

interface Feature241Props {
  className?: string;
}

const Feature241 = ({ className }: Feature241Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("overflow-hidden bg-background py-32", className)}
    >
      <div className="container">
        <div className="relative">
          <header className="mb-15 max-w-2xl text-start">
            <h1 className="mb-8 text-2xll font-bold tracking-tighter text-balance text-foreground lg:text-2xll">
              زمان حل مسئله را کوتاه کنید
            </h1>
            <p className="text-lg leading-relaxed tracking-tight text-pretty text-muted-foreground md:text-xl">
              پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
            </p>
          </header>
          <div className="absolute -top-15 -end-10 hidden transition-all ease-in-out group-hover:-rotate-0 lg:block">
            <img
              src="/block-media/shadcnblocks/block/illustrations/tokyo-browser-window-with-tab-bars.svg"
              className="size-150 md:size-100"
              alt="مدیریت تیکت"
            />
          </div>
        </div>

        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
          {TEAM_FEATURES.map((feature) => {
            const Icon = feature.icon;
            return (
              <a
                key={feature.id}
                href={feature.href}
                className="block transition-all duration-500 ease-in-out"
              >
                <Card className="group relative rounded-none! border border-border bg-background p-6 shadow-none transition-all duration-500 ease-in-out hover:bg-linear-to-l hover:from-transparent hover:to-muted rtl:hover:bg-linear-to-r">
                  <CardContent className="flex h-full flex-col justify-between p-0 text-start">
                    <div className="flex size-15 items-center justify-center border border-border bg-muted transition-colors duration-500 ease-in-out group-hover:bg-background">
                      <Icon
                        size={30}
                        className="transition-all duration-500 ease-in-out"
                      />
                    </div>

                    <h3 className="mt-4 text-xl leading-tight font-semibold tracking-tight text-balance text-foreground transition-all duration-500 ease-in-out md:text-xl lg:pe-30 lg:text-3xl">
                      {feature.title}
                    </h3>

                    <div className="absolute end-6 bottom-6 flex size-12 items-center justify-center border border-border bg-muted opacity-0 transition-all duration-500 ease-in-out group-hover:opacity-100">
                      <ArrowUpRight className="size-[27px] text-foreground transition-all duration-500 ease-in-out group-hover:rotate-45 rtl:rotate-180" />
                    </div>
                  </CardContent>
                </Card>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export { Feature241 };