import { Card } from "@/components/ui/card"
import { Users, Lightbulb, Code, BookOpen } from "lucide-react"

export function AboutSection() {
  const values = [
    {
      icon: Users,
      title: "Collaborative",
      description:
        "A diverse mix of expertise spanning systems engineering, mathematical modeling, economics, and data science.",
    },
    {
      icon: Lightbulb,
      title: "Innovative",
      description: "Driving innovation that broadens the potential applications of programmable financial primitives.",
    },
    {
      icon: Code,
      title: "Open Source",
      description:
        "Committed to building reliable tooling that empowers projects and developers in the Web3 ecosystem.",
    },
    {
      icon: BookOpen,
      title: "Educational",
      description:
        "Simplifying the understanding and implementation of bonding curves to democratize these complex concepts.",
    },
  ]

  return (
    <section id="about" className="relative py-20 px-4 sm:px-6 lg:px-8 bg-card/30 overflow-hidden">
      <div className="absolute top-10 left-20 w-80 h-80 bg-[var(--neon-orange)] rounded-full blur-[120px] opacity-15 animate-pulse" />

      <div className="max-w-7xl mx-auto relative z-10">
        <div className="max-w-2xl mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance neon-glow-orange text-[var(--neon-orange-bright)]">
            About the BCRG
          </h2>
          <p className="text-lg text-foreground/80 leading-relaxed text-pretty">
            The Bonding Curve Research Group is an independent, decentralized collective united in our dedication to
            advancing the understanding and application of bonding curves in crypto-economics. We bring together
            expertise from multiple disciplines to create tools and knowledge that benefit the entire Web3 community.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {values.map((value, index) => (
            <Card
              key={index}
              className="p-6 bg-card/50 border-2 border-neon-orange hover:shadow-[0_0_30px_rgba(255,140,0,0.4)] transition-all"
            >
              <div className="flex items-start gap-4">
                <div className="p-2 rounded-lg bg-[var(--neon-orange)]/20 border border-[var(--neon-orange)]">
                  <value.icon className="h-6 w-6 text-[var(--neon-orange-bright)]" />
                </div>
                <div>
                  <h3 className="text-xl font-semibold mb-2 text-[var(--neon-orange)]">{value.title}</h3>
                  <p className="text-foreground/70 leading-relaxed">{value.description}</p>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
