Hero Video Modal Dialog

1'use client';
2
3import React, { useState, useEffect } from 'react';
4import { Play, X, Volume2, VolumeX, Maximize2, Pause, Sparkles } from 'lucide-react';
5
6export default function HeroVideoDialog() {
7  const [isOpen, setIsOpen] = useState(false);
8  const [isPlaying, setIsPlaying] = useState(true);
9  const [isMuted, setIsMuted] = useState(false);
10
11  useEffect(() => {
12    const handleKeyDown = (e: KeyboardEvent) => {
13      if (e.key === 'Escape') setIsOpen(false);
14    };
15    if (isOpen) window.addEventListener('keydown', handleKeyDown);
16    return () => window.removeEventListener('keydown', handleKeyDown);
17  }, [isOpen]);
18
19  return (
20    <div className="flex flex-col items-center justify-center p-2 sm:p-4 w-full">
21      <div
22        onClick={() => setIsOpen(true)}
23        className="group relative flex h-48 w-full max-w-md sm:h-60 cursor-pointer items-center justify-center overflow-hidden rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-zinc-950 shadow-2xl transition-all hover:scale-[1.02] hover:border-blue-500/50"
24      >
25        <div className="absolute inset-0 bg-gradient-to-tr from-blue-950/60 via-zinc-950 to-indigo-950/40 opacity-90 group-hover:opacity-100 transition" />
26        <div className="relative z-10 flex flex-col items-center gap-3">
27          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-600/90 text-white shadow-lg backdrop-blur-md transition group-hover:scale-110">
28            <Play className="h-7 w-7 fill-white ml-1" />
29          </div>
30          <span className="inline-flex items-center gap-1.5 rounded-full bg-white/10 px-3 py-1 text-[11px] font-semibold text-white/90 backdrop-blur-md">
31            <Sparkles className="h-3 w-3 text-blue-400" /> Watch Product Demo
32          </span>
33        </div>
34      </div>
35
36      {isOpen && (
37        <div onClick={() => setIsOpen(false)} className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-3 sm:p-6 backdrop-blur-md">
38          <div onClick={(e) => e.stopPropagation()} className="relative w-full max-w-3xl overflow-hidden rounded-3xl border border-zinc-800 bg-zinc-950 shadow-2xl">
39            <div className="flex items-center justify-between border-b border-zinc-800 px-5 py-4 bg-zinc-900/50">
40              <h3 className="text-sm font-bold text-white">Aurenza Spatial Showcase</h3>
41              <button onClick={() => setIsOpen(false)} className="rounded-full bg-zinc-800 p-1.5 text-zinc-400 hover:text-white"><X className="h-4 w-4" /></button>
42            </div>
43            <div className="relative aspect-video w-full bg-black flex items-center justify-center">
44              <video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" autoPlay loop muted={isMuted} playsInline className="w-full h-full object-cover" />
45            </div>
46          </div>
47        </div>
48      )}
49    </div>
50  );
51}