import { Button } from "@/components/ui/button"
import { ArrowRight, Network } from "lucide-react"

export function Hero() {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden px-4 py-20 scan-lines">
      <div className="absolute inset-0 cyber-grid opacity-20" />

      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl animate-pulse" />
        <div
          className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-secondary/20 rounded-full blur-3xl animate-pulse"
          style={{ animationDelay: "1s" }}
        />
        <div
          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent/10 rounded-full blur-3xl animate-pulse"
          style={{ animationDelay: "2s" }}
        />
      </div>

      <svg className="absolute inset-0 w-full h-full opacity-30" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="laser-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style={{ stopColor: "rgb(0, 255, 255)", stopOpacity: 0 }} />
            <stop offset="50%" style={{ stopColor: "rgb(0, 255, 255)", stopOpacity: 1 }} />
            <stop offset="100%" style={{ stopColor: "rgb(255, 0, 255)", stopOpacity: 0 }} />
          </linearGradient>
        </defs>
        <line
          x1="0"
          y1="0"
          x2="100%"
          y2="100%"
          stroke="url(#laser-gradient)"
          strokeWidth="2"
          className="animate-pulse"
        />
        <line
          x1="100%"
          y1="0"
          x2="0"
          y2="100%"
          stroke="url(#laser-gradient)"
          strokeWidth="2"
          className="animate-pulse"
          style={{ animationDelay: "0.5s" }}
        />
        <circle
          cx="50%"
          cy="50%"
          r="200"
          fill="none"
          stroke="rgb(0, 255, 255)"
          strokeWidth="1"
          opacity="0.3"
          className="animate-pulse"
        />
        <circle
          cx="50%"
          cy="50%"
          r="300"
          fill="none"
          stroke="rgb(255, 0, 255)"
          strokeWidth="1"
          opacity="0.2"
          className="animate-pulse"
          style={{ animationDelay: "1s" }}
        />
      </svg>

      <div className="relative max-w-5xl mx-auto text-center space-y-8 z-10">
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border-2 border-primary text-primary text-sm font-medium mb-4 glow-border">
          <Network className="w-4 h-4" style={{ animation: "glow-pulse 2s ease-in-out infinite" }} />
          <span className="glow-text">{"Myco-Principic Design"}</span>
        </div>

        <h1 className="text-5xl md:text-7xl font-bold tracking-tight text-balance glow-text">
          {"Psilo-Cybernetics"}
          <span className="block text-primary mt-2 glow-text">{"& Institutional Neuroplasticity"}</span>
        </h1>

        <p className="text-xl md:text-2xl text-accent max-w-3xl mx-auto text-pretty leading-relaxed glow-text">
          {
            "Exploring the emergence of adaptive institutions through MycoFi—a framework connecting mycelial intelligence with decentralized systems for real-time community collaboration"
          }
        </p>

        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
          <Button
            size="lg"
            className="gap-2 text-base glow-border bg-primary hover:bg-primary/80 border-2 border-primary"
          >
            {"Explore the Framework"}
            <ArrowRight className="w-4 h-4" />
          </Button>
          <Button
            size="lg"
            variant="outline"
            className="text-base border-2 border-secondary text-secondary glow-border hover:bg-secondary/10 bg-transparent"
          >
            {"Read the Book"}
          </Button>
        </div>
      </div>
    </section>
  )
}