"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 { MapPin, Clock, Users, ArrowLeft, Star } from "lucide-react"
import { moreDestinations } from "@/lib/destinations-data"

export default function MoreToursDestinationsSection() {
  return (
    <section className="py-20 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <Link href="/tours">
            <Button variant="outline" className="mb-6 rounded-full bg-transparent">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to Main Tours
            </Button>
          </Link>
          <h2 className="text-4xl font-bold text-gray-900 mb-4">More Amazing Destinations</h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Discover hidden gems and lesser-known treasures of Tanzania
          </p>
        </div>

        <div className="space-y-20">
          {moreDestinations.map((destination, index) => (
            <motion.div
              key={destination.id}
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: index * 0.1 }}
              viewport={{ once: true }}
            >
              <Card className="overflow-hidden shadow-2xl hover:shadow-3xl transition-all duration-500 border-0">
                <CardContent className="p-0">
                  <div
                    className={`grid grid-cols-1 lg:grid-cols-2 gap-0 ${
                      index % 2 === 0 ? "" : "lg:grid-flow-col-dense"
                    }`}
                  >
                    {/* Image */}
                    <div className={`relative h-80 lg:h-96 ${index % 2 === 0 ? "" : "lg:col-start-2"}`}>
                      <Image
                        src={destination.image || "/placeholder.svg"}
                        alt={destination.name}
                        fill
                        className="object-cover hover:scale-105 transition-transform duration-700"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent" />
                      <div className="absolute top-4 right-4">
                        <Badge className="bg-yellow-500 text-white">
                          <Star className="h-3 w-3 mr-1" />
                          {destination.rating}
                        </Badge>
                      </div>
                      <div className="absolute bottom-4 left-4 text-white">
                        <div className="flex items-center space-x-2 text-sm">
                          <MapPin className="h-4 w-4" />
                          <span>{destination.location}</span>
                        </div>
                      </div>
                    </div>

                    {/* Content */}
                    <div
                      className={`p-8 lg:p-12 flex flex-col justify-center ${index % 2 === 0 ? "" : "lg:col-start-1"}`}
                    >
                      <div className="space-y-6">
                        <div>
                          <h3 className="text-3xl font-bold text-gray-900 mb-3">{destination.name}</h3>
                          <p className="text-gray-600 text-lg leading-relaxed">{destination.shortDescription}</p>
                        </div>

                        <div className="flex flex-wrap gap-4 text-sm text-gray-500">
                          <div className="flex items-center space-x-2">
                            <Clock className="h-4 w-4 text-yellow-500" />
                            <span>{destination.duration}</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <Users className="h-4 w-4 text-yellow-500" />
                            <span>{destination.groupSize}</span>
                          </div>
                        </div>

                        <div className="flex flex-wrap gap-2">
                          {destination.highlights.slice(0, 3).map((highlight, idx) => (
                            <Badge key={idx} variant="secondary" className="bg-yellow-100 text-yellow-800">
                              {highlight}
                            </Badge>
                          ))}
                        </div>

                        <Link href={`/tours/${destination.slug}`}>
                          <Button className="mt-4 bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white px-8 py-3 rounded-full text-lg font-semibold transform">
                            Explore {destination.name}
                          </Button>
                        </Link>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}