import { ChevronRight } from "lucide-react";

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

interface Feature50Props {
  className?: string;
}

const Feature50 = ({ className }: Feature50Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6">
          <h2 className="mb-2 text-center text-3xl font-semibold text-balance lg:text-2xll">
            همکاری از راه دور را ساده کنید
          </h2>
          <p className="text-center text-muted-foreground lg:text-lg">
            اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
          </p>
          <Button variant="outline" className="mt-6">
            شروع رایگان
            <ChevronRight className="ms-1 size-4 rtl:rotate-180" />
          </Button>
        </div>
        <div className="mx-auto mt-20 flex max-w-5xl grid-cols-1 flex-col gap-6 lg:grid lg:grid-cols-7">
          <a
            href="#"
            className="col-span-7 grid overflow-hidden rounded-lg bg-muted sm:grid-cols-2"
          >
            <div className="flex flex-col justify-between p-8 lg:p-12">
              <div>
                <div className="mb-4 text-xs text-muted-foreground">
                  کار گروهی
                </div>
                <h3 className="mb-2 text-xl font-medium lg:text-xl">
                  تیم‌ها را در یک فضای مشترک هم‌راستا کنید
                </h3>
                <p className="text-sm text-muted-foreground lg:text-base">
                  هر عضو فقط به بخش‌های مرتبط با نقش خود دسترسی دارد.
                </p>
              </div>
              <div className="mt-6 sm:mt-8">
                <Button variant="outline">
                  بیشتر بدانید
                  <ChevronRight className="ms-1 size-4 rtl:rotate-180" />
                </Button>
              </div>
            </div>
            <img
              src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
              alt="تقویم تیم"
              className="order-first aspect-video h-full max-h-96 w-full border-b object-cover sm:order-last sm:aspect-auto lg:max-h-none lg:border-b-0 lg:border-s"
            />
          </a>
          <a
            href="#"
            className="group relative overflow-hidden rounded-lg bg-muted lg:col-span-3"
          >
            <Button
              variant="outline"
              size="sm"
              aria-label="بیشتر بدانید"
              className="absolute top-7 end-10 transition-all duration-200 group-hover:opacity-100 lg:translate-y-2 lg:opacity-0 lg:group-hover:translate-y-0"
            >
              <ChevronRight className="size-4 rtl:rotate-180" />
            </Button>
            <img
              src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
              alt="فضای همکاری تیمی"
              className="max-h-72 w-full border-b object-cover"
            />
            <div className="p-8 lg:p-12">
              <div className="mb-4 text-xs text-muted-foreground">
                مدیریت پروژه
              </div>
              <h3 className="mb-2 text-xl font-medium lg:text-xl">
                برد Kanban
              </h3>
            </div>
          </a>
          <a
            href="#"
            className="grid overflow-hidden rounded-lg bg-muted sm:grid-cols-2 lg:col-span-4"
          >
            <img
              src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
              alt="برد مدیریت پروژه"
              className="aspect-video h-full max-h-96 w-full border-b object-cover sm:aspect-auto lg:max-h-none lg:border-e lg:border-b-0"
            />
            <div className="flex flex-col justify-between p-8 lg:p-12">
              <div>
                <div className="mb-4 text-xs text-muted-foreground">
                  کار گروهی
                </div>
                <h3 className="mb-2 text-xl font-medium lg:text-xl">
                  تیم‌ها را در یک فضای مشترک هم‌راستا کنید
                </h3>
              </div>
              <div className="mt-6 sm:mt-8">
                <Button variant="outline">
                  بیشتر بدانید
                  <ChevronRight className="ms-1 size-4 rtl:rotate-180" />
                </Button>
              </div>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
};

export { Feature50 };