import { ChevronRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface Feature8Props {
  className?: string;
}

const Feature8 = ({ className }: Feature8Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container max-w-6xl">
        <div className="flex flex-col items-center gap-4 md:gap-6">
          <Badge variant="outline">کار گروهی</Badge>
          <h1 className="max-w-2xl text-center text-3xl font-light md:text-2xll">
            همکاری از راه دور را ساده کنید
          </h1>
        </div>
        <div className="mt-16 flex flex-col justify-between gap-6 md:flex-row lg:mt-20 lg:gap-10">
          <Card className="group p-6">
            <a
              href="#"
              className={cn(
                buttonVariants({ variant: "outline" }),
                "ms-auto hidden w-fit cursor-pointer transition-all duration-200 group-hover:opacity-100 md:flex lg:translate-y-2 lg:opacity-0 lg:group-hover:translate-y-0",
              )}
            >
              بیشتر بدانید
              <ChevronRight className="ms-1 h-4 rtl:rotate-180" />
            </a>
            <div className="mt-6 flex gap-4">
              <p className="text-lg font-light lg:text-xl">
                اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
              </p>
              <a
                href="#"
                aria-label="بیشتر بدانید"
                className={cn(
                  buttonVariants({
                    variant: "outline",
                    size: "icon",
                  }),
                  "shrink-0 cursor-pointer md:hidden",
                )}
              >
                <ChevronRight className="h-4 rtl:rotate-180" />
              </a>
            </div>
            <div className="mt-10 flex items-center justify-between">
              <p className="text-sm font-light lg:text-base">وظایف، فایل‌ها و گفتگوها در یک محیط کاری متمرکز می‌شود. تیم‌ها کمتر در پیگیری وضعیت وقت می‌گذارند و بیشتر روی تحویل تمرکز می‌کنند.</p>
              <img
                src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
                alt="تقویم تیم"
                className="h-6 dark:invert"
              />
            </div>
          </Card>
          <Card className="group p-6">
            <a
              href="#"
              className={cn(
                buttonVariants({ variant: "outline" }),
                "ms-auto hidden w-fit cursor-pointer transition-all duration-200 group-hover:opacity-100 md:flex lg:translate-y-2 lg:opacity-0 lg:group-hover:translate-y-0",
              )}
            >
              بیشتر بدانید
              <ChevronRight className="ms-1 h-4 rtl:rotate-180" />
            </a>
            <div className="mt-6 flex gap-4">
              <p className="text-lg font-light lg:text-xl">
                نمای Kanban و Timeline به مدیران کمک می‌کند ظرفیت تیم را ببینند و اولویت‌ها را به‌موقع تنظیم کنند.
              </p>
              <a
                href="#"
                aria-label="بیشتر بدانید"
                className={cn(
                  buttonVariants({
                    variant: "outline",
                    size: "icon",
                  }),
                  "shrink-0 cursor-pointer md:hidden",
                )}
              >
                <ChevronRight className="h-4 rtl:rotate-180" />
              </a>
            </div>
            <div className="mt-10 flex items-center justify-between">
              <p className="text-sm font-light lg:text-base">اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</p>
              <img
                src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-light.svg"
                alt="فضای همکاری تیمی"
                className="h-4 dark:hidden"
              />
              <img
                src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-dark.svg"
                alt="برد مدیریت پروژه"
                className="hidden h-4 dark:block"
              />
            </div>
          </Card>
        </div>
      </div>
    </section>
  );
};

export { Feature8 };