import { Button } from "@/components/ui/button"
import { Usb } from "lucide-react"

export function Hero() {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-black text-white">
      {/* Dramatic grid background */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff08_1px,transparent_1px),linear-gradient(to_bottom,#ffffff08_1px,transparent_1px)] bg-[size:4rem_4rem]" />

      <div className="container relative z-10 px-4 py-20">
        <div className="max-w-5xl mx-auto text-center space-y-8">
          {/* Logo/Brand */}
          <div className="inline-flex items-center gap-3 px-4 py-2 bg-white/5 backdrop-blur-sm border border-white/10">
            <Usb className="w-6 h-6" />
            <span className="font-mono text-sm tracking-wider">ALLTOR.NET</span>
          </div>

          {/* Main headline */}
          <h1 className="text-6xl md:text-8xl font-bold tracking-tight text-balance leading-[0.95]">
            <span className="block text-5xl md:text-7xl mb-2">We need an</span>
            <span className="bg-gradient-to-r from-red-500 via-yellow-500 via-green-500 via-blue-500 to-purple-500 bg-clip-text text-transparent">
              Alternative
            </span>
            <br />
            <span className="text-white">Internet</span>
          </h1>

          {/* Subheadline */}
          <p className="text-xl md:text-2xl text-white/70 max-w-3xl mx-auto text-balance leading-relaxed">
            A distributed, local-first, collaborative digital ecosystem free from corporate control. Access a new
            internet through physical USB keys and local mesh networks.
          </p>

          {/* CTA Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
            <Button size="lg" className="text-lg px-8 py-6 bg-white text-black hover:bg-white/90">
              Get Your Key
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="text-lg px-8 py-6 border-white/20 hover:bg-white/10 text-white bg-transparent"
            >
              Learn More
            </Button>
          </div>

          {/* Key stats */}
          <div className="grid grid-cols-3 gap-8 pt-12 max-w-2xl mx-auto">
            <div className="space-y-1">
              <div className="text-3xl md:text-4xl font-bold">100%</div>
              <div className="text-sm text-muted-foreground">Zero Knowledge</div>
            </div>
            <div className="space-y-1">
              <div className="text-3xl md:text-4xl font-bold">P2P</div>
              <div className="text-sm text-muted-foreground">Distributed</div>
            </div>
            <div className="space-y-1">
              <div className="text-3xl md:text-4xl font-bold">Free</div>
              <div className="text-sm text-muted-foreground">No Subscriptions</div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom fade */}
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent" />
    </section>
  )
}