"use client"

import { useRef, useState } from "react"
import { motion, useInView } from "framer-motion"
import { ArrowRight, FileText, Play } from "lucide-react"
import { Button } from "@/components/ui/button"

const steps = [
  {
    number: "1",
    title: "Sender calls a single `/verify` API",
    description: "Integrate with your existing payment flow with minimal changes",
  },
  {
    number: "2",
    title: "Request is signed in your HSM",
    description: "Timestamped to ±500 ns UTC for perfect auditability",
  },
  {
    number: "3",
    title: "Travels one hop over a permissioned TLS 1.3 channel",
    description: "Direct to the receiving bank with no intermediaries",
  },
  {
    number: "4",
    title: "Bank-side micro-service performs checks locally",
    description: "Account check + AI sanctions screen without data leaving the premises",
  },
  {
    number: "5",
    title: "Signed response returns in under 100 ms",
    description: "'Proceed' or flagged with token-level rationale for clear decision-making",
  },
]

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

  return (
    <section id="how-it-works" 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">How It Works</h2>
        <p className="mt-4 text-lg text-muted-foreground">
          A 60-second overview of our quantum-secure verification process
        </p>
      </motion.div>

      <div className="mt-16 grid gap-12 lg:grid-cols-2">
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="relative"
        >
          <div className="sticky top-24 rounded-lg border bg-card p-6 shadow-sm">
            <div className="aspect-video overflow-hidden rounded-lg bg-muted 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-12 w-12 text-primary opacity-75" />
                    <p className="mt-2 text-sm text-muted-foreground">Loading video...</p>
                  </div>
                </div>
              )}
              <iframe
                src="https://www.youtube.com/embed/5TvqIiOC9G8?rel=0"
                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>
            <div className="mt-6 flex justify-center">
              <Button variant="outline" className="gap-2" asChild>
                <a href="/whitepaper" target="_blank" rel="noreferrer">
                  <FileText className="h-4 w-4" />
                  View White Paper
                  <ArrowRight className="h-4 w-4" />
                </a>
              </Button>
            </div>
          </div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, x: 20 }}
          animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 20 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="space-y-8"
        >
          {steps.map((step, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
              transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
              className="flex gap-4"
            >
              <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-primary text-lg font-bold text-primary-foreground">
                {step.number}
              </div>
              <div>
                <h3 className="text-xl font-semibold">{step.title}</h3>
                <p className="mt-2 text-muted-foreground">{step.description}</p>
              </div>
            </motion.div>
          ))}

          <div className="rounded-lg border bg-card p-4 shadow-sm">
            <p className="text-sm text-muted-foreground">
              All secured by our crypto-agility layer – swap algorithms without touching your code.
            </p>
          </div>
        </motion.div>
      </div>
    </section>
  )
}
