"use client";
import { 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 Hero164Props {
  className?: string;
}

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

  return (
    <Fragment>
      <section className={cn("font-onest py-12 md:py-28", className)}>
        <div className="container">
          <div className="grid w-full grid-cols-1 gap-6 lg:grid-cols-2">
            <div>
              <div className="flex h-full flex-col justify-between gap-12">
                <div className="flex max-w-[41.25rem] flex-col gap-9">
                  <h1 className="text-[2.5rem] leading-none text-primary sm:text-[3.4375rem] md:text-[4rem]">
                    رشد شغلی با منتورینگ تخصصی
                  </h1>
                  <p className="text-lg font-medium text-primary md:text-xl">
                    با راهنمایی منتورهای باتجربه، مسیر شغلی و مهارت‌های حرفه‌ای خود را با برنامه‌ای متناسب با اهداف شخصی توسعه دهید.
                                                        </p>
                  <Button
                    asChild
                    variant="default"
                    className="h-fit w-fit rounded-full px-8 py-4 font-semibold"
                  >
                    <a href="#">شروع منتورینگ</a>
                  </Button>
                </div>
                <div className="flex max-w-[24.375rem] flex-col gap-6">
                  <p className="text-xl text-primary">
                    ویدیوی معرفی ما را ببینید تا با خدمات ما آشنا شوید
                  </p>
                  <Button
                    variant="ghost"
                    onClick={() => setIsVideoOpen(true)}
                    className="group relative flex aspect-video h-full w-full max-w-[24.375rem] overflow-hidden rounded-lg bg-accent bg-[url('/block-media/shadcnblocks/block/placeholder-2.svg')] bg-[length:100%_100%] bg-center bg-no-repeat p-0 transition-all after:absolute after:block after:h-full after:w-full after:bg-background/5 after:content-[''] hover:bg-accent hover:bg-[length:120%_120%] hover:after:bg-black/15"
                  >
                    <AspectRatio ratio={16 / 9} className="flex h-full w-full">
                      <div className="m-auto aspect-square">
                        <Play className="h-10! w-10! fill-white stroke-white transition-transform group-hover:scale-125" />
                      </div>
                    </AspectRatio>
                  </Button>
                </div>
              </div>
            </div>
            <div>
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="تصویر نمونه"
                className="aspect-[4/5] h-full max-h-[62.5rem] w-full rounded-xl object-cover object-center"
              />
            </div>
          </div>
        </div>
      </section>
      <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
        <DialogContent className="sm:max-w-[50rem]">
          <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 { Hero164 };