"use client"

import { useRef } from "react"
import { motion, useInView } from "framer-motion"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

const faqItems = [
  {
    question: "Do I need new hardware?",
    answer: "Any FIPS 140-2 L3 HSM with PKCS#11 works – we've tested Thales Luna, Utimaco u.trust and AWS CloudHSM.",
  },
  {
    question: "When will the open-source SDK be GA?",
    answer: "v1.0 is slated for Q4 2025 after crypto-agility and FedNow adaptor land.",
  },
  {
    question: "What if PQC standards change again?",
    answer: "Our policy engine hot-swaps algorithms network-wide in minutes; no recompilation.",
  },
  {
    question: "How does the verification process maintain privacy?",
    answer:
      "All verification happens at the edge, within the receiving bank's infrastructure. No personal data leaves their premises, ensuring complete privacy and compliance with data protection regulations.",
  },
  {
    question: "What makes your solution quantum-secure?",
    answer:
      "We implement post-quantum cryptographic algorithms (ML-DSA/SLH-DSA) that are resistant to attacks from quantum computers. These algorithms are implemented inside FIPS 140-2 L3 Hardware Security Modules for maximum protection.",
  },
  {
    question: "How do you achieve such low latency?",
    answer:
      "Our architecture eliminates unnecessary hops and intermediaries, using direct permissioned TLS 1.3 channels between financial institutions. Combined with optimized algorithms and edge computing, we achieve median round-trip times of 38ms.",
  },
]

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

  return (
    <section id="faq" 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">Frequently Asked Questions</h2>
        <p className="mt-4 text-lg text-muted-foreground">
          Common questions about our quantum-secure verification network
        </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-3xl"
      >
        <Accordion type="single" collapsible className="w-full">
          {faqItems.map((item, index) => (
            <AccordionItem key={index} value={`item-${index}`}>
              <AccordionTrigger className="text-left">{item.question}</AccordionTrigger>
              <AccordionContent>{item.answer}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </motion.div>
    </section>
  )
}
