import { Button } from "@/components/ui/button"
import Link from "next/link"
import { ArrowRight } from "lucide-react"

export function HeroSection() {
  return (
    <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="max-w-3xl">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/20 border border-accent/30 text-accent-foreground text-sm mb-6">
            <div className="w-1.5 h-1.5 rounded-full bg-accent" />
            Independent Research Collective
          </div>

          <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 text-balance">
            Bonding Curve Research Group
          </h1>

          <p className="text-xl md:text-2xl text-muted-foreground mb-8 leading-relaxed text-pretty">
            We are a decentralized collective of scholars, engineers, and researchers dedicated to the comprehensive
            study, development, and practical implementation of bonding curves as programmable financial primitives.
          </p>

          <div className="flex flex-wrap gap-4">
            <Button asChild size="lg" className="bg-primary hover:bg-primary/90">
              <Link href="#research">
                Explore Research
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg">
              <Link
                href="https://bonding-curve-research-group.gitbook.io/bonding-curve-research-group-library"
                target="_blank"
              >
                View Library
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}