"use client";

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

const floatingEmojis = [
  { emoji: "💩", top: "15%", left: "8%", delay: "0s", duration: "6s" },
  { emoji: "⚡", top: "25%", right: "12%", delay: "1s", duration: "7s" },
  { emoji: "💩", top: "60%", left: "5%", delay: "2s", duration: "8s" },
  { emoji: "🔋", top: "70%", right: "8%", delay: "0.5s", duration: "6.5s" },
  { emoji: "💩", top: "40%", right: "5%", delay: "3s", duration: "7s" },
  { emoji: "🌿", top: "80%", left: "15%", delay: "1.5s", duration: "9s" },
  { emoji: "⚡", top: "10%", left: "75%", delay: "2.5s", duration: "6s" },
  { emoji: "💩", top: "50%", left: "90%", delay: "0.8s", duration: "7.5s" },
];

export function HeroSection() {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-16">
      {/* Neon glow orbs */}
      <div className="absolute top-1/4 left-1/4 w-96 h-96 neon-glow-orb animate-pulse-glow" />
      <div
        className="absolute bottom-1/4 right-1/4 w-80 h-80 neon-glow-orb animate-pulse-glow"
        style={{ animationDelay: "1.5s" }}
      />

      {/* Floating emojis */}
      {floatingEmojis.map((item, i) => (
        <span
          key={i}
          className="absolute text-3xl sm:text-4xl animate-float-slow pointer-events-none select-none opacity-60"
          style={{
            top: item.top,
            left: item.left,
            right: item.right,
            animationDelay: item.delay,
            animationDuration: item.duration,
          }}
          aria-hidden="true"
        >
          {item.emoji}
        </span>
      ))}

      {/* Content */}
      <div className="relative z-10 mx-auto max-w-4xl px-4 text-center">
        <div className="animate-fade-in-up">
          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-neon/30 bg-neon/10 px-4 py-2 text-sm text-neon">
            <Zap className="h-4 w-4" />
            <span>The Future of Festival Sanitation</span>
          </div>
        </div>

        <h1
          className="animate-fade-in-up text-4xl sm:text-5xl md:text-7xl font-bold leading-tight tracking-tight mb-6"
          style={{ animationDelay: "0.1s" }}
        >
          Turning Festival{" "}
          <span className="gradient-text">Waste</span> Into Festival{" "}
          <span className="neon-text text-neon">Watts</span>
        </h1>

        <p
          className="animate-fade-in-up mx-auto max-w-2xl text-lg sm:text-xl text-cream-dim mb-10"
          style={{ animationDelay: "0.2s" }}
        >
          Our bioreactor-equipped porta potties don&apos;t just handle the business
          &mdash; they turn it into clean electricity. Yes, your festival is
          literally powered by poop.
        </p>

        <div
          className="animate-fade-in-up flex flex-col sm:flex-row items-center justify-center gap-4"
          style={{ animationDelay: "0.3s" }}
        >
          <a href="#contact">
            <Button size="lg">
              <Zap className="h-5 w-5" />
              Power Your Festival
            </Button>
          </a>
          <a href="#how-it-works">
            <Button variant="outline" size="lg">
              See How It Works
            </Button>
          </a>
        </div>

        <a
          href="#how-it-works"
          className="animate-fade-in-up mt-16 inline-block text-cream-dim hover:text-neon transition-colors"
          style={{ animationDelay: "0.5s" }}
        >
          <ArrowDown className="h-6 w-6 animate-bounce" />
        </a>
      </div>
    </section>
  );
}