"use client"

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

const features = [
  {
    title: "300 ms+ pre-check latency",
    description: "Current reality stalls 'instant' rails",
    change: "38 ms median",
    changeDescription: "round-trip on commodity hardware",
    icon: Clock,
  },
  {
    title: "RSA/ECC will be crackable by 2030",
    description: "Current encryption standards are at risk",
    change: "Post-quantum ML-DSA / SLH-DSA",
    changeDescription: "inside FIPS 140-2 L3 HSMs",
    icon: Shield,
  },
  {
    title: "Sanctions matchers miss 20% of evasive names",
    description: "Current systems have significant gaps",
    change: "97.1% recall",
    changeDescription: "with two-stage AI + built-in explanations",
    icon: Brain,
  },
  {
    title: "Every hop exposes full PII",
    description: "Current systems compromise privacy",
    change: "Edge-local",
    changeDescription: "execution – zero personal data leaves the receiving bank",
    icon: Lock,
  },
]

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

  return (
    <section id="features" 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">Why It Matters</h2>
        <p className="mt-4 text-lg text-muted-foreground">
          The current payment verification landscape is broken. QuantumVerify fixes it.
        </p>
      </motion.div>

      <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
        {features.map((feature, 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">
                  <feature.icon className="h-6 w-6 text-primary" />
                </div>
                <CardTitle className="text-lg">{feature.title}</CardTitle>
                <CardDescription>{feature.description}</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <h4 className="font-medium text-primary">{feature.change}</h4>
                  <p className="text-sm text-muted-foreground">{feature.changeDescription}</p>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </div>
    </section>
  )
}
