"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 { Camera, Clock, Users, Star, Phone, Mail } from "lucide-react"
import type { Destination, Attraction } from "@/lib/destinations-data"

interface AttractionContentSectionProps {
  attraction: Attraction
  destination: Destination
}

export default function AttractionContentSection({ attraction, destination }: AttractionContentSectionProps) {
  return (
    <section className="py-20 bg-white">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Main Content */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-16"
        >
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-4xl font-bold text-gray-900 mb-6">About {attraction.name}</h2>
              <p className="text-lg text-gray-600 leading-relaxed mb-6">{attraction.fullDescription}</p>

              <div className="space-y-4">
                <div className="flex items-center space-x-3">
                  <Clock className="h-5 w-5 text-yellow-500" />
                  <span className="text-gray-700">Best time to visit: {attraction.bestTime}</span>
                </div>
                <div className="flex items-center space-x-3">
                  <Users className="h-5 w-5 text-yellow-500" />
                  <span className="text-gray-700">Recommended duration: {attraction.duration}</span>
                </div>
                <div className="flex items-center space-x-3">
                  <Camera className="h-5 w-5 text-yellow-500" />
                  <span className="text-gray-700">Photography: {attraction.photography}</span>
                </div>
              </div>
            </div>

            <div className="relative h-96 rounded-2xl overflow-hidden shadow-2xl">
              <Image src={attraction.image || "/placeholder.svg"} alt={attraction.name} fill className="object-cover" />
            </div>
          </div>
        </motion.div>

        {/* Activities */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="mb-16"
        >
          <h3 className="text-3xl font-bold text-gray-900 mb-8">Activities & Experiences</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {attraction.activities.map((activity, index) => (
              <Card key={index} className="shadow-lg hover:shadow-xl transition-shadow duration-300">
                <CardContent className="p-6">
                  <div className="flex items-center space-x-3 mb-4">
                    <div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
                      <Star className="h-5 w-5 text-yellow-600" />
                    </div>
                    <h4 className="text-lg font-semibold text-gray-900">{activity.name}</h4>
                  </div>
                  <p className="text-gray-600 mb-4">{activity.description}</p>
                  <Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
                    {activity.difficulty}
                  </Badge>
                </CardContent>
              </Card>
            ))}
          </div>
        </motion.div>

        {/* Gallery */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="mb-16"
        >
          <h3 className="text-3xl font-bold text-gray-900 mb-8">Photo Gallery</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {attraction.gallery.map((image, index) => (
              <div key={index} className="relative h-64 rounded-lg overflow-hidden shadow-lg group">
                <Image
                  src={image.url || "/placeholder.svg"}
                  alt={image.caption}
                  fill
                  className="object-cover group-hover:scale-110 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300" />
                <div className="absolute bottom-4 left-4 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <p className="text-sm font-medium">{image.caption}</p>
                </div>
              </div>
            ))}
          </div>
        </motion.div>

        {/* Tips & Information */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.6 }}
          viewport={{ once: true }}
          className="mb-16"
        >
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <Card className="shadow-lg">
              <CardContent className="p-8">
                <h3 className="text-2xl font-bold text-gray-900 mb-6">Visitor Tips</h3>
                <ul className="space-y-3">
                  {attraction.tips.map((tip, index) => (
                    <li key={index} className="flex items-start space-x-3">
                      <div className="w-2 h-2 bg-yellow-500 rounded-full mt-2 flex-shrink-0" />
                      <span className="text-gray-700">{tip}</span>
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>

            <Card className="shadow-lg">
              <CardContent className="p-8">
                <h3 className="text-2xl font-bold text-gray-900 mb-6">What to Bring</h3>
                <ul className="space-y-3">
                  {attraction.whatToBring.map((item, index) => (
                    <li key={index} className="flex items-start space-x-3">
                      <div className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0" />
                      <span className="text-gray-700">{item}</span>
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          </div>
        </motion.div>

        {/* Call to Action */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.8 }}
          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 Visit {attraction.name}?</h2>
          <p className="text-xl mb-8 opacity-90">
            Book your {destination.name} safari today and experience this incredible attraction
          </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 Safari Tour
              </Button>
            </Link>

            <div className="flex items-center 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>
  )
}