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

export function Hero() {
  return (
    <section className="relative overflow-hidden border-b-4 border-primary">
      <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,oklch(0.75_0.18_195/0.05)_25%,oklch(0.75_0.18_195/0.05)_50%,transparent_50%,transparent_75%,oklch(0.75_0.18_195/0.05)_75%)] bg-[length:20px_20px]" />
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,oklch(0.72_0.19_45/0.1),transparent_50%)]" />

      <div className="relative mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8 lg:py-32">
        <div className="text-center">
          <div className="mb-8 flex justify-center">
            <div className="relative">
              <div className="absolute inset-0 animate-pulse blur-2xl bg-primary/30" />
              <div className="absolute -inset-4 animate-pulse blur-3xl bg-accent/20 glitter" />
              <h1 className="relative text-6xl font-bold tracking-tight sm:text-7xl lg:text-9xl retro-shadow">
                <span className="text-primary drop-shadow-[0_0_15px_oklch(0.75_0.18_195)]">r</span>
                <span className="text-foreground">Space</span>
                <span className="text-secondary drop-shadow-[0_0_15px_oklch(0.72_0.19_45)]">.online</span>
              </h1>
            </div>
          </div>

          <div className="mx-auto max-w-3xl space-y-4">
            <p className="text-2xl font-bold leading-relaxed text-primary sm:text-3xl text-balance">
              Remember when the internet was <span className="text-accent">cool</span>?
            </p>
            <p className="text-3xl font-bold leading-relaxed sm:text-4xl text-balance">
              <span className="text-primary">r</span>Space isn't just <em>my</em>space —
            </p>
            <p className="text-3xl font-bold leading-relaxed sm:text-4xl text-balance">
              It's <span className="text-secondary drop-shadow-[0_0_10px_oklch(0.72_0.19_45)]">(ou)r</span>
              <span className="text-foreground">Space</span>
            </p>
          </div>

          <p className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-muted-foreground sm:text-xl">
            Build digital spaces that improve your <span className="font-semibold text-primary">physical world</span>.
            Local-first, zero-knowledge privacy, outside the walls of big tech monopolies.
          </p>

          <div className="mt-12 flex flex-col items-center justify-center gap-4 sm:flex-row">
            <Button
              size="lg"
              className="group relative overflow-hidden bg-primary text-primary-foreground hover:bg-primary/90 retro-shadow-sm hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none transition-all"
            >
              <span className="relative z-10 flex items-center gap-2">
                <Sparkles className="h-5 w-5" />
                Create Your rSpace
              </span>
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-2 border-secondary text-secondary hover:bg-secondary hover:text-secondary-foreground bg-transparent retro-shadow-sm hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none transition-all"
            >
              See Real Examples
            </Button>
          </div>

          <div className="mt-16 inline-flex flex-wrap items-center justify-center gap-4 rounded-lg border-2 border-primary bg-card/80 px-8 py-4 text-sm backdrop-blur-sm retro-shadow">
            <span className="font-bold text-primary">★</span>
            <span className="text-muted-foreground">Zero-Knowledge Privacy</span>
            <span className="text-primary">•</span>
            <span className="text-muted-foreground">Community Owned</span>
            <span className="text-secondary">•</span>
            <span className="text-muted-foreground">Local-First</span>
            <span className="font-bold text-secondary">★</span>
          </div>
        </div>
      </div>
    </section>
  )
}