import React, { useState } from 'react';

// Importing icons from lucide-react
import { Plane, Car, Train, Utensils, CalendarDays, Mountain, MapPin, Mail, Phone, Home, Package, BookOpen } from 'lucide-react';

// Main App component
function App() {
  const [currentPage, setCurrentPage] = useState('home'); // State to manage current page

  // Navigation function
  const navigateTo = (page) => {
    setCurrentPage(page);
  };

  // Header Component
  const Header = () => (
    <header className="bg-gradient-to-r from-teal-500 to-cyan-600 p-4 shadow-lg rounded-b-xl">
      <nav className="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <h1 className="text-3xl font-bold text-white mb-4 md:mb-0">Wanderlust Tours</h1>
        <ul className="flex space-x-6">
          <li>
            <button
              onClick={() => navigateTo('home')}
              className={`text-white hover:text-teal-200 transition duration-300 flex items-center ${currentPage === 'home' ? 'font-semibold border-b-2 border-white' : ''}`}
            >
              <Home className="mr-2" size={20} /> Home
            </button>
          </li>
          <li>
            <button
              onClick={() => navigateTo('packages')}
              className={`text-white hover:text-teal-200 transition duration-300 flex items-center ${currentPage === 'packages' ? 'font-semibold border-b-2 border-white' : ''}`}
            >
              <Package className="mr-2" size={20} /> Packages
            </button>
          </li>
          <li>
            <button
              onClick={() => navigateTo('booking')}
              className={`text-white hover:text-teal-200 transition duration-300 flex items-center ${currentPage === 'booking' ? 'font-semibold border-b-2 border-white' : ''}`}
            >
              <BookOpen className="mr-2" size={20} /> Book Now
            </button>
          </li>
        </ul>
      </nav>
    </header>
  );

  // Footer Component
  const Footer = () => (
    <footer className="bg-gray-800 text-white p-6 mt-10 rounded-t-xl">
      <div className="container mx-auto text-center">
        <p>&copy; {new Date().getFullYear()} Wanderlust Tours. All rights reserved.</p>
        <div className="flex justify-center space-x-4 mt-3">
          <a href="#" className="hover:text-teal-400 transition duration-300"><Mail size={20} /></a>
          <a href="#" className="hover:text-teal-400 transition duration-300"><Phone size={20} /></a>
          <a href="#" className="hover:text-teal-400 transition duration-300"><MapPin size={20} /></a>
        </div>
      </div>
    </footer>
  );

  // Home Page Component
  const HomePage = () => (
    <div className="container mx-auto p-6 text-center">
      <h2 className="text-5xl font-extrabold text-teal-700 mb-6 animate-fade-in-down">Welcome to Wanderlust Tours!</h2>
      <p className="text-lg text-gray-700 leading-relaxed max-w-3xl mx-auto mb-8 animate-fade-in-up">
        Your ultimate guide to unforgettable travel experiences. We offer a wide range of packages tailored to your preferences,
        whether you're looking for a quick getaway or an extended adventure. Explore our diverse destinations and travel modes
        to find your perfect trip.
      </p>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
        <div className="bg-white p-6 rounded-lg shadow-xl hover:shadow-2xl transition-shadow duration-300 transform hover:-translate-y-2">
          <CalendarDays className="text-teal-500 mx-auto mb-4" size={48} />
          <h3 className="text-2xl font-semibold text-gray-800 mb-3">Flexible Durations</h3>
          <p className="text-gray-600">Choose packages from a few days to several weeks, fitting your schedule perfectly.</p>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-xl hover:shadow-2xl transition-shadow duration-300 transform hover:-translate-y-2">
          <Utensils className="text-teal-500 mx-auto mb-4" size={48} />
          <h3 className="text-2xl font-semibold text-gray-800 mb-3">Food Options</h3>
          <p className="text-gray-600">Enjoy delicious meals with our food-inclusive packages or explore local cuisine on your own.</p>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-xl hover:shadow-2xl transition-shadow duration-300 transform hover:-translate-y-2">
          <Plane className="text-teal-500 mx-auto mb-4" size={48} />
          <h3 className="text-2xl font-semibold text-gray-800 mb-3">Diverse Travel Modes</h3>
          <p className="text-gray-600">Travel by air, train, or car – select the mode that suits your comfort and adventure level.</p>
        </div>
      </div>
      <button
        onClick={() => navigateTo('packages')}
        className="mt-12 px-8 py-4 bg-teal-600 text-white text-xl font-bold rounded-full shadow-lg hover:bg-teal-700 transition duration-300 transform hover:scale-105"
      >
        Explore Packages
      </button>
    </div>
  );

  // Mock Data for Packages
  const allPackages = [
    {
      id: 1,
      name: "Himalayan Trek",
      description: "An adventurous trek through the majestic Himalayas.",
      days: 7,
      food: true,
      travelMode: "Flight",
      price: 1200,
      image: "https://placehold.co/400x250/A7F3D0/0D9488?text=Himalayan+Trek"
    },
    {
      id: 2,
      name: "Coastal Retreat",
      description: "Relaxing beach vacation with stunning ocean views.",
      days: 5,
      food: false,
      travelMode: "Car",
      price: 800,
      image: "https://placehold.co/400x250/99F6E4/0F766E?text=Coastal+Retreat"
    },
    {
      id: 3,
      name: "Desert Safari",
      description: "Experience the thrill of desert dunes and starry nights.",
      days: 3,
      food: true,
      travelMode: "Car",
      price: 600,
      image: "https://placehold.co/400x250/6EE7B7/065F46?text=Desert+Safari"
    },
    {
      id: 4,
      name: "Cultural City Tour",
      description: "Immerse yourself in the rich history and culture of ancient cities.",
      days: 4,
      food: true,
      travelMode: "Train",
      price: 750,
      image: "https://placehold.co/400x250/C3F7F7/004D40?text=City+Tour"
    },
    {
      id: 5,
      name: "Jungle Expedition",
      description: "Explore the dense jungles and discover exotic wildlife.",
      days: 10,
      food: true,
      travelMode: "Flight",
      price: 1500,
      image: "https://placehold.co/400x250/D1FAE5/047857?text=Jungle+Expedition"
    },
    {
      id: 6,
      name: "Mountain Lakeside",
      description: "Peaceful retreat by a serene mountain lake.",
      days: 6,
      food: false,
      travelMode: "Car",
      price: 950,
      image: "https://placehold.co/400x250/A7F3D0/0D9488?text=Lakeside+Retreat"
    },
    {
      id: 7,
      name: "Historical Landmarks",
      description: "Journey through historical sites and learn about the past.",
      days: 5,
      food: true,
      travelMode: "Train",
      price: 850,
      image: "https://placehold.co/400x250/99F6E4/0F766E?text=Historical+Tour"
    },
    {
      id: 8,
      name: "Island Hopping",
      description: "Discover beautiful islands and enjoy water activities.",
      days: 8,
      food: true,
      travelMode: "Flight",
      price: 1800,
      image: "https://placehold.co/400x250/6EE7B7/065F46?text=Island+Hopping"
    },
  ];

  // Packages Page Component
  const PackagesPage = () => {
    const [filters, setFilters] = useState({
      days: '',
      food: '',
      travelMode: ''
    });

    const handleFilterChange = (e) => {
      const { name, value } = e.target;
      setFilters(prevFilters => ({
        ...prevFilters,
        [name]: value
      }));
    };

    const filteredPackages = allPackages.filter(pkg => {
      const matchesDays = filters.days ? pkg.days <= parseInt(filters.days) : true;
      const matchesFood = filters.food ? (filters.food === 'yes' ? pkg.food : !pkg.food) : true;
      const matchesTravelMode = filters.travelMode ? pkg.travelMode === filters.travelMode : true;
      return matchesDays && matchesFood && matchesTravelMode;
    });

    const getTravelModeIcon = (mode) => {
      switch (mode) {
        case 'Flight': return <Plane size={20} className="inline-block mr-1" />;
        case 'Car': return <Car size={20} className="inline-block mr-1" />;
        case 'Train': return <Train size={20} className="inline-block mr-1" />;
        default: return null;
      }
    };

    return (
      <div className="container mx-auto p-6">
        <h2 className="text-4xl font-bold text-teal-700 mb-8 text-center">Our Tour Packages</h2>

        {/* Filter Section */}
        <div className="bg-white p-6 rounded-lg shadow-md mb-8">
          <h3 className="text-2xl font-semibold text-gray-800 mb-4">Filter Packages</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <label htmlFor="days" className="block text-gray-700 text-sm font-bold mb-2">Max Days:</label>
              <select
                id="days"
                name="days"
                value={filters.days}
                onChange={handleFilterChange}
                className="shadow border rounded-md w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-500"
              >
                <option value="">Any</option>
                <option value="3">Up to 3 Days</option>
                <option value="5">Up to 5 Days</option>
                <option value="7">Up to 7 Days</option>
                <option value="10">Up to 10 Days</option>
                <option value="99">More than 10 Days</option>
              </select>
            </div>
            <div>
              <label htmlFor="food" className="block text-gray-700 text-sm font-bold mb-2">Food Included:</label>
              <select
                id="food"
                name="food"
                value={filters.food}
                onChange={handleFilterChange}
                className="shadow border rounded-md w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-500"
              >
                <option value="">Any</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
              </select>
            </div>
            <div>
              <label htmlFor="travelMode" className="block text-gray-700 text-sm font-bold mb-2">Travel Mode:</label>
              <select
                id="travelMode"
                name="travelMode"
                value={filters.travelMode}
                onChange={handleFilterChange}
                className="shadow border rounded-md w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-500"
              >
                <option value="">Any</option>
                <option value="Flight">Flight</option>
                <option value="Car">Car</option>
                <option value="Train">Train</option>
              </select>
            </div>
          </div>
        </div>

        {/* Packages Display */}
        {filteredPackages.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredPackages.map(pkg => (
              <div key={pkg.id} className="bg-white rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300">
                <img src={pkg.image} alt={pkg.name} className="w-full h-48 object-cover" onError={(e) => { e.target.onerror = null; e.target.src = `https://placehold.co/400x250/E0F2F7/00796B?text=${pkg.name.replace(/\s/g, '+')}`; }} />
                <div className="p-6">
                  <h3 className="text-2xl font-bold text-gray-900 mb-2">{pkg.name}</h3>
                  <p className="text-gray-700 mb-4 text-sm">{pkg.description}</p>
                  <div className="flex items-center text-gray-600 mb-2">
                    <CalendarDays size={18} className="mr-2 text-teal-500" />
                    <span>{pkg.days} Days</span>
                  </div>
                  <div className="flex items-center text-gray-600 mb-2">
                    <Utensils size={18} className="mr-2 text-teal-500" />
                    <span>Food: {pkg.food ? 'Included' : 'Not Included'}</span>
                  </div>
                  <div className="flex items-center text-gray-600 mb-4">
                    {getTravelModeIcon(pkg.travelMode)}
                    <span>Travel Mode: {pkg.travelMode}</span>
                  </div>
                  <div className="flex justify-between items-center mt-4">
                    <span className="text-3xl font-bold text-teal-600">${pkg.price}</span>
                    <button
                      onClick={() => navigateTo('booking')}
                      className="bg-teal-500 text-white px-6 py-2 rounded-full hover:bg-teal-600 transition duration-300 shadow-md"
                    >
                      Book Now
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-center text-gray-600 text-lg mt-10">No packages found matching your filters. Try adjusting your selections.</p>
        )}
      </div>
    );
  };

  // Booking Page Component
  const BookingPage = () => {
    const [formData, setFormData] = useState({
      name: '',
      email: '',
      phone: '',
      packageInterest: '',
      message: ''
    });
    const [submissionStatus, setSubmissionStatus] = useState(null); // 'success' or 'error'

    const handleInputChange = (e) => {
      const { name, value } = e.target;
      setFormData(prevData => ({
        ...prevData,
        [name]: value
      }));
    };

    const handleSubmit = (e) => {
      e.preventDefault();
      // In a real application, you would send this data to a backend server.
      console.log('Booking Form Submitted:', formData);

      // Simulate API call success/failure
      setTimeout(() => {
        const success = Math.random() > 0.2; // 80% chance of success
        if (success) {
          setSubmissionStatus('success');
          setFormData({ name: '', email: '', phone: '', packageInterest: '', message: '' }); // Clear form
        } else {
          setSubmissionStatus('error');
        }
      }, 1000);
    };

    return (
      <div className="container mx-auto p-6">
        <h2 className="text-4xl font-bold text-teal-700 mb-8 text-center">Book Your Dream Tour</h2>

        <div className="bg-white p-8 rounded-lg shadow-xl max-w-2xl mx-auto">
          <p className="text-gray-700 mb-6 text-center">
            Fill out the form below and our team will get back to you shortly to help plan your perfect trip.
          </p>

          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label htmlFor="name" className="block text-gray-700 text-sm font-bold mb-2">Full Name:</label>
              <input
                type="text"
                id="name"
                name="name"
                value={formData.name}
                onChange={handleInputChange}
                className="shadow appearance-none border rounded-md w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-500"
                required
              />
            </div>
            <div>
              <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">Email:</label>
              <input
                type="email"
                id="email"
                name="email"
                value={formData.email}
                onChange={handleInputChange}
                className="shadow appearance-none border rounded-md w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-500"
                required
              />
            </div>
            <div>
              <label htmlFor="phone" className="block text-gray-700 text-sm font-bold mb-2">Phone Number:</label>
              <input
                type="tel"
                id="phone"
                name="phone"
                value={formData.phone}
                onChange={handleInputChange}
                className="shadow appearance-none border rounded-md w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-500"
              />
            </div>
            <div>
              <label htmlFor="packageInterest" className="block text-gray-700 text-sm font-bold mb-2">Package of Interest:</label>
              <select
                id="packageInterest"
                name="packageInterest"
                value={formData.packageInterest}
                onChange={handleInputChange}
                className="shadow border rounded-md w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-500"
              >
                <option value="">Select a Package</option>
                {allPackages.map(pkg => (
                  <option key={pkg.id} value={pkg.name}>{pkg.name}</option>
                ))}
              </select>
            </div>
            <div>
              <label htmlFor="message" className="block text-gray-700 text-sm font-bold mb-2">Your Message (optional):</label>
              <textarea
                id="message"
                name="message"
                value={formData.message}
                onChange={handleInputChange}
                rows="4"
                className="shadow appearance-none border rounded-md w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-500"
              ></textarea>
            </div>

            <button
              type="submit"
              className="w-full bg-teal-600 text-white font-bold py-3 px-4 rounded-md hover:bg-teal-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2"
            >
              Submit Inquiry
            </button>
          </form>

          {submissionStatus === 'success' && (
            <div className="mt-6 p-4 bg-green-100 text-green-700 rounded-md border border-green-300 text-center">
              <p className="font-semibold">Thank you for your inquiry! We've received your message and will contact you soon.</p>
            </div>
          )}
          {submissionStatus === 'error' && (
            <div className="mt-6 p-4 bg-red-100 text-red-700 rounded-md border border-red-300 text-center">
              <p className="font-semibold">Oops! Something went wrong. Please try again later.</p>
            </div>
          )}
        </div>
      </div>
    );
  };


  // Main App render logic
  const renderPage = () => {
    switch (currentPage) {
      case 'home':
        return <HomePage />;
      case 'packages':
        return <PackagesPage />;
      case 'booking':
        return <BookingPage />;
      default:
        return <HomePage />;
    }
  };

  return (
    <div className="min-h-screen flex flex-col bg-gray-100 font-sans">
      <style>
        {`
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        body {
          font-family: 'Inter', sans-serif;
        }
        .animate-fade-in-down {
            animation: fadeInDown 1s ease-out;
        }
        .animate-fade-in-up {
            animation: fadeInUp 1s ease-out;
        }
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        `}
      </style>
      <Header />
      <main className="flex-grow py-8">
        {renderPage()}
      </main>
      <Footer />
    </div>
  );
}

export default App;