"use client"

import type React from "react"
import { useState } from "react"
import { ChevronLeft, ChevronRight, CheckCircle, User, Calendar, DollarSign, MapPin, Home } from "lucide-react"

interface FormData {
  fullName: string
  email: string
  phoneNumber: string
  startDate: string
  endDate: string
  budget: string
  numberOfPeople: string
  safariTypes: string[]
  accommodationLevel: string
  specialRequests: string
  country: string
}

const initialFormData: FormData = {
  fullName: "",
  email: "",
  phoneNumber: "",
  startDate: "",
  endDate: "",
  budget: "",
  numberOfPeople: "",
  safariTypes: [],
  accommodationLevel: "",
  specialRequests: "",
  country: "",
}

const steps = [
  { id: 1, title: "Personal Info", icon: User },
  { id: 2, title: "Travel Dates", icon: Calendar },
  { id: 3, title: "Budget & Group", icon: DollarSign },
  { id: 4, title: "Safari Type", icon: MapPin },
  { id: 5, title: "Accommodation", icon: Home },
]

const safariOptions = [
  "Wildlife Safari",
  "Mount Kilimanjaro Climbing",
  "Cultural Tours",
  "Photography Safari",
  "Luxury Safari",
  "Budget Safari",
  "Family Safari",
  "Honeymoon Safari",
]

