import React, { useState } from 'react';
import { Mountain, MapPin, Calendar, Info, Star, Clock, DollarSign, Users, ChevronRight, Search } from 'lucide-react';

const TravelHub = () => {
  const [selectedRegion, setSelectedRegion] = useState(null);
  const [selectedTour, setSelectedTour] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');

  const regions = [
    {
      id: 'queenstown',
      name: 'Queenstown',
      tagline: 'Adventure Capital of the World',
      image: 'https://images.unsplash.com/photo-1507699622108-4be3abd695ad?w=800&h=500&fit=crop',
      description: 'Nestled on the shores of Lake Wakatipu, Queenstown offers world-class skiing, bungy jumping, and stunning alpine scenery.',
      highlights: ['Bungy Jumping', 'Skiing', 'Wine Tours', 'Jet Boating']
    },
    {
      id: 'fiordland',
      name: 'Fiordland',
      tagline: 'Dramatic Fjords & Pristine Wilderness',
      image: 'https://images.unsplash.com/photo-1589802829985-817e51171b92?w=800&h=500&fit=crop',
      description: 'Home to Milford Sound and Doubtful Sound, Fiordland showcases towering waterfalls, ancient rainforests, and dramatic fjords.',
      highlights: ['Milford Sound', 'Doubtful Sound', 'Milford Track', 'Kayaking']
    },
    {
      id: 'christchurch',
      name: 'Christchurch & Canterbury',
      tagline: 'Garden City & Alpine Playground',
      image: 'https://images.unsplash.com/photo-1586996292898-71f4036c4e07?w=800&h=500&fit=crop',
      description: 'A blend of English heritage and modern innovation, with easy access to Banks Peninsula and the Southern Alps.',
      highlights: ['Botanic Gardens', 'Akaroa', 'Punting', 'Street Art']
    },
    {
      id: 'mountcook',
      name: 'Aoraki/Mount Cook',
      tagline: 'New Zealand\'s Highest Peak',
      image: 'https://images.unsplash.com/photo-1568454537842-d933259bb258?w=800&h=500&fit=crop',
      description: 'Surrounded by spectacular glaciers and permanent snow, offering world-class hiking and stargazing.',
      highlights: ['Hooker Valley Track', 'Tasman Glacier', 'Stargazing', 'Scenic Flights']
    },
    {
      id: 'westcoast',
      name: 'West Coast',
      tagline: 'Glaciers, Rainforests & Rugged Beauty',
      image: 'https://images.unsplash.com/photo-1552667466-07770ae110d0?w=800&h=500&fit=crop',
      description: 'Experience Franz Josef and Fox Glaciers, Punakaiki Pancake Rocks, and lush temperate rainforests.',
      highlights: ['Franz Josef Glacier', 'Pancake Rocks', 'Heli-Hiking', 'Greenstone']
    },
    {
      id: 'nelson',
      name: 'Nelson & Marlborough',
      tagline: 'Golden Beaches & World-Class Wine',
      image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=500&fit=crop',
      description: 'Sunshine, golden beaches, Abel Tasman National Park, and the famous Marlborough wine region.',
      highlights: ['Abel Tasman', 'Wine Tasting', 'Kayaking', 'Beaches']
    }
  ];

  const tours = [
    {
      id: 1,
      region: 'queenstown',
      name: 'Milford Sound Day Tour',
      duration: '12 hours',
      price: 'From $285',
      rating: 4.9,
      reviews: 3420,
      type: 'Adventure',
      description: 'Cruise through the stunning Milford Sound, often called the eighth wonder of the world.',
      includes: ['Scenic coach journey', 'Milford Sound cruise', 'Lunch', 'Guide']
    },
    {
      id: 2,
      region: 'queenstown',
      name: 'Nevis Bungy Jump',
      duration: '4 hours',
      price: 'From $345',
      rating: 5.0,
      reviews: 1876,
      type: 'Extreme',
      description: 'Experience New Zealand\'s highest bungy jump at 134 meters above the Nevis River.',
      includes: ['Transport', 'Safety equipment', 'Video & photos', 'Certificate']
    },
    {
      id: 3,
      region: 'fiordland',
      name: 'Doubtful Sound Overnight Cruise',
      duration: '2 days',
      price: 'From $575',
      rating: 4.8,
      reviews: 892,
      type: 'Nature',
      description: 'Explore the pristine wilderness of Doubtful Sound with an overnight wilderness cruise.',
      includes: ['Accommodation', 'All meals', 'Kayaking', 'Nature walks']
    },
    {
      id: 4,
      region: 'mountcook',
      name: 'Tasman Glacier Heli-Hike',
      duration: '3 hours',
      price: 'From $495',
      rating: 4.9,
      reviews: 1245,
      type: 'Adventure',
      description: 'Helicopter to the Tasman Glacier and explore the ice with experienced guides.',
      includes: ['Helicopter flight', 'Ice equipment', 'Guide', 'Photos']
    },
    {
      id: 5,
      region: 'westcoast',
      name: 'Franz Josef Glacier Walk',
      duration: '5 hours',
      price: 'From $165',
      rating: 4.7,
      reviews: 2103,
      type: 'Nature',
      description: 'Guided walk to the terminal face of Franz Josef Glacier through ancient rainforest.',
      includes: ['Guide', 'Equipment', 'Transport', 'Hot pools entry']
    },
    {
      id: 6,
      region: 'nelson',
      name: 'Abel Tasman Kayak & Walk',
      duration: '8 hours',
      price: 'From $215',
      rating: 4.8,
      reviews: 1567,
      type: 'Adventure',
      description: 'Kayak golden beaches and walk the famous Abel Tasman Coastal Track.',
      includes: ['Kayak & equipment', 'Water taxi', 'Lunch', 'Guide']
    },
    {
      id: 7,
      region: 'nelson',
      name: 'Marlborough Wine Tour',
      duration: '6 hours',
      price: 'From $185',
      rating: 4.9,
      reviews: 978,
      type: 'Culture',
      description: 'Visit premium wineries and taste world-renowned Sauvignon Blanc in Marlborough.',
      includes: ['Winery visits', 'Tastings', 'Lunch', 'Transport']
    },
    {
      id: 8,
      region: 'christchurch',
      name: 'Akaroa Harbour Nature Cruise',
      duration: '4 hours',
      price: 'From $125',
      rating: 4.7,
      reviews: 1432,
      type: 'Nature',
      description: 'Cruise the scenic harbour and swim with Hector\'s dolphins in Akaroa.',
      includes: ['Harbour cruise', 'Dolphin encounter', 'Guide', 'Wetsuit']
    }
  ];

  const filteredTours = selectedRegion
    ? tours.filter(tour => tour.region === selectedRegion.id)
    : tours.filter(tour => 
        tour.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        tour.description.toLowerCase().includes(searchTerm.toLowerCase())
      );

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-slate-100">
      <div className="relative h-96 bg-gradient-to-r from-blue-900 to-slate-800 overflow-hidden">
        <div className="absolute inset-0 bg-black opacity-40"></div>
        <div className="absolute inset-0 flex flex-col items-center justify-center text-white px-4">
          <Mountain className="w-16 h-16 mb-4" />
          <h1 className="text-5xl font-bold mb-4 text-center">South Island New Zealand</h1>
          <p className="text-xl mb-6 text-center max-w-2xl">Discover dramatic fjords, pristine glaciers, and adventure beyond imagination</p>
          
          <div className="w-full max-w-xl mt-4">
            <div className="relative">
              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
              <input
                type="text"
                placeholder="Search tours and experiences..."
                value={searchTerm}
                onChange={(e) => {
                  setSearchTerm(e.target.value);
                  setSelectedRegion(null);
                }}
                className="w-full pl-12 pr-4 py-3 rounded-full text-gray-900 shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 py-12">
        {!selectedRegion && !searchTerm && (
          <>
            <div className="mb-8">
              <h2 className="text-3xl font-bold text-gray-900 mb-2">Explore Regions</h2>
              <p className="text-gray-600">Choose your destination and discover unforgettable experiences</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
              {regions.map((region) => (
                <div
                  key={region.id}
                  onClick={() => setSelectedRegion(region)}
                  className="group cursor-pointer bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
                >
                  <div className="relative h-48 overflow-hidden">
                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent z-10"></div>
                    <img
                      src={region.image}
                      alt={region.name}
                      className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                    />
                    <div className="absolute bottom-4 left-4 z-20 text-white">
                      <h3 className="text-2xl font-bold mb-1">{region.name}</h3>
                      <p className="text-sm text-gray-200">{region.tagline}</p>
                    </div>
                  </div>
                  <div className="p-5">
                    <p className="text-gray-700 mb-4 line-clamp-2">{region.description}</p>
                    <div className="flex flex-wrap gap-2">
                      {region.highlights.slice(0, 3).map((highlight, idx) => (
                        <span key={idx} className="text-xs bg-blue-100 text-blue-700 px-3 py-1 rounded-full">
                          {highlight}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}

        {(selectedRegion || searchTerm) && (
          <>
            <div className="mb-8 flex items-center justify-between">
              <div>
                <button
                  onClick={() => {
                    setSelectedRegion(null);
                    setSearchTerm('');
                  }}
                  className="text-blue-600 hover:text-blue-800 mb-4 flex items-center gap-2"
                >
                  ← Back to all regions
                </button>
                <h2 className="text-3xl font-bold text-gray-900 mb-2">
                  {searchTerm ? 'Search Results' : `Tours in ${selectedRegion.name}`}
                </h2>
                {selectedRegion && (
                  <p className="text-gray-600">{selectedRegion.description}</p>
                )}
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {filteredTours.map((tour) => (
                <div
                  key={tour.id}
                  className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow"
                >
                  <div className="p-6">
                    <div className="flex justify-between items-start mb-3">
                      <div>
                        <h3 className="text-xl font-bold text-gray-900 mb-1">{tour.name}</h3>
                        <div className="flex items-center gap-4 text-sm text-gray-600">
                          <div className="flex items-center gap-1">
                            <Clock className="w-4 h-4" />
                            {tour.duration}
                          </div>
                          <div className="flex items-center gap-1">
                            <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                            {tour.rating} ({tour.reviews})
                          </div>
                        </div>
                      </div>
                      <span className="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">
                        {tour.type}
                      </span>
                    </div>

                    <p className="text-gray-700 mb-4">{tour.description}</p>

                    <div className="mb-4">
                      <p className="text-sm font-semibold text-gray-900 mb-2">Includes:</p>
                      <div className="flex flex-wrap gap-2">
                        {tour.includes.map((item, idx) => (
                          <span key={idx} className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">
                            {item}
                          </span>
                        ))}
                      </div>
                    </div>

                    <div className="flex items-center justify-between pt-4 border-t border-gray-200">
                      <div>
                        <div className="text-2xl font-bold text-gray-900">{tour.price}</div>
                        <div className="text-xs text-gray-500">per person</div>
                      </div>
                      <button
                        onClick={() => setSelectedTour(tour)}
                        className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 transition-colors"
                      >
                        Book Now
                        <ChevronRight className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {filteredTours.length === 0 && (
              <div className="text-center py-12">
                <p className="text-gray-600 text-lg">No tours found matching your search.</p>
              </div>
            )}
          </>
        )}

        {!selectedRegion && !searchTerm && (
          <div className="mt-16 bg-white rounded-xl shadow-md p-8">
            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">Plan Your South Island Adventure</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="text-center">
                <Calendar className="w-12 h-12 text-blue-600 mx-auto mb-4" />
                <h3 className="font-bold text-lg mb-2">Best Time to Visit</h3>
                <p className="text-gray-600 text-sm">December to February for summer adventures, June to August for skiing</p>
              </div>
              <div className="text-center">
                <MapPin className="w-12 h-12 text-blue-600 mx-auto mb-4" />
                <h3 className="font-bold text-lg mb-2">Getting Around</h3>
                <p className="text-gray-600 text-sm">Rent a car for flexibility, or join guided tours from major hubs</p>
              </div>
              <div className="text-center">
                <Info className="w-12 h-12 text-blue-600 mx-auto mb-4" />
                <h3 className="font-bold text-lg mb-2">Travel Tips</h3>
                <p className="text-gray-600 text-sm">Book popular activities in advance, pack for changeable weather</p>
              </div>
            </div>
          </div>
        )}
      </div>

      {selectedTour && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-xl max-w-md w-full p-6">
            <h3 className="text-2xl font-bold mb-4">{selectedTour.name}</h3>
            <div className="space-y-4 mb-6">
              <div className="flex items-center gap-2 text-gray-700">
                <Clock className="w-5 h-5" />
                <span>Duration: {selectedTour.duration}</span>
              </div>
              <div className="flex items-center gap-2 text-gray-700">
                <DollarSign className="w-5 h-5" />
                <span>{selectedTour.price}</span>
              </div>
              <div className="flex items-center gap-2 text-gray-700">
                <Users className="w-5 h-5" />
                <span>Group size varies by tour</span>
              </div>
            </div>
            <p className="text-gray-600 mb-6">
              This is a demo travel hub. To book this tour, please visit the official tourism websites or contact tour operators directly.
            </p>
            <div className="flex gap-3">
              <button
                onClick={() => setSelectedTour(null)}
                className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg transition-colors"
              >
                Close
              </button>
              <button className="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
                Contact Operator
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default TravelHub;