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

export function Hero() {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0">
        <img
          src="/images/mycelium-soil.jpg"
          alt="Mycelium growing through soil"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/50 to-black/70" />
      </div>

      <div className="container mx-auto px-4 py-20 relative z-10">
        <div className="max-w-5xl mx-auto text-center space-y-8">
          <h1 className="tracking-tight text-balance">
            <span className="block text-2xl md:text-3xl lg:text-4xl font-medium text-white/70 mb-4">it's time to</span>
            <span
              className="block text-6xl md:text-8xl lg:text-9xl font-bold text-white"
              style={{ textShadow: "0 0 40px rgba(0,0,0,0.8), 0 0 80px rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.9)" }}
            >
              <span className="text-white/40">(</span>Com<span className="text-white/40">)</span>post
            </span>
            <span
              className="block text-6xl md:text-8xl lg:text-9xl font-bold text-amber-200 mt-2"
              style={{ textShadow: "0 0 40px rgba(0,0,0,0.8), 0 0 80px rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.9)" }}
            >
              Capitalism
            </span>
          </h1>

          <p className="text-xl md:text-2xl text-white/95 max-w-3xl mx-auto text-balance leading-relaxed">
            What if we treated capitalism like organic matter—breaking down its extractive excesses to nourish
            regenerative systems that work for the many, not the few?
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-8">
            <Button size="lg" className="text-lg px-8 py-6" asChild>
              <a href="https://links.mycofi.earth" target="_blank" rel="noopener noreferrer">
                Explore the Mycelium
              </a>
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="text-lg px-8 py-6 bg-[oklch(0.75_0.06_60)]/90 hover:bg-[oklch(0.75_0.06_60)] border-[oklch(0.65_0.08_55)]"
              asChild
            >
              <a href="https://discord.com/invite/mFxSXCrfrN" target="_blank" rel="noopener noreferrer">
                Join the Network
              </a>
            </Button>
          </div>

          <div className="pt-12 animate-bounce">
            <ArrowDown className="w-8 h-8 mx-auto text-white/70" />
          </div>
        </div>
      </div>

      {/* Decorative mushroom illustration placeholder */}
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent z-10" />
    </section>
  )
}