import React, { useState } from 'react';
import { 
  Phone, 
  MessageCircle, 
  MapPin, 
  Car, 
  CheckCircle, 
  Menu, 
  X, 
  Clock, 
  Shield, 
  UserCheck, 
  ChevronDown, 
  ChevronUp,
  Star
} from 'lucide-react';

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [openFaq, setOpenFaq] = useState(null);

  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
  const toggleFaq = (index) => setOpenFaq(openFaq === index ? null : index);

  const phoneNumber = "6383851885";
  const whatsappUrl = `https://wa.me/91${phoneNumber}?text=Hi,%20I%20would%20like%20to%20book%20a%20taxi.`;

  const scrollToSection = (id) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
      setIsMenuOpen(false);
    }
  };

  const services = [
    {
      title: "Local Taxi Service",
      desc: "Comfortable and affordable city rides for daily travel. Punctual pickup at your doorstep.",
      icon: <Car className="w-8 h-8 text-yellow-500" />
    },
    {
      title: "Airport Pickup & Drop",
      desc: "On-time airport transfers with professional drivers. Never miss a flight with us.",
      icon: <Clock className="w-8 h-8 text-yellow-500" />
    },
    {
      title: "Outstation Taxi",
      desc: "Smooth and safe long-distance travel across Tamil Nadu & Kerala. One-way and round trips.",
      icon: <MapPin className="w-8 h-8 text-yellow-500" />
    },
    {
      title: "Wedding & Events",
      desc: "Clean and elegant vehicles for special occasions. Make your grand entry in style.",
      icon: <Star className="w-8 h-8 text-yellow-500" />
    },
    {
      title: "Corporate Travel",
      desc: "Reliable transport solutions for offices and business meetings. Monthly billing available.",
      icon: <UserCheck className="w-8 h-8 text-yellow-500" />
    }
  ];

  const fleet = [
    { name: "Sedan (Dzire / Etios)", seats: "4 Seater", type: "AC", ideal: "Small Families, City Rides" },
    { name: "Ertiga", seats: "6+1 Seater", type: "AC", ideal: "Family Trips, Luggage Space" },
    { name: "Innova / Crysta", seats: "7+1 Seater", type: "Premium AC", ideal: "Long Journeys, Luxury Comfort" },
    { name: "Tempo Traveller", seats: "12 / 17 Seater", type: "On Request", ideal: "Group Tours, Pilgrimages" },
  ];

  const packages = [
    { title: "Tirupati Darshan", desc: "Comfortable travel with flexible vehicle options for your pilgrimage." },
    { title: "Ooty – Coonoor", desc: "Enjoy hill station sightseeing with family and friends in pleasant weather." },
    { title: "Kodaikanal Tour", desc: "A relaxing trip to the princess of hill stations with scenic drives." },
    { title: "Munnar Package", desc: "Experience the tea gardens of Kerala with our expert drivers." },
  ];

  const faqs = [
    { q: "Do you provide 24×7 service?", a: "Yes, we operate 24×7 including weekends and holidays." },
    { q: "Are your drivers experienced?", a: "Yes, all our drivers are professional, verified, and experienced." },
    { q: "Do you charge extra at night?", a: "Any night charges will be informed clearly before booking. We believe in transparent pricing." },
    { q: "Is advance payment required?", a: "Advance payment may be required for outstation and tour packages to confirm the booking." },
  ];

  return (
    <div className="font-sans text-gray-800 bg-gray-50 min-h-screen flex flex-col">
      
      {/* Floating WhatsApp Button */}
      <a 
        href={whatsappUrl} 
        target="_blank" 
        rel="noopener noreferrer"
        className="fixed bottom-6 right-6 z-50 bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition-transform transform hover:scale-110 flex items-center justify-center"
      >
        <MessageCircle className="w-8 h-8" />
      </a>

      {/* Top Bar */}
      <div className="bg-gray-900 text-white py-2 px-4 text-sm hidden md:flex justify-between items-center">
        <span>Reliable Taxi Services – 24×7 | Tamil Nadu & Kerala</span>
        <div className="flex items-center space-x-4">
          <a href={`tel:${phoneNumber}`} className="hover:text-yellow-400 flex items-center gap-1">
            <Phone size={14} /> {phoneNumber}
          </a>
        </div>
      </div>

      {/* Navigation */}
      <nav className="bg-white shadow-md sticky top-0 z-40">
        <div className="container mx-auto px-4 py-3 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <div className="bg-yellow-400 p-2 rounded-lg">
              <Car className="text-gray-900 w-6 h-6" />
            </div>
            <div>
              <h1 className="text-xl font-bold tracking-tight text-gray-900 leading-none">RODORANI</h1>
              <span className="text-xs text-yellow-600 font-semibold tracking-wider">TOURS & TRAVELS</span>
            </div>
          </div>

          {/* Desktop Menu */}
          <div className="hidden md:flex space-x-8 font-medium text-gray-600">
            {['Home', 'Services', 'Fleet', 'Packages', 'About', 'Contact'].map((item) => (
              <button 
                key={item} 
                onClick={() => scrollToSection(item.toLowerCase())}
                className="hover:text-yellow-500 transition-colors"
              >
                {item}
              </button>
            ))}
          </div>

          <a 
            href={`tel:${phoneNumber}`}
            className="hidden md:flex bg-yellow-400 text-gray-900 px-5 py-2 rounded-full font-bold hover:bg-yellow-500 transition items-center gap-2"
          >
            <Phone size={18} /> Call Now
          </a>

          {/* Mobile Menu Button */}
          <button className="md:hidden text-gray-900" onClick={toggleMenu}>
            {isMenuOpen ? <X size={28} /> : <Menu size={28} />}
          </button>
        </div>

        {/* Mobile Menu Dropdown */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-t p-4 flex flex-col space-y-4 shadow-lg">
            {['Home', 'Services', 'Fleet', 'Packages', 'About', 'Contact'].map((item) => (
              <button 
                key={item} 
                onClick={() => scrollToSection(item.toLowerCase())}
                className="text-left font-medium text-gray-700 hover:text-yellow-500"
              >
                {item}
              </button>
            ))}
            <a 
              href={`tel:${phoneNumber}`}
              className="bg-yellow-400 text-center text-gray-900 px-5 py-3 rounded-lg font-bold"
            >
              Call {phoneNumber}
            </a>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section id="home" className="relative bg-gray-900 text-white py-20 lg:py-32">
        <div className="absolute inset-0 overflow-hidden">
          {/* REPLACE THE LINK BELOW WITH YOUR 'HOME 5 IMAGE' URL */}
          <img 
            src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" 
            alt="Scenic Travel Road" 
            className="w-full h-full object-cover opacity-40"
          />
        </div>
        <div className="container mx-auto px-4 relative z-10 text-center">
          <h2 className="text-yellow-400 font-bold tracking-widest uppercase mb-2">24×7 Reliable Taxi Services</h2>
          <h1 className="text-4xl md:text-6xl font-extrabold mb-6 leading-tight">
            Reliable Taxi Services <br className="hidden md:block"/> You Can Trust
          </h1>
          <p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto">
            Local • Outstation • Airport Pickup & Drop <br/>
            <span className="text-sm md:text-base mt-2 block">Clean Vehicles | Experienced Drivers | On-Time Service</span>
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <a href={`tel:${phoneNumber}`} className="bg-yellow-400 text-gray-900 px-8 py-4 rounded-full font-bold text-lg hover:bg-yellow-300 transition shadow-lg flex items-center justify-center gap-2">
              <Phone /> Call Now: {phoneNumber}
            </a>
            <a href={whatsappUrl} className="bg-green-600 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-green-500 transition shadow-lg flex items-center justify-center gap-2">
              <MessageCircle /> WhatsApp Booking
            </a>
          </div>
        </div>
      </section>

      {/* Quick Info Bar */}
      <div className="bg-white shadow-sm py-8 -mt-2 relative z-20 mx-4 rounded-xl border-b-4 border-yellow-400 md:mx-auto md:max-w-4xl">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center divide-y md:divide-y-0 md:divide-x divide-gray-100">
          <div className="px-4">
            <Clock className="w-10 h-10 text-yellow-500 mx-auto mb-2" />
            <h3 className="font-bold text-lg">Quick Booking</h3>
            <p className="text-sm text-gray-500">Instant confirmation via Call or WhatsApp. No waiting.</p>
          </div>
          <div className="px-4 pt-4 md:pt-0">
            <Shield className="w-10 h-10 text-green-500 mx-auto mb-2" />
            <h3 className="font-bold text-lg">Safe Travel</h3>
            <p className="text-sm text-gray-500">Verified drivers & clean vehicles for family safety.</p>
          </div>
          <div className="px-4 pt-4 md:pt-0">
            <CheckCircle className="w-10 h-10 text-blue-500 mx-auto mb-2" />
            <h3 className="font-bold text-lg">No Hidden Charges</h3>
            <p className="text-sm text-gray-500">Transparent pricing. Pay what you see.</p>
          </div>
        </div>
      </div>

      {/* About Section */}
      <section id="about" className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row items-center gap-12">
            <div className="md:w-1/2">
              <div className="relative rounded-2xl overflow-hidden shadow-xl">
                 <img 
                  src="https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                  alt="Happy Traveler" 
                  className="w-full h-auto object-cover"
                />
                <div className="absolute bottom-0 left-0 bg-yellow-400 text-gray-900 px-6 py-4 font-bold rounded-tr-xl">
                  Since 2026
                </div>
              </div>
            </div>
            <div className="md:w-1/2">
              <h4 className="text-yellow-600 font-bold uppercase tracking-wide mb-2">About Us</h4>
              <h2 className="text-3xl md:text-4xl font-bold mb-6 text-gray-900">Rodorani Tours And Travels</h2>
              <p className="text-gray-600 mb-4 leading-relaxed">
                We are a trusted taxi service provider offering safe, reliable, and comfortable travel solutions. 
                We are committed to providing high-quality service with professional drivers and well-maintained vehicles.
              </p>
              <p className="text-gray-600 mb-6 leading-relaxed">
                Our focus is on customer satisfaction, punctuality, and transparent pricing. Whether it’s a short city ride or a long outstation trip, we ensure a smooth and stress-free travel experience.
              </p>
              
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                <div className="flex items-center gap-3">
                  <CheckCircle className="text-green-500 w-5 h-5" />
                  <span className="font-medium">Experienced Drivers</span>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle className="text-green-500 w-5 h-5" />
                  <span className="font-medium">24×7 Support</span>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle className="text-green-500 w-5 h-5" />
                  <span className="font-medium">On-Time Pickup</span>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle className="text-green-500 w-5 h-5" />
                  <span className="font-medium">Safe for Families</span>
                </div>
              </div>

              <div className="bg-gray-50 p-4 border-l-4 border-yellow-400">
                <p className="text-sm font-semibold italic text-gray-700">"To become a preferred taxi service provider known for trust and professionalism."</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900">Our Premium Services</h2>
            <p className="text-gray-600 mt-3 max-w-2xl mx-auto">We provide professional taxi services for all your travel needs.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service, index) => (
              <div key={index} className="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition duration-300 border-b-4 border-transparent hover:border-yellow-400 group">
                <div className="mb-4 transform group-hover:scale-110 transition duration-300">
                  {service.icon}
                </div>
                <h3 className="text-xl font-bold mb-3 text-gray-900">{service.title}</h3>
                <p className="text-gray-600 leading-relaxed">{service.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Fleet Section */}
      <section id="fleet" className="py-16 bg-gray-900 text-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-yellow-400">Vehicle Options</h2>
            <p className="text-gray-300 mt-3">Choose the right vehicle for your comfortable journey.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {fleet.map((car, index) => (
              <div key={index} className="bg-gray-800 rounded-lg p-6 border border-gray-700 text-center hover:bg-gray-700 transition">
                <div className="bg-gray-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-yellow-400">
                   <Car className="text-yellow-400 w-8 h-8" />
                </div>
                <h3 className="text-xl font-bold text-white mb-1">{car.name}</h3>
                <p className="text-yellow-400 font-semibold mb-4">{car.seats} | {car.type}</p>
                <div className="text-sm text-gray-400 border-t border-gray-600 pt-4">
                  Best for: <br/> <span className="text-white">{car.ideal}</span>
                </div>
              </div>
            ))}
          </div>

          <div className="text-center mt-12">
            <a href={`tel:${phoneNumber}`} className="inline-block bg-yellow-400 text-gray-900 px-8 py-3 rounded-full font-bold hover:bg-yellow-500 transition">
              Book Your Ride Now
            </a>
          </div>
        </div>
      </section>

      {/* Tour Packages */}
      <section id="packages" className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900">Popular Tour Packages</h2>
            <p className="text-gray-600 mt-3">Explore iconic destinations with our reliable service.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {packages.map((pkg, index) => (
              <div key={index} className="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col sm:flex-row border border-gray-100">
                <div className="sm:w-1/3 bg-gray-200 h-48 sm:h-auto relative">
                   {/* Placeholder images - using gradients or generic travel icons since no real images provided */}
                   <div className="w-full h-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center text-white">
                      <MapPin className="w-12 h-12 text-yellow-400 opacity-80" />
                   </div>
                </div>
                <div className="p-6 flex-1 flex flex-col justify-center">
                  <h3 className="text-xl font-bold text-gray-900 mb-2">{pkg.title}</h3>
                  <p className="text-gray-600 mb-4">{pkg.desc}</p>
                  <a href={whatsappUrl} className="text-yellow-600 font-bold hover:text-yellow-700 flex items-center gap-2">
                    Check Rates on WhatsApp <MessageCircle size={16} />
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4 max-w-3xl">
          <div className="text-center mb-10">
            <h2 className="text-3xl font-bold text-gray-900">Frequently Asked Questions</h2>
          </div>
          
          <div className="space-y-4">
            {faqs.map((faq, index) => (
              <div key={index} className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <button 
                  onClick={() => toggleFaq(index)}
                  className="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none bg-white hover:bg-gray-50"
                >
                  <span className="font-semibold text-gray-800">{faq.q}</span>
                  {openFaq === index ? <ChevronUp className="text-yellow-500" /> : <ChevronDown className="text-gray-400" />}
                </button>
                {openFaq === index && (
                  <div className="px-6 py-4 bg-gray-50 text-gray-600 border-t border-gray-100">
                    {faq.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact CTA */}
      <section id="contact" className="py-16 bg-yellow-400">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Ready for your Journey?</h2>
          <p className="text-xl text-gray-800 mb-8 max-w-2xl mx-auto">
            Book your cab instantly with just one call or WhatsApp. No waiting. No hidden charges.
          </p>
          <div className="bg-white rounded-xl shadow-xl p-8 max-w-4xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
            <div className="text-left">
              <p className="text-gray-500 text-sm uppercase tracking-wider font-semibold">Booking Hotline</p>
              <p className="text-3xl font-bold text-gray-900">{phoneNumber}</p>
            </div>
            <div className="flex flex-col sm:flex-row gap-4 w-full md:w-auto">
               <a href={`tel:${phoneNumber}`} className="bg-gray-900 text-white px-8 py-3 rounded-lg font-bold hover:bg-gray-800 transition text-center">
                 Call Now
               </a>
               <a href={whatsappUrl} className="bg-green-600 text-white px-8 py-3 rounded-lg font-bold hover:bg-green-500 transition text-center flex items-center justify-center gap-2">
                 <MessageCircle size={20}/> WhatsApp
               </a>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-gray-400 py-12">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8 border-b border-gray-800 pb-8">
            <div>
              <div className="flex items-center gap-2 mb-4">
                <div className="bg-yellow-400 p-1.5 rounded">
                  <Car className="text-gray-900 w-5 h-5" />
                </div>
                <span className="text-xl font-bold text-white">RODORANI</span>
              </div>
              <p className="mb-4">Reliable Taxi Services across Tamil Nadu & Kerala. Local, Outstation, and Airport transfers.</p>
              <div className="flex gap-4">
                 {/* Social placeholders */}
                 <div className="w-8 h-8 bg-gray-800 rounded flex items-center justify-center hover:bg-yellow-400 hover:text-gray-900 transition cursor-pointer">F</div>
                 <div className="w-8 h-8 bg-gray-800 rounded flex items-center justify-center hover:bg-yellow-400 hover:text-gray-900 transition cursor-pointer">I</div>
                 <div className="w-8 h-8 bg-gray-800 rounded flex items-center justify-center hover:bg-yellow-400 hover:text-gray-900 transition cursor-pointer">X</div>
              </div>
            </div>
            
            <div>
              <h3 className="text-white font-bold mb-4">Quick Links</h3>
              <ul className="space-y-2">
                <li><button onClick={() => scrollToSection('home')} className="hover:text-yellow-400 transition">Home</button></li>
                <li><button onClick={() => scrollToSection('about')} className="hover:text-yellow-400 transition">About Us</button></li>
                <li><button onClick={() => scrollToSection('services')} className="hover:text-yellow-400 transition">Services</button></li>
                <li><button onClick={() => scrollToSection('packages')} className="hover:text-yellow-400 transition">Tour Packages</button></li>
              </ul>
            </div>

            <div>
              <h3 className="text-white font-bold mb-4">Contact Info</h3>
              <ul className="space-y-3">
                <li className="flex items-start gap-3">
                  <Phone className="w-5 h-5 text-yellow-400 mt-1" />
                  <span>
                    <a href={`tel:${phoneNumber}`} className="hover:text-white transition block">{phoneNumber}</a>
                    <span className="text-sm text-gray-500">Available 24x7</span>
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <MapPin className="w-5 h-5 text-yellow-400 mt-1" />
                  <span>Chennai, Tamil Nadu<br/><span className="text-sm text-gray-500">(Serving all major districts)</span></span>
                </li>
              </ul>
            </div>
          </div>
          
          <div className="text-center text-sm">
            <p>&copy; 2026 Rodorani Tours And Travels. All Rights Reserved. Designed & Developed by VIJEETH UNNIKRISHAN</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;