export default function ReservationForm() {
  const [currentStep, setCurrentStep] = useState(1)
  const [formData, setFormData] = useState<FormData>(initialFormData)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isComplete, setIsComplete] = useState(false)

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handleCheckboxChange = (value: string) => {
    setFormData((prev) => ({
      ...prev,
      safariTypes: prev.safariTypes.includes(value)
        ? prev.safariTypes.filter((type) => type !== value)
        : [...prev.safariTypes, value],
    }))
  }

  const nextStep = () => {
    if (currentStep < steps.length) setCurrentStep(currentStep + 1)
  }

  const prevStep = () => {
    if (currentStep > 1) setCurrentStep(currentStep - 1)
  }

  const handleSubmit = async () => {
  setIsSubmitting(true)
  try {
    const response = await fetch("/api/reservation", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(formData),
    })

    if (!response.ok) {
      throw new Error("Failed to send reservation")
    }

    setIsComplete(true)
  } catch (error) {
    console.error("Submission error:", error)
    alert("Failed to send reservation. Please try again later.")
  } finally {
    setIsSubmitting(false)
  }
}


  const isStepValid = () => {
  switch (currentStep) {
    case 1:
      return (
        formData.fullName.trim().length > 0 &&
        /\S+@\S+\.\S+/.test(formData.email) && // basic email check
        formData.phoneNumber.trim().length > 0
      )
    case 2:
      return formData.startDate !== "" && formData.endDate !== ""
    case 3:
      return formData.budget !== "" && formData.numberOfPeople !== ""
    case 4:
      return formData.safariTypes.length > 0
    case 5:
      return formData.accommodationLevel !== ""
    default:
      return false
  }
}

  // const isStepValid = () => {
  //   switch (currentStep) {
  //     case 1:
  //       return formData.fullName && formData.email && formData.phoneNumber
  //     case 2:
  //       return formData.startDate && formData.endDate
  //     case 3:
  //       return formData.budget && formData.numberOfPeople
  //     case 4:
  //       return formData.safariTypes.length > 0
  //     case 5:
  //       return formData.accommodationLevel
  //     default:
  //       return false
  //   }
  // }

  if (isComplete) {
    return (
      <div className="bg-white rounded-3xl shadow-2xl p-12 text-center">
        <CheckCircle className="mx-auto text-green-500 mb-6" size={80} />
        <h2 className="text-3xl font-bold text-gray-900 mb-4">Reservation Submitted!</h2>
        <p className="text-xl text-gray-600 mb-6">
          Thank you for choosing Sunset Tanzania Adventure! We'll contact you within 24 hours to confirm your booking details.
        </p>
        <div className="bg-green-50 rounded-2xl p-6">
          <h3 className="font-semibold text-gray-900 mb-2">What's Next?</h3>
          <ul className="text-left text-gray-600 space-y-2">
            <li>• Our safari expert will review your preferences</li>
            <li>• You'll receive a detailed itinerary and quote</li>
            <li>• We'll arrange all logistics for your adventure</li>
          </ul>
        </div>
      </div>
    )
  }

  return (
    <div className="bg-white rounded-3xl shadow-2xl overflow-hidden">
      {/* Progress Bar */}
      <div className="bg-gray-50 px-8 py-6">
        <div className="flex items-center justify-between mb-4">
          {steps.map((step, index) => {
            const Icon = step.icon
            const isActive = currentStep === step.id
            const isCompleted = currentStep > step.id

            return (
              <div key={step.id} className="flex items-center">
                <div
                  className={`w-12 h-12 rounded-full flex items-center justify-center transition-all duration-300 ${
                    isCompleted
                      ? "bg-green-500 text-white"
                      : isActive
                        ? "bg-gradient-to-r from-orange-500 to-orange-600 text-white"
                        : "bg-gray-200 text-gray-500"
                  }`}
                >
                  {isCompleted ? <CheckCircle size={20} /> : <Icon size={20} />}
                </div>
                {index < steps.length - 1 && (
                  <div
                    className={`w-16 h-1 mx-2 transition-all duration-300 ${
                      isCompleted ? "bg-green-500" : "bg-gray-200"
                    }`}
                  />
                )}
              </div>
            )
          })}
        </div>

        <div className="flex justify-between text-sm">
          {steps.map((step) => (
            <span
              key={step.id}
              className={`font-medium transition-colors duration-300 ${
                currentStep >= step.id ? "text-orange-600" : "text-gray-500"
              }`}
            >
              {step.title}
            </span>
          ))}
        </div>

        <div className="mt-4 bg-gray-200 rounded-full h-2">
          <div
            className="bg-orange-500 h-2 rounded-full transition-all duration-500"
            style={{ width: `${(currentStep / steps.length) * 100}%` }}
          />
        </div>
      </div>

      {/* Steps Form */}
      <div className="p-8">
        <div className="mb-8">
          <h2 className="text-2xl font-bold text-gray-900 mb-2">
            Step {currentStep}: {steps[currentStep - 1].title}
          </h2>
          <p className="text-gray-600">
            {currentStep === 1 && "Let's start with your basic information"}
            {currentStep === 2 && "When would you like to travel?"}
            {currentStep === 3 && "Tell us about your budget and group size"}
            {currentStep === 4 && "What type of safari interests you?"}
            {currentStep === 5 && "Choose your accommodation and add any special requests"}
          </p>
        </div>

        <div className="space-y-6">
          {currentStep === 1 && (
            <div className="space-y-6 animate-fade-in-up">
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">Full Name *</label>
                <input
                  type="text"
                  name="fullName"
                  value={formData.fullName}
                  onChange={handleInputChange}
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
                  placeholder="Enter your full name"
                />
              </div>

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">Email Address *</label>
                <input
                  type="email"
                  name="email"
                  value={formData.email}
                  onChange={handleInputChange}
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
                  placeholder="Enter your email address"
                />
              </div>

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">Phone Number *</label>
                <input
                  type="tel"
                  name="phoneNumber"
                  value={formData.phoneNumber}
                  onChange={handleInputChange}
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
                  placeholder="Enter your phone number"
                />
              </div>
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">Country *</label>
                <input
                  type="text"
                  name="country"
                  value={formData.country}
                  onChange={handleInputChange}
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
                  placeholder="where are you from?"
                />
              </div>
            </div>
          )}

          {currentStep === 2 && (
            <div className="space-y-6 animate-fade-in-up">
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">Start Date *</label>
                <input
                  type="date"
                  name="startDate"
                  value={formData.startDate}
                  onChange={handleInputChange}
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
                />
              </div>

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">End Date *</label>
                <input
                  type="date"
                  name="endDate"
                  value={formData.endDate}
                  onChange={handleInputChange}
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
                />
              </div>
            </div>
          )}

          {currentStep === 3 && (
            <div className="space-y-6 animate-fade-in-up">
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">Budget (USD) *</label>
                <input
                  type="number"
                  name="budget"
                  value={formData.budget}
                  onChange={handleInputChange}
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
                  placeholder="Enter your budget in USD"
                />
              </div>

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">Number of People *</label>
                <input
                  type="number"
                  name="numberOfPeople"
                  value={formData.numberOfPeople}
                  onChange={handleInputChange}
                  min="1"
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
                  placeholder="How many people will be traveling?"
                />
              </div>
            </div>
          )}

          {currentStep === 4 && (
            <div className="animate-fade-in-up">
              <label className="block text-sm font-semibold text-gray-700 mb-4">
                Safari Types * (Select all that interest you)
              </label>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {safariOptions.map((option) => (
                  <label
                    key={option}
                    className={`flex items-center p-4 border-2 rounded-xl cursor-pointer transition-all duration-300 hover:bg-green-50 ${
                      formData.safariTypes.includes(option) ? "border-green-500 bg-green-50" : "border-gray-200"
                    }`}
                  >
                    <input
                      type="checkbox"
                      checked={formData.safariTypes.includes(option)}
                      onChange={() => handleCheckboxChange(option)}
                      className="sr-only"
                    />
                    <div
                      className={`w-5 h-5 rounded border-2 mr-3 flex items-center justify-center transition-colors duration-300 ${
                        formData.safariTypes.includes(option) ? "bg-green-500 border-green-500" : "border-gray-300"
                      }`}
                    >
                      {formData.safariTypes.includes(option) && <CheckCircle className="text-white" size={12} />}
                    </div>
                    <span className="font-medium text-gray-700">{option}</span>
                  </label>
                ))}
              </div>
            </div>
          )}

          {currentStep === 5 && (
            <div className="space-y-6 animate-fade-in-up">
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">Accommodation Level *</label>
                <select
                  name="accommodationLevel"
                  value={formData.accommodationLevel}
                  onChange={handleInputChange}
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
                >
                  <option value="">Select accommodation level</option>
                  <option value="budget">Budget (Camping & Basic Lodges)</option>
                  <option value="mid-range">Mid-Range (Comfortable Lodges)</option>
                  <option value="luxury">Luxury (Premium Lodges & Camps)</option>
                  <option value="ultra-luxury">Ultra-Luxury (Exclusive Resorts)</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">Special Requests</label>
                <textarea
                  name="specialRequests"
                  value={formData.specialRequests}
                  onChange={handleInputChange}
                  rows={4}
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300 resize-none"
                  placeholder="Any dietary restrictions, accessibility needs, special occasions, or other requests?"
                />
              </div>
            </div>
          )}
        </div>

        {/* Navigation Buttons */}
        <div className="flex justify-between mt-8">
          <button
            onClick={prevStep}
            disabled={currentStep === 1}
            className="flex items-center space-x-2 px-6 py-3 border-2 border-gray-200 text-gray-600 rounded-xl hover:bg-gray-50 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <ChevronLeft size={20} />
            <span>Previous</span>
          </button>

          {currentStep === steps.length ? (
            <button
              onClick={handleSubmit}
              disabled={!isStepValid() || isSubmitting}
              className="flex items-center space-x-1 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-2 py-1 rounded-xl transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isSubmitting ? (
                <>
                  <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  <span>Submitting...</span>
                </>
              ) : (
                <>
                  <span>Submit Reservation</span>
                  <CheckCircle size={20} />
                </>
              )}
            </button>
          ) : (
            <button
              onClick={nextStep}
              disabled={!isStepValid()}
              className="flex items-center space-x-2 bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white px-6 py-3 rounded-xl transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <span>Next</span>
              <ChevronRight size={20} />
            </button>
          )}
        </div>
      </div>
    </div>
  )
}




