import React, { useState, useEffect } from 'react';
import { 
  Car, 
  Bike, 
  Users, 
  MapPin, 
  Phone, 
  Clock, 
  ShieldCheck, 
  ChevronRight, 
  Star,
  Calendar,
  Mail,
  Menu,
  X,
  CheckCircle2,
  Navigation,
  Smartphone,
  Award,
  MessageCircle
} from 'lucide-react';

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const fleet = [
    {
      title: "Moto-Taxi Gold",
      desc: "La solution ultime pour les transferts urgents. Évitez 100% des bouchons parisiens.",
      icon: <Bike className="w-8 h-8 text-amber-500" />,
      image: "https://images.unsplash.com/photo-1558981403-c5f91cbba527?auto=format&fit=crop&q=80&w=600",
      features: ["Équipement fourni", "Siège chauffant", "Ponctualité garantie"]
    },
    {
      title: "Berline Executive",
      desc: "L'élégance pour vos rendez-vous d'affaires. Un espace de calme au cœur de Paris.",
      icon: <Car className="w-8 h-8 text-blue-600" />,
      image: "https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?auto=format&fit=crop&q=80&w=600",
      features: ["Bouteille d'eau", "Chargeurs", "Chauffeur bilingue"]
    },
    {
      title: "Van Mercedes Classe V",
      desc: "Le voyage en première classe pour les groupes et les familles jusqu'à 7 personnes.",
      icon: <Users className="w-8 h-8 text-slate-900" />,
      image: "https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?auto=format&fit=crop&q=80&w=600",
      features: ["Salon cuir", "Bagages illimités", "Confidentialité"]
    }
  ];

  const steps = [
    { title: "Réservation", desc: "En ligne ou par téléphone en 2 minutes.", icon: <Smartphone className="w-6 h-6" /> },
    { title: "Confirmation", desc: "Réception immédiate de vos détails par SMS.", icon: <CheckCircle2 className="w-6 h-6" /> },
    { title: "Prise en charge", desc: "Votre chauffeur vous attend à l'heure précise.", icon: <Navigation className="w-6 h-6" /> }
  ];

  const pricing = [
    { route: "Paris 17 ↔ Orly", eco: "45€", van: "75€", moto: "65€" },
    { route: "Paris 17 ↔ Roissy CDG", eco: "55€", van: "85€", moto: "75€" },
    { route: "Paris 17 ↔ Disney", eco: "70€", van: "110€", moto: "90€" },
    { route: "Mise à disposition (H)", eco: "60€", van: "90€", moto: "80€" }
  ];

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

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-amber-100 selection:text-amber-900">
      {/* WhatsApp Floating Button */}
      <a 
        href="https://wa.me/33633960253" 
        target="_blank" 
        rel="noopener noreferrer"
        className="fixed bottom-8 right-8 z-[60] bg-green-500 text-white p-4 rounded-full shadow-2xl hover:scale-110 transition-transform flex items-center justify-center"
      >
        <MessageCircle size={32} />
      </a>

      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white/95 backdrop-blur-md py-3 shadow-lg' : 'bg-transparent py-6'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center">
            <div className="flex items-center space-x-3 group cursor-pointer" onClick={() => window.scrollTo({top:0, behavior:'smooth'})}>
              <div className="bg-slate-900 text-amber-400 p-2 rounded-xl transition-transform group-hover:rotate-12">
                <Car size={28} />
              </div>
              <div>
                <span className={`text-2xl font-black tracking-tighter ${scrolled ? 'text-slate-900' : 'text-slate-900 md:text-white'}`}>BEN'S TAXI</span>
                <p className={`text-[10px] font-bold tracking-widest uppercase ${scrolled ? 'text-amber-600' : 'text-amber-400'}`}>JSL TRANSPORT LUXE</p>
              </div>
            </div>

            {/* Desktop Menu */}
            <div className="hidden md:flex items-center space-x-10">
              <button onClick={() => handleScrollTo('fleet')} className={`font-bold transition-colors ${scrolled ? 'text-slate-600 hover:text-slate-900' : 'text-white/80 hover:text-white'}`}>La Flotte</button>
              <button onClick={() => handleScrollTo('pricing')} className={`font-bold transition-colors ${scrolled ? 'text-slate-600 hover:text-slate-900' : 'text-white/80 hover:text-white'}`}>Tarifs</button>
              <button onClick={() => handleScrollTo('contact')} className="bg-amber-500 text-slate-900 px-8 py-3 rounded-full font-black hover:bg-amber-400 hover:scale-105 transition-all shadow-lg shadow-amber-500/20">
                RÉSERVER
              </button>
            </div>

            {/* Mobile Menu Toggle */}
            <div className="md:hidden">
              <button onClick={() => setIsMenuOpen(!isMenuOpen)} className={`p-2 rounded-lg ${scrolled ? 'text-slate-900' : 'text-white bg-slate-900/50'}`}>
                {isMenuOpen ? <X size={28} /> : <Menu size={28} />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Sidebar */}
        {isMenuOpen && (
          <div className="md:hidden absolute top-full left-0 w-full bg-white border-t border-slate-100 p-6 space-y-6 shadow-2xl animate-in slide-in-from-top">
            <button onClick={() => handleScrollTo('fleet')} className="block w-full text-left text-lg font-bold text-slate-800">Nos Véhicules</button>
            <button onClick={() => handleScrollTo('pricing')} className="block w-full text-left text-lg font-bold text-slate-800">Grille Tarifaire</button>
            <button onClick={() => handleScrollTo('contact')} className="block w-full text-center bg-slate-900 text-white py-4 rounded-2xl font-black text-lg">Réserver un Chauffeur</button>
            <div className="pt-4 border-t border-slate-100 flex justify-center space-x-6 text-slate-400">
              <a href="tel:0633960253"><Phone size={20} /></a>
              <MapPin size={20} />
              <Mail size={20} />
            </div>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center pt-20 overflow-hidden bg-slate-900">
        <div className="absolute inset-0 opacity-40">
          <img 
            src="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?auto=format&fit=crop&q=80&w=2000" 
            className="w-full h-full object-cover" 
            alt="Paris Night" 
          />
          <div className="absolute inset-0 bg-gradient-to-r from-slate-900 via-slate-900/80 to-transparent"></div>
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-16 items-center">
          <div className="space-y-10 animate-in fade-in slide-in-from-bottom duration-1000">
            <div className="inline-flex items-center bg-amber-500/10 border border-amber-500/20 rounded-full px-5 py-2 text-amber-400 font-bold text-sm tracking-wide">
              <Award size={18} className="mr-2" />
              CHAUFFEUR PRIVÉ DE RÉFÉRENCE À PARIS
            </div>
            <h1 className="text-6xl md:text-8xl font-black text-white leading-[0.9] tracking-tighter">
              L'excellence <br/> <span className="text-amber-500">en mouvement.</span>
            </h1>
            <p className="text-xl text-slate-300 max-w-lg leading-relaxed font-medium">
              Du 16 Rue Jouffroy d'Abbans à toutes vos destinations. Expérimentez le confort absolu en Berline, Van Mercedes ou l'efficacité du Moto-Taxi.
            </p>
            <div className="flex flex-col sm:flex-row gap-5">
              <button 
                onClick={() => handleScrollTo('contact')}
                className="group flex items-center justify-center space-x-3 bg-white text-slate-900 px-10 py-5 rounded-2xl font-black text-xl hover:bg-amber-500 transition-all shadow-xl hover:shadow-amber-500/30"
              >
                <span>RÉSERVER ICI</span>
                <ChevronRight className="group-hover:translate-x-1 transition-transform" />
              </button>
              <a 
                href="tel:0633960253" 
                className="flex items-center justify-center space-x-3 border-2 border-white/20 text-white px-10 py-5 rounded-2xl font-black text-xl hover:bg-white/10 transition-all"
              >
                <Phone size={24} />
                <span>06 33 96 02 53</span>
              </a>
            </div>
          </div>

          <div className="relative hidden lg:block animate-in fade-in zoom-in duration-1000 delay-200">
            <div className="bg-gradient-to-br from-amber-500/20 to-transparent p-1 rounded-[3rem]">
              <img 
                src="https://images.unsplash.com/photo-1619651523315-9988463878b1?auto=format&fit=crop&q=80&w=800" 
                alt="Intérieur Mercedes" 
                className="rounded-[2.8rem] shadow-2xl object-cover h-[600px] w-full border-4 border-slate-900"
              />
            </div>
            {/* Floating Card */}
            <div className="absolute -bottom-10 -left-10 bg-white p-6 rounded-3xl shadow-2xl max-w-[240px] animate-bounce-slow">
              <div className="flex items-center space-x-3 mb-3">
                <div className="bg-green-100 p-2 rounded-full"><Clock className="text-green-600" size={20} /></div>
                <span className="font-black text-slate-900">Arrivée en 5 min</span>
              </div>
              <p className="text-sm text-slate-500 font-medium">Chauffeurs disponibles immédiatement dans le 17e.</p>
            </div>
          </div>
        </div>
      </section>

      {/* How it Works / Steps */}
      <section className="py-24 bg-white relative">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid md:grid-cols-3 gap-12">
            {steps.map((step, idx) => (
              <div key={idx} className="relative group text-center md:text-left">
                <div className="mb-6 inline-flex p-4 bg-slate-100 rounded-2xl text-slate-900 group-hover:bg-amber-500 group-hover:text-white transition-all duration-300">
                  {step.icon}
                </div>
                <h3 className="text-xl font-black mb-3">{idx + 1}. {step.title}</h3>
                <p className="text-slate-500 font-medium">{step.desc}</p>
                {idx < 2 && <div className="hidden lg:block absolute top-8 -right-4 w-8 h-[2px] bg-slate-100"></div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Fleet Showcase */}
      <section id="fleet" className="py-32 px-4 bg-slate-900 text-white">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col md:flex-row md:items-end justify-between mb-20 gap-8">
            <div className="space-y-4">
              <h2 className="text-4xl md:text-6xl font-black tracking-tighter">Une flotte <br/> <span className="text-amber-500 underline decoration-amber-500/30">sur mesure.</span></h2>
              <p className="text-slate-400 text-lg max-w-md font-medium">Le bon véhicule pour le bon moment. Du transfert rapide à la délégation officielle.</p>
            </div>
            <div className="flex space-x-4">
               <div className="bg-white/5 border border-white/10 p-4 rounded-2xl">
                  <p className="text-3xl font-black text-amber-500">100%</p>
                  <p className="text-xs uppercase font-bold text-slate-500 tracking-widest">Disponibilité</p>
               </div>
               <div className="bg-white/5 border border-white/10 p-4 rounded-2xl">
                  <p className="text-3xl font-black text-amber-500">15min</p>
                  <p className="text-xs uppercase font-bold text-slate-500 tracking-widest">Attente max</p>
               </div>
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-10">
            {fleet.map((item, idx) => (
              <div key={idx} className="bg-white/5 border border-white/10 rounded-[2.5rem] overflow-hidden hover:bg-white/[0.08] transition-all group">
                <div className="h-64 overflow-hidden relative">
                   <div className="absolute top-4 left-4 z-10">{item.icon}</div>
                   <img src={item.image} alt={item.title} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-80 group-hover:opacity-100" />
                   <div className="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent opacity-60"></div>
                </div>
                <div className="p-10 space-y-6">
                  <h3 className="text-3xl font-black">{item.title}</h3>
                  <p className="text-slate-400 font-medium leading-relaxed">{item.desc}</p>
                  <ul className="space-y-3">
                    {item.features.map((f, i) => (
                      <li key={i} className="flex items-center text-sm font-bold text-slate-300">
                        <CheckCircle2 size={16} className="text-amber-500 mr-3" />
                        {f}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing - Inspiration style */}
      <section id="pricing" className="py-32 px-4 bg-white overflow-hidden">
        <div className="max-w-7xl mx-auto">
          <div className="grid lg:grid-cols-12 gap-20 items-center">
            <div className="lg:col-span-5 space-y-8">
               <h2 className="text-5xl font-black tracking-tighter leading-none">Tarifs clairs, <br/> <span className="text-slate-400">sans surprise.</span></h2>
               <p className="text-slate-600 text-lg font-medium">Nos forfaits sont fixes et incluent l'accueil personnalisé, l'attente et les bagages. Pas de compteur qui tourne dans les bouchons.</p>
               <div className="space-y-4">
                  <div className="flex items-center space-x-4 bg-slate-50 p-4 rounded-2xl border border-slate-100">
                    <ShieldCheck className="text-green-600" />
                    <span className="font-bold">Paiement sécurisé à bord ou en ligne</span>
                  </div>
                  <div className="flex items-center space-x-4 bg-slate-50 p-4 rounded-2xl border border-slate-100">
                    <Calendar className="text-blue-600" />
                    <span className="font-bold">Annulation gratuite jusqu'à 2h avant</span>
                  </div>
               </div>
            </div>
            
            <div className="lg:col-span-7">
               <div className="bg-slate-900 rounded-[3rem] p-2 shadow-3xl">
                  <div className="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100">
                    <div className="grid grid-cols-4 bg-slate-100 p-6 text-xs uppercase font-black tracking-widest text-slate-500">
                       <div className="col-span-1">Destination</div>
                       <div className="text-center">Berline</div>
                       <div className="text-center">Van</div>
                       <div className="text-center">Moto</div>
                    </div>
                    <div className="divide-y divide-slate-100">
                       {pricing.map((p, i) => (
                         <div key={i} className="grid grid-cols-4 p-6 items-center hover:bg-amber-50 transition-colors">
                            <div className="col-span-1 font-black text-slate-900">{p.route}</div>
                            <div className="text-center font-bold text-slate-500">{p.eco}</div>
                            <div className="text-center font-black text-amber-600">{p.van}</div>
                            <div className="text-center font-bold text-slate-500">{p.moto}</div>
                         </div>
                       ))}
                    </div>
                  </div>
               </div>
            </div>
          </div>
        </div>
      </section>

      {/* Booking Form - Deep Inspired Section */}
      <section id="contact" className="py-32 px-4 bg-slate-900 relative">
        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-20"></div>
        <div className="max-w-7xl mx-auto relative z-10">
          <div className="bg-gradient-to-br from-slate-800 to-slate-900 p-1 rounded-[4rem] shadow-3xl">
            <div className="bg-slate-900 rounded-[3.8rem] p-8 md:p-16 grid lg:grid-cols-2 gap-20 items-center">
              <div className="space-y-10 text-white">
                <h2 className="text-5xl md:text-7xl font-black leading-none">Réservez votre <span className="text-amber-500">prochain trajet.</span></h2>
                <div className="space-y-8">
                  <div className="flex items-start space-x-6">
                    <div className="bg-amber-500/20 p-4 rounded-2xl text-amber-500"><MapPin /></div>
                    <div>
                      <h4 className="text-xl font-black">Notre Siège</h4>
                      <p className="text-slate-400 font-medium">16 Rue Jouffroy d'Abbans, 75017 Paris</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-6">
                    <div className="bg-blue-500/20 p-4 rounded-2xl text-blue-400"><Phone /></div>
                    <div>
                      <h4 className="text-xl font-black">Ligne Directe 24/7</h4>
                      <p className="text-slate-400 font-medium">06 33 96 02 53</p>
                      <p className="text-slate-500 text-sm font-bold">01 79 75 35 43</p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="bg-white rounded-[3rem] p-10 shadow-2xl">
                <form className="space-y-6" onSubmit={e => e.preventDefault()}>
                   <div className="space-y-2">
                      <label className="text-xs font-black uppercase tracking-widest text-slate-400">Nom & Prénom</label>
                      <input type="text" placeholder="Ex: Marc Lefebvre" className="w-full bg-slate-50 p-5 rounded-2xl border-none focus:ring-2 focus:ring-amber-500 font-bold transition-all" />
                   </div>
                   <div className="grid md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <label className="text-xs font-black uppercase tracking-widest text-slate-400">Véhicule</label>
                        <select className="w-full bg-slate-50 p-5 rounded-2xl border-none focus:ring-2 focus:ring-amber-500 font-bold appearance-none">
                           <option>Berline Executive</option>
                           <option>Van Mercedes</option>
                           <option>Moto-Taxi</option>
                        </select>
                      </div>
                      <div className="space-y-2">
                        <label className="text-xs font-black uppercase tracking-widest text-slate-400">Téléphone</label>
                        <input type="tel" placeholder="06..." className="w-full bg-slate-50 p-5 rounded-2xl border-none focus:ring-2 focus:ring-amber-500 font-bold transition-all" />
                      </div>
                   </div>
                   <div className="space-y-2">
                      <label className="text-xs font-black uppercase tracking-widest text-slate-400">Détails du Trajet</label>
                      <textarea rows="3" placeholder="Date, heure et adresses..." className="w-full bg-slate-50 p-5 rounded-2xl border-none focus:ring-2 focus:ring-amber-500 font-bold transition-all"></textarea>
                   </div>
                   <button className="w-full bg-slate-900 text-amber-500 py-6 rounded-2xl font-black text-xl hover:bg-slate-800 transition-all shadow-xl shadow-slate-900/20 active:scale-95">
                      ENVOYER LA DEMANDE
                   </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-20 bg-slate-950 text-slate-500">
        <div className="max-w-7xl mx-auto px-4 text-center space-y-12">
           <div className="flex flex-col items-center space-y-4">
              <div className="bg-white/5 p-4 rounded-full"><Car size={32} className="text-amber-500" /></div>
              <h3 className="text-2xl font-black text-white">BEN'S TAXI x JSL TRANSPORT</h3>
              <p className="max-w-md mx-auto font-medium">L'exigence au service de votre mobilité à Paris et en Île-de-France depuis plus de 10 ans.</p>
           </div>
           
           <div className="flex flex-wrap justify-center gap-10 text-sm font-bold uppercase tracking-widest">
              <button onClick={() => handleScrollTo('fleet')} className="hover:text-white transition-colors">La Flotte</button>
              <button onClick={() => handleScrollTo('pricing')} className="hover:text-white transition-colors">Tarifs</button>
              <button onClick={() => handleScrollTo('contact')} className="hover:text-white transition-colors">Contact</button>
              <a href="#" className="hover:text-white transition-colors">Mentions Légales</a>
           </div>

           <div className="pt-12 border-t border-white/5 text-xs">
              <p>© 2026 Ben's Services - JSL Transport. 16 Rue Jouffroy d'Abbans, Paris 17e.</p>
              <p className="mt-2">Contact : 06 33 96 02 53 / 01 79 75 35 43</p>
           </div>
        </div>
      </footer>
    </div>
  );
};

export default App;