Video 1

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

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

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

  return (
    <section className="w-full bg-white py-12 md:py-24 dark:bg-background">
      <div className="mx-auto max-w-6xl px-6 lg:px-0">
        <div className="mb-16 grid grid-cols-1 gap-12 lg:grid-cols-2">
          <div className="space-y-6">
            <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="font-normal text-3xl text-neutral-900 tracking-tight sm:text-5xl xl:text-6xl dark:text-neutral-100">
              One platform, every way your team connects
            </h1>
          </div>

          <div className="flex items-end justify-end">
            <p className="max-w-sm text-lg text-neutral-700 tracking-tight dark:text-neutral-400">
              VoxFlow brings{" "}
              <span className="text-black dark:text-neutral-100">
                video, voice, and messaging
              </span>{" "}
              together so hybrid teams can move faster with less friction.
            </p>
          </div>
        </div>

        <div className="relative mb-16 w-full">
          <div
            className="relative aspect-video w-full cursor-pointer overflow-hidden rounded-3xl 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="group absolute inset-0 flex items-center justify-center bg-black/20 transition-colors duration-300 hover:bg-black/30">
              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-lg transition-transform duration-300 group-hover:scale-110">
                <Icons.playCircle className="size-8 fill-black text-white" />
              </div>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-8 sm:grid-cols-3">
          {[
            {
              description:
                "Crystal-clear HD video with AI-powered background blur, live captions, and auto-framing that keeps everyone in focus.",
              icon: Icons.cursor,
              title: "HD Video for Every Meeting",
            },
            {
              description:
                "Messages, files, and tasks in one hub. Instant sync across devices so your team is always aligned.",
              icon: Icons.zap,
              title: "Unified Team Workspace",
            },
            {
              description:
                "End-to-end encryption, waiting rooms, and data retention controls keep your communications safe.",
              icon: Icons.email,
              title: "Enterprise-Grade Security",
            },
          ].map((feature, _index) => (
            <div
              className="flex items-start gap-4 rounded-2xl p-6 transition-colors duration-300 hover:bg-gray-50 dark:hover:bg-neutral-800"
              key={feature.title}
            >
              <div className="shrink-0 pt-1">
                <feature.icon className="size-6 text-neutral-900 dark:text-neutral-100" />
              </div>
              <div className="flex-1">
                <h3 className="mb-1 font-medium text-base text-neutral-900 tracking-tight dark:text-neutral-100">
                  {feature.title}
                </h3>
                <p className="text-neutral-600 text-sm dark:text-neutral-400">
                  {feature.description}
                </p>
              </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>
  );
}