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="py-20 px-4 sm:px-6 lg:px-8 bg-muted/30">
      <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">About the BCRG</h2>
          <p className="text-lg text-muted-foreground 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 hover:shadow-lg transition-shadow">
              <div className="flex items-start gap-4">
                <div className="p-2 rounded-lg bg-accent/10">
                  <value.icon className="h-6 w-6 text-accent" />
                </div>
                <div>
                  <h3 className="text-xl font-semibold mb-2">{value.title}</h3>
                  <p className="text-muted-foreground leading-relaxed">{value.description}</p>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}