"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import Image from "next/image";

export function Hero() {
  return (
    <section className="relative min-h-[90vh] flex items-center pt-20 pb-16 overflow-hidden">
      {/* Background Image with Overlay */}
      <div className="absolute inset-0 z-0">
        <Image
          src="https://images.unsplash.com/photo-1617372591383-ebc27a6d0866?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHxtaWFtaSUyMGJlYWNoJTIwZml0bmVzcyUyMHNwb3J0cyUyMHRyYWluaW5nJTIwb3V0ZG9vciUyMGd5bXxlbnwwfDB8fHwxNzY4MzEyMjA3fDA&ixlib=rb-4.1.0&q=80&w=1080"
          alt="Miami Beach Fitness"
          fill
          className="object-cover"
          priority
        />
        <div className="absolute inset-0 bg-black/60" />
      </div>

      <Container className="relative z-10">
        <div className="max-w-4xl mx-auto text-center flex flex-col items-center">
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="flex flex-col items-center"
          >
            <div className="inline-block px-4 py-1.5 mb-6 text-sm font-bold tracking-wider text-white uppercase bg-pink-600 rounded-full">
              Miami's #1 Elite Coaching
            </div>
            <Heading as="h1" className="text-5xl md:text-8xl font-black tracking-tighter mb-6 text-white leading-none">
              TRAIN IN <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-pink-500">
                PARADISE
              </span>
            </Heading>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="flex flex-col items-center"
          >
            <Subheading className="text-xl md:text-2xl text-neutral-200 mb-10 max-w-2xl font-medium text-center">
              Experience world-class training under the Miami sun. From South Beach to Brickell, we bring elite performance to your doorstep.
            </Subheading>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
          >
            <Button size="lg" className="text-lg px-12 py-8 bg-cyan-500 hover:bg-cyan-600 text-white border-none shadow-[0_0_30px_rgba(6,182,212,0.5)] transition-all hover:scale-105">
              Book a Session
            </Button>
          </motion.div>
        </div>
      </Container>

      {/* Decorative Elements */}
      <div className="absolute bottom-0 right-0 w-1/3 h-1/2 bg-gradient-to-t from-pink-500/20 to-transparent blur-3xl -z-10" />
    </section>
  );
}