// "use client"

// import type React from "react"

// import { useState } from "react"
// import { ChevronLeft, ChevronRight, CheckCircle, User, Calendar, DollarSign, MapPin, Home } from "lucide-react"

// interface FormData {
//   // Step 1: Personal Info
//   fullName: string
//   email: string
//   phoneNumber: string

//   // Step 2: Travel Dates
//   startDate: string
//   endDate: string

//   // Step 3: Budget & People
//   budget: string
//   numberOfPeople: string

//   // Step 4: Safari Type
//   safariTypes: string[]

//   // Step 5: Accommodation & Requests
//   accommodationLevel: string
//   specialRequests: string
// }

// const initialFormData: FormData = {
//   fullName: "",
//   email: "",
//   phoneNumber: "",
//   startDate: "",
//   endDate: "",
//   budget: "",
//   numberOfPeople: "",
//   safariTypes: [],
//   accommodationLevel: "",
//   specialRequests: "",
// }

// const steps = [
//   { id: 1, title: "Personal Info", icon: User },
//   { id: 2, title: "Travel Dates", icon: Calendar },
//   { id: 3, title: "Budget & Group", icon: DollarSign },
//   { id: 4, title: "Safari Type", icon: MapPin },
//   { id: 5, title: "Accommodation", icon: Home },
// ]

