"use client";
import { MessagesSquare, Play } from "lucide-react";
import { Fragment, useState } from "react";

import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";

interface Hero135Props {
  className?: string;
}

const Hero135 = ({ className }: Hero135Props) => {
  const [isVideoOpen, setIsVideoOpen] = useState(false);

  return (
    <Fragment>
      <section
        className={cn("bg-primary/5 py-12 font-sans md:py-20", className)}
      >
        <div className="container">
          <div className="flex flex-col justify-center gap-8 lg:flex-row lg:items-center">
            <div className="flex flex-1 flex-col gap-10">
              <div className="flex w-fit items-center gap-2 rounded-md bg-muted py-2 pe-3 ps-4">
                <MessagesSquare className="h-7 w-7 stroke-primary" />
                <div className="text-lg font-bold text-foreground">
                  مطالعات موردی
                </div>
              </div>
              <h1 className="max-w-96 text-2xll font-medium text-foreground lg:text-8xl">
                سفر مشتریان
              </h1>
              <p className="max-w-96 text-3xl leading-normal text-muted-foreground lg:text-xl">
                گزارش موفقیت مشتریانی را بخوانید که با استفاده از پلتفرم ما درآمد خود را افزایش داده‌اند.
                                            </p>
            </div>
            <div className="flex-1">
              <div className="relative w-full overflow-hidden rounded-3xl">
                <AspectRatio ratio={1}>
                  <div className="size-full">
                    <video
                      src="/block-media/shadcnblocks/block/man-1.mp4"
                      muted
                      autoPlay
                      loop
                      className="size-full object-cover object-center"
                    />
                    <Button
                      size="icon"
                      onClick={() => setIsVideoOpen(true)}
                      className="absolute bottom-0 left-0 m-10 flex size-fit w-fit items-center gap-4 rounded-full bg-background py-3 pe-8 ps-3 transition-transform hover:scale-105 hover:bg-background"
                    >
                      <div className="flex h-20 w-20 rounded-full bg-primary">
                        <Play className="m-auto size-7! fill-white stroke-white" />
                      </div>
                      <div>
                        <div className="text-start text-base font-semibold text-foreground">
                          نام مشتری
                                                                          </div>
                        <div className="text-start text-base font-medium text-muted-foreground">
                          مدیرعامل
                        </div>
                      </div>
                    </Button>
                  </div>
                </AspectRatio>
              </div>
            </div>
          </div>
        </div>
      </section>
      <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
        <DialogContent className="sm:max-w-[800px]">
          <DialogHeader>
            <DialogTitle>ویدیوی معرفی</DialogTitle>
          </DialogHeader>
          <div className="aspect-video">
            <iframe
              className="h-full w-full"
              src="https://www.youtube.com/embed/your-video-id"
              title="ویدیوی معرفی"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            ></iframe>
          </div>
        </DialogContent>
      </Dialog>
    </Fragment>
  );
};

export { Hero135 };