"use client";

import Fade from "embla-carousel-fade";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

interface Contact4Props {
  className?: string;
}

const Contact4 = ({ className }: Contact4Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="max-w-xl">
          <h1 className="mb-3 text-xl font-medium text-muted-foreground">
            ارتباط با ما
          </h1>
          <p className="text-xl font-medium text-balance md:text-2xll">
            تیم فروش و پشتیبانی CRM کنار تیم شماست.
                                </p>
        </div>
        <div className="mt-10 grid gap-4 md:mt-20 md:grid-cols-3 md:gap-8">
          <div className="flex flex-col justify-between gap-6 rounded-lg border p-6">
            <div>
              <h2 className="mb-4 text-xl font-medium md:text-xl">فروش</h2>
              <p className="text-muted-foreground">
                برای دمو شخصی‌سازی‌شده، مقایسه پلن‌ها یا برآورد استقرار CRM با کارشناس فروش هماهنگ کنید.
                                            </p>
            </div>
            <a href="#" className="hover:underline">
              درخواست دمو
            </a>
          </div>
          <div className="flex flex-col justify-between gap-6 rounded-lg border p-6">
            <div>
              <h2 className="mb-4 text-xl font-medium md:text-xl">پشتیبانی فنی</h2>
              <p className="text-muted-foreground">
                اگر در قیف فروش، یکپارچه‌سازی یا گزارش‌گیری به مشکل خورده‌اید، پشتیبانی محصول آماده کمک است.
                                            </p>
            </div>
            <a href="#" className="hover:underline">
              دریافت پشتیبانی
            </a>
          </div>
          <div className="flex flex-col justify-between gap-6 rounded-lg border p-6">
            <div>
              <h2 className="mb-4 text-xl font-medium md:text-xl">
                شرکای فروش
                                            </h2>
              <p className="text-muted-foreground">
                برای همکاری به‌عنوان شریک فروش یا یکپارچه‌ساز، درخواست‌تان را برای تیم همکاری‌های فروش بفرستید.
                                            </p>
            </div>
            <a href="#" className="hover:underline">
              درخواست همکاری
            </a>
          </div>
        </div>
        <div className="mt-7">
          <Carousel
            plugins={[Fade()]}
            opts={{
              loop: true,
            }}
          >
            <CarouselContent>
              <CarouselItem>
                <div className="relative flex h-full flex-col overflow-hidden rounded-t-lg md:max-h-[496px] md:rounded-lg">
                  <img
                    src="/block-media/shadcnblocks/block/maps/map-1.png"
                    alt="نقشه دفاتر فروش"
                    className="h-full w-full rounded-t-lg object-cover md:rounded-lg"
                  />
                  <div className="bottom-8 start-8 flex flex-col justify-between gap-6 rounded-b-lg border-x border-b bg-background p-6 md:absolute md:max-w-96 md:rounded-lg md:border">
                    <div>
                      <h2 className="mb-4 text-xl font-medium md:text-xl">
                        دفاتر فروش بین‌المللی
                                                                    </h2>
                      <p className="text-muted-foreground">
                        تیم‌های فروش و موفقیت مشتری از دفاتر منطقه‌ای، استقرار CRM را در بازارهای مختلف همراهی می‌کنند.
                                                                    </p>
                    </div>
                    <a href="#" className="hover:underline">
                      مشاهده دفاتر
                                                              </a>
                  </div>
                </div>
              </CarouselItem>
              <CarouselItem>
                <div className="relative flex h-full flex-col overflow-hidden rounded-t-lg md:max-h-[496px] md:rounded-lg">
                  <img
                    src="/block-media/shadcnblocks/block/maps/map-2.png"
                    alt="نقشه دفتر نیویورک"
                    className="h-full w-full rounded-t-lg object-cover md:rounded-lg"
                  />
                  <div className="bottom-8 start-8 flex flex-col justify-between gap-6 rounded-b-lg border-x border-b bg-background p-6 md:absolute md:max-w-96 md:rounded-lg md:border">
                    <div>
                      <h2 className="mb-4 text-xl font-medium md:text-xl">
                        نیویورک، آمریکا
                      </h2>
                      <p className="text-muted-foreground" dir="rtl">
                        1 Liberty Plaza, 165 Broadway, New York, NY 10006
                      </p>
                    </div>
                    <a href="#" className="hover:underline">
                      مشاهده در نقشه
                    </a>
                  </div>
                </div>
              </CarouselItem>
              <CarouselItem>
                <div className="relative flex h-full flex-col overflow-hidden rounded-t-lg md:max-h-[496px] md:rounded-lg">
                  <img
                    src="/block-media/shadcnblocks/block/maps/map-3.png"
                    alt="نقشه دفتر پاریس"
                    className="h-full w-full rounded-t-lg object-cover md:rounded-lg"
                  />
                  <div className="bottom-8 start-8 flex flex-col justify-between gap-6 rounded-b-lg border-x border-b bg-background p-6 md:absolute md:max-w-96 md:rounded-lg md:border">
                    <div>
                      <h2 className="mb-4 text-xl font-medium md:text-xl">
                        پاریس، فرانسه
                      </h2>
                      <p className="text-muted-foreground" dir="rtl">
                        10 Rue de la Paix, 75002 Paris
                      </p>
                    </div>
                    <a href="#" className="hover:underline">
                      مشاهده در نقشه
                    </a>
                  </div>
                </div>
              </CarouselItem>
              <CarouselItem>
                <div className="relative flex h-full flex-col overflow-hidden rounded-t-lg md:max-h-[496px] md:rounded-lg">
                  <img
                    src="/block-media/shadcnblocks/block/maps/map-4.png"
                    alt="نقشه دفتر کی‌یف"
                    className="h-full w-full rounded-t-lg object-cover md:rounded-lg"
                  />
                  <div className="bottom-8 start-8 flex flex-col justify-between gap-6 rounded-b-lg border-x border-b bg-background p-6 md:absolute md:max-w-96 md:rounded-lg md:border">
                    <div>
                      <h2 className="mb-4 text-xl font-medium md:text-xl">
                        کی‌یف، اوکراین
                      </h2>
                      <p className="text-muted-foreground" dir="rtl">
                        1A Sportyvna Square, 01023 Kyiv
                      </p>
                    </div>
                    <a href="#" className="hover:underline">
                      مشاهده در نقشه
                    </a>
                  </div>
                </div>
              </CarouselItem>
              <CarouselItem>
                <div className="relative flex h-full flex-col overflow-hidden rounded-t-lg md:max-h-[496px] md:rounded-lg">
                  <img
                    src="/block-media/shadcnblocks/block/maps/map-5.png"
                    alt="نقشه دفتر سنگاپور"
                    className="h-full w-full rounded-t-lg object-cover md:rounded-lg"
                  />
                  <div className="bottom-8 start-8 flex flex-col justify-between gap-6 rounded-b-lg border-x border-b bg-background p-6 md:absolute md:max-w-96 md:rounded-lg md:border">
                    <div>
                      <h2 className="mb-4 text-xl font-medium md:text-xl">
                        سنگاپور
                      </h2>
                      <p className="text-muted-foreground" dir="rtl">
                        One Raffles Place, Singapore 048616
                      </p>
                    </div>
                    <a href="#" className="hover:underline">
                      مشاهده در نقشه
                    </a>
                  </div>
                </div>
              </CarouselItem>
            </CarouselContent>
            <div className="absolute end-6 bottom-2 flex gap-4 md:end-10 md:bottom-5">
              <CarouselPrevious className="static" />
              <CarouselNext className="static" />
            </div>
          </Carousel>
        </div>
      </div>
    </section>
  );
};

export { Contact4 };