// const safariOptions = [
//   "Wildlife Safari",
//   "Mount Kilimanjaro Climbing",
//   "Cultural Tours",
//   "Photography Safari",
//   "Luxury Safari",
//   "Budget Safari",
//   "Family Safari",
//   "Honeymoon Safari",
// ]

// export default function ReservationForm() {
//   const [currentStep, setCurrentStep] = useState(1)
//   const [formData, setFormData] = useState<FormData>(initialFormData)
//   const [isSubmitting, setIsSubmitting] = useState(false)
//   const [isComplete, setIsComplete] = useState(false)

//   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
//     const { name, value } = e.target
//     setFormData((prev) => ({ ...prev, [name]: value }))
//   }

//   const handleCheckboxChange = (value: string) => {
//     setFormData((prev) => ({
//       ...prev,
//       safariTypes: prev.safariTypes.includes(value)
//         ? prev.safariTypes.filter((type) => type !== value)
//         : [...prev.safariTypes, value],
//     }))
//   }

//   const nextStep = () => {
//     if (currentStep < steps.length) {
//       setCurrentStep(currentStep + 1)
//     }
//   }

//   const prevStep = () => {
//     if (currentStep > 1) {
//       setCurrentStep(currentStep - 1)
//     }
//   }

//   const handleSubmit = async () => {
//     setIsSubmitting(true)
//     // Simulate form submission
//     await new Promise((resolve) => setTimeout(resolve, 2000))
//     setIsSubmitting(false)
//     setIsComplete(true)
//   }

//   const isStepValid = () => {
//     switch (currentStep) {
//       case 1:
//         return formData.fullName && formData.email && formData.phoneNumber
//       case 2:
//         return formData.startDate && formData.endDate
//       case 3:
//         return formData.budget && formData.numberOfPeople
//       case 4:
//         return formData.safariTypes.length > 0
//       case 5:
//         return formData.accommodationLevel
//       default:
//         return false
//     }
//   }

//   if (isComplete) {
//     return (
//       <div className="bg-white rounded-3xl shadow-2xl p-12 text-center">
//         <CheckCircle className="mx-auto text-green-500 mb-6" size={80} />
//         <h2 className="text-3xl font-bold text-gray-900 mb-4">Reservation Submitted!</h2>
//         <p className="text-xl text-gray-600 mb-6">
//           Thank you for choosing Safari Tanzania! We'll contact you within 24 hours to confirm your booking details.
//         </p>
//         <div className="bg-green-50 rounded-2xl p-6">
//           <h3 className="font-semibold text-gray-900 mb-2">What's Next?</h3>
//           <ul className="text-left text-gray-600 space-y-2">
//             <li>• Our safari expert will review your preferences</li>
//             <li>• You'll receive a detailed itinerary and quote</li>
//             <li>• We'll arrange all logistics for your adventure</li>
//           </ul>
//         </div>
//       </div>
//     )
//   }

//   return (
//     <div className="bg-white rounded-3xl shadow-2xl overflow-hidden">
//       {/* Progress Bar */}
//       <div className="bg-gray-50 px-8 py-6">
//         <div className="flex items-center justify-between mb-4">
//           {steps.map((step, index) => {
//             const Icon = step.icon
//             const isActive = currentStep === step.id
//             const isCompleted = currentStep > step.id

