import React, { useState, useEffect } from 'react';
import { Search, Package, Truck, MapPin, Clock, CheckCircle, AlertCircle, Plane, Ship, Phone, Mail, Globe, User, Calendar, Weight, DollarSign, Upload, Home, Plus, Eye, Container, Users, FileText, Send } from 'lucide-react';

const GPTrackingPlatform = () => {
  const [activeTab, setActiveTab] = useState('tracking');
  const [trackingNumber, setTrackingNumber] = useState('');
  const [trackingData, setTrackingData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [shipmentForm, setShipmentForm] = useState({
    senderName: '',
    senderPhone: '',
    senderAddress: '',
    receiverName: '',
    receiverPhone: '',
    receiverAddress: '',
    packageDescription: '',
    weight: '',
    needPickup: false,
    pickupDate: '',
    destination: 'abidjan'
  });

  // Données simulées pour GP et conteneurs
  const mockData = {
    // Colis GP individuels
    'GP2024001': {
      id: 'GP2024001',
      type: 'GP',
      description: 'Vêtements + Électronique',
      weight: '18kg',
      price: '1260 DH',
      sender: 'Ahmed Benali',
      receiver: 'Fatou Koné',
      origin: 'Casablanca, Maroc',
      destination: 'Abidjan, Côte d\'Ivoire',
      status: 'En cours de voyage',
      traveler: 'Vol AT 542 - Amina K.',
      currentLocation: 'Aéroport Mohammed V, Casablanca',
      estimatedDelivery: '11 Juin 2025',
      timeline: [
        { date: '2025-06-09', status: 'Colis réceptionné', location: 'Bureau Bandjo Casablanca', completed: true },
        { date: '2025-06-10', status: 'Remis au voyageur', location: 'Aéroport Mohammed V', completed: true },
        { date: '2025-06-10', status: 'Vol en cours', location: 'En vol vers Abidjan', completed: true, current: true },
        { date: '2025-06-11', status: 'Arrivée Abidjan', location: 'Aéroport Félix Houphouët-Boigny', completed: false },
        { date: '2025-06-11', status: 'Livraison prévue', location: 'Abidjan, Côte d\'Ivoire', completed: false }
      ]
    },
    
    'GP2024002': {
      id: 'GP2024002',
      type: 'GP',
      description: 'Médicaments + Documents',
      weight: '8kg',
      price: '560 DH',
      sender: 'Karim Tazi',
      receiver: 'Dr. Kouame',
      origin: 'Casablanca, Maroc',
      destination: 'Abidjan, Côte d\'Ivoire',
      status: 'Livré',
      traveler: 'Vol RAM 548 - Mohamed B.',
      currentLocation: 'Livré',
      estimatedDelivery: 'Livré le 08 Juin 2025',
      timeline: [
        { date: '2025-06-06', status: 'Colis réceptionné', location: 'Bureau Bandjo Casablanca', completed: true },
        { date: '2025-06-07', status: 'Remis au voyageur', location: 'Aéroport Mohammed V', completed: true },
        { date: '2025-06-07', status: 'Vol effectué', location: 'Abidjan', completed: true },
        { date: '2025-06-08', status: 'Récupéré par Bandjo', location: 'Aéroport Abidjan', completed: true },
        { date: '2025-06-08', status: 'Livré au destinataire', location: 'Cocody, Abidjan', completed: true, current: true }
      ]
    },

    // Conteneurs
    'CONT2024001': {
      id: 'CONT2024001',
      type: 'CONTENEUR',
      description: 'Conteneur 40 pieds - Mixed cargo',
      totalWeight: '18.5 tonnes',
      clientPackages: 42,
      bandjoGoods: '12 palettes électronique',
      origin: 'Le Havre, France',
      destination: 'Port d\'Abidjan, Côte d\'Ivoire',
      status: 'En transit maritime',
      currentLocation: 'Océan Atlantique',
      estimatedDelivery: '18 Juin 2025',
      vessel: 'MSC CLAIRE - IMO: 9876543',
      timeline: [
        { date: '2025-05-28', status: 'Conteneur chargé', location: 'Port du Havre, France', completed: true },
        { date: '2025-05-29', status: 'Départ maritime', location: 'Le Havre, France', completed: true },
        { date: '2025-06-10', status: 'Transit océanique', location: 'Océan Atlantique', completed: true, current: true },
        { date: '2025-06-16', status: 'Arrivée prévue', location: 'Port d\'Abidjan', completed: false },
        { date: '2025-06-18', status: 'Dédouanement', location: 'Port d\'Abidjan', completed: false },
        { date: '2025-06-20', status: 'Distribution colis', location: 'Abidjan', completed: false }
      ],
      packages: [
        { id: 'PKG001', client: 'Diabaté S.', weight: '25kg', status: 'En transit' },
        { id: 'PKG002', client: 'Kouadio A.', weight: '15kg', status: 'En transit' },
        { id: 'PKG003', client: 'Bamba K.', weight: '30kg', status: 'En transit' }
      ]
    }
  };

  const handleSearch = () => {
    if (!trackingNumber.trim()) return;
    
    setIsLoading(true);
    setTimeout(() => {
      const data = mockData[trackingNumber.toUpperCase()];
      setTrackingData(data || null);
      setIsLoading(false);
    }, 1500);
  };

  const handleFormSubmit = (e) => {
    e.preventDefault();
    const trackingId = 'GP' + Date.now().toString().slice(-6);
    alert(`Demande d'expédition créée !\nNuméro de suivi: ${trackingId}\nTarif estimé: ${calculatePrice()} DH`);
  };

  const calculatePrice = () => {
    const weight = parseFloat(shipmentForm.weight) || 0;
    const basePrice = shipmentForm.destination === 'abidjan' ? 70 : 80;
    return Math.round(weight * basePrice);
  };

  const getStatusColor = (status) => {
    switch (status) {
      case 'Livré':
      case 'Livré au destinataire':
        return 'text-green-600 bg-green-100';
      case 'En cours de voyage':
      case 'En transit maritime':
      case 'Vol en cours':
        return 'text-blue-600 bg-blue-100';
      case 'Colis réceptionné':
        return 'text-yellow-600 bg-yellow-100';
      default:
        return 'text-gray-600 bg-gray-100';
    }
  };

  const TrackingTab = () => (
    <div className="space-y-8">
      {/* Search Section */}
      <div className="bg-white rounded-2xl shadow-xl p-8">
        <div className="text-center mb-8">
          <h2 className="text-3xl font-bold text-gray-900 mb-4">Suivi GP & Conteneurs</h2>
          <p className="text-gray-600 text-lg">Suivez vos colis GP ou conteneurs en temps réel</p>
        </div>
        
        <div className="max-w-md mx-auto">
          <div className="flex space-x-4">
            <div className="flex-1 relative">
              <input
                type="text"
                placeholder="GP2024001 ou CONT2024001"
                value={trackingNumber}
                onChange={(e) => setTrackingNumber(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
                className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-lg"
              />
              <Search className="absolute right-3 top-3 w-6 h-6 text-gray-400" />
            </div>
            <button
              onClick={handleSearch}
              disabled={isLoading}
              className="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-semibold disabled:opacity-50"
            >
              {isLoading ? 'Recherche...' : 'Suivre'}
            </button>
          </div>
        </div>

        <div className="mt-6 text-center">
          <p className="text-gray-500 mb-2">Exemples de suivi :</p>
          <div className="flex justify-center space-x-4 text-sm">
            <button onClick={() => setTrackingNumber('GP2024001')} className="text-blue-600 hover:underline">
              GP2024001 (Colis)
            </button>
            <button onClick={() => setTrackingNumber('GP2024002')} className="text-blue-600 hover:underline">
              GP2024002 (Livré)
            </button>
            <button onClick={() => setTrackingNumber('CONT2024001')} className="text-blue-600 hover:underline">
              CONT2024001 (Conteneur)
            </button>
          </div>
        </div>
      </div>

      {/* Results */}
      {isLoading && (
        <div className="bg-white rounded-2xl shadow-xl p-8 text-center">
          <div className="animate-spin w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full mx-auto mb-4"></div>
          <p className="text-gray-600">Recherche en cours...</p>
        </div>
      )}

      {trackingData && !isLoading && (
        <div className="bg-white rounded-2xl shadow-xl overflow-hidden">
          {/* Package/Container Info */}
          <div className={`${trackingData.type === 'CONTENEUR' ? 'bg-gradient-to-r from-green-600 to-emerald-600' : 'bg-gradient-to-r from-blue-600 to-indigo-600'} text-white p-8`}>
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center space-x-4">
                {trackingData.type === 'CONTENEUR' ? <Container className="w-8 h-8" /> : <Package className="w-8 h-8" />}
                <div>
                  <h3 className="text-2xl font-bold">{trackingData.id}</h3>
                  <p className="text-blue-100">{trackingData.description}</p>
                </div>
              </div>
              <div className={`px-4 py-2 rounded-full text-sm font-semibold ${getStatusColor(trackingData.status)} text-gray-800`}>
                {trackingData.status}
              </div>
            </div>

            {trackingData.type === 'GP' ? (
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="bg-white/10 rounded-lg p-4">
                  <p className="text-blue-200 text-sm">Poids</p>
                  <p className="font-bold text-lg">{trackingData.weight}</p>
                </div>
                <div className="bg-white/10 rounded-lg p-4">
                  <p className="text-blue-200 text-sm">Prix</p>
                  <p className="font-bold text-lg">{trackingData.price}</p>
                </div>
                <div className="bg-white/10 rounded-lg p-4">
                  <p className="text-blue-200 text-sm">Voyageur</p>
                  <p className="font-bold text-sm">{trackingData.traveler}</p>
                </div>
                <div className="bg-white/10 rounded-lg p-4">
                  <p className="text-blue-200 text-sm">Livraison</p>
                  <p className="font-bold text-sm">{trackingData.estimatedDelivery}</p>
                </div>
              </div>
            ) : (
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="bg-white/10 rounded-lg p-4">
                  <p className="text-green-200 text-sm">Poids total</p>
                  <p className="font-bold text-lg">{trackingData.totalWeight}</p>
                </div>
                <div className="bg-white/10 rounded-lg p-4">
                  <p className="text-green-200 text-sm">Colis clients</p>
                  <p className="font-bold text-lg">{trackingData.clientPackages}</p>
                </div>
                <div className="bg-white/10 rounded-lg p-4">
                  <p className="text-green-200 text-sm">Navire</p>
                  <p className="font-bold text-sm">{trackingData.vessel}</p>
                </div>
                <div className="bg-white/10 rounded-lg p-4">
                  <p className="text-green-200 text-sm">Arrivée</p>
                  <p className="font-bold text-sm">{trackingData.estimatedDelivery}</p>
                </div>
              </div>
            )}
          </div>

          {/* Timeline */}
          <div className="p-8">
            <h4 className="text-xl font-bold text-gray-900 mb-6">Suivi détaillé</h4>
            <div className="space-y-6">
              {trackingData.timeline.map((event, index) => (
                <div key={index} className="flex items-start space-x-4">
                  <div className={`w-4 h-4 rounded-full mt-1 flex-shrink-0 ${
                    event.completed ? 'bg-green-500' : 'bg-gray-300'
                  } ${event.current ? 'ring-4 ring-blue-200 bg-blue-500' : ''}`}></div>
                  <div className="flex-1">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className={`font-semibold ${event.current ? 'text-blue-600' : 'text-gray-900'}`}>
                          {event.status}
                        </p>
                        <p className="text-gray-600 text-sm">{event.location}</p>
                      </div>
                      <div className="text-right">
                        <p className="text-gray-500 text-sm">{event.date}</p>
                        {event.current && (
                          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 mt-1">
                            Position actuelle
                          </span>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Container packages detail */}
            {trackingData.type === 'CONTENEUR' && trackingData.packages && (
              <div className="mt-8 border-t pt-8">
                <h5 className="text-lg font-semibold text-gray-900 mb-4">Colis dans ce conteneur</h5>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  {trackingData.packages.map((pkg, index) => (
                    <div key={index} className="bg-gray-50 rounded-lg p-4">
                      <div className="flex items-center justify-between mb-2">
                        <span className="font-semibold">{pkg.id}</span>
                        <span className="text-sm text-gray-600">{pkg.weight}</span>
                      </div>
                      <p className="text-sm text-gray-700">{pkg.client}</p>
                      <span className="inline-block px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full mt-2">
                        {pkg.status}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {trackingNumber && !trackingData && !isLoading && (
        <div className="bg-white rounded-2xl shadow-xl p-8 text-center">
          <AlertCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
          <h3 className="text-xl font-bold text-gray-900 mb-2">Numéro de suivi introuvable</h3>
          <p className="text-gray-600 mb-4">
            Aucune expédition trouvée avec le numéro <span className="font-semibold">{trackingNumber}</span>
          </p>
        </div>
      )}
    </div>
  );

  const ShipmentTab = () => (
    <div className="bg-white rounded-2xl shadow-xl p-8">
      <div className="text-center mb-8">
        <h2 className="text-3xl font-bold text-gray-900 mb-4">Envoyer un colis GP</h2>
        <p className="text-gray-600">Remplissez le formulaire pour programmer l'envoi de votre colis</p>
      </div>

      <form onSubmit={handleFormSubmit} className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Expéditeur */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">Expéditeur</h3>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Nom complet *</label>
              <input
                type="text"
                required
                value={shipmentForm.senderName}
                onChange={(e) => setShipmentForm({...shipmentForm, senderName: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                placeholder="Votre nom complet"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Téléphone *</label>
              <input
                type="tel"
                required
                value={shipmentForm.senderPhone}
                onChange={(e) => setShipmentForm({...shipmentForm, senderPhone: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                placeholder="+212 6XX XXX XXX"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Adresse complète *</label>
              <textarea
                required
                value={shipmentForm.senderAddress}
                onChange={(e) => setShipmentForm({...shipmentForm, senderAddress: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                rows="3"
                placeholder="Adresse complète pour enlèvement"
              />
            </div>
          </div>

          {/* Destinataire */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">Destinataire</h3>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Nom complet *</label>
              <input
                type="text"
                required
                value={shipmentForm.receiverName}
                onChange={(e) => setShipmentForm({...shipmentForm, receiverName: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                placeholder="Nom du destinataire"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Téléphone *</label>
              <input
                type="tel"
                required
                value={shipmentForm.receiverPhone}
                onChange={(e) => setShipmentForm({...shipmentForm, receiverPhone: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                placeholder="+225 XX XX XX XX"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Adresse de livraison *</label>
              <textarea
                required
                value={shipmentForm.receiverAddress}
                onChange={(e) => setShipmentForm({...shipmentForm, receiverAddress: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                rows="3"
                placeholder="Adresse complète de livraison"
              />
            </div>
          </div>
        </div>

        {/* Détails du colis */}
        <div className="border-t pt-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">Détails du colis</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Description *</label>
              <input
                type="text"
                required
                value={shipmentForm.packageDescription}
                onChange={(e) => setShipmentForm({...shipmentForm, packageDescription: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                placeholder="Vêtements, électronique..."
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Poids (kg) *</label>
              <input
                type="number"
                required
                step="0.1"
                max="23"
                value={shipmentForm.weight}
                onChange={(e) => setShipmentForm({...shipmentForm, weight: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                placeholder="Max 23kg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Destination</label>
              <select
                value={shipmentForm.destination}
                onChange={(e) => setShipmentForm({...shipmentForm, destination: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
              >
                <option value="abidjan">Abidjan (70 DH/kg)</option>
                <option value="autres">Autres destinations (80 DH/kg)</option>
              </select>
            </div>
          </div>
        </div>

        {/* Options d'enlèvement */}
        <div className="border-t pt-6">
          <div className="flex items-center space-x-3 mb-4">
            <input
              type="checkbox"
              id="needPickup"
              checked={shipmentForm.needPickup}
              onChange={(e) => setShipmentForm({...shipmentForm, needPickup: e.target.checked})}
              className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
            />
            <label htmlFor="needPickup" className="text-sm font-medium text-gray-700">
              Demander un enlèvement à domicile (+50 DH)
            </label>
          </div>
          
          {shipmentForm.needPickup && (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Date d'enlèvement souhaitée</label>
                <input
                  type="date"
                  value={shipmentForm.pickupDate}
                  onChange={(e) => setShipmentForm({...shipmentForm, pickupDate: e.target.value})}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                  min={new Date().toISOString().split('T')[0]}
                />
              </div>
            </div>
          )}
        </div>

        {/* Récapitulatif prix */}
        <div className="bg-blue-50 rounded-lg p-6 border-t">
          <div className="flex justify-between items-center mb-4">
            <span className="text-lg font-semibold">Tarif estimé :</span>
            <span className="text-2xl font-bold text-blue-600">
              {calculatePrice() + (shipmentForm.needPickup ? 50 : 0)} DH
            </span>
          </div>
          <div className="text-sm text-gray-600 space-y-1">
            <p>• Transport: {calculatePrice()} DH ({shipmentForm.weight || 0}kg × {shipmentForm.destination === 'abidjan' ? '70' : '80'} DH/kg)</p>
            {shipmentForm.needPickup && <p>• Enlèvement à domicile: 50 DH</p>}
            <p>• Suivi inclus</p>
          </div>
        </div>

        <button
          type="submit"
          className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors font-semibold flex items-center justify-center space-x-2"
        >
          <Send className="w-5 h-5" />
          <span>Confirmer la demande d'expédition</span>
        </button>
      </form>
    </div>
  );

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Header */}
      <header className="bg-white shadow-lg border-b-4 border-blue-600">
        <div className="max-w-7xl mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <div className="bg-blue-600 p-3 rounded-lg">
                <Package className="w-8 h-8 text-white" />
              </div>
              <div>
                <h1 className="text-2xl font-bold text-gray-900">Groupe Bandjo - Plateforme GP</h1>
                <p className="text-gray-600">Transport de colis par voyageurs • Conteneurs internationaux</p>
              </div>
            </div>
            <div className="flex items-center space-x-6 text-sm text-gray-600">
              <div className="flex items-center space-x-2">
                <Weight className="w-4 h-4" />
                <span>70-80 DH/kg</span>
              </div>
              <div className="flex items-center space-x-2">
                <Plane className="w-4 h-4" />
                <span>Casa ↔ Abidjan</span>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Navigation Tabs */}
      <div className="max-w-6xl mx-auto px-4 py-6">
        <div className="bg-white rounded-lg shadow-md p-2 mb-8">
          <div className="flex space-x-2">
            <button
              onClick={() => setActiveTab('tracking')}
              className={`flex-1 px-4 py-3 rounded-lg font-semibold transition-colors flex items-center justify-center space-x-2 ${
                activeTab === 'tracking' 
                  ? 'bg-blue-600 text-white' 
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              <Eye className="w-5 h-5" />
              <span>Suivi de colis</span>
            </button>
            <button
              onClick={() => setActiveTab('shipping')}
              className={`flex-1 px-4 py-3 rounded-lg font-semibold transition-colors flex items-center justify-center space-x-2 ${
                activeTab === 'shipping' 
                  ? 'bg-green-600 text-white' 
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              <Plus className="w-5 h-5" />
              <span>Envoyer un colis</span>
            </button>
          </div>
        </div>

        {/* Content */}
        {activeTab === 'tracking' && <TrackingTab />}
        {activeTab === 'shipping' && <ShipmentTab />}

        {/* Info Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
          <div className="bg-white rounded-xl shadow-lg p-6 text-center">
            <div className="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4">
              <Weight className="w-6 h-6 text-blue-600" />
            </div>
            <h3 className="font-semibold text-gray-900 mb-2">Service GP</h3>
            <p className="text-gray-600 text-sm">Optimisation des bagages voyageurs</p>
            <p className="text-blue-600 font-bold mt-2">70-80 DH/kg</p>
          </div>

          <div className="bg-white rounded-xl shadow-lg p-6 text-center">
            <div className="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4">
              <Container className="w-6 h-6 text-green-600" />
            </div>
            <h3 className="font-semibold text-gray-900 mb-2">Conteneurs</h3>
            <p className="text-gray-600 text-sm">Transport maritime groupé</p>
            <p className="text-green-600 font-bold mt-2">France → Abidjan</p>
          </div>

          <div className="bg-white rounded-xl shadow-lg p-6 text-center">
            <div className="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4">
              <Users className="w-6 h-6 text-purple-600" />
            </div>
            <h3 className="font-semibold text-gray-900 mb-2">Réseau Voyageurs</h3>
            <p className="text-gray-600 text-sm">Partenaires de confiance</p>
            <p className="text-purple-600 font-bold mt-2">Livraison rapide</p>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-8 mt-12">
        <div className="max-w-6xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h4 className="font-bold text-lg mb-4">Groupe Bandjo SARL</h4>
              <p className="text-gray-400 text-sm">
                Révolutionnons le transport de colis avec notre concept GP innovant.
              </p>
            </div>
            <div>
              <h5 className="font-semibold mb-3">Services GP</h5>
              <ul className="space-y-2 text-sm text-gray-400">
                <li>Colis par voyageurs</li>
                <li>Suivi en temps réel</li>
                <li>Enlèvement à domicile</li>
                <li>Tarifs compétitifs</li>
              </ul>
            </div>
            <div>
              <h5 className="font-semibold mb-3">Destinations</h5>
              <ul className="space-y-2 text-sm text-gray-400">
                <li>Casablanca → Abidjan</li>
                <li>France → Côte d'Ivoire</li>
                <li>Canada → Afrique</li>
                <li>Chine & Turquie</li>
              </ul>
            </div>
            <div>
              <h5 className="font-semibold mb-3">Contact</h5>
              <div className="space-y-2 text-sm text-gray-400">
                <p>Casablanca, Maroc</p>
                <p>Abidjan, Côte d'Ivoire</p>
                <p>Chicoutimi, Québec</p>
                <p>Support: +212 6XX XXX XXX</p>
              </div>
            </div>
          </div>
          <div className="border-t border-gray-800 mt-8 pt-6 text-center text-gray-400 text-sm">
            <p>&copy; 2025 Groupe Bandjo SARL - Plateforme GP. Innovation logistique.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default GPTrackingPlatform