"use client"

import { useRef, useState } from "react"
import { motion, useInView } from "framer-motion"
import { Building2, Server, Banknote, Mail } from "lucide-react"
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { ContactForm } from "@/components/contact-form"

const involvementOptions = [
  {
    title: "Banks & Processors",
    description: "Integrate the sandbox, measure your own latency, keep the keys.",
    icon: Building2,
  },
  {
    title: "HSM & Cloud Providers",
    description: "Partner on joint PQC bundles – show customers crypto-agility in action.",
    icon: Server,
  },
  {
    title: "Investors",
    description: "Seed+ round (£6.4M) closes July 2025 – enquire for the full deck.",
    icon: Banknote,
  },
]

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

  return (
    <section id="get-involved" 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">Get Involved</h2>
        <p className="mt-4 text-lg text-muted-foreground">Join our ecosystem of partners and investors</p>
      </motion.div>

      <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
        {involvementOptions.map((option, 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 className="h-full">
              <CardHeader>
                <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <option.icon className="h-6 w-6 text-primary" />
                </div>
                <CardTitle>{option.title}</CardTitle>
                <CardDescription>{option.description}</CardDescription>
              </CardHeader>
            </Card>
          </motion.div>
        ))}
      </div>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
        transition={{ duration: 0.5, delay: 0.4 }}
        className="mt-12 text-center"
      >
        <Button size="lg" className="gap-2" onClick={() => setShowDemoForm(true)}>
          <Mail className="h-4 w-4" />
          Book a 30-minute demo
        </Button>
      </motion.div>

      <Dialog open={showDemoForm} onOpenChange={setShowDemoForm}>
        <DialogContent className="max-w-md">
          <ContactForm onClose={() => setShowDemoForm(false)} />
        </DialogContent>
      </Dialog>
    </section>
  )
}
