import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ExternalLink, Calendar } from "lucide-react"
import Link from "next/link"

export function ResearchSection() {
  const publications = [
    {
      title: "Modeling & Simulating Bonding Curves",
      description:
        "Introducing our open source library to model and simulate Bonding Curves and discussing our methodology for data science approaches to crypto-economic primitives.",
      date: "July 21, 2023",
      link: "https://mirror.xyz/0x8fF6Fe58b468B1F18d2C54e2B0870b4e847C730d/3gTCNW1LcsNd_O8zgfgERXnZhA_8wYyyHkZRe-oxIns",
    },
    {
      title: "Exploring Bonding Curves: PAMMs vs SAMMs",
      description:
        "A comprehensive comparison of Primary and Secondary Automated Market Makers, exploring their different applications in token ecosystems and market design.",
      date: "June 29, 2023",
      link: "https://mirror.xyz/0x8fF6Fe58b468B1F18d2C54e2B0870b4e847C730d/1Pxl_fbIPifIQ4_y0xoJGZGEk70qfOM3Gi9nWycm-8k",
    },
    {
      title: "The Importance of Systems Engineering in Token Design",
      description:
        "How modeling and simulating bonding curves enables the exploration of design space and assists in the implementation and deployment of bonding curve ecosystems.",
      date: "May 28, 2024",
      link: "https://bonding-curve-research-group.gitbook.io/bonding-curve-research-group-library/modeling-and-simulating-bonding-curves",
    },
  ]

  return (
    <section id="research" className="relative py-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
      <div className="absolute top-20 right-10 w-96 h-96 bg-[var(--neon-cyan)] rounded-full blur-[120px] opacity-15 animate-pulse" />
      <div
        className="absolute bottom-10 left-10 w-80 h-80 bg-[var(--neon-magenta)] rounded-full blur-[100px] opacity-10 animate-pulse"
        style={{ animationDelay: "1.5s" }}
      />

      <div className="max-w-7xl mx-auto relative z-10">
        <div className="max-w-2xl mx-auto mb-16 text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance neon-glow-cyan text-[var(--neon-cyan-bright)]">
            Research & Publications
          </h2>
          <p className="text-lg text-foreground/80 leading-relaxed text-pretty">
            Our research focuses on empirical analysis, practical applications, and in-depth exploration of bonding
            curves as vital components for crafting robust digital economies in the DeFi ecosystem.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-6 max-w-4xl mx-auto">
          {publications.map((pub, index) => (
            <Card
              key={index}
              className="p-6 bg-card/50 border-2 border-neon-cyan hover:shadow-[0_0_30px_rgba(0,255,255,0.4)] transition-all"
            >
              <div className="flex flex-col items-center text-center gap-4">
                <div className="flex-1">
                  <h3 className="text-xl font-semibold mb-2 text-[var(--neon-cyan)]">{pub.title}</h3>
                  <p className="text-foreground/70 mb-3 leading-relaxed">{pub.description}</p>
                  <div className="flex items-center justify-center gap-2 text-sm text-[var(--neon-cyan)]/70">
                    <Calendar className="h-4 w-4" />
                    <span>{pub.date}</span>
                  </div>
                </div>
                <Button
                  asChild
                  variant="outline"
                  className="border-2 border-[var(--neon-cyan)] text-[var(--neon-cyan-bright)] hover:bg-[var(--neon-cyan)]/10 shadow-[0_0_10px_rgba(0,255,255,0.3)] bg-transparent"
                >
                  <Link href={pub.link} target="_blank">
                    Read More
                    <ExternalLink className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
              </div>
            </Card>
          ))}
        </div>

        <div className="mt-12 text-center">
          <Button
            asChild
            size="lg"
            variant="outline"
            className="border-2 border-[var(--neon-cyan)] text-[var(--neon-cyan-bright)] hover:bg-[var(--neon-cyan)]/10 shadow-[0_0_15px_rgba(0,255,255,0.3)] bg-transparent"
          >
            <Link href="https://mirror.xyz/0x8fF6Fe58b468B1F18d2C54e2B0870b4e847C730d" target="_blank">
              View All Publications on Mirror
              <ExternalLink className="ml-2 h-4 w-4" />
            </Link>
          </Button>
        </div>
      </div>
    </section>
  )
}