"use client";

import React from "react";
import { motion, AnimatePresence } from "framer-motion";
import Image from "next/image";

interface Service {
  number: string;
  title: string;
  description: string;
  img?: string;
}

interface ServiceDetailModalProps {
  service: Service | null;
  isOpen: boolean;
  onClose: () => void;
}

const ServiceDetailModal: React.FC<ServiceDetailModalProps> = ({
  service,
  isOpen,
  onClose,
}) => {
  if (!service) return null;

  const serviceDetails: {
    [key: string]: {
      fullDescription: string;
      features: string[];
      benefits: string[];
    };
  } = {
    "Passenger Ticketing": {
      fullDescription:
        "Sundial Holidays Ltd. offers worldwide comprehensive ticketing services, prioritizing customer comfort, convenience, and value at every step. Our experienced team ensures seamless booking processes with competitive fares and flexible options.",
      features: [
        "Global airline partnerships",
        "Competitive fare structures",
        "Flexible booking options",
        "24/7 customer support",
        "Multi-language assistance",
        "Group booking discounts",
      ],
      benefits: [
        "Best price guarantee",
        "Instant confirmation",
        "Easy cancellation policy",
        "Loyalty rewards program",
      ],
    },
    "Visa Assistance": {
      fullDescription:
        "We provide expert visa support for destinations including the USA, Canada, Europe, UK, Australia, UAE, and key Asian countries—ensuring smooth, hassle-free travel preparation with personalized guidance throughout the process.",
      features: [
        "USA visa processing",
        "Canadian immigration support",
        "European Schengen visas",
        "UK visitor visas",
        "Australian visa services",
        "UAE residence permits",
        "Asian country visas",
      ],
      benefits: [
        "High approval rates",
        "Document verification",
        "Interview preparation",
        "Fast-track processing",
      ],
    },
    "Tour Packages": {
      fullDescription:
        "Explore the world with Sundial Holidays—affordable, experience-rich tours designed to delight every traveler. Our curated packages combine cultural immersion, adventure, and relaxation for unforgettable journeys.",
      features: [
        "Customized itineraries",
        "Local expert guides",
        "Premium accommodations",
        "Transportation included",
        "Cultural experiences",
        "Adventure activities",
      ],
      benefits: [
        "All-inclusive pricing",
        "Small group tours",
        "Flexible scheduling",
        "Local cuisine experiences",
      ],
    },
    "Hotel Booking": {
      fullDescription:
        "Sundial Holidays Ltd. offers global hotel reservations at competitive rates, with preferred locations and top-quality accommodations guaranteed for every client. Our extensive network ensures the perfect stay for every budget.",
      features: [
        "Global hotel network",
        "Competitive rates",
        "Premium locations",
        "Quality assurance",
        "Instant booking",
        "Special amenities",
      ],
      benefits: [
        "Best rate guarantee",
        "Free cancellation",
        "Loyalty program benefits",
        "Upgrade opportunities",
      ],
    },
    "Air Cargo": {
      fullDescription:
        "Sundial Holidays Ltd. ensures swift, reliable air cargo solutions through a strong global network—delivering faster, responding quicker, and exceeding expectations every time with comprehensive logistics support.",
      features: [
        "Global cargo network",
        "Express delivery options",
        "Temperature-controlled transport",
        "Real-time tracking",
        "Customs clearance",
        "Door-to-door service",
      ],
      benefits: [
        "Competitive pricing",
        "Reliable delivery",
        "Insurance coverage",
        "24/7 tracking support",
      ],
    },
    "GSA handling": {
      fullDescription:
        "Korean Air GSA Sundial Holidays Ltd. is the General Sales Agent of Korean Air in Bangladesh, offering trusted passenger and cargo services with competitive fares and seamless support for all travel needs.",
      features: [
        "Korean Air representation",
        "Passenger services",
        "Cargo solutions",
        "Competitive fares",
        "Local support",
        "Direct airline access",
      ],
      benefits: [
        "Official GSA status",
        "Direct airline rates",
        "Dedicated support",
        "Priority handling",
      ],
    },
  };

  const details = serviceDetails[service.title] || {
    fullDescription: service.description,
    features: ["Professional service", "Expert support", "Competitive rates"],
    benefits: [
      "Quality assurance",
      "Customer satisfaction",
      "Reliable delivery",
    ],
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className="fixed inset-0 z-50 flex items-center justify-center p-4"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.3 }}
        >
          {/* Backdrop */}
          <motion.div
            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
          />

          {/* Modal */}
          <motion.div
            className="relative bg-white rounded-3xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden"
            initial={{ scale: 0.9, opacity: 0, y: 50 }}
            animate={{ scale: 1, opacity: 1, y: 0 }}
            exit={{ scale: 0.9, opacity: 0, y: 50 }}
            transition={{ duration: 0.4, ease: "easeOut" }}
          >
            {/* Header */}
            <div className="relative bg-gradient-to-r from-[#0A74B2] to-blue-600 p-8 text-white overflow-hidden">
              {/* Background Pattern */}
              <div className="absolute inset-0 opacity-20">
                <svg width="100%" height="100%" viewBox="0 0 100 100">
                  <defs>
                    <pattern
                      id="modal-grid"
                      width="20"
                      height="20"
                      patternUnits="userSpaceOnUse"
                    >
                      <circle cx="10" cy="10" r="1" fill="white" />
                    </pattern>
                  </defs>
                  <rect width="100%" height="100%" fill="url(#modal-grid)" />
                </svg>
              </div>

              {/* Close Button */}
              <motion.button
                className="absolute top-6 right-6 w-10 h-10 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors duration-200"
                onClick={onClose}
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.9 }}
              >
                <svg
                  className="w-5 h-5 text-white"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              </motion.button>

              {/* Header Content */}
              <div className="relative z-10 flex items-start space-x-6">
                <div className="flex-1">
                  <motion.div
                    className="inline-flex items-center px-3 py-1 bg-white/20 rounded-full text-sm font-medium mb-4"
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.2 }}
                  >
                    Service #{service.number}
                  </motion.div>

                  <motion.h2
                    className="text-3xl md:text-4xl font-bold mb-4"
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.3 }}
                  >
                    {service.title}
                  </motion.h2>

                  <motion.p
                    className="text-blue-100 text-lg leading-relaxed"
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.4 }}
                  >
                    {details.fullDescription}
                  </motion.p>
                </div>

                {service.img && (
                  <motion.div
                    className="w-32 h-32 rounded-2xl overflow-hidden border-4 border-white/20 flex-shrink-0"
                    initial={{ opacity: 0, scale: 0.8 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ delay: 0.5 }}
                  >
                    <Image
                      src={service.img}
                      alt={service.title}
                      width={128}
                      height={128}
                      className="w-full h-full object-cover"
                    />
                  </motion.div>
                )}
              </div>
            </div>

            {/* Content */}
            <div className="p-8 overflow-y-auto max-h-[60vh]">
              <div className="grid md:grid-cols-2 gap-8">
                {/* Features */}
                <motion.div
                  initial={{ opacity: 0, x: -30 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.6 }}
                >
                  <h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center">
                    <div className="w-2 h-2 bg-[#0A74B2] rounded-full mr-3"></div>
                    Key Features
                  </h3>
                  <div className="space-y-4">
                    {details.features.map((feature: string, index: number) => (
                      <motion.div
                        key={index}
                        className="flex items-start space-x-3 p-3 bg-gray-50 rounded-xl hover:bg-blue-50 transition-colors duration-200"
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.7 + index * 0.1 }}
                      >
                        <div className="w-6 h-6 bg-[#0A74B2] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                          <svg
                            className="w-3 h-3 text-white"
                            fill="currentColor"
                            viewBox="0 0 20 20"
                          >
                            <path
                              fillRule="evenodd"
                              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                              clipRule="evenodd"
                            />
                          </svg>
                        </div>
                        <span className="text-gray-700 font-medium">
                          {feature}
                        </span>
                      </motion.div>
                    ))}
                  </div>
                </motion.div>

                {/* Benefits */}
                <motion.div
                  initial={{ opacity: 0, x: 30 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.8 }}
                >
                  <h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center">
                    <div className="w-2 h-2 bg-orange-500 rounded-full mr-3"></div>
                    Benefits
                  </h3>
                  <div className="space-y-4">
                    {details.benefits.map((benefit: string, index: number) => (
                      <motion.div
                        key={index}
                        className="flex items-start space-x-3 p-4 bg-gradient-to-r from-orange-50 to-yellow-50 rounded-xl border border-orange-100"
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.9 + index * 0.1 }}
                      >
                        <div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                          <svg
                            className="w-3 h-3 text-white"
                            fill="currentColor"
                            viewBox="0 0 20 20"
                          >
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                          </svg>
                        </div>
                        <span className="text-gray-700 font-medium">
                          {benefit}
                        </span>
                      </motion.div>
                    ))}
                  </div>
                </motion.div>
              </div>

              {/* Action Buttons */}
              <motion.div
                className="mt-8 pt-6 border-t border-gray-200 flex flex-col sm:flex-row gap-4"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 1.2 }}
              >
                <motion.button
                  className="flex-1 px-6 py-4 bg-gradient-to-r from-[#0A74B2] to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-xl shadow-lg transition-all duration-300"
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                >
                  Get Quote
                </motion.button>

                <motion.button
                  className="flex-1 px-6 py-4 border-2 border-[#0A74B2] text-[#0A74B2] hover:bg-[#0A74B2] hover:text-white font-semibold rounded-xl transition-all duration-300"
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                >
                  Contact Support
                </motion.button>
              </motion.div>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default ServiceDetailModal;