"use client"

import { useRef, useState } from "react"
import { motion, useInView } from "framer-motion"
import { Play } from "lucide-react"

export default function VideoShowcase() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.2 })
  const [videoLoaded, setVideoLoaded] = useState(false)

  return (
    <section id="video-showcase" className="container py-24 sm:py-32" ref={ref}>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
        transition={{ duration: 0.5 }}
        className="mx-auto max-w-4xl text-center"
      >
        <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">See It In Action</h2>
        <p className="mt-4 text-lg text-muted-foreground">Watch our quantum-secure verification network in action</p>
      </motion.div>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
        transition={{ duration: 0.5, delay: 0.2 }}
        className="mx-auto mt-16 max-w-4xl"
      >
        <div className="aspect-video overflow-hidden rounded-lg bg-muted shadow-lg relative">
          {!videoLoaded && (
            <div className="absolute inset-0 flex items-center justify-center bg-muted">
              <div className="animate-pulse flex flex-col items-center justify-center">
                <Play className="h-16 w-16 text-primary opacity-75" />
                <p className="mt-2 text-muted-foreground">Loading video...</p>
              </div>
            </div>
          )}
          <iframe
            src="https://www.youtube.com/embed/5TvqIiOC9G8?rel=0&autoplay=0&showinfo=0&controls=1"
            title="QuantumVerify Explainer Video"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            className="h-full w-full"
            onLoad={() => setVideoLoaded(true)}
          ></iframe>
        </div>
      </motion.div>
    </section>
  )
}
