"use client"

import { motion } from "framer-motion"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Phone, Mail, Camera, MapPin, Calendar, Clock, Users, Star, Thermometer, Droplets, Sun } from "lucide-react"
import type { Destination } from "@/lib/destinations-data"

interface DestinationContentSectionProps {
  destination: Destination
}

export default function DestinationContentSection({ destination }: DestinationContentSectionProps) {
  return (
    <section className="py-20 bg-white">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Main Description */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="mb-16"
        >
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div className="lg:col-span-2">
              <h2 className="text-4xl font-bold text-gray-900 mb-8">About {destination.name}</h2>

              {/* Main Description */}
              <div className="prose prose-lg max-w-none mb-8">
                <p className="text-gray-600 text-lg leading-relaxed mb-6">{destination.fullDescription}</p>

                {destination.additionalInfo && (
                  <div className="mb-6">
                    <h3 className="text-2xl font-bold text-gray-900 mb-4">Location & Geography</h3>
                    <p className="text-gray-600 text-lg leading-relaxed">{destination.additionalInfo}</p>
                  </div>
                )}

                {destination.conservation && (
                  <div className="mb-6">
                    <h3 className="text-2xl font-bold text-gray-900 mb-4">Conservation Efforts</h3>
                    <p className="text-gray-600 text-lg leading-relaxed">{destination.conservation}</p>
                  </div>
                )}

                {/* Detailed History Section */}
                <div className="mb-6">
                  <h3 className="text-2xl font-bold text-gray-900 mb-4">History & Significance</h3>
                  <p className="text-gray-600 text-lg leading-relaxed">{destination.history}</p>
                </div>

                {/* Climate & Weather */}
                <div className="mb-6">
                  <h3 className="text-2xl font-bold text-gray-900 mb-4">Climate & Weather</h3>
                  <p className="text-gray-600 text-lg leading-relaxed mb-4">{destination.climate}</p>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div className="bg-blue-50 p-4 rounded-lg">
                      <div className="flex items-center mb-2">
                        <Droplets className="h-5 w-5 text-blue-500 mr-2" />
                        <span className="font-semibold text-gray-900">Wet Season</span>
                      </div>
                      <p className="text-sm text-gray-600">{destination.wetSeason}</p>
                    </div>
                    <div className="bg-yellow-50 p-4 rounded-lg">
                      <div className="flex items-center mb-2">
                        <Sun className="h-5 w-5 text-yellow-500 mr-2" />
                        <span className="font-semibold text-gray-900">Dry Season</span>
                      </div>
                      <p className="text-sm text-gray-600">{destination.drySeason}</p>
                    </div>
                  </div>
                </div>

                {/* Getting There */}
                <div className="mb-6">
                  <h3 className="text-2xl font-bold text-gray-900 mb-4">Getting There</h3>
                  <p className="text-gray-600 text-lg leading-relaxed mb-4">{destination.gettingThere}</p>

                  <div className="bg-gray-50 p-4 rounded-lg">
                    <h4 className="font-semibold text-gray-900 mb-2">Transportation Options:</h4>
                    <ul className="list-disc list-inside text-gray-600 space-y-1">
                      {destination.transportOptions.map((option, index) => (
                        <li key={index}>{option}</li>
                      ))}
                    </ul>
                  </div>
                </div>

                {/* What to Expect */}
                <div className="mb-6">
                  <h3 className="text-2xl font-bold text-gray-900 mb-4">What to Expect</h3>
                  <p className="text-gray-600 text-lg leading-relaxed mb-4">{destination.whatToExpect}</p>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-2">Best Activities:</h4>
                      <ul className="list-disc list-inside text-gray-600 space-y-1">
                        {destination.bestActivities.map((activity, index) => (
                          <li key={index}>{activity}</li>
                        ))}
                      </ul>
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-2">Photography Tips:</h4>
                      <ul className="list-disc list-inside text-gray-600 space-y-1">
                        {destination.photographyTips.map((tip, index) => (
                          <li key={index}>{tip}</li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </div>

                {/* Cultural Information */}
                {destination.culturalInfo && (
                  <div className="mb-6">
                    <h3 className="text-2xl font-bold text-gray-900 mb-4">Cultural Information</h3>
                    <p className="text-gray-600 text-lg leading-relaxed">{destination.culturalInfo}</p>
                  </div>
                )}

                {/* Safety & Guidelines */}
                <div className="mb-6">
                  <h3 className="text-2xl font-bold text-gray-900 mb-4">Safety & Guidelines</h3>
                  <p className="text-gray-600 text-lg leading-relaxed mb-4">{destination.safetyInfo}</p>

                  <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                    <h4 className="font-semibold text-gray-900 mb-2">Important Guidelines:</h4>
                    <ul className="list-disc list-inside text-gray-600 space-y-1">
                      {destination.guidelines.map((guideline, index) => (
                        <li key={index}>{guideline}</li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            <div className="space-y-6">
              <Card className="shadow-lg">
                <CardContent className="p-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">Quick Facts</h3>
                  <div className="space-y-3">
                    <div className="flex items-center space-x-3">
                      <Clock className="h-5 w-5 text-yellow-500" />
                      <div>
                        <p className="font-medium">Duration</p>
                        <p className="text-sm text-gray-600">{destination.duration}</p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-3">
                      <Users className="h-5 w-5 text-yellow-500" />
                      <div>
                        <p className="font-medium">Group Size</p>
                        <p className="text-sm text-gray-600">{destination.groupSize}</p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-3">
                      <Star className="h-5 w-5 text-yellow-500" />
                      <div>
                        <p className="font-medium">Rating</p>
                        <p className="text-sm text-gray-600">{destination.rating}/5.0</p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-3">
                      <Calendar className="h-5 w-5 text-yellow-500" />
                      <div>
                        <p className="font-medium">Best Time</p>
                        <p className="text-sm text-gray-600">{destination.bestTime}</p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-3">
                      <MapPin className="h-5 w-5 text-yellow-500" />
                      <div>
                        <p className="font-medium">Location</p>
                        <p className="text-sm text-gray-600">{destination.location}</p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-3">
                      <Thermometer className="h-5 w-5 text-yellow-500" />
                      <div>
                        <p className="font-medium">Temperature</p>
                        <p className="text-sm text-gray-600">{destination.temperature}</p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="shadow-lg">
                <CardContent className="p-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">Difficulty Level</h3>
                  <div className="flex items-center space-x-2 mb-2">
                    {[...Array(5)].map((_, i) => (
                      <div
                        key={i}
                        className={`w-4 h-4 rounded-full ${
                          i < destination.difficultyLevel ? "bg-yellow-500" : "bg-gray-200"
                        }`}
                      />
                    ))}
                  </div>
                  <p className="text-sm text-gray-600">{destination.difficultyDescription}</p>
                </CardContent>
              </Card>

              <Card className="shadow-lg">
                <CardContent className="p-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">What to Pack</h3>
                  <ul className="text-sm text-gray-600 space-y-2">
                    {destination.packingList.map((item, index) => (
                      <li key={index} className="flex items-start">
                        <span className="w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                        {item}
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>

              <Card className="shadow-lg">
                <CardContent className="p-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">Cost Information</h3>
                  <div className="space-y-3">
                    <div>
                      <p className="font-medium text-gray-900">Park Fees</p>
                      <p className="text-sm text-gray-600">{destination.parkFees}</p>
                    </div>
                    <div>
                      <p className="font-medium text-gray-900">Estimated Budget</p>
                      <p className="text-sm text-gray-600">{destination.estimatedBudget}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>

          <div className="mt-8">
            <h3 className="text-2xl font-bold text-gray-900 mb-4">Highlights</h3>
            <div className="flex flex-wrap gap-3">
              {destination.highlights.map((highlight, index) => (
                <Badge key={index} variant="secondary" className="bg-yellow-100 text-yellow-800 px-4 py-2">
                  {highlight}
                </Badge>
              ))}
            </div>
          </div>
        </motion.div>

        {/* Wildlife Section */}
        {destination.wildlife && destination.wildlife.length > 0 && (
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1 }}
            viewport={{ once: true }}
            className="mb-16"
          >
            <h2 className="text-4xl font-bold text-gray-900 mb-8">Wildlife & Nature</h2>
            <p className="text-gray-600 text-lg leading-relaxed mb-8">{destination.wildlifeDescription}</p>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {destination.wildlife.map((animal, index) => (
                <Card key={index} className="shadow-lg hover:shadow-xl transition-shadow duration-300">
                  <div className="relative h-48">
                    <Image
                      src={animal.image || "/placeholder.svg?height=200&width=300"}
                      alt={animal.name}
                      fill
                      className="object-cover rounded-t-lg"
                    />
                  </div>
                  <CardContent className="p-6">
                    <h3 className="text-xl font-bold text-gray-900 mb-2">{animal.name}</h3>
                    <p className="text-gray-600 mb-3">{animal.description}</p>
                    <Badge variant="secondary" className="bg-green-100 text-green-800">
                      {animal.bestSpotted}
                    </Badge>
                  </CardContent>
                </Card>
              ))}
            </div>
          </motion.div>
        )}

        {/* Attractions */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
          viewport={{ once: true }}
          className="mb-16"
        >
          <h2 className="text-4xl font-bold text-gray-900 mb-8">Must-Visit Attractions</h2>
          <p className="text-gray-600 text-lg leading-relaxed mb-8">{destination.attractionsDescription}</p>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {destination.attractions.map((attraction, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                viewport={{ once: true }}
              >
                <Link href={`/tours/${destination.slug}/${attraction.slug}`}>
                  <Card className="overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 border-0 group cursor-pointer">
                    <div className="relative h-48">
                      <Image
                        src={attraction.image || "/placeholder.svg?height=200&width=300"}
                        alt={attraction.name}
                        fill
                        className="object-cover group-hover:scale-110 transition-transform duration-500"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
                      <div className="absolute bottom-4 left-4 text-white">
                        <div className="flex items-center space-x-2">
                          <Camera className="h-4 w-4" />
                          <span className="text-sm font-medium">Click to explore</span>
                        </div>
                      </div>
                    </div>
                    <CardContent className="p-6">
                      <h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-yellow-600 transition-colors">
                        {attraction.name}
                      </h3>
                      <p className="text-gray-600 leading-relaxed">{attraction.description}</p>
                      <div className="mt-4 flex items-center text-sm text-gray-500">
                        <MapPin className="h-4 w-4 mr-1" />
                        <span>Within {destination.name}</span>
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              </motion.div>
            ))}
          </div>
        </motion.div>

        {/* Accommodation */}
        {destination.accommodation && destination.accommodation.length > 0 && (
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            viewport={{ once: true }}
            className="mb-16"
          >
            <h2 className="text-4xl font-bold text-gray-900 mb-8">Accommodation Options</h2>
            <p className="text-gray-600 text-lg leading-relaxed mb-8">{destination.accommodationDescription}</p>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {destination.accommodation.map((hotel, index) => (
                <Card key={index} className="shadow-lg hover:shadow-xl transition-shadow duration-300">
                  <div className="relative h-64">
                    <Image
                      src={hotel.image || "/placeholder.svg?height=250&width=400"}
                      alt={hotel.name}
                      fill
                      className="object-cover rounded-t-lg"
                    />
                    <div className="absolute top-4 right-4">
                      <Badge className="bg-yellow-500 text-white">
                        <Star className="h-3 w-3 mr-1" />
                        {hotel.rating}
                      </Badge>
                    </div>
                  </div>
                  <CardContent className="p-6">
                    <h3 className="text-xl font-bold text-gray-900 mb-2">{hotel.name}</h3>
                    <p className="text-gray-600 mb-4">{hotel.description}</p>
                    <div className="flex items-center justify-between">
                      <Badge variant="secondary" className="bg-blue-100 text-blue-800">
                        {hotel.type}
                      </Badge>
                      <span className="text-lg font-bold text-gray-900">{hotel.priceRange}</span>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </motion.div>
        )}

        {/* Call to Action */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.4 }}
          viewport={{ once: true }}
          className="bg-gradient-to-r from-yellow-500 to-orange-500 rounded-2xl p-8 text-center text-white"
        >
          <h2 className="text-3xl font-bold mb-4">Ready to Explore {destination.name}?</h2>
          <p className="text-xl mb-8 opacity-90">
            Join us for an unforgettable safari experience in one of Tanzania's most spectacular destinations
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <Link href="/reservation">
              <Button
                size="lg"
                className="bg-white text-yellow-600 hover:bg-gray-100 px-8 py-3 rounded-full font-semibold"
              >
                Book This Tour
              </Button>
            </Link>

            <div className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-6 text-white">
              <a href="tel:+255769196732" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
                <Phone className="h-5 w-5" />
                <span>+255 769 196 732</span>
              </a>
              <a
                href="mailto:info@sunsetadventure.co.tz"
                className="flex items-center space-x-2 hover:opacity-80 transition-opacity"
              >
                <Mail className="h-5 w-5" />
                <span>info@sunsetadventure.co.tz</span>
              </a>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  )
}