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

export function HeroSection() {
  return (
    <section className="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
      <div className="absolute top-20 right-10 w-96 h-96 bg-[var(--neon-cyan)] rounded-full blur-[120px] opacity-20 animate-pulse" />
      <div
        className="absolute bottom-10 left-20 w-72 h-72 bg-[var(--neon-purple)] rounded-full blur-[100px] opacity-15 animate-pulse"
        style={{ animationDelay: "1s" }}
      />

      <div className="max-w-7xl mx-auto relative z-10">
        <div className="max-w-3xl mx-auto text-center">
          <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 text-balance neon-glow-cyan text-[var(--neon-cyan-bright)]">
            Bonding Curve Research Group
          </h1>

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

          <div className="flex flex-wrap gap-4 justify-center">
            <Button
              asChild
              size="lg"
              className="bg-[var(--neon-cyan)] hover:bg-[var(--neon-cyan-bright)] text-black font-semibold shadow-[0_0_20px_rgba(0,255,255,0.5)]"
            >
              <Link href="#research">
                Explore Research
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
            <Button
              asChild
              variant="outline"
              size="lg"
              className="border-2 border-[var(--neon-cyan)] text-[var(--neon-cyan-bright)] hover:bg-[var(--neon-cyan)]/10 shadow-[0_0_15px_rgba(0,255,255,0.3)] bg-transparent"
            >
              <Link
                href="https://bonding-curve-research-group.gitbook.io/bonding-curve-research-group-library"
                target="_blank"
              >
                View Library
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}