"use client"

import { useRef } from "react"
import { motion, useInView } from "framer-motion"
import { FileText, Code, Clock, Shield } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

const proofPoints = [
  {
    icon: FileText,
    title: "Patent 1 filed with the UKIPO",
    description: "Positive search report, April 2025",
  },
  {
    icon: Code,
    title: "SDK-beta 0.3 drops May 2025",
    description: "With AWS KMS-HSM stub & Dilithium via OpenQuantumSafe",
  },
  {
    icon: Clock,
    title: "Independent benchmark (100k requests)",
    stats: [
      "Latency p50 38 ms / p95 69 ms",
      "ML-DSA sign 1.78 ms median",
      "Clock-sync residual 0.68 µs p95",
      "Sanctions recall 97.12% across adversarial names",
    ],
  },
  {
    icon: Shield,
    title: "Early-access cohort",
    description: "12 Tier-2 banks + 2 HSM vendors evaluating in sandbox",
  },
]

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

  return (
    <section id="proof" 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">Proof It Delivers</h2>
        <p className="mt-4 text-lg text-muted-foreground">Real results from our quantum-secure verification network</p>
      </motion.div>

      <div className="mt-16 grid gap-8 sm:grid-cols-2">
        {proofPoints.map((point, 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: index * 0.1 }}
          >
            <Card>
              <CardHeader className="pb-2">
                <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <point.icon className="h-6 w-6 text-primary" />
                </div>
                <CardTitle>{point.title}</CardTitle>
              </CardHeader>
              <CardContent>
                {point.description && <p className="text-muted-foreground">{point.description}</p>}
                {point.stats && (
                  <ul className="mt-2 space-y-1">
                    {point.stats.map((stat, statIndex) => (
                      <li key={statIndex} className="text-sm">
                        • {stat}
                      </li>
                    ))}
                  </ul>
                )}
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </div>
    </section>
  )
}
