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="py-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="max-w-2xl mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">Research & Publications</h2>
          <p className="text-lg text-muted-foreground 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">
          {publications.map((pub, index) => (
            <Card key={index} className="p-6 hover:shadow-lg transition-shadow">
              <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div className="flex-1">
                  <h3 className="text-xl font-semibold mb-2">{pub.title}</h3>
                  <p className="text-muted-foreground mb-3 leading-relaxed">{pub.description}</p>
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <Calendar className="h-4 w-4" />
                    <span>{pub.date}</span>
                  </div>
                </div>
                <Button asChild variant="outline" className="self-start md:self-center 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">
            <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>
  )
}
