Video 2

"use client";

import Image from "next/image";
import { useState } from "react";

import { Icons } from "@/components/icons";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Dialog, DialogClose, DialogContent } from "@/components/ui/dialog";

const features = [
  {
    description: "in build and deploy",
    value: "3x Faster",
  },
  {
    description: "in page speeds",
    value: "56% increase",
  },
  {
    description: "of average time saved",
    value: "+4 year",
  },
  {
    description: "in asset and deploy",
    value: "98% faster",
  },
];

export default function Component() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <section className="relative overflow-hidden bg-white dark:bg-background">
      <div className="mx-auto max-w-full px-0">
        <div className="relative w-full">
          <div
            className="relative aspect-video w-full cursor-pointer overflow-hidden bg-gray-200 dark:bg-neutral-800"
            onClick={() => setIsOpen(true)}
          >
            <Image
              alt="Video Thumbnail"
              className="h-full w-full object-cover"
              height={600}
              src="https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770214610/img_15003.jpg"
              width={1200}
            />

            <div className="absolute inset-0 flex items-center justify-center bg-black/40">
              <div className="flex flex-col items-center justify-center space-y-4 text-center">
                <Badge
                  className="border-none bg-white py-0.5 font-medium shadow dark:bg-neutral-800"
                  variant="secondary"
                >
                  <Icons.zap className="size-3 fill-neutral-400 text-neutral-400" />
                  See It In Action
                </Badge>
                <h1 className="max-w-2xl font-normal text-4xl text-white tracking-tight sm:text-5xl xl:text-6xl">
                  Full Control, Zero Hassle, Total Clarity
                </h1>

                <Button className="" size="xl" variant="secondary">
                  <Icons.playCircle className="fill size-8 text-black" />
                  Play Video
                </Button>
              </div>

              <div className="absolute right-6 bottom-6 left-6 mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                {features.map((feature, _index) => (
                  <div
                    className="flex items-start gap-4 rounded-2xl bg-white/50 px-5 py-10 text-center backdrop-blur-sm dark:bg-black/50"
                    key={feature.value}
                  >
                    <div className="flex-1">
                      <h3 className="mb-1 font-medium text-3xl! text-neutral-900 tracking-tight dark:text-neutral-100">
                        {feature.value}
                      </h3>
                      <p className="text-neutral-600 text-sm dark:text-neutral-400">
                        {feature.description}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
      <Dialog onOpenChange={setIsOpen} open={isOpen}>
        <DialogContent className="w-full border-none p-0 sm:max-w-4xl">
          <iframe
            className="h-[60vh] w-full"
            height="315"
            src="https://www.youtube.com/embed/a_iQb1lnAEQ?si=321V7cd50PkpMVfY"
            title="video"
            width="420"
          />
          <DialogClose className="text-white" />
        </DialogContent>
      </Dialog>
    </section>
  );
}