import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { BookOpen, Database, LineChart, Code2 } from "lucide-react"
import Link from "next/link"

export function LibrarySection() {
  const features = [
    {
      icon: Database,
      title: "Data Loading",
      description: "Easy data loading from Dune dashboards for analyzing existing bonding curves deployed on-chain.",
    },
    {
      icon: LineChart,
      title: "Interactive Models",
      description: "Collection of bonding curve models with interactive parameterization and visualization dashboards.",
    },
    {
      icon: Code2,
      title: "Python Library",
      description: 'Open source Python library "conding" for modeling, simulation, and analysis of bonding curves.',
    },
    {
      icon: BookOpen,
      title: "Documentation",
      description: "Comprehensive guides and documentation to help you understand and implement bonding curves.",
    },
  ]

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

      <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-purple text-[var(--neon-magenta)]">
            BCRG Library
          </h2>
          <p className="text-lg text-foreground/80 leading-relaxed text-pretty">
            A comprehensive toolkit for exploring the design space of bonding curves, producing re-usable tooling as
            infrastructure for future research and practical implementations.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 max-w-5xl mx-auto">
          {features.map((feature, index) => (
            <Card
              key={index}
              className="p-6 bg-card/50 border-2 border-neon-purple hover:shadow-[0_0_30px_rgba(138,43,226,0.4)] transition-all"
            >
              <div className="flex flex-col items-center text-center gap-4">
                <div className="p-2 rounded-lg bg-[var(--neon-purple)]/20 border border-[var(--neon-purple)]">
                  <feature.icon className="h-6 w-6 text-[var(--neon-magenta)]" />
                </div>
                <div>
                  <h3 className="text-xl font-semibold mb-2 text-[var(--neon-purple)]">{feature.title}</h3>
                  <p className="text-foreground/70 leading-relaxed">{feature.description}</p>
                </div>
              </div>
            </Card>
          ))}
        </div>

        <Card className="p-8 bg-card/50 border-2 border-[var(--neon-purple)] shadow-[0_0_30px_rgba(138,43,226,0.3)] max-w-4xl mx-auto">
          <div className="flex flex-col items-center text-center gap-6">
            <div className="flex-1">
              <h3 className="text-2xl font-bold mb-3 text-[var(--neon-magenta)]">Get Started with the Library</h3>
              <p className="text-foreground/70 leading-relaxed mb-4">
                Access our comprehensive documentation and tutorials to start modeling and analyzing bonding curves
                today.
              </p>
              <code className="block bg-black/50 border border-[var(--neon-purple)] px-4 py-2 rounded text-sm font-mono text-[var(--neon-purple)]">
                pip install conding
              </code>
            </div>
            <Button
              asChild
              size="lg"
              className="bg-[var(--neon-purple)] hover:bg-[var(--neon-magenta)] text-white font-semibold shadow-[0_0_20px_rgba(138,43,226,0.5)]"
            >
              <Link
                href="https://bonding-curve-research-group.gitbook.io/bonding-curve-research-group-library"
                target="_blank"
              >
                View Documentation
              </Link>
            </Button>
          </div>
        </Card>
      </div>
    </section>
  )
}