//             return (
//               <div key={step.id} className="flex items-center">
//                 <div
//                   className={`w-12 h-12 rounded-full flex items-center justify-center transition-all duration-300 ${
//                     isCompleted
//                       ? "bg-green-500 text-white"
//                       : isActive
//                         ? "bg-gradient-to-r from-orange-500 to-orange-600 text-white"
//                         : "bg-gray-200 text-gray-500"
//                   }`}
//                 >
//                   {isCompleted ? <CheckCircle size={20} /> : <Icon size={20} />}
//                 </div>
//                 {index < steps.length - 1 && (
//                   <div
//                     className={`w-16 h-1 mx-2 transition-all duration-300 ${
//                       isCompleted ? "bg-green-500" : "bg-gray-200"
//                     }`}
//                   />
//                 )}
//               </div>
//             )
//           })}
//         </div>

//         <div className="flex justify-between text-sm">
//           {steps.map((step) => (
//             <span
//               key={step.id}
//               className={`font-medium transition-colors duration-300 ${
//                 currentStep >= step.id ? "text-orange-600" : "text-gray-500"
//               }`}
//             >
//               {step.title}
//             </span>
//           ))}
//         </div>

//         <div className="mt-4 bg-gray-200 rounded-full h-2">
//           <div
//             className="bg-orange-500 h-2 rounded-full transition-all duration-500"
//             style={{ width: `${(currentStep / steps.length) * 100}%` }}
//           />
//         </div>
//       </div>

//       {/* Form Content */}
//       <div className="p-8">
//         <div className="mb-8">
//           <h2 className="text-2xl font-bold text-gray-900 mb-2">
//             Step {currentStep}: {steps[currentStep - 1].title}
//           </h2>
//           <p className="text-gray-600">
//             {currentStep === 1 && "Let's start with your basic information"}
//             {currentStep === 2 && "When would you like to travel?"}
//             {currentStep === 3 && "Tell us about your budget and group size"}
//             {currentStep === 4 && "What type of safari interests you?"}
//             {currentStep === 5 && "Choose your accommodation and add any special requests"}
//           </p>
//         </div>

//         <div className="space-y-6">
//           {/* Step 1: Personal Info */}
//           {currentStep === 1 && (
//             <div className="space-y-6 animate-fade-in-up">
//               <div>
//                 <label className="block text-sm font-semibold text-gray-700 mb-2">Full Name *</label>
//                 <input
//                   type="text"
//                   name="fullName"
//                   value={formData.fullName}
//                   onChange={handleInputChange}
//                   className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
//                   placeholder="Enter your full name"
//                 />
//               </div>

//               <div>
//                 <label className="block text-sm font-semibold text-gray-700 mb-2">Email Address *</label>
//                 <input
//                   type="email"
//                   name="email"
//                   value={formData.email}
//                   onChange={handleInputChange}
//                   className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
//                   placeholder="Enter your email address"
//                 />
//               </div>

//               <div>
//                 <label className="block text-sm font-semibold text-gray-700 mb-2">Phone Number *</label>
//                 <input
//                   type="tel"
//                   name="phoneNumber"
//                   value={formData.phoneNumber}
//                   onChange={handleInputChange}
//                   className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
//                   placeholder="Enter your phone number"
//                 />
//               </div>
//             </div>
//           )}

//           {/* Step 2: Travel Dates */}
//           {currentStep === 2 && (
//             <div className="space-y-6 animate-fade-in-up">
//               <div>
//                 <label className="block text-sm font-semibold text-gray-700 mb-2">Start Date *</label>
//                 <input
//                   type="date"
//                   name="startDate"
//                   value={formData.startDate}
//                   onChange={handleInputChange}
//                   className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
//                 />
//               </div>

//               <div>
//                 <label className="block text-sm font-semibold text-gray-700 mb-2">End Date *</label>
//                 <input
//                   type="date"
//                   name="endDate"
//                   value={formData.endDate}
//                   onChange={handleInputChange}
//                   className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
//                 />
//               </div>
//             </div>
//           )}

