"use client"

import { motion } from "framer-motion"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, MapPin, Clock, Users, Star } from "lucide-react"
import type { Destination } from "@/lib/destinations-data"

interface DestinationHeroSectionProps {
  destination: Destination
}

export default function DestinationHeroSection({ destination }: DestinationHeroSectionProps) {
  return (
    <section className="relative h-screen flex items-center justify-center overflow-hidden">
      {/* Background Image */}
      <div
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `url('${destination.image || "/placeholder.svg"}')`,
        }}
      >
        <div className="absolute inset-0 bg-black/50" />
      </div>

      {/* Back Button */}
      <div className="absolute top-8 left-8 z-20">
        <Link href="/tours">
          <Button
            variant="outline"
            className="rounded-full bg-white/20 backdrop-blur-sm border-white/30 text-white hover:bg-white/30"
          >
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Tours
          </Button>
        </Link>
      </div>

      {/* Content */}
      <div className="relative z-10 text-center text-white px-4 max-w-4xl mx-auto">
        <motion.div initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }}>
          <Badge className="mb-6 bg-yellow-500 text-white text-lg px-4 py-2">
            <Star className="h-4 w-4 mr-2" />
            {destination.rating} Rating
          </Badge>

          <h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-yellow-400 to-orange-500 bg-clip-text text-transparent">
            {destination.name}
          </h1>

          <div className="flex items-center justify-center space-x-2 mb-6 text-xl">
            <MapPin className="h-5 w-5" />
            <span>{destination.location}</span>
          </div>

          <p className="text-xl md:text-2xl mb-8 leading-relaxed opacity-90">{destination.shortDescription}</p>

          <div className="flex flex-wrap justify-center gap-6 mb-8 text-lg">
            <div className="flex items-center space-x-2">
              <Clock className="h-5 w-5 text-yellow-400" />
              <span>{destination.duration}</span>
            </div>
            <div className="flex items-center space-x-2">
              <Users className="h-5 w-5 text-yellow-400" />
              <span>{destination.groupSize}</span>
            </div>
          </div>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/reservation">
              <Button
                size="lg"
                className="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white px-8 py-4 rounded-full text-lg font-semibold transform hover:scale-105 transition-all duration-300"
              >
                Book This Tour
              </Button>
            </Link>
            <Link href="/contact">
              <Button
                size="lg"
                variant="outline"
                className="border-white text-white hover:bg-white hover:text-gray-900 px-8 py-4 rounded-full text-lg font-semibold transform hover:scale-105 transition-all duration-300 bg-transparent"
              >
                Get More Info
              </Button>
            </Link>
          </div>
        </motion.div>
      </div>

      {/* Floating Elements */}
      <div className="absolute top-20 left-10 w-4 h-4 bg-yellow-400 rounded-full animate-float opacity-60" />
      <div className="absolute top-40 right-20 w-6 h-6 bg-orange-400 rounded-full animate-float-delayed opacity-40" />
      <div className="absolute bottom-32 left-20 w-3 h-3 bg-yellow-300 rounded-full animate-float opacity-50" />
    </section>
  )
}