"use client";

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

const floatingEmojis = [
  { emoji: "💩", top: "20%", left: "8%", delay: "0s", duration: "8s" },
  { emoji: "⚡", top: "30%", right: "10%", delay: "1.5s", duration: "9s" },
  { emoji: "🌿", top: "65%", left: "6%", delay: "3s", duration: "10s" },
  { emoji: "🔋", top: "75%", right: "8%", delay: "0.5s", duration: "8.5s" },
  { emoji: "💩", top: "45%", right: "4%", delay: "4s", duration: "9s" },
  { emoji: "⚡", top: "12%", left: "80%", delay: "2s", duration: "10s" },
];

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-2xl sm:text-3xl animate-float-slow pointer-events-none select-none opacity-30"
          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-accent/30 bg-accent/10 px-4 py-2 text-sm text-accent">
            <Zap className="h-4 w-4" />
            <span>Your #2 Is Our #1 Priority</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" }}
        >
          It&apos;s not about taking a shit &mdash; it&apos;s about giving one.
          Our bioreactor-equipped porta potties convert organic waste into
          clean, on-site electricity. Real science. Real power. Really good pun.
        </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>
  );
}