"use client"; import Image from "next/image"; import Link from "next/link"; import { useEffect, useState } from "react"; function BackIcon() { return ( ); } function HistoryIcon() { return ( ); } function PlayIcon() { return ( ); } const metrics = [ { label: "marriage applicants", value: "120" }, { label: "Successful marriage", value: "120" }, ]; const mockVideoDuration = 12; export default function VideoPageTwo() { const [isPlaying, setIsPlaying] = useState(false); const [watchedSeconds, setWatchedSeconds] = useState(0); const isCompleted = watchedSeconds >= mockVideoDuration; const progressPercent = Math.min( (watchedSeconds / mockVideoDuration) * 100, 100, ); useEffect(() => { if (!isPlaying || isCompleted) { return; } const timer = window.setInterval(() => { setWatchedSeconds((currentValue) => { const nextValue = Math.min(currentValue + 1, mockVideoDuration); if (nextValue >= mockVideoDuration) { setIsPlaying(false); } return nextValue; }); }, 1000); return () => window.clearInterval(timer); }, [isCompleted, isPlaying]); const handlePlay = () => { if (isCompleted) { setWatchedSeconds(0); } setIsPlaying((currentValue) => !currentValue || isCompleted); }; return (

9:41

Habib Marriage

Mock video {watchedSeconds}s / 12s

Watch the full mock video to unlock the next step.

{metrics.map((metric) => (

{metric.value}

{metric.label}

))}

); }