import React, { useState, useEffect } from 'react';
import { 
  Menu, X, Map, Calendar, Star, ChevronRight, 
  Mountain, Sun, CheckCircle, Mail, Phone, 
  Bike, Shield, Users, ArrowRight
} from 'lucide-react';

export default function App() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [selectedTour, setSelectedTour] = useState('');
  const [formSubmitted, setFormSubmitted] = useState(false);

  // Handle scroll for navbar styling
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const openBookingModal = (tourName = '') => {
    setSelectedTour(tourName);
    setFormSubmitted(false);
    setModalOpen(true);
  };

  const handleBookingSubmit = (e) => {
    e.preventDefault();
    setFormSubmitted(true);
    // In a real app, you would send data to your backend here.
    setTimeout(() => {
      setModalOpen(false);
      setFormSubmitted(false);
    }, 3000);
  };

  const tours = [
    {
      id: 1,
      title: "High Atlas Epic",
      duration: "7 Days",
      level: "Advanced",
      terrain: "Road / Gravel",
      image: "https://images.unsplash.com/photo-1542640244-7e672d6cb466?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
      description: "Conquer the legendary Tizi n'Tichka pass. A thrilling ride through Berber villages and dramatic mountain gorges.",
      icon: <Mountain className="w-5 h-5" />
    },
    {
      id: 2,
      title: "Sahara Gravel Adventure",
      duration: "5 Days",
      level: "Moderate",
      terrain: "Gravel / Dirt",
      image: "https://images.unsplash.com/photo-1526772662000-3f88f10405ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
      description: "Ride from the kasbahs of Ouarzazate to the towering dunes of Merzouga. Experience the absolute silence of the desert.",
      icon: <Sun className="w-5 h-5" />
    },
    {
      id: 3,
      title: "Coastal Cruise",
      duration: "6 Days",
      level: "Leisure",
      terrain: "Paved",
      image: "https://images.unsplash.com/photo-1558349511-73df9bd0ce6b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
      description: "A scenic, rolling journey from Marrakech to the breezy, blue-and-white Atlantic coastal town of Essaouira.",
      icon: <Map className="w-5 h-5" />
    }
  ];

  return (
    <div className="min-h-screen font-sans text-stone-800 bg-stone-50 selection:bg-orange-500 selection:text-white">
      
      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${isScrolled ? 'bg-white shadow-md py-3' : 'bg-transparent py-5'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <div className={`p-2 rounded-lg ${isScrolled ? 'bg-orange-600 text-white' : 'bg-white text-orange-600'}`}>
              <Bike className="w-6 h-6" />
            </div>
            <span className={`text-xl font-bold tracking-tight ${isScrolled ? 'text-stone-900' : 'text-white drop-shadow-md'}`}>
              Morocco Cycling Tours
            </span>
          </div>

          {/* Desktop Nav */}
          <div className="hidden md:flex items-center space-x-8">
            <a href="#about" className={`font-medium hover:text-orange-500 transition-colors ${isScrolled ? 'text-stone-600' : 'text-stone-100 drop-shadow-md'}`}>Our Approach</a>
            <a href="#tours" className={`font-medium hover:text-orange-500 transition-colors ${isScrolled ? 'text-stone-600' : 'text-stone-100 drop-shadow-md'}`}>Expeditions</a>
            <a href="#reviews" className={`font-medium hover:text-orange-500 transition-colors ${isScrolled ? 'text-stone-600' : 'text-stone-100 drop-shadow-md'}`}>Reviews</a>
            <button 
              onClick={() => openBookingModal()}
              className="bg-orange-600 hover:bg-orange-700 text-white px-6 py-2.5 rounded-full font-semibold transition-all shadow-lg hover:shadow-orange-600/30 transform hover:-translate-y-0.5"
            >
              Book Your Ride
            </button>
          </div>

          {/* Mobile Menu Button */}
          <button 
            className="md:hidden p-2"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            {mobileMenuOpen ? (
              <X className={`w-6 h-6 ${isScrolled ? 'text-stone-900' : 'text-white'}`} />
            ) : (
              <Menu className={`w-6 h-6 ${isScrolled ? 'text-stone-900' : 'text-white'}`} />
            )}
          </button>
        </div>

        {/* Mobile Nav */}
        {mobileMenuOpen && (
          <div className="md:hidden absolute top-full left-0 w-full bg-white shadow-xl border-t border-stone-100 py-4 px-4 flex flex-col space-y-4">
            <a href="#about" onClick={() => setMobileMenuOpen(false)} className="text-stone-600 font-medium p-2">Our Approach</a>
            <a href="#tours" onClick={() => setMobileMenuOpen(false)} className="text-stone-600 font-medium p-2">Expeditions</a>
            <a href="#reviews" onClick={() => setMobileMenuOpen(false)} className="text-stone-600 font-medium p-2">Reviews</a>
            <button 
              onClick={() => { setMobileMenuOpen(false); openBookingModal(); }}
              className="bg-orange-600 text-white px-4 py-3 rounded-xl font-semibold w-full text-center"
            >
              Book Your Ride
            </button>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section className="relative h-[90vh] min-h-[600px] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img 
            src="https://images.unsplash.com/photo-1539020140153-e479b8c22e70?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" 
            alt="Cycling in Morocco" 
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-stone-900/80 via-stone-900/50 to-transparent"></div>
        </div>
        
        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full mt-16">
          <div className="max-w-2xl">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/20 backdrop-blur-sm border border-white/30 text-white text-sm font-medium mb-6">
              <Star className="w-4 h-4 text-orange-400 fill-orange-400" />
              <span>Rated 5/5 by Adventure Cyclists</span>
            </div>
            <h1 className="text-5xl md:text-7xl font-extrabold text-white leading-tight mb-6">
              Discover Morocco <br/>
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-orange-600">On Two Wheels</span>
            </h1>
            <p className="text-lg md:text-xl text-stone-200 mb-10 leading-relaxed max-w-xl">
              From the snow-capped peaks of the High Atlas to the sweeping dunes of the Sahara. Join our expertly guided tours for the ride of a lifetime.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <button 
                onClick={() => openBookingModal()}
                className="bg-orange-600 hover:bg-orange-700 text-white px-8 py-4 rounded-full font-bold text-lg transition-all shadow-xl hover:shadow-orange-600/40 flex items-center justify-center gap-2 group"
              >
                Explore Tours
                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </button>
              <a 
                href="#about"
                className="bg-white/10 hover:bg-white/20 backdrop-blur-md text-white border border-white/30 px-8 py-4 rounded-full font-bold text-lg transition-all text-center"
              >
                Learn More
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Trust & Features Section */}
      <section id="about" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-stone-900 mb-6">Why Ride With Us?</h2>
            <p className="text-lg text-stone-600">
              We don't just organise bike rides; we craft immersive Moroccan adventures. With years of local experience, we guarantee safety, spectacular routes, and authentic Berber hospitality.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-10">
            <div className="p-8 rounded-2xl bg-stone-50 border border-stone-100 hover:shadow-xl transition-shadow">
              <div className="w-14 h-14 bg-orange-100 text-orange-600 rounded-xl flex items-center justify-center mb-6">
                <Shield className="w-7 h-7" />
              </div>
              <h3 className="text-xl font-bold text-stone-900 mb-3">Expert Support</h3>
              <p className="text-stone-600 leading-relaxed">
                Full mechanical support, customized route briefings, and an air-conditioned support vehicle always nearby. Ride with complete peace of mind.
              </p>
            </div>
            
            <div className="p-8 rounded-2xl bg-stone-50 border border-stone-100 hover:shadow-xl transition-shadow">
              <div className="w-14 h-14 bg-orange-100 text-orange-600 rounded-xl flex items-center justify-center mb-6">
                <Bike className="w-7 h-7" />
              </div>
              <h3 className="text-xl font-bold text-stone-900 mb-3">Premium Fleet</h3>
              <p className="text-stone-600 leading-relaxed">
                Choose from our fleet of top-tier carbon road bikes, rugged gravel setups, or powerful e-bikes. Perfectly maintained for Moroccan terrain.
              </p>
            </div>

            <div className="p-8 rounded-2xl bg-stone-50 border border-stone-100 hover:shadow-xl transition-shadow">
              <div className="w-14 h-14 bg-orange-100 text-orange-600 rounded-xl flex items-center justify-center mb-6">
                <Users className="w-7 h-7" />
              </div>
              <h3 className="text-xl font-bold text-stone-900 mb-3">Authentic Culture</h3>
              <p className="text-stone-600 leading-relaxed">
                Stay in traditional riads, share mint tea with local families, and experience the unparalleled warmth of Berber hospitality along your route.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Tours Section */}
      <section id="tours" className="py-24 bg-stone-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
            <div className="max-w-2xl">
              <h2 className="text-3xl md:text-4xl font-bold text-stone-900 mb-4">Featured Expeditions</h2>
              <p className="text-lg text-stone-600">
                From challenging mountain ascents to relaxed coastal cruises, find the perfect route for your riding style.
              </p>
            </div>
            <button className="text-orange-600 font-semibold hover:text-orange-700 flex items-center gap-1">
              View all custom tours <ChevronRight className="w-5 h-5" />
            </button>
          </div>

          <div className="grid lg:grid-cols-3 md:grid-cols-2 gap-8">
            {tours.map((tour) => (
              <div key={tour.id} className="bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 group">
                <div className="relative h-64 overflow-hidden">
                  <div className="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-sm font-bold text-stone-800 flex items-center gap-1.5 shadow-sm">
                    {tour.icon}
                    {tour.terrain}
                  </div>
                  <img 
                    src={tour.image} 
                    alt={tour.title} 
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                </div>
                <div className="p-8">
                  <div className="flex justify-between items-start mb-4">
                    <h3 className="text-2xl font-bold text-stone-900">{tour.title}</h3>
                  </div>
                  
                  <p className="text-stone-600 mb-6 min-h-[3rem]">
                    {tour.description}
                  </p>
                  
                  <div className="grid grid-cols-2 gap-4 mb-8">
                    <div className="flex items-center gap-2 text-stone-700">
                      <Calendar className="w-5 h-5 text-orange-500" />
                      <span className="font-medium">{tour.duration}</span>
                    </div>
                    <div className="flex items-center gap-2 text-stone-700">
                      <Mountain className="w-5 h-5 text-orange-500" />
                      <span className="font-medium">{tour.level}</span>
                    </div>
                  </div>
                  
                  <button 
                    onClick={() => openBookingModal(tour.title)}
                    className="w-full bg-stone-100 hover:bg-orange-600 text-stone-900 hover:text-white py-3.5 rounded-xl font-bold transition-colors flex justify-center items-center gap-2"
                  >
                    View Itinerary & Book
                    <ArrowRight className="w-4 h-4" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Social Proof / Testimonials */}
      <section id="reviews" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl md:text-4xl font-bold text-center text-stone-900 mb-16">Rider Stories</h2>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="bg-stone-50 p-8 rounded-2xl">
              <div className="flex gap-1 text-orange-400 mb-4">
                {[...Array(5)].map((_, i) => <Star key={i} className="w-5 h-5 fill-current" />)}
              </div>
              <p className="text-stone-700 italic mb-6">"The High Atlas Epic was truly the ride of a lifetime. The climbs were tough, but the support crew was incredible. Descending into Dades Gorge is a memory I'll keep forever."</p>
              <div className="font-bold text-stone-900">- Sarah Jenkins, UK</div>
            </div>

            <div className="bg-stone-50 p-8 rounded-2xl">
              <div className="flex gap-1 text-orange-400 mb-4">
                {[...Array(5)].map((_, i) => <Star key={i} className="w-5 h-5 fill-current" />)}
              </div>
              <p className="text-stone-700 italic mb-6">"Immaculate bikes, stunning gravel routes, and the best tagine I've ever eaten. They took care of every detail so we could just focus on pedaling and enjoying the Sahara."</p>
              <div className="font-bold text-stone-900">- Marcus T., Germany</div>
            </div>

            <div className="bg-stone-50 p-8 rounded-2xl md:col-span-2 lg:col-span-1">
              <div className="flex gap-1 text-orange-400 mb-4">
                {[...Array(5)].map((_, i) => <Star key={i} className="w-5 h-5 fill-current" />)}
              </div>
              <p className="text-stone-700 italic mb-6">"As a beginner to multi-day touring, I was nervous. The guides were exceptionally patient and the Coastal Cruise route was perfectly paced. Highly recommended!"</p>
              <div className="font-bold text-stone-900">- Emma L., Australia</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 relative overflow-hidden">
        <div className="absolute inset-0 bg-stone-900"></div>
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1541857754-073c683b1a80?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80')] opacity-20 bg-cover bg-center mix-blend-overlay"></div>
        
        <div className="relative z-10 max-w-4xl mx-auto px-4 text-center">
          <h2 className="text-4xl font-bold text-white mb-6">Ready for Your Moroccan Adventure?</h2>
          <p className="text-xl text-stone-300 mb-10 max-w-2xl mx-auto">
            Whether you want a custom itinerary or to join one of our scheduled departures, our team is ready to plan your perfect cycling holiday.
          </p>
          <button 
            onClick={() => openBookingModal()}
            className="bg-orange-600 hover:bg-orange-500 text-white px-10 py-4 rounded-full font-bold text-lg transition-all shadow-[0_0_20px_rgba(234,88,12,0.4)] hover:scale-105"
          >
            Start Planning Today
          </button>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-stone-950 text-stone-400 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-4 gap-12">
          <div className="md:col-span-2">
            <div className="flex items-center gap-2 mb-6">
              <Bike className="w-6 h-6 text-orange-600" />
              <span className="text-xl font-bold text-white">Morocco Cycling Tours</span>
            </div>
            <p className="mb-6 max-w-sm">
              Premium cycling experiences across Morocco's most spectacular landscapes. Ride with the local experts.
            </p>
            <div className="flex gap-4">
               {/* Placeholder for social icons */}
              <div className="w-10 h-10 rounded-full bg-stone-900 flex items-center justify-center hover:bg-orange-600 hover:text-white transition-colors cursor-pointer"><span className="font-bold">IG</span></div>
              <div className="w-10 h-10 rounded-full bg-stone-900 flex items-center justify-center hover:bg-orange-600 hover:text-white transition-colors cursor-pointer"><span className="font-bold">FB</span></div>
              <div className="w-10 h-10 rounded-full bg-stone-900 flex items-center justify-center hover:bg-orange-600 hover:text-white transition-colors cursor-pointer"><span className="font-bold">TW</span></div>
            </div>
          </div>
          
          <div>
            <h4 className="text-white font-bold mb-6">Contact Us</h4>
            <ul className="space-y-4">
              <li className="flex items-center gap-3">
                <Mail className="w-5 h-5 text-orange-600" />
                <span>ride@morocco-cycling.com</span>
              </li>
              <li className="flex items-center gap-3">
                <Phone className="w-5 h-5 text-orange-600" />
                <span>+212 555 123 456</span>
              </li>
              <li className="flex items-center gap-3">
                <Map className="w-5 h-5 text-orange-600" />
                <span>Medina, Marrakesh, Morocco</span>
              </li>
            </ul>
          </div>
          
          <div>
            <h4 className="text-white font-bold mb-6">Quick Links</h4>
            <ul className="space-y-3">
              <li><a href="#" className="hover:text-orange-500 transition-colors">About Us</a></li>
              <li><a href="#" className="hover:text-orange-500 transition-colors">Bike Rentals</a></li>
              <li><a href="#" className="hover:text-orange-500 transition-colors">Custom Tours</a></li>
              <li><a href="#" className="hover:text-orange-500 transition-colors">FAQs</a></li>
            </ul>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16 pt-8 border-t border-stone-800 text-sm text-center md:text-left flex flex-col md:flex-row justify-between items-center">
          <p>© 2026 Morocco Cycling Tours. All rights reserved.</p>
          <div className="flex gap-4 mt-4 md:mt-0">
            <a href="#" className="hover:text-white">Privacy Policy</a>
            <a href="#" className="hover:text-white">Terms of Service</a>
          </div>
        </div>
      </footer>

      {/* Booking ModalOverlay */}
      {modalOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-stone-900/80 backdrop-blur-sm transition-opacity">
          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden relative animate-in fade-in zoom-in duration-300">
            <button 
              onClick={() => setModalOpen(false)}
              className="absolute top-4 right-4 p-2 bg-stone-100 hover:bg-stone-200 rounded-full text-stone-600 transition-colors z-10"
            >
              <X className="w-5 h-5" />
            </button>
            
            <div className="p-8">
              {formSubmitted ? (
                <div className="text-center py-10">
                  <div className="w-20 h-20 bg-green-100 text-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
                    <CheckCircle className="w-10 h-10" />
                  </div>
                  <h3 className="text-2xl font-bold text-stone-900 mb-2">Request Received!</h3>
                  <p className="text-stone-600">
                    Thank you. One of our adventure specialists will contact you shortly to plan your Moroccan journey.
                  </p>
                </div>
              ) : (
                <>
                  <h3 className="text-2xl font-bold text-stone-900 mb-2">Book Your Adventure</h3>
                  <p className="text-stone-600 mb-8">Fill out the form below and we'll be in touch with availability and details.</p>
                  
                  <form onSubmit={handleBookingSubmit} className="space-y-5">
                    <div>
                      <label className="block text-sm font-semibold text-stone-700 mb-1">Select Tour</label>
                      <select 
                        className="w-full px-4 py-3 bg-stone-50 border border-stone-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:bg-white transition-all"
                        defaultValue={selectedTour}
                      >
                        <option value="">I'm interested in a Custom Tour</option>
                        <option value="High Atlas Epic">High Atlas Epic</option>
                        <option value="Sahara Gravel Adventure">Sahara Gravel Adventure</option>
                        <option value="Coastal Cruise">Coastal Cruise</option>
                      </select>
                    </div>
                    
                    <div className="grid grid-cols-2 gap-5">
                      <div>
                        <label className="block text-sm font-semibold text-stone-700 mb-1">First Name</label>
                        <input required type="text" className="w-full px-4 py-3 bg-stone-50 border border-stone-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:bg-white transition-all" />
                      </div>
                      <div>
                        <label className="block text-sm font-semibold text-stone-700 mb-1">Last Name</label>
                        <input required type="text" className="w-full px-4 py-3 bg-stone-50 border border-stone-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:bg-white transition-all" />
                      </div>
                    </div>

                    <div>
                      <label className="block text-sm font-semibold text-stone-700 mb-1">Email Address</label>
                      <input required type="email" className="w-full px-4 py-3 bg-stone-50 border border-stone-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:bg-white transition-all" />
                    </div>

                    <div>
                      <label className="block text-sm font-semibold text-stone-700 mb-1">Estimated Travel Month</label>
                      <input type="month" className="w-full px-4 py-3 bg-stone-50 border border-stone-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:bg-white transition-all text-stone-600" />
                    </div>

                    <button type="submit" className="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-4 rounded-xl mt-4 transition-all transform hover:shadow-lg">
                      Submit Request
                    </button>
                  </form>
                </>
              )}
            </div>
          </div>
        </div>
      )}

    </div>
  );
}