//           {/* Step 3: Budget & People */}
//           {currentStep === 3 && (
//             <div className="space-y-6 animate-fade-in-up">
//               <div>
//                 <label className="block text-sm font-semibold text-gray-700 mb-2">Budget (USD) *</label>
//                 <input
//                   type="number"
//                   name="budget"
//                   value={formData.budget}
//                   onChange={handleInputChange}
//                   className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
//                   placeholder="Enter your budget in USD"
//                 />
//               </div>

//               <div>
//                 <label className="block text-sm font-semibold text-gray-700 mb-2">Number of People *</label>
//                 <input
//                   type="number"
//                   name="numberOfPeople"
//                   value={formData.numberOfPeople}
//                   onChange={handleInputChange}
//                   min="1"
//                   className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
//                   placeholder="How many people will be traveling?"
//                 />
//               </div>
//             </div>
//           )}

//           {/* Step 4: Safari Type */}
//           {currentStep === 4 && (
//             <div className="animate-fade-in-up">
//               <label className="block text-sm font-semibold text-gray-700 mb-4">
//                 Safari Types * (Select all that interest you)
//               </label>
//               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
//                 {safariOptions.map((option) => (
//                   <label
//                     key={option}
//                     className={`flex items-center p-4 border-2 rounded-xl cursor-pointer transition-all duration-300 hover:bg-green-50 ${
//                       formData.safariTypes.includes(option) ? "border-green-500 bg-green-50" : "border-gray-200"
//                     }`}
//                   >
//                     <input
//                       type="checkbox"
//                       checked={formData.safariTypes.includes(option)}
//                       onChange={() => handleCheckboxChange(option)}
//                       className="sr-only"
//                     />
//                     <div
//                       className={`w-5 h-5 rounded border-2 mr-3 flex items-center justify-center transition-colors duration-300 ${
//                         formData.safariTypes.includes(option) ? "bg-green-500 border-green-500" : "border-gray-300"
//                       }`}
//                     >
//                       {formData.safariTypes.includes(option) && <CheckCircle className="text-white" size={12} />}
//                     </div>
//                     <span className="font-medium text-gray-700">{option}</span>
//                   </label>
//                 ))}
//               </div>
//             </div>
//           )}

//           {/* Step 5: Accommodation & Requests */}
//           {currentStep === 5 && (
//             <div className="space-y-6 animate-fade-in-up">
//               <div>
//                 <label className="block text-sm font-semibold text-gray-700 mb-2">Accommodation Level *</label>
//                 <select
//                   name="accommodationLevel"
//                   value={formData.accommodationLevel}
//                   onChange={handleInputChange}
//                   className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300"
//                 >
//                   <option value="">Select accommodation level</option>
//                   <option value="budget">Budget (Camping & Basic Lodges)</option>
//                   <option value="mid-range">Mid-Range (Comfortable Lodges)</option>
//                   <option value="luxury">Luxury (Premium Lodges & Camps)</option>
//                   <option value="ultra-luxury">Ultra-Luxury (Exclusive Resorts)</option>
//                 </select>
//               </div>

//               <div>
//                 <label className="block text-sm font-semibold text-gray-700 mb-2">Special Requests</label>
//                 <textarea
//                   name="specialRequests"
//                   value={formData.specialRequests}
//                   onChange={handleInputChange}
//                   rows={4}
//                   className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none transition-colors duration-300 resize-none"
//                   placeholder="Any dietary restrictions, accessibility needs, special occasions, or other requests?"
//                 />
//               </div>
//             </div>
//           )}
//         </div>

//         {/* Navigation Buttons */}
//         <div className="flex justify-between mt-8">
//           <button
//             onClick={prevStep}
//             disabled={currentStep === 1}
//             className="flex items-center space-x-2 px-6 py-3 border-2 border-gray-200 text-gray-600 rounded-xl hover:bg-gray-50 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
//           >
//             <ChevronLeft size={20} />
//             <span>Previous</span>
//           </button>

