const VideoShowcase = () => {
const motion = window.Motion.motion;
const AnimatePresence = window.Motion.AnimatePresence;
const videoRef = React.useRef(null);
const [isPlaying, setIsPlaying] = React.useState(true);
const [isMuted, setIsMuted] = React.useState(true);
const [progress, setProgress] = React.useState(0);
const [isFullscreen, setIsFullscreen] = React.useState(false);
const [showControls, setShowControls] = React.useState(true);
// Auto-hide controls timeout
const controlsTimeoutRef = React.useRef(null);
const togglePlay = () => {
if (videoRef.current) {
if (isPlaying) {
videoRef.current.pause();
setIsPlaying(false);
} else {
videoRef.current.play();
setIsPlaying(true);
}
}
};
const toggleMute = () => {
if (videoRef.current) {
videoRef.current.muted = !isMuted;
setIsMuted(!isMuted);
}
};
const handleTimeUpdate = () => {
if (videoRef.current) {
const current = videoRef.current.currentTime;
const duration = videoRef.current.duration;
if (duration > 0) {
setProgress((current / duration) * 100);
}
}
};
const handleSeek = (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const pos = (e.clientX - rect.left) / rect.width;
if (videoRef.current && videoRef.current.duration) {
videoRef.current.currentTime = pos * videoRef.current.duration;
setProgress(pos * 100);
}
};
const toggleFullscreen = () => {
setIsFullscreen(!isFullscreen);
};
const handleMouseMove = () => {
setShowControls(true);
if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current);
controlsTimeoutRef.current = setTimeout(() => {
if (isPlaying) setShowControls(false);
}, 3000);
};
// Close lightbox on Escape key
React.useEffect(() => {
const handleKeyDown = (e) => {
if (e.key === "Escape" && isFullscreen) {
setIsFullscreen(false);
}
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [isFullscreen]);
const highlights = [
{
title: "Không Gian Trải Nghiệm Đỉnh Cao",
desc: "Phòng dịch vụ thiết kế ánh sáng trầm ấm, riêng tư và thư thái tuyệt đối cho quý ông.",
icon: (
)
},
{
title: "Liệu Pháp Dưỡng Sinh Chuyên Sâu",
desc: "Kết hợp ấn huyệt vùng đầu, gội thảo mộc tự nhiên & giác hơi thải độc phục hồi thể lực.",
icon: (
)
},
{
title: "Đội Nụ KTV Trẻ Trung, Tận Tâm",
desc: "Kỹ thuật viên chu đáo, giàu kinh nghiệm, đem đến cho bạn từng phút giây thư giãn.",
icon: (
)
}
];
return (
{/* Dynamic Background Glow & Ambient Elements */}
{/* Section Header */}
Exclusive Showcase // Video Trải Nghiệm
Khám Phá Trải Nghiệm KongKo Spa
Đắm chìm vào không gian dưỡng sinh nam cao cấp. Xem thước phim thực tế về quy trình gội đầu dưỡng sinh, massage body và các liệu pháp phục hồi sức khỏe đỉnh cao.
{/* Video Player Card Container */}
isPlaying && setShowControls(false)}
>
{/* Ambient Video Backdrop Blur effect */}
{/* Main Video Element */}
{/* Big Play/Pause Overlay Button when Paused or Hovered */}
{(!isPlaying || showControls) && (
{isPlaying ? (
) : (
)}
)}
{/* Custom Floating Header Badge */}
KongKo Spa - Real Video Showcase
{/* Bottom Controls Bar */}
{showControls && (
{/* Interactive Progress Bar */}