"use client"

import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ArrowDown, Sparkles } from "lucide-react"

export function HeroSection() {
  return (
    <section className="min-h-screen flex items-center justify-center relative overflow-hidden">
      {/* Animated Background */}
      <div className="absolute inset-0 trippy-gradient opacity-20"></div>

      {/* Floating Elements */}
      <div className="absolute top-20 left-10 text-6xl opacity-30 float-animation">🍄</div>
      <div className="absolute top-40 right-20 text-4xl opacity-40 float-animation" style={{ animationDelay: "2s" }}>
        🌱
      </div>
      <div className="absolute bottom-40 left-20 text-5xl opacity-35 float-animation" style={{ animationDelay: "4s" }}>
        🌿
      </div>
      <div className="absolute bottom-20 right-10 text-3xl opacity-30 float-animation" style={{ animationDelay: "1s" }}>
        ✨
      </div>

      <div className="container mx-auto px-4 text-center relative z-10">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-6xl md:text-8xl font-bold mb-6 text-balance">
            <span className="text-primary">Society</span> is{" "}
            <span className="text-secondary mycelial-growth">Trippin Balls</span>
          </h1>

          <p className="text-xl md:text-2xl mb-8 text-muted-foreground text-pretty leading-relaxed">
            {"On a system predicated on economic extraction, oppression, and endless growth. "}
            {"Time to explore "}
            <span className="text-primary font-semibold">post-capitalist alternatives</span>
            {" inspired by nature's wisdom."}
          </p>

          {/* Hero illustration */}
          <div className="relative w-full max-w-3xl mx-auto mb-10 rounded-xl overflow-hidden shadow-2xl shadow-primary/20 border border-primary/20">
            <Image
              src="/hero-mushrooms.png"
              alt="Mushrooms growing from decomposing money and shell casings, transforming extraction into regeneration"
              width={1408}
              height={768}
              className="w-full h-auto"
              priority
            />
          </div>

          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
            <Button
              size="lg"
              className="pulse-glow text-lg px-8 py-4"
              onClick={() => window.open("https://post-appitalism.app", "_blank")}
            >
              <Sparkles className="mr-2 h-5 w-5" />
              Explore Alternatives
            </Button>
            <Button
              variant="outline"
              size="lg"
              className="text-lg px-8 py-4 border-primary text-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
              onClick={() => window.open("https://mycofi.earth", "_blank")}
            >
              Learn Mycoeconomics
            </Button>
          </div>

          <div className="animate-bounce">
            <ArrowDown className="h-8 w-8 mx-auto text-primary" />
          </div>
        </div>
      </div>
    </section>
  )
}