const OptionsConfig = ({ title, icon, configKey, addPrompts, color }) => (
      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
        <div className="bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[95vh] overflow-y-auto">
          <AdminHeader 
            title={`${icon} ${title}`} 
            onBack={() => setAdminSection('menu')} 
          />
          
          <div className="p-8">
            <div className="flex justify-between items-center mb-6">
              <div>
                <h3 className="text-xl font-bold text-gray-800">Gestion des options</h3>
                <p className="text-gray-600">Ajoutez, modifiez ou supprimez les {title.toLowerCase()}</p>
              </div>
              <button
                onClick={() => {
                  const value = prompt(`Valeur pour ${title.toLowerCase()} (sans espaces, ex: nouveau-type):`);
                  if (!value) return;
                  
                  const label = prompt(`Libellé affiché pour ${title.toLowerCase()}:`);
                  if (!label) return;

                  const newOption = { value: value.toLowerCase().replace(/\s+/g, '-'), label };
                  const optionExists = adminConfig[configKey].some(option => option.value === newOption.value);
                  if (!optionExists) {
                    setAdminConfig(prev => ({
                      ...prev,
                      [configKey]: [...prev[configKey], newOption]
                    }));
                  } else {
                    alert('Cette option existe déjà');
                  }
                }}
                className={`bg-${color}-500 text-white px-6 py-3 rounded-lg hover:bg-${color}-600 transition-colors text-lg`}
              >
                + Ajouter
              </button>
            </div>
            
            <div className="space-y-3">
              {adminConfig[configKey].map((option, index) => (
                <div key={option.value} className={`bg-${color}-50 p-4 rounded-lg border-l-4 border-${color}-400`}>
                  <div className="flex items-center gap-4">
                    <div className="flex-1">
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Libellé affiché
                      </label>
                      <input
                        type="text"
                        value={option.label}
                        onChange={(e) => {
                          if (e.target.value && e.target.value.trim()) {
                            setAdminConfig(prev => ({
                              ...prev,
                              [configKey]: prev[configKey].map((opt, i) => 
                                i === index ? { ...opt, label: e.target.value.trim() } : opt
                              )
                            }));
                          }
                        }}
                        className={`w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-${color}-500 text-lg`}
                      />
                    </div>
                    <div className="w-32">
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Valeur technique
                      </label>
                      <div className="text-sm text-gray-600 bg-gray-100 px-3 py-3 rounded border font-mono">
                        {option.value}
                      </div>
                    </div>
                    <button
                      onClick={() => {
                        setAdminConfig(prev => ({
                          ...prev,
                          [configKey]: prev[configKey].filter(opt => opt.value !== option.value)
                        }));
                      }}
                      className="text-red-500 hover:text-red-700 px-3 py-2 text-xl"
                      title="Supprimer cette option"
                    >
                      🗑️
                    </button>
                  </div>
                </div>
              ))}
            </div>

            {adminConfig[configKey].length === 0 && (
              <div className="text-center py-12 text-gray-500">
                <div className="text-6xl mb-4">{icon}</div>
                <p className="text-lg">Aucune option configurée</p>
                <p>import React, { useState } from 'react';
import { Calendar, Clock, User, Mail, Phone, CheckCircle, ChevronLeft, ChevronRight } from 'lucide-react';

const CalendlyClone = () => {
  const [currentStep, setCurrentStep] = useState(1);
  const [selectedDate, setSelectedDate] = useState(null);
  const [selectedTime, setSelectedTime] = useState(null);
  const [showAdmin, setShowAdmin] = useState(false);
  const [adminConfig, setAdminConfig] = useState({
    // Configuration générale
    companyName: 'Consultation Immobilière',
    description: 'Réservez votre rendez-vous avec notre courtier immobilier',
    primaryColor: '#2563eb',
    secondaryColor: '#16a34a',
    
    // Configuration des horaires
    timeSlots: [
      '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30',
      '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', 
      '17:00', '17:30', '18:00', '18:30', '19:00'
    ],
    availabilityDays: 60,
    includeWeekends: true,
    
    // Types de rendez-vous personnalisés
    appointmentTypes: [
      { value: 'achat', label: 'Achat d\'une propriété' },
      { value: 'vente', label: 'Vente d\'une propriété' },
      { value: 'evaluation', label: 'Évaluation gratuite' },
      { value: 'investissement', label: 'Investissement immobilier' },
      { value: 'consultation', label: 'Consultation générale' }
    ],
    
    // Types de propriétés
    propertyTypes: [
      { value: 'maison', label: 'Maison' },
      { value: 'condo', label: 'Condominium' },
      { value: 'duplex', label: 'Duplex/Triplex' },
      { value: 'commercial', label: 'Commercial' },
      { value: 'terrain', label: 'Terrain' }
    ],
    
    // Budgets
    budgetRanges: [
      { value: '0-200000', label: 'Moins de 200 000 $' },
      { value: '200000-400000', label: '200 000 $ - 400 000 $' },
      { value: '400000-600000', label: '400 000 $ - 600 000 $' },
      { value: '600000-800000', label: '600 000 $ - 800 000 $' },
      { value: '800000+', label: 'Plus de 800 000 $' }
    ],
    
    // Échéanciers
    timeframes: [
      { value: 'immediatement', label: 'Immédiatement' },
      { value: '1-3mois', label: '1-3 mois' },
      { value: '3-6mois', label: '3-6 mois' },
      { value: '6-12mois', label: '6-12 mois' },
      { value: 'plus12mois', label: 'Plus de 12 mois' }
    ],
    
    // Messages personnalisés
    confirmationMessage: 'Votre consultation est confirmée. Vous recevrez un email de confirmation avec tous les détails.',
    followUpMessage: 'Notre courtier vous contactera 24h avant le rendez-vous pour confirmer et vous donner les dernières informations.',
    
    // Champs requis
    requiredFields: {
      name: true,
      email: true,
      phone: true,
      appointmentType: true,
      propertyType: false,
      budget: false,
      timeframe: false,
      message: false
    }
  });

  const [bookingForm, setBookingForm] = useState({
    name: '',
    email: '',
    phone: '',
    appointmentType: '',
    propertyType: '',
    budget: '',
    timeframe: '',
    message: ''
  });
  const [bookedSlots, setBookedSlots] = useState([]);
  const [currentMonth, setCurrentMonth] = useState(new Date());
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});

  // Créneaux horaires depuis la configuration admin
  const timeSlots = adminConfig.timeSlots;

  const formatDate = (date) => {
    return date.toLocaleDateString('fr-FR', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  };

  const isSlotBooked = (date, time) => {
    const dateStr = date.toDateString();
    return bookedSlots.some(slot => slot.date === dateStr && slot.time === time);
  };

  const handleDateSelect = (date) => {
    setSelectedDate(date);
    setCurrentStep(2);
  };

  const handleTimeSelect = (time) => {
    setSelectedTime(time);
    setCurrentStep(3);
  };

  const handleFormChange = (e) => {
    const { name, value } = e.target;
    let formattedValue = value;

    // Formatage automatique du téléphone
    if (name === 'phone') {
      // Supprimer tous les caractères non numériques
      const phoneNumber = value.replace(/\D/g, '');
      
      // Limiter à 10 chiffres
      if (phoneNumber.length <= 10) {
        // Formater: 123-123-1234
        if (phoneNumber.length >= 6) {
          formattedValue = `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6)}`;
        } else if (phoneNumber.length >= 3) {
          formattedValue = `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(3)}`;
        } else {
          formattedValue = phoneNumber;
        }
      } else {
        return; // Ne pas permettre plus de 10 chiffres
      }
    }

    setBookingForm({
      ...bookingForm,
      [name]: formattedValue
    });

    // Marquer le champ comme touché
    setTouched({
      ...touched,
      [name]: true
    });

    // Validation en temps réel
    validateField(name, formattedValue);
  };

  const validateField = (name, value) => {
    const newErrors = { ...errors };

    switch (name) {
      case 'name':
        if (!value.trim()) {
          newErrors.name = 'Le nom est obligatoire';
        } else if (value.trim().length < 2) {
          newErrors.name = 'Le nom doit contenir au moins 2 caractères';
        } else {
          delete newErrors.name;
        }
        break;

      case 'email':
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!value.trim()) {
          newErrors.email = 'L\'email est obligatoire';
        } else if (!emailRegex.test(value)) {
          newErrors.email = 'Format d\'email invalide';
        } else {
          delete newErrors.email;
        }
        break;

      case 'phone':
        const phoneRegex = /^\d{3}-\d{3}-\d{4}$/;
        if (!value.trim()) {
          newErrors.phone = 'Le téléphone est obligatoire';
        } else if (!phoneRegex.test(value)) {
          newErrors.phone = 'Format: 123-123-1234';
        } else {
          delete newErrors.phone;
        }
        break;

      case 'appointmentType':
        if (!value) {
          newErrors.appointmentType = 'Veuillez sélectionner un type de rendez-vous';
        } else {
          delete newErrors.appointmentType;
        }
        break;

      default:
        break;
    }

    setErrors(newErrors);
  };

  const validateAllFields = () => {
    const requiredFields = Object.keys(adminConfig.requiredFields).filter(
      field => adminConfig.requiredFields[field]
    );
    let isValid = true;
    const newErrors = {};

    requiredFields.forEach(field => {
      validateField(field, bookingForm[field]);
      if (errors[field] || !bookingForm[field]) {
        isValid = false;
        if (!bookingForm[field]) {
          newErrors[field] = 'Ce champ est obligatoire';
        }
      }
    });

    setErrors({ ...errors, ...newErrors });
    setTouched(requiredFields.reduce((acc, field) => ({ ...acc, [field]: true }), {}));
    
    return isValid && Object.keys(errors).length === 0;
  };

  const handleBooking = () => {
    if (!validateAllFields()) {
      alert('Veuillez corriger les erreurs dans le formulaire');
      return;
    }

    const newBooking = {
      date: selectedDate.toDateString(),
      time: selectedTime,
      ...bookingForm
    };

    setBookedSlots([...bookedSlots, newBooking]);
    setCurrentStep(4);
  };

  const resetBooking = () => {
    setCurrentStep(1);
    setSelectedDate(null);
    setSelectedTime(null);
    setBookingForm({ name: '', email: '', phone: '', appointmentType: '', propertyType: '', budget: '', timeframe: '', message: '' });
    setErrors({});
    setTouched({});
    setAdminSection('menu'); // Reset admin to menu
  };

  const goBack = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1);
    }
  };

  // Fonctions pour le calendrier
  const getDaysInMonth = (date) => {
    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
  };

  const getFirstDayOfMonth = (date) => {
    const firstDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
    return firstDay === 0 ? 7 : firstDay; // Lundi = 1, Dimanche = 7
  };

  const isDateAvailable = (date) => {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const checkDate = new Date(date);
    checkDate.setHours(0, 0, 0, 0);
    
    // Vérifier si c'est un weekend et si les weekends sont autorisés
    if (!adminConfig.includeWeekends) {
      const dayOfWeek = checkDate.getDay();
      if (dayOfWeek === 0 || dayOfWeek === 6) { // Dimanche = 0, Samedi = 6
        return false;
      }
    }
    
    // Disponible si c'est après aujourd'hui et dans la période configurée
    const maxDate = new Date(today);
    maxDate.setDate(today.getDate() + adminConfig.availabilityDays);
    
    return checkDate > today && checkDate <= maxDate;
  };

  const previousMonth = () => {
    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
  };

  const nextMonth = () => {
    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));
  };

  const renderCalendar = () => {
    const daysInMonth = getDaysInMonth(currentMonth);
    const firstDay = getFirstDayOfMonth(currentMonth);
    const days = [];

    // Jours vides au début
    for (let i = 1; i < firstDay; i++) {
      days.push(<div key={`empty-${i}`} className="h-12"></div>);
    }

    // Jours du mois
    for (let day = 1; day <= daysInMonth; day++) {
      const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
      const isAvailable = isDateAvailable(date);
      const isSelected = selectedDate && selectedDate.toDateString() === date.toDateString();

      days.push(
        <button
          key={day}
          onClick={() => isAvailable && handleDateSelect(date)}
          disabled={!isAvailable}
          className={`h-12 rounded-lg text-sm font-medium transition-colors ${
            isSelected
              ? 'bg-blue-500 text-white'
              : isAvailable
              ? 'bg-white hover:bg-blue-50 border border-gray-200 text-gray-700'
              : 'bg-gray-100 text-gray-400 cursor-not-allowed'
          }`}
        >
          {day}
        </button>
      );
    }

    return days;
  };

  // Fonctions d'administration
  const handleAdminConfigChange = (section, field, value) => {
    setAdminConfig(prev => ({
      ...prev,
      [section]: {
        ...prev[section],
        [field]: value
      }
    }));
  };

  const handleSimpleConfigChange = (field, value) => {
    setAdminConfig(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const addTimeSlot = () => {
    const newTime = prompt('Ajouter un créneau (format HH:MM):');
    if (newTime && /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/.test(newTime)) {
      setAdminConfig(prev => ({
        ...prev,
        timeSlots: [...prev.timeSlots, newTime].sort()
      }));
    }
  };

  const removeTimeSlot = (timeToRemove) => {
    setAdminConfig(prev => ({
      ...prev,
      timeSlots: prev.timeSlots.filter(time => time !== timeToRemove)
    }));
  };

  const addOption = (configKey, newOption) => {
    if (newOption.value && newOption.label) {
      setAdminConfig(prev => ({
        ...prev,
        [configKey]: [...prev[configKey], newOption]
      }));
    }
  };

  const removeOption = (configKey, valueToRemove) => {
    setAdminConfig(prev => ({
      ...prev,
      [configKey]: prev[configKey].filter(option => option.value !== valueToRemove)
    }));
  };

  const StepIndicator = () => (
    <div className="flex items-center justify-center mb-8">
      {[1, 2, 3, 4].map((step) => (
        <React.Fragment key={step}>
          <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
            step < currentStep ? 'bg-green-500 text-white' :
            step === currentStep ? 'bg-blue-500 text-white' :
            'bg-gray-300 text-gray-600'
          }`}>
            {step < currentStep ? '✓' : step}
          </div>
          {step < 4 && (
            <div className={`w-16 h-1 mx-2 ${
              step < currentStep ? 'bg-green-500' : 'bg-gray-300'
            }`}></div>
          )}
        </React.Fragment>
      ))}
    </div>
  );

  const AdminPanel = () => (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg shadow-xl max-w-5xl w-full max-h-[95vh] overflow-y-auto">
        {/* Header admin avec les mêmes couleurs */}
        <div 
          className="text-white p-6 rounded-t-lg"
          style={{ 
            background: `linear-gradient(to right, ${adminConfig.primaryColor}, ${adminConfig.secondaryColor})` 
          }}
        >
          <div className="flex justify-between items-center">
            <div>
              <h2 className="text-2xl font-bold mb-2">🔧 Panneau d'Administration</h2>
              <p className="text-blue-100">Configuration complète de votre système de réservation</p>
            </div>
            <button
              onClick={() => setShowAdmin(false)}
              className="text-white hover:text-gray-200 text-3xl font-bold"
            >
              ×
            </button>
          </div>
        </div>

        <div className="p-6 space-y-8">
          {/* Configuration générale */}
          <section className="bg-gray-50 p-6 rounded-lg">
            <h3 className="text-xl font-bold mb-4 text-gray-800 flex items-center">
              🏢 Configuration Générale
            </h3>
            <div className="grid md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Nom de l'entreprise
                </label>
                <input
                  type="text"
                  value={adminConfig.companyName}
                  onChange={(e) => handleSimpleConfigChange('companyName', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  placeholder="Nom affiché en en-tête"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Description
                </label>
                <input
                  type="text"
                  value={adminConfig.description}
                  onChange={(e) => handleSimpleConfigChange('description', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  placeholder="Sous-titre de l'application"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Couleur primaire
                </label>
                <input
                  type="color"
                  value={adminConfig.primaryColor}
                  onChange={(e) => handleSimpleConfigChange('primaryColor', e.target.value)}
                  className="w-full h-10 border border-gray-300 rounded-lg cursor-pointer"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Couleur secondaire
                </label>
                <input
                  type="color"
                  value={adminConfig.secondaryColor}
                  onChange={(e) => handleSimpleConfigChange('secondaryColor', e.target.value)}
                  className="w-full h-10 border border-gray-300 rounded-lg cursor-pointer"
                />
              </div>
            </div>
          </section>

          {/* Configuration des disponibilités */}
          <section className="bg-blue-50 p-6 rounded-lg">
            <h3 className="text-xl font-bold mb-4 text-gray-800 flex items-center">
              📅 Disponibilités et Horaires
            </h3>
            <div className="grid md:grid-cols-2 gap-4 mb-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Nombre de jours de disponibilité
                </label>
                <input
                  type="number"
                  min="1"
                  max="365"
                  value={adminConfig.availabilityDays}
                  onChange={(e) => handleSimpleConfigChange('availabilityDays', parseInt(e.target.value))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                />
                <p className="text-xs text-gray-500 mt-1">Combien de jours à l'avance les clients peuvent réserver</p>
              </div>
              <div className="flex items-center">
                <label className="flex items-center">
                  <input
                    type="checkbox"
                    checked={adminConfig.includeWeekends}
                    onChange={(e) => handleSimpleConfigChange('includeWeekends', e.target.checked)}
                    className="mr-2"
                  />
                  <span className="text-sm font-medium">Inclure les weekends</span>
                </label>
              </div>
            </div>

            <div>
              <div className="flex justify-between items-center mb-3">
                <label className="text-sm font-medium text-gray-700">Créneaux horaires disponibles</label>
                <button
                  onClick={addTimeSlot}
                  className="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-600 transition-colors"
                >
                  + Ajouter un horaire
                </button>
              </div>
              <div className="grid grid-cols-4 md:grid-cols-8 gap-2 max-h-40 overflow-y-auto border rounded-lg p-3 bg-white">
                {adminConfig.timeSlots.map(time => (
                  <div key={time} className="flex items-center justify-between bg-blue-100 px-2 py-1 rounded text-sm">
                    <span className="font-medium">{time}</span>
                    <button
                      onClick={() => removeTimeSlot(time)}
                      className="text-red-500 ml-1 hover:text-red-700 font-bold"
                      title="Supprimer"
                    >
                      ×
                    </button>
                  </div>
                ))}
              </div>
              <p className="text-xs text-gray-500 mt-2">Format: HH:MM (ex: 14:30)</p>
            </div>
          </section>

          {/* Types de rendez-vous */}
          <section className="bg-green-50 p-6 rounded-lg">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold text-gray-800 flex items-center">
                📋 Types de Rendez-vous
              </h3>
              <button
                onClick={() => addNewOption('appointmentTypes', 'type de rendez-vous')}
                className="bg-green-500 text-white px-4 py-2 rounded-lg text-sm hover:bg-green-600"
              >
                + Ajouter un type
              </button>
            </div>
            <div className="space-y-2">
              {adminConfig.appointmentTypes.map((type, index) => (
                <div key={type.value} className="flex items-center gap-3 bg-white p-3 rounded-lg">
                  <input
                    type="text"
                    value={type.label}
                    onChange={(e) => editOption('appointmentTypes', index, e.target.value)}
                    className="flex-1 px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-green-500"
                  />
                  <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
                    {type.value}
                  </span>
                  <button
                    onClick={() => removeOption('appointmentTypes', type.value)}
                    className="text-red-500 hover:text-red-700 px-2"
                    title="Supprimer"
                  >
                    🗑️
                  </button>
                </div>
              ))}
            </div>
          </section>

          {/* Types de propriétés */}
          <section className="bg-purple-50 p-6 rounded-lg">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold text-gray-800 flex items-center">
                🏠 Types de Propriétés
              </h3>
              <button
                onClick={() => addNewOption('propertyTypes', 'type de propriété')}
                className="bg-purple-500 text-white px-4 py-2 rounded-lg text-sm hover:bg-purple-600"
              >
                + Ajouter un type
              </button>
            </div>
            <div className="space-y-2">
              {adminConfig.propertyTypes.map((type, index) => (
                <div key={type.value} className="flex items-center gap-3 bg-white p-3 rounded-lg">
                  <input
                    type="text"
                    value={type.label}
                    onChange={(e) => editOption('propertyTypes', index, e.target.value)}
                    className="flex-1 px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-purple-500"
                  />
                  <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
                    {type.value}
                  </span>
                  <button
                    onClick={() => removeOption('propertyTypes', type.value)}
                    className="text-red-500 hover:text-red-700 px-2"
                    title="Supprimer"
                  >
                    🗑️
                  </button>
                </div>
              ))}
            </div>
          </section>

          {/* Tranches de budget */}
          <section className="bg-yellow-50 p-6 rounded-lg">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold text-gray-800 flex items-center">
                💰 Tranches de Budget
              </h3>
              <button
                onClick={() => addNewOption('budgetRanges', 'tranche de budget')}
                className="bg-yellow-500 text-white px-4 py-2 rounded-lg text-sm hover:bg-yellow-600"
              >
                + Ajouter une tranche
              </button>
            </div>
            <div className="space-y-2">
              {adminConfig.budgetRanges.map((budget, index) => (
                <div key={budget.value} className="flex items-center gap-3 bg-white p-3 rounded-lg">
                  <input
                    type="text"
                    value={budget.label}
                    onChange={(e) => editOption('budgetRanges', index, e.target.value)}
                    className="flex-1 px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-yellow-500"
                  />
                  <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
                    {budget.value}
                  </span>
                  <button
                    onClick={() => removeOption('budgetRanges', budget.value)}
                    className="text-red-500 hover:text-red-700 px-2"
                    title="Supprimer"
                  >
                    🗑️
                  </button>
                </div>
              ))}
            </div>
          </section>

          {/* Échéanciers */}
          <section className="bg-indigo-50 p-6 rounded-lg">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold text-gray-800 flex items-center">
                ⏰ Échéanciers
              </h3>
              <button
                onClick={() => addNewOption('timeframes', 'échéancier')}
                className="bg-indigo-500 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-600"
              >
                + Ajouter un échéancier
              </button>
            </div>
            <div className="space-y-2">
              {adminConfig.timeframes.map((timeframe, index) => (
                <div key={timeframe.value} className="flex items-center gap-3 bg-white p-3 rounded-lg">
                  <input
                    type="text"
                    value={timeframe.label}
                    onChange={(e) => editOption('timeframes', index, e.target.value)}
                    className="flex-1 px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500"
                  />
                  <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
                    {timeframe.value}
                  </span>
                  <button
                    onClick={() => removeOption('timeframes', timeframe.value)}
                    className="text-red-500 hover:text-red-700 px-2"
                    title="Supprimer"
                  >
                    🗑️
                  </button>
                </div>
              ))}
            </div>
          </section>

          {/* Champs requis */}
          <section className="bg-red-50 p-6 rounded-lg">
            <h3 className="text-xl font-bold mb-4 text-gray-800 flex items-center">
              ✅ Champs Obligatoires
            </h3>
            <div className="grid md:grid-cols-2 gap-3">
              {Object.keys(adminConfig.requiredFields).map(field => (
                <label key={field} className="flex items-center bg-white p-3 rounded-lg">
                  <input
                    type="checkbox"
                    checked={adminConfig.requiredFields[field]}
                    onChange={(e) => handleAdminConfigChange('requiredFields', field, e.target.checked)}
                    className="mr-3"
                  />
                  <span className="font-medium">
                    {field === 'name' && '👤 Nom'}
                    {field === 'email' && '📧 Email'}
                    {field === 'phone' && '📱 Téléphone'}
                    {field === 'appointmentType' && '📋 Type de rendez-vous'}
                    {field === 'propertyType' && '🏠 Type de propriété'}
                    {field === 'budget' && '💰 Budget'}
                    {field === 'timeframe' && '⏰ Échéancier'}
                    {field === 'message' && '💬 Message'}
                  </span>
                </label>
              ))}
            </div>
          </section>

          {/* Messages personnalisés */}
          <section className="bg-gray-50 p-6 rounded-lg">
            <h3 className="text-xl font-bold mb-4 text-gray-800 flex items-center">
              💬 Messages Personnalisés
            </h3>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Message de confirmation
                </label>
                <textarea
                  value={adminConfig.confirmationMessage}
                  onChange={(e) => handleSimpleConfigChange('confirmationMessage', e.target.value)}
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  rows={2}
                  placeholder="Message affiché après confirmation de la réservation"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Message de suivi
                </label>
                <textarea
                  value={adminConfig.followUpMessage}
                  onChange={(e) => handleSimpleConfigChange('followUpMessage', e.target.value)}
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                  rows={2}
                  placeholder="Information sur le contact avant le rendez-vous"
                />
              </div>
            </div>
          </section>
        </div>

        {/* Footer avec boutons */}
        <div className="bg-gray-100 px-6 py-4 rounded-b-lg border-t">
          <div className="flex justify-between items-center">
            <p className="text-sm text-gray-600">
              💡 Les modifications sont appliquées en temps réel
            </p>
            <div className="flex space-x-3">
              <button
                onClick={() => setShowAdmin(false)}
                className="px-6 py-2 text-gray-600 hover:text-gray-800 font-medium"
              >
                Fermer
              </button>
              <button
                onClick={() => {
                  alert('Configuration sauvegardée avec succès ! 🎉');
                  setShowAdmin(false);
                }}
                className="bg-green-500 text-white px-8 py-2 rounded-lg hover:bg-green-600 font-semibold transition-colors"
              >
                ✅ Sauvegarder
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  // Si le panneau admin est ouvert
  if (showAdmin) {
    return <AdminPanel />;
  }

  // Étape 1: Sélection de date
  if (currentStep === 1) {
    return (
      <div className="max-w-4xl mx-auto p-6">
        {/* Bouton Admin */}
        <div className="fixed top-4 right-4 z-40">
          <button
            onClick={() => setShowAdmin(true)}
            className="bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg hover:bg-gray-700 text-sm font-medium"
          >
            🔧 Admin
          </button>
        </div>

        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <div 
            className="text-white p-6"
            style={{ 
              background: `linear-gradient(to right, ${adminConfig.primaryColor}, ${adminConfig.secondaryColor})` 
            }}
          >
            <h1 className="text-3xl font-bold mb-2">{adminConfig.companyName}</h1>
            <p className="text-blue-100">{adminConfig.description}</p>
          </div>

          <div className="p-6">
            <StepIndicator />
            
            <div className="text-center mb-6">
              <h2 className="text-2xl font-bold text-gray-800 mb-2">Choisissez une date</h2>
              <p className="text-gray-600">Sélectionnez le jour qui vous convient le mieux</p>
            </div>

            <div className="max-w-md mx-auto">
              {/* Navigation du calendrier */}
              <div className="flex items-center justify-between mb-4">
                <button
                  onClick={previousMonth}
                  className="p-2 hover:bg-gray-100 rounded-lg"
                >
                  <ChevronLeft className="w-5 h-5" />
                </button>
                <h3 className="text-lg font-semibold">
                  {currentMonth.toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' })}
                </h3>
                <button
                  onClick={nextMonth}
                  className="p-2 hover:bg-gray-100 rounded-lg"
                >
                  <ChevronRight className="w-5 h-5" />
                </button>
              </div>

              {/* En-têtes des jours */}
              <div className="grid grid-cols-7 gap-1 mb-2">
                {['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'].map(day => (
                  <div key={day} className="h-8 flex items-center justify-center text-sm font-medium text-gray-500">
                    {day}
                  </div>
                ))}
              </div>

              {/* Grille du calendrier */}
              <div className="grid grid-cols-7 gap-1">
                {renderCalendar()}
              </div>

              <div className="mt-4 flex items-center text-sm text-gray-500">
                <div className="flex items-center mr-4">
                  <div className="w-3 h-3 bg-blue-500 rounded mr-2"></div>
                  Disponible
                </div>
                <div className="flex items-center">
                  <div className="w-3 h-3 bg-gray-300 rounded mr-2"></div>
                  Indisponible
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Étape 2: Sélection d'heure
  if (currentStep === 2) {
    return (
      <div className="max-w-4xl mx-auto p-6">
        {/* Bouton Admin */}
        <div className="fixed top-4 right-4 z-40">
          <button
            onClick={() => setShowAdmin(true)}
            className="bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg hover:bg-gray-700 text-sm font-medium"
          >
            🔧 Admin
          </button>
        </div>

        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <div 
            className="text-white p-6"
            style={{ 
              background: `linear-gradient(to right, ${adminConfig.primaryColor}, ${adminConfig.secondaryColor})` 
            }}
          >
            <h1 className="text-3xl font-bold mb-2">{adminConfig.companyName}</h1>
            <p className="text-blue-100">{adminConfig.description}</p>
          </div>

          <div className="p-6">
            <StepIndicator />
            
            <div className="text-center mb-6">
              <h2 className="text-2xl font-bold text-gray-800 mb-2">Choisissez un horaire</h2>
              <p className="text-gray-600 mb-4">
                {formatDate(selectedDate)}
              </p>
            </div>

            <div className="max-w-2xl mx-auto">
              <div className="grid grid-cols-3 md:grid-cols-4 gap-3">
                {timeSlots.map((time) => (
                  <button
                    key={time}
                    onClick={() => handleTimeSelect(time)}
                    disabled={isSlotBooked(selectedDate, time)}
                    className={`p-3 rounded-lg border transition-colors text-center ${
                      isSlotBooked(selectedDate, time)
                        ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
                        : 'bg-gray-50 hover:bg-blue-50 border-gray-200 hover:border-blue-300'
                    }`}
                  >
                    {time}
                  </button>
                ))}
              </div>

              <div className="flex justify-center mt-8">
                <button
                  onClick={goBack}
                  className="flex items-center px-6 py-2 text-gray-600 hover:text-gray-800"
                >
                  <ChevronLeft className="w-4 h-4 mr-2" />
                  Retour
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Étape 3: Formulaire
  if (currentStep === 3) {
    return (
      <div className="max-w-4xl mx-auto p-6">
        {/* Bouton Admin */}
        <div className="fixed top-4 right-4 z-40">
          <button
            onClick={() => setShowAdmin(true)}
            className="bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg hover:bg-gray-700 text-sm font-medium"
          >
            🔧 Admin
          </button>
        </div>

        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <div 
            className="text-white p-6"
            style={{ 
              background: `linear-gradient(to right, ${adminConfig.primaryColor}, ${adminConfig.secondaryColor})` 
            }}
          >
            <h1 className="text-3xl font-bold mb-2">{adminConfig.companyName}</h1>
            <p className="text-blue-100">{adminConfig.description}</p>
          </div>

          <div className="p-6">
            <StepIndicator />
            
            <div className="text-center mb-6">
              <h2 className="text-2xl font-bold text-gray-800 mb-2">Vos informations</h2>
              <p className="text-gray-600">
                {formatDate(selectedDate)} à {selectedTime}
              </p>
            </div>

            <div className="max-w-2xl mx-auto">
              <div className="space-y-6">
                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Nom complet {adminConfig.requiredFields.name && '*'}
                    </label>
                    <div className="relative">
                      <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                      <input
                        type="text"
                        name="name"
                        value={bookingForm.name}
                        onChange={handleFormChange}
                        className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
                          touched.name && errors.name 
                            ? 'border-red-500 bg-red-50' 
                            : touched.name && !errors.name 
                            ? 'border-green-500 bg-green-50'
                            : 'border-gray-300'
                        }`}
                        placeholder="Votre nom"
                        required={adminConfig.requiredFields.name}
                      />
                      {touched.name && !errors.name && (
                        <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
                          <CheckCircle className="w-5 h-5 text-green-500" />
                        </div>
                      )}
                    </div>
                    {touched.name && errors.name && (
                      <p className="mt-1 text-sm text-red-600 flex items-center">
                        <span className="w-4 h-4 mr-1">⚠️</span>
                        {errors.name}
                      </p>
                    )}
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Email {adminConfig.requiredFields.email && '*'}
                    </label>
                    <div className="relative">
                      <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                      <input
                        type="email"
                        name="email"
                        value={bookingForm.email}
                        onChange={handleFormChange}
                        className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
                          touched.email && errors.email 
                            ? 'border-red-500 bg-red-50' 
                            : touched.email && !errors.email 
                            ? 'border-green-500 bg-green-50'
                            : 'border-gray-300'
                        }`}
                        placeholder="votre@email.com"
                        required={adminConfig.requiredFields.email}
                      />
                      {touched.email && !errors.email && (
                        <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
                          <CheckCircle className="w-5 h-5 text-green-500" />
                        </div>
                      )}
                    </div>
                    {touched.email && errors.email && (
                      <p className="mt-1 text-sm text-red-600 flex items-center">
                        <span className="w-4 h-4 mr-1">⚠️</span>
                        {errors.email}
                      </p>
                    )}
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Téléphone {adminConfig.requiredFields.phone && '*'}
                  </label>
                  <div className="relative">
                    <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                    <input
                      type="tel"
                      name="phone"
                      value={bookingForm.phone}
                      onChange={handleFormChange}
                      className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
                        touched.phone && errors.phone 
                          ? 'border-red-500 bg-red-50' 
                          : touched.phone && !errors.phone 
                          ? 'border-green-500 bg-green-50'
                          : 'border-gray-300'
                      }`}
                      placeholder="123-123-1234"
                      required={adminConfig.requiredFields.phone}
                    />
                    {touched.phone && !errors.phone && (
                      <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
                        <CheckCircle className="w-5 h-5 text-green-500" />
                      </div>
                    )}
                  </div>
                  {touched.phone && errors.phone && (
                    <p className="mt-1 text-sm text-red-600 flex items-center">
                      <span className="w-4 h-4 mr-1">⚠️</span>
                      {errors.phone}
                    </p>
                  )}
                </div>

                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Type de rendez-vous {adminConfig.requiredFields.appointmentType && '*'}
                    </label>
                    <select
                      name="appointmentType"
                      value={bookingForm.appointmentType}
                      onChange={handleFormChange}
                      className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
                        touched.appointmentType && errors.appointmentType 
                          ? 'border-red-500 bg-red-50' 
                          : touched.appointmentType && !errors.appointmentType 
                          ? 'border-green-500 bg-green-50'
                          : 'border-gray-300'
                      }`}
                      required={adminConfig.requiredFields.appointmentType}
                    >
                      <option value="">Sélectionnez...</option>
                      {adminConfig.appointmentTypes.map(type => (
                        <option key={type.value} value={type.value}>{type.label}</option>
                      ))}
                    </select>
                    {touched.appointmentType && errors.appointmentType && (
                      <p className="mt-1 text-sm text-red-600 flex items-center">
                        <span className="w-4 h-4 mr-1">⚠️</span>
                        {errors.appointmentType}
                      </p>
                    )}
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Type de propriété {adminConfig.requiredFields.propertyType && '*'}
                    </label>
                    <select
                      name="propertyType"
                      value={bookingForm.propertyType}
                      onChange={handleFormChange}
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      required={adminConfig.requiredFields.propertyType}
                    >
                      <option value="">Sélectionnez...</option>
                      {adminConfig.propertyTypes.map(type => (
                        <option key={type.value} value={type.value}>{type.label}</option>
                      ))}
                    </select>
                  </div>
                </div>

                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Budget approximatif {adminConfig.requiredFields.budget && '*'}
                    </label>
                    <select
                      name="budget"
                      value={bookingForm.budget}
                      onChange={handleFormChange}
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      required={adminConfig.requiredFields.budget}
                    >
                      <option value="">Sélectionnez...</option>
                      {adminConfig.budgetRanges.map(budget => (
                        <option key={budget.value} value={budget.value}>{budget.label}</option>
                      ))}
                    </select>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Échéancier souhaité {adminConfig.requiredFields.timeframe && '*'}
                    </label>
                    <select
                      name="timeframe"
                      value={bookingForm.timeframe}
                      onChange={handleFormChange}
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      required={adminConfig.requiredFields.timeframe}
                    >
                      <option value="">Sélectionnez...</option>
                      {adminConfig.timeframes.map(timeframe => (
                        <option key={timeframe.value} value={timeframe.value}>{timeframe.label}</option>
                      ))}
                    </select>
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Message ou questions spécifiques {adminConfig.requiredFields.message && '*'}
                  </label>
                  <textarea
                    name="message"
                    value={bookingForm.message}
                    onChange={handleFormChange}
                    rows={3}
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="Décrivez votre projet, vos besoins spécifiques, ou toute question que vous aimeriez aborder..."
                    required={adminConfig.requiredFields.message}
                  />
                </div>
              </div>

              <div className="flex justify-between mt-8">
                <button
                  onClick={goBack}
                  className="flex items-center px-6 py-2 text-gray-600 hover:text-gray-800"
                >
                  <ChevronLeft className="w-4 h-4 mr-2" />
                  Retour
                </button>

                <button
                  onClick={handleBooking}
                  className="text-white py-3 px-8 rounded-lg hover:opacity-90 transition-all transform hover:scale-105 font-semibold"
                  style={{ 
                    background: `linear-gradient(to right, ${adminConfig.primaryColor}, ${adminConfig.secondaryColor})` 
                  }}
                >
                  Confirmer la consultation
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Étape 4: Confirmation
  return (
    <div className="max-w-4xl mx-auto p-6">
      {/* Bouton Admin */}
      <div className="fixed top-4 right-4 z-40">
        <button
          onClick={() => setShowAdmin(true)}
          className="bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg hover:bg-gray-700 text-sm font-medium"
        >
          🔧 Admin
        </button>
      </div>

      <div className="bg-white rounded-lg shadow-lg overflow-hidden">
        <div 
          className="text-white p-6"
          style={{ 
            background: `linear-gradient(to right, ${adminConfig.primaryColor}, ${adminConfig.secondaryColor})` 
          }}
        >
          <h1 className="text-3xl font-bold mb-2">{adminConfig.companyName}</h1>
          <p className="text-blue-100">{adminConfig.description}</p>
        </div>

        <div className="p-6">
          <StepIndicator />
          
          <div className="text-center max-w-md mx-auto">
            <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
            <h2 className="text-2xl font-bold text-gray-800 mb-4">Consultation confirmée !</h2>
            
            <div className="bg-gray-50 p-6 rounded-lg mb-6">
              <p className="text-gray-700 mb-2">
                <strong>Date :</strong> {formatDate(selectedDate)}
              </p>
              <p className="text-gray-700 mb-2">
                <strong>Heure :</strong> {selectedTime}
              </p>
              <p className="text-gray-700 mb-2">
                <strong>Client :</strong> {bookingForm.name}
              </p>
              <p className="text-gray-700">
                <strong>Type :</strong> {bookingForm.appointmentType}
              </p>
            </div>
            
            <p className="text-gray-600 mb-4">
              {adminConfig.confirmationMessage}
            </p>
            
            <p className="text-sm text-gray-500 mb-6">
              {adminConfig.followUpMessage}
            </p>
            
            <button
              onClick={resetBooking}
              className="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition-colors font-semibold"
            >
              Nouvelle consultation
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CalendlyClone;