//           {currentStep === steps.length ? (
//             <button
//               onClick={handleSubmit}
//               disabled={!isStepValid() || isSubmitting}
//               className="flex items-center ml-2 space-x-2 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-2 py-1 rounded-xl transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
//             >
//               {isSubmitting ? (
//                 <>
//                   <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
//                   <span>Submitting...</span>
//                 </>
//               ) : (
//                 <>
//                   <span>Submit Reservation</span>
//                   <CheckCircle size={20} />
//                 </>
//               )}
//             </button>
//           ) : (
//             <button
//               onClick={nextStep}
//               disabled={!isStepValid()}
//               className="flex items-center space-x-2 bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white px-6 py-3 rounded-xl transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
//             >
//               <span>Next</span>
//               <ChevronRight size={20} />
//             </button>
//           )}
//         </div>
//       </div>
//     </div>
//   )
// }


// "use client"

// import type React from "react"

// import { useState } from "react"
// import { Button } from "@/components/ui/button"
// import { Input } from "@/components/ui/input"
// import { Textarea } from "@/components/ui/textarea"
// import { Label } from "@/components/ui/label"
// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
// import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
// import { useToast } from "@/components/ui/use-toast"

// export default function ReservationForm() {
//   const { toast } = useToast()
//   const [formData, setFormData] = useState({
//     name: "",
//     email: "",
//     phone: "",
//     country: "",
//     destination: "",
//     tourType: "",
//     startDate: "",
//     endDate: "",
//     adults: 1,
//     children: 0,
//     message: "",
//   })
//   const [loading, setLoading] = useState(false)

//   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
//     const { name, value } = e.target
//     setFormData((prev) => ({ ...prev, [name]: value }))
//   }

//   const handleSelectChange = (name: string, value: string) => {
//     setFormData((prev) => ({ ...prev, [name]: value }))
//   }

//   const handleSubmit = async (e: React.FormEvent) => {
//     e.preventDefault()
//     setLoading(true)

//     try {
//       const response = await fetch("/api/reservation", {
//         method: "POST",
//         headers: {
//           "Content-Type": "application/json",
//         },
//         body: JSON.stringify(formData),
//       })

//       const result = await response.json()

//       if (result.success) {
//         toast({
//           title: "Reservation Submitted!",
//           description: "Your reservation request has been sent successfully. We will contact you soon.",
//           variant: "default",
//         })
//         setFormData({
//           name: "",
//           email: "",
//           phone: "",
//           country: "",
//           destination: "",
//           tourType: "",
//           startDate: "",
//           endDate: "",
//           adults: 1,
//           children: 0,
//           message: "",
//         })
//       } else {
//         toast({
//           title: "Submission Failed",
//           description: result.message || "There was an error submitting your reservation. Please try again.",
//           variant: "destructive",
//         })
//       }
//     } catch (error) {
//       console.error("Error submitting reservation:", error)
//       toast({
//         title: "Error",
//         description: "An unexpected error occurred. Please try again later.",
//         variant: "destructive",
//       })
//     } finally {
//       setLoading(false)
//     }
//   }

