"use client"

import { useRef } from "react"
import { motion, useInView } from "framer-motion"
import { ArrowRight, Timer } from "lucide-react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import WaitlistForm from "@/components/waitlist-form"

export default function Hero() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true })

  const scrollToWaitlist = () => {
    const waitlistElement = document.getElementById("waitlist")
    if (waitlistElement) {
      waitlistElement.scrollIntoView({ behavior: "smooth" })
    }
  }

  return (
    <section id="hero" className="container relative 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"
      >
        <div className="mb-6 flex items-center justify-center">
          <Image src="/images/logo.png" alt="QuantumVerify Logo" width={80} height={80} className="mr-4" />
        </div>

        <div className="mb-6 flex items-center justify-center gap-2 text-sm font-medium text-muted-foreground">
          <Timer className="h-4 w-4" />
          <span>Sub-100ms verification</span>
        </div>

        <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
          <span className="block">Real-time,</span>
          <span className="gradient-text block">quantum-secure</span>
          <span className="block">verification before the money moves</span>
        </h1>

        <p className="mt-6 text-lg text-muted-foreground sm:text-xl">
          Cross-border payments confirmed in <span className="font-bold text-foreground">≤ 100 ms</span> with
          post-quantum signatures and explainable AI – no intermediaries, no data leaks, no excuses.
        </p>

        <p className="mt-4 text-xl font-semibold text-primary">Real-Time Verification. Quantum-Resilient Assurance.</p>

        <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
          <Button size="lg" className="w-full sm:w-auto" onClick={scrollToWaitlist}>
            Request sandbox access <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
          <Button
            variant="outline"
            size="lg"
            className="w-full sm:w-auto"
            onClick={() => window.dispatchEvent(new CustomEvent("openPatentSummary"))}
          >
            Read the patent summary
          </Button>
        </div>

        <div className="mt-12" id="waitlist">
          <WaitlistForm />
        </div>
      </motion.div>
    </section>
  )
}
