import React, { useState, useEffect } from 'react';
import { Play, Pause, ChevronRight, Activity, Heart, Award, Phone, Calendar, Clock, MapPin, X, CheckCircle, Loader2, Lock, User, MessageSquare } from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc, getDocs } from 'firebase/firestore';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';

// --- Firebase Configuration ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

const MaysoonAd = () => {
  const [activeVideo, setActiveVideo] = useState(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [user, setUser] = useState(null);

  // Admin State
  const ADMIN_PASSWORD = 'admin123'; // كلمة المرور الخاصة بلوحة الإدارة
  const [showAdmin, setShowAdmin] = useState(false);
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [passwordInput, setPasswordInput] = useState('');
  const [loginError, setLoginError] = useState(false);
  const [appointments, setAppointments] = useState([]);
  const [loadingAdmin, setLoadingAdmin] = useState(false);

  // Form State
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    message: ''
  });
  const [formStatus, setFormStatus] = useState('idle');

  // --- Authentication Setup ---
  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
        await signInWithCustomToken(auth, __initial_auth_token);
      } else {
        await signInAnonymously(auth);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // --- Fetch Appointments (Admin) ---
  const fetchAppointments = async () => {
    if (!user) return;
    setLoadingAdmin(true);
    try {
      const querySnapshot = await getDocs(collection(db, 'artifacts', appId, 'public', 'data', 'appointments'));
      const data = querySnapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      // Sort by date (newest first) in memory
      data.sort((a, b) => b.createdAt?.seconds - a.createdAt?.seconds);
      setAppointments(data);
    } catch (error) {
      console.error("Error fetching appointments:", error);
    } finally {
      setLoadingAdmin(false);
    }
  };

  useEffect(() => {
    // جلب البيانات فقط عند عرض لوحة الإدارة ونجاح المصادقة
    if (showAdmin && isAuthenticated) { 
      fetchAppointments();
    }
  }, [showAdmin, isAuthenticated, user]);

  const handleLogin = (e) => {
    e.preventDefault();
    if (passwordInput === ADMIN_PASSWORD) {
      setIsAuthenticated(true);
      setLoginError(false);
      setPasswordInput('');
    } else {
      setLoginError(true);
      setPasswordInput(''); 
      setTimeout(() => setLoginError(false), 2000); 
    }
  };

  const videos = [
    { id: 1, src: "WhatsApp Video 2025-12-14 at 16.14.47 (1).mp4", title: "تنمية المهارات الحركية", desc: "جلسات متخصصة لتعزيز التوافق العضلي العصبي." },
    { id: 2, src: "WhatsApp Video 2025-12-14 at 17.55.51 (1).mp4", title: "الاستقلالية في الحياة اليومية", desc: "تدريب الأطفال على مهارات العناية الذاتية." },
    { id: 3, src: "WhatsApp Video 2025-12-14 at 17.55.51.mp4", title: "التكامل الحسي", desc: "بيئة مجهزة بأحدث الوسائل العلاجية." },
    { id: 4, src: "WhatsApp Video 2025-12-14 at 16.45.23.mp4", title: "تطوير المهارات الدقيقة", desc: "تمارين لتقوية عضلات اليد والأصابع." },
    { id: 5, src: "WhatsApp Video 2025-12-14 at 16.14.46.mp4", title: "جلسات فردية مكثفة", desc: "خطة علاجية مخصصة لكل حالة." },
    { id: 6, src: "WhatsApp Video 2025-12-14 at 16.14.47.mp4", title: "بيئة تفاعلية آمنة", desc: "نحرص على توفير جو من المرح والتعلم." },
  ];

  const logoSrc = "logo (1).png"; 

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!user) return;

    setFormStatus('submitting');

    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'appointments'), {
        ...formData,
        createdAt: new Date(),
        userId: user.uid
      });

      setFormStatus('success');
      setTimeout(() => {
        setIsModalOpen(false);
        setFormStatus('idle');
        setFormData({ name: '', phone: '', message: '' });
      }, 3000);

    } catch (error) {
      console.error("Error adding document: ", error);
      setFormStatus('error');
    }
  };

  // Helper to format date
  const formatDate = (timestamp) => {
    if (!timestamp) return '';
    return new Date(timestamp.seconds * 1000).toLocaleString('ar-SA');
  };

  // --------------------------------------------------
  // Admin Login Screen (يُعرض عندما showAdmin صحيح و isAuthenticated خاطئ)
  // --------------------------------------------------
  if (showAdmin && !isAuthenticated) {
    return (
      <div className="min-h-screen bg-slate-100 p-6 font-sans text-right" dir="rtl">
        <div className="max-w-md mx-auto mt-20">
          <div className="bg-white rounded-xl shadow-2xl p-8 border-t-4 border-blue-600">
            <div className="text-center mb-6">
              <Lock className="w-10 h-10 text-blue-600 mx-auto mb-3" />
              <h1 className="text-2xl font-bold text-slate-800">تسجيل الدخول للإدارة</h1>
              <p className="text-slate-500 text-sm">أدخل كلمة المرور للوصول إلى بيانات الحجوزات.</p>
            </div>
            <form onSubmit={handleLogin} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">كلمة المرور</label>
                <input
                  type="password"
                  value={passwordInput}
                  onChange={(e) => setPasswordInput(e.target.value)}
                  className={`w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition ${loginError ? 'border-red-500' : 'border-slate-300'}`}
                  placeholder="********"
                  required
                />
                {loginError && (
                  <p className="text-red-500 text-xs mt-1">كلمة المرور غير صحيحة.</p>
                )}
              </div>
              <button 
                type="submit"
                className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-xl transition shadow-md"
              >
                دخول
              </button>
            </form>
            <div className="mt-6 text-center">
              <button 
                onClick={() => {
                  setShowAdmin(false);
                  setLoginError(false);
                  setPasswordInput('');
                }}
                className="text-sm text-slate-500 hover:text-blue-600 transition"
              >
                العودة إلى الموقع
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // --------------------------------------------------
  // Admin Dashboard (يُعرض عندما showAdmin و isAuthenticated صحيحين)
  // --------------------------------------------------
  if (showAdmin && isAuthenticated) {
    return (
      <div className="min-h-screen bg-slate-100 p-6 font-sans text-right" dir="rtl">
        <div className="max-w-4xl mx-auto">
          <div className="flex justify-between items-center mb-8">
            <h1 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
              <Lock className="text-blue-600" />
              لوحة تحكم الحجوزات
            </h1>
            <button 
              onClick={() => {
                setShowAdmin(false);
                setIsAuthenticated(false); // تسجيل الخروج عند العودة
              }}
              className="bg-slate-200 hover:bg-slate-300 text-slate-700 px-4 py-2 rounded-lg transition"
            >
              العودة للموقع
            </button>
          </div>

          <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
              <h2 className="font-semibold text-slate-700">طلبات المواعيد الواردة</h2>
              <button onClick={fetchAppointments} className="text-sm text-blue-600 hover:underline">تحديث القائمة</button>
            </div>
            
            {loadingAdmin ? (
              <div className="p-8 text-center text-slate-500">
                <Loader2 className="animate-spin w-8 h-8 mx-auto mb-2" />
                جاري تحميل البيانات...
              </div>
            ) : appointments.length === 0 ? (
              <div className="p-12 text-center text-slate-400">
                لا توجد طلبات حجز حتى الآن.
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full text-right">
                  <thead className="bg-slate-50 text-slate-500 text-sm">
                    <tr>
                      <th className="p-4 font-medium">الاسم</th>
                      <th className="p-4 font-medium">رقم الهاتف</th>
                      <th className="p-4 font-medium">الملاحظات</th>
                      <th className="p-4 font-medium">وقت الطلب</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {appointments.map((app) => (
                      <tr key={app.id} className="hover:bg-blue-50/50 transition">
                        <td className="p-4">
                          <div className="flex items-center gap-2 font-medium text-slate-800">
                            <User size={16} className="text-blue-400" />
                            {app.name}
                          </div>
                        </td>
                        <td className="p-4 text-slate-600 font-mono text-sm" dir="ltr">{app.phone}</td>
                        <td className="p-4 text-slate-600">
                          {app.message ? (
                            <div className="flex items-start gap-2">
                              <MessageSquare size={16} className="text-slate-400 mt-1 shrink-0" />
                              <span className="text-sm">{app.message}</span>
                            </div>
                          ) : <span className="text-slate-400 italic text-sm">لا توجد ملاحظات</span>}
                        </td>
                        <td className="p-4 text-slate-500 text-sm">{formatDate(app.createdAt)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

  // --------------------------------------------------
  // Main Website View (يُعرض بشكل افتراضي)
  // --------------------------------------------------
  return (
    <div className="min-h-screen bg-slate-50 font-sans text-right" dir="rtl">
      
      {/* Navbar */}
      <nav className="bg-white shadow-md sticky top-0 z-40">
        <div className="container mx-auto px-4 py-3 flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center overflow-hidden border-2 border-blue-500">
               <img src={logoSrc} alt="شعار مجمع ميسون" className="w-full h-full object-cover" onError={(e) => e.target.style.display='none'} />
               <Activity className="w-6 h-6 text-blue-600 absolute opacity-0" onError={(e) => e.target.style.opacity=1} /> 
            </div>
            <div>
              <h1 className="text-xl font-bold text-slate-800">مجمع ميسون الطبي</h1>
              <p className="text-xs text-blue-600 font-semibold">قسم العلاج الوظيفي</p>
            </div>
          </div>
          <button 
            onClick={() => setIsModalOpen(true)}
            className="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-full text-sm font-bold transition shadow-lg flex items-center gap-2"
          >
            <Calendar size={16} />
            احجز موعدك
          </button>
        </div>
      </nav>

      {/* Hero Section */}
      <header className="relative bg-gradient-to-br from-blue-900 via-blue-800 to-slate-900 text-white py-20 overflow-hidden">
        <div className="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/medical-icons.png')]"></div>
        <div className="container mx-auto px-4 flex flex-col md:flex-row items-center relative z-10">
          <div className="md:w-1/2 mb-10 md:mb-0">
            <div className="inline-block bg-blue-500/20 px-4 py-1 rounded-full text-blue-200 text-sm mb-4 border border-blue-400/30">
              أفضل رعاية صحية لأحبائكم
            </div>
            <h2 className="text-4xl md:text-6xl font-extrabold mb-6 leading-tight">
              نحن نبني <span className="text-blue-400">القدرات</span> <br/> لنصنع <span className="text-green-400">المستقبل</span>
            </h2>
            <p className="text-lg text-blue-100 mb-8 leading-relaxed max-w-lg">
              في مجمع ميسون الطبي، نستخدم أحدث تقنيات العلاج الوظيفي لمساعدة الأطفال والكبار على استعادة استقلاليتهم وممارسة حياتهم بكل ثقة.
            </p>
            <div className="flex flex-wrap gap-4">
              <button 
                onClick={() => setIsModalOpen(true)}
                className="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-xl font-bold transition shadow-lg transform hover:-translate-y-1"
              >
                تواصل معنا الآن
              </button>
              <button className="bg-white/10 hover:bg-white/20 text-white px-8 py-3 rounded-xl font-bold transition backdrop-blur-sm border border-white/30">
                تعرف على خدماتنا
              </button>
            </div>
          </div>
          
          <div className="md:w-1/2 md:pr-10">
            <div className="relative rounded-2xl overflow-hidden shadow-2xl border-4 border-white/20 transform rotate-2 hover:rotate-0 transition duration-500 bg-slate-800 aspect-video">
              <video 
                className="w-full h-full object-cover opacity-80 hover:opacity-100 transition"
                autoPlay 
                muted 
                loop 
                playsInline
                src={videos[3].src} 
              >
                المتصفح لا يدعم الفيديو.
              </video>
              <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                <div className="bg-white/20 backdrop-blur-md p-4 rounded-full">
                  <Play className="w-8 h-8 text-white fill-current" />
                </div>
              </div>
              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
                <p className="font-bold text-lg">جلسات تأهيلية متقدمة</p>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Services Strip */}
      <section className="bg-white py-12 -mt-8 relative z-20 container mx-auto px-4 rounded-2xl shadow-xl">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
          <div className="p-4 group cursor-pointer">
            <div className="w-16 h-16 mx-auto bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-blue-600 group-hover:text-white transition duration-300">
              <Award size={32} />
            </div>
            <h3 className="text-xl font-bold mb-2 text-slate-800">كادر متخصص</h3>
            <p className="text-slate-600 text-sm">فريق من المعالجين ذوي الخبرة العالية في التعامل مع مختلف الحالات.</p>
          </div>
          <div className="p-4 group cursor-pointer">
            <div className="w-16 h-16 mx-auto bg-green-50 text-green-600 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-green-600 group-hover:text-white transition duration-300">
              <Activity size={32} />
            </div>
            <h3 className="text-xl font-bold mb-2 text-slate-800">برامج فردية</h3>
            <p className="text-slate-600 text-sm">خطط علاجية مصممة خصيصاً لتناسب احتياجات كل مراجع بدقة.</p>
          </div>
          <div className="p-4 group cursor-pointer">
            <div className="w-16 h-16 mx-auto bg-purple-50 text-purple-600 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-purple-600 group-hover:text-white transition duration-300">
              <Heart size={32} />
            </div>
            <h3 className="text-xl font-bold mb-2 text-slate-800">بيئة داعمة</h3>
            <p className="text-slate-600 text-sm">تجهيزات حديثة وأجواء محفزة تضمن راحة المراجع وتقدمه.</p>
          </div>
        </div>
      </section>

      {/* Video Gallery */}
      <section className="py-20 container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-slate-800 mb-4">قصص نجاح ولحظات علاجية</h2>
          <div className="h-1 w-24 bg-blue-500 mx-auto rounded-full"></div>
          <p className="text-slate-600 mt-4 max-w-2xl mx-auto">
            جولة مرئية داخل عياداتنا توثق جانباً من الجلسات العلاجية والتمارين التي نقدمها لتطوير المهارات.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {videos.map((video, index) => (
            <div key={video.id} className="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300 group border border-slate-100">
              <div className="relative aspect-[9/16] bg-slate-900 group-hover:scale-[1.02] transition-transform duration-500">
                <video 
                  id={`video-${index}`}
                  src={video.src}
                  className="w-full h-full object-cover opacity-90 group-hover:opacity-100"
                  controls
                  playsInline
                >
                  <source src={video.src} type="video/mp4" />
                   عذراً، المتصفح لا يدعم هذا الفيديو.
                </video>
                <div className="absolute top-4 right-4 bg-blue-600 text-white text-xs px-3 py-1 rounded-full shadow-md">
                  جلسة علاجية
                </div>
              </div>
              <div className="p-6">
                <h3 className="font-bold text-lg text-slate-800 mb-2">{video.title}</h3>
                <p className="text-slate-500 text-sm leading-relaxed">{video.desc}</p>
                <button 
                  onClick={() => setIsModalOpen(true)}
                  className="mt-4 text-blue-600 font-semibold text-sm flex items-center gap-1 hover:gap-2 transition-all"
                >
                  احجز لهذه الجلسة <ChevronRight size={16} />
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Call to Action */}
      <section className="bg-blue-900 text-white py-16 relative overflow-hidden">
        <div className="absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 bg-blue-800 rounded-full opacity-50 blur-3xl"></div>
        <div className="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-green-600 rounded-full opacity-30 blur-3xl"></div>
        
        <div className="container mx-auto px-4 relative z-10 text-center">
          <h2 className="text-3xl md:text-5xl font-bold mb-6">جاهزون لبدء الرحلة معاً؟</h2>
          <p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
            احجز استشارتك اليوم في مجمع ميسون الطبي، ودعنا نساعدك أو نساعد طفلك في الوصول إلى أقصى إمكاناته.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
             <button 
                onClick={() => setIsModalOpen(true)}
                className="bg-white text-blue-900 px-8 py-4 rounded-xl font-bold hover:bg-blue-50 transition shadow-lg flex items-center justify-center gap-2"
             >
               <Phone size={20} />
               اتصل بنا الآن
             </button>
             <button className="bg-green-500 text-white px-8 py-4 rounded-xl font-bold hover:bg-green-600 transition shadow-lg flex items-center justify-center gap-2">
               <MapPin size={20} />
               موقعنا على الخريطة
             </button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 text-slate-300 py-12 border-t border-slate-800">
        <div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h4 className="text-white font-bold text-lg mb-4 flex items-center gap-2">
              <Activity className="text-blue-500" /> مجمع ميسون الطبي
            </h4>
            <p className="text-sm leading-relaxed text-slate-400">
              رؤيتنا هي تقديم خدمات علاج وظيفي متميزة تساهم في تحسين جودة حياة الأفراد وتمكينهم في مجتمعاتهم.
            </p>
          </div>
          
          <div>
            <h4 className="text-white font-bold mb-4">روابط سريعة</h4>
            <ul className="space-y-2 text-sm">
              <li><a href="#" className="hover:text-blue-400 transition">الرئيسية</a></li>
              <li><a href="#" className="hover:text-blue-400 transition">عن القسم</a></li>
              <li><a href="#" className="hover:text-blue-400 transition">خدماتنا</a></li>
              <li><a href="#" className="hover:text-blue-400 transition">الفريق الطبي</a></li>
            </ul>
          </div>

          <div>
            <h4 className="text-white font-bold mb-4">ساعات العمل</h4>
            <ul className="space-y-2 text-sm">
              <li className="flex items-center gap-2"><Clock size={16} className="text-blue-500"/> السبت - الخميس: 9:00 ص - 9:00 م</li>
              <li className="flex items-center gap-2"><Clock size={16} className="text-blue-500"/> الجمعة: مغلق</li>
            </ul>
          </div>

          <div>
            <h4 className="text-white font-bold mb-4">تواصل معنا</h4>
            <ul className="space-y-2 text-sm">
              <li className="flex items-center gap-2"><Phone size={16} className="text-green-500"/> +966 50 000 0000</li>
              <li className="flex items-center gap-2"><MapPin size={16} className="text-green-500"/> الرياض، المملكة العربية السعودية</li>
            </ul>
          </div>
        </div>
        <div className="container mx-auto px-4 mt-8 pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center text-xs text-slate-500">
          <p>© {new Date().getFullYear()} مجمع ميسون الطبي. جميع الحقوق محفوظة.</p>
          <button 
            onClick={() => {
              setShowAdmin(true);
              setIsAuthenticated(false); // التأكد من إعادة طلب كلمة المرور
              setLoginError(false);
              setPasswordInput('');
            }} 
            className="mt-4 md:mt-0 flex items-center gap-1 hover:text-slate-300 transition"
          >
            <Lock size={12} />
            لوحة الإدارة
          </button>
        </div>
      </footer>

      {/* Booking Modal */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-300">
            <div className="bg-blue-600 p-6 flex justify-between items-center text-white">
              <h3 className="text-xl font-bold flex items-center gap-2">
                <Calendar className="w-6 h-6" />
                حجز موعد استشارة
              </h3>
              <button onClick={() => setIsModalOpen(false)} className="hover:bg-blue-700 p-2 rounded-full transition">
                <X size={20} />
              </button>
            </div>
            
            <div className="p-6">
              {formStatus === 'success' ? (
                <div className="text-center py-8">
                  <div className="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <CheckCircle size={32} />
                  </div>
                  <h4 className="text-xl font-bold text-slate-800 mb-2">تم استلام طلبك بنجاح!</h4>
                  <p className="text-slate-500">شكراً لتواصلك معنا. سيقوم فريقنا بالاتصال بك قريباً لتأكيد الموعد.</p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">الاسم الكامل</label>
                    <input 
                      type="text" 
                      name="name"
                      required
                      value={formData.name}
                      onChange={handleInputChange}
                      className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
                      placeholder="أدخل اسمك هنا"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">رقم الهاتف</label>
                    <input 
                      type="tel" 
                      name="phone"
                      required
                      value={formData.phone}
                      onChange={handleInputChange}
                      className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
                      placeholder="05xxxxxxxx"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">ملاحظات إضافية (اختياري)</label>
                    <textarea 
                      name="message"
                      value={formData.message}
                      onChange={handleInputChange}
                      rows="3"
                      className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition resize-none"
                      placeholder="نوع الحالة، العمر، أو أي تفاصيل أخرى..."
                    ></textarea>
                  </div>

                  <button 
                    type="submit" 
                    disabled={formStatus === 'submitting'}
                    className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-xl shadow-lg transition flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed"
                  >
                    {formStatus === 'submitting' ? (
                      <>
                        <Loader2 className="animate-spin" size={20} />
                        جاري الإرسال...
                      </>
                    ) : (
                      'تأكيد طلب الحجز'
                    )}
                  </button>
                  {formStatus === 'error' && (
                    <p className="text-red-500 text-sm text-center mt-2">حدث خطأ أثناء الإرسال. يرجى المحاولة مرة أخرى.</p>
                  )}
                </form>
              )}
            </div>
            
            <div className="bg-slate-50 p-4 text-center text-xs text-slate-500 border-t border-slate-100">
              نحترم خصوصيتك. بياناتك آمنة ولن يتم مشاركتها.
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default MaysoonAd;