//   return (
//     <Card className="w-full max-w-3xl mx-auto">
//       <CardHeader>
//         <CardTitle className="text-3xl font-bold text-center text-gray-900">Plan Your Safari Adventure</CardTitle>
//       </CardHeader>
//       <CardContent>
//         <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-6">
//           <div className="space-y-2">
//             <Label htmlFor="name">Full Name</Label>
//             <Input id="name" name="name" value={formData.name} onChange={handleChange} required />
//           </div>
//           <div className="space-y-2">
//             <Label htmlFor="email">Email</Label>
//             <Input id="email" name="email" type="email" value={formData.email} onChange={handleChange} required />
//           </div>
//           <div className="space-y-2">
//             <Label htmlFor="phone">Phone Number</Label>
//             <Input id="phone" name="phone" type="tel" value={formData.phone} onChange={handleChange} />
//           </div>
//           <div className="space-y-2">
//             <Label htmlFor="country">Country of Residence</Label>
//             <Input id="country" name="country" value={formData.country} onChange={handleChange} />
//           </div>
//           <div className="space-y-2">
//             <Label htmlFor="destination">Preferred Destination</Label>
//             <Select
//               name="destination"
//               value={formData.destination}
//               onValueChange={(val) => handleSelectChange("destination", val)}
//             >
//               <SelectTrigger>
//                 <SelectValue placeholder="Select a destination" />
//               </SelectTrigger>
//               <SelectContent>
//                 <SelectItem value="Serengeti National Park">Serengeti National Park</SelectItem>
//                 <SelectItem value="Ngorongoro Crater">Ngorongoro Crater</SelectItem>
//                 <SelectItem value="Mount Kilimanjaro">Mount Kilimanjaro</SelectItem>
//                 <SelectItem value="Zanzibar">Zanzibar</SelectItem>
//                 <SelectItem value="Tarangire National Park">Tarangire National Park</SelectItem>
//                 <SelectItem value="Lake Manyara National Park">Lake Manyara National Park</SelectItem>
//                 <SelectItem value="Ruaha National Park">Ruaha National Park</SelectItem>
//                 <SelectItem value="Selous Game Reserve">Selous Game Reserve</SelectItem>
//                 <SelectItem value="Mikumi National Park">Mikumi National Park</SelectItem>
//                 <SelectItem value="Udzungwa Mountains">Udzungwa Mountains</SelectItem>
//                 <SelectItem value="Kitulo National Park">Kitulo National Park</SelectItem>
//                 <SelectItem value="Mahale Mountains National Park">Mahale Mountains National Park</SelectItem>
//                 <SelectItem value="Saadani National Park">Saadani National Park</SelectItem>
//                 <SelectItem value="Other">Other</SelectItem>
//               </SelectContent>
//             </Select>
//           </div>
//           <div className="space-y-2">
//             <Label htmlFor="tourType">Preferred Tour Type</Label>
//             <Select
//               name="tourType"
//               value={formData.tourType}
//               onValueChange={(val) => handleSelectChange("tourType", val)}
//             >
//               <SelectTrigger>
//                 <SelectValue placeholder="Select tour type" />
//               </SelectTrigger>
//               <SelectContent>
//                 <SelectItem value="Wildlife Safari">Wildlife Safari</SelectItem>
//                 <SelectItem value="Mountain Trekking">Mountain Trekking</SelectItem>
//                 <SelectItem value="Beach Holiday">Beach Holiday</SelectItem>
//                 <SelectItem value="Cultural Tour">Cultural Tour</SelectItem>
//                 <SelectItem value="Bird Watching">Bird Watching</SelectItem>
//                 <SelectItem value="Photography Safari">Photography Safari</SelectItem>
//                 <SelectItem value="Family Safari">Family Safari</SelectItem>
//                 <SelectItem value="Honeymoon Safari">Honeymoon Safari</SelectItem>
//                 <SelectItem value="Other">Other</SelectItem>
//               </SelectContent>
//             </Select>
//           </div>
//           <div className="space-y-2">
//             <Label htmlFor="startDate">Preferred Start Date</Label>
//             <Input id="startDate" name="startDate" type="date" value={formData.startDate} onChange={handleChange} />
//           </div>
//           <div className="space-y-2">
//             <Label htmlFor="endDate">Preferred End Date</Label>
//             <Input id="endDate" name="endDate" type="date" value={formData.endDate} onChange={handleChange} />
//           </div>
//           <div className="space-y-2">
//             <Label htmlFor="adults">Number of Adults</Label>
//             <Input
//               id="adults"
//               name="adults"
//               type="number"
//               min="1"
//               value={formData.adults}
//               onChange={handleChange}
//               required
//             />
//           </div>
//           <div className="space-y-2">
//             <Label htmlFor="children">Number of Children</Label>
//             <Input
//               id="children"
//               name="children"
//               type="number"
//               min="0"
//               value={formData.children}
//               onChange={handleChange}
//             />
//           </div>
//           <div className="md:col-span-2 space-y-2">
//             <Label htmlFor="message">Additional Message / Special Requests</Label>
//             <Textarea
//               id="message"
//               name="message"
//               rows={5}
//               value={formData.message}
//               onChange={handleChange}
//               placeholder="Tell us more about your dream safari..."
//             />
//           </div>
//           <div className="md:col-span-2">
//             <Button type="submit" className="w-full" disabled={loading}>
//               {loading ? "Submitting..." : "Submit Reservation"}
//             </Button>
//           </div>
//         </form>
//       </CardContent>
//     </Card>
//   )
// }