import { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
import { Building2, Users, Calendar, Phone, Menu, X, MessageCircle, MapPin, Mail, Clock, Brain, Target, Heart, Award, Shield, MessageSquare, Moon } from 'lucide-react';
import Home from './pages/Home';
import Team from './pages/Team';
import RamadanOffers from './pages/RamadanOffers';
import Appointment from './pages/Appointment';
import Contact from './pages/Contact';
import SummerProgram from './pages/SummerProgram';
import FloatingContactBar from './components/FloatingContactBar';
import BackToTop from './components/BackToTop';
import ProgressBar from './components/ProgressBar';
import ImageWithFallback from './components/ImageWithFallback';

function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const handleCall = () => {
    window.location.href = 'tel:0537312399';
  };

  return (
    <Router>
      <ScrollToTop />
      <div id="top" dir="rtl" className="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-slate-50">
        <ProgressBar />

        <header className="custom-header border-b border-gray-700 sticky top-0 z-40 backdrop-blur-sm">
          <div className="container mx-auto px-4 py-3">
            <div className="flex items-center justify-between">
              <Link to="/" className="flex items-center space-x-3 space-x-reverse hover:opacity-80 transition-opacity">
                <ImageWithFallback
                  src="/اللوجو-04.png"
                  alt="شعار عيادات صالح العجلان"
                  className="h-16 md:h-20 object-contain"
                  loading="eager"
                />
                <div>
                  <h1 className="text-lg md:text-xl font-bold text-white">عيادات صالح العجلان</h1>
                  <p className="text-sm text-amber-300 font-semibold">للنطق والتخاطب</p>
                </div>
              </Link>

              <button
                className="md:hidden p-2 rounded-lg hover:bg-white/20 transition-colors text-white"
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                aria-label="قائمة التنقل"
              >
                {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
              </button>

              <nav className="hidden md:flex items-center space-x-5 space-x-reverse">
                <NavLink to="/" icon={<Building2 className="w-4 h-4" />}>الرئيسية</NavLink>
                <NavLink to="/team" icon={<Users className="w-4 h-4" />}>الفريق</NavLink>
                <NavLink to="/ramadan-offers" icon={<Moon className="w-4 h-4" />}>عروض رمضان</NavLink>
                <NavLink to="/appointment" icon={<Calendar className="w-4 h-4" />}>حجز موعد</NavLink>
                <NavLink to="/contact" icon={<Phone className="w-4 h-4" />}>اتصل بنا</NavLink>
              </nav>
            </div>

            <div className={`md:hidden transition-all duration-300 overflow-hidden ${
              isMenuOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
            }`}>
              <nav className="mt-4 space-y-2 pb-4">
                <MobileNavLink to="/" icon={<Building2 className="w-4 h-4" />} onClick={() => setIsMenuOpen(false)}>الرئيسية</MobileNavLink>
                <MobileNavLink to="/team" icon={<Users className="w-4 h-4" />} onClick={() => setIsMenuOpen(false)}>الفريق</MobileNavLink>
                <MobileNavLink to="/ramadan-offers" icon={<Moon className="w-4 h-4" />} onClick={() => setIsMenuOpen(false)}>عروض رمضان</MobileNavLink>
                <MobileNavLink to="/appointment" icon={<Calendar className="w-4 h-4" />} onClick={() => setIsMenuOpen(false)}>حجز موعد</MobileNavLink>
                <MobileNavLink to="/contact" icon={<Phone className="w-4 h-4" />} onClick={() => setIsMenuOpen(false)}>اتصل بنا</MobileNavLink>
              </nav>
            </div>
          </div>
        </header>

        <main className="container mx-auto px-4 py-8">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/team" element={<Team />} />
            <Route path="/ramadan-offers" element={<RamadanOffers />} />
            <Route path="/summer-program" element={<SummerProgram />} />
            <Route path="/appointment" element={<Appointment />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </main>

        <FloatingContactBar />
        <BackToTop />

        <footer className="custom-footer mt-24">
          <div className="relative overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-br from-[#0c3b5e] via-[#0a2f4a] to-[#061f33]"></div>
            <div className="absolute top-0 left-0 w-96 h-96 bg-amber-400/10 rounded-full -translate-x-48 -translate-y-48 blur-3xl"></div>
            <div className="absolute bottom-0 right-0 w-96 h-96 bg-cyan-400/10 rounded-full translate-x-48 translate-y-48 blur-3xl"></div>

            <div className="relative z-10 container mx-auto px-4 py-16">
              <div className="grid grid-cols-1 lg:grid-cols-4 gap-12 mb-12">
                <div className="lg:col-span-2 space-y-6">
                  <div className="flex items-center gap-4">
                    <div className="relative">
                      <ImageWithFallback
                        src="/اللوجو-02.png"
                        alt="شعار عيادات صالح العجلان"
                        className="h-20 w-20 object-contain relative z-10"
                        loading="lazy"
                      />
                    </div>
                    <div>
                      <h2 className="text-3xl font-black text-white mb-1 tracking-tight">عيادات صالح العجلان</h2>
                      <p className="text-amber-300 text-xl font-bold">للنطق والتخاطب</p>
                    </div>
                  </div>

                  <p className="text-gray-100 leading-relaxed text-lg">
                    نقدم خدمات متخصصة في علاج اضطرابات النطق والتخاطب وتعديل السلوك باستخدام احدث الطرق العلمية والتقنيات العلاجية المتطورة.
                  </p>

                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div className="bg-gradient-to-br from-cyan-500/20 to-blue-500/20 backdrop-blur-sm rounded-xl p-4 text-center border border-cyan-400/30">
                      <div className="text-3xl font-black text-cyan-300 mb-1">5</div>
                      <div className="text-white text-sm font-bold">اخصائيين</div>
                    </div>
                    <div className="bg-gradient-to-br from-emerald-500/20 to-teal-500/20 backdrop-blur-sm rounded-xl p-4 text-center border border-emerald-400/30">
                      <div className="text-3xl font-black text-emerald-300 mb-1">5+</div>
                      <div className="text-white text-sm font-bold">سنوات خبرة</div>
                    </div>
                    <div className="bg-gradient-to-br from-amber-500/20 to-orange-500/20 backdrop-blur-sm rounded-xl p-4 text-center border border-amber-400/30">
                      <div className="text-3xl font-black text-amber-300 mb-1">500+</div>
                      <div className="text-white text-sm font-bold">حالة علاج</div>
                    </div>
                    <div className="bg-gradient-to-br from-rose-500/20 to-pink-500/20 backdrop-blur-sm rounded-xl p-4 text-center border border-rose-400/30">
                      <div className="text-3xl font-black text-rose-300 mb-1">95%</div>
                      <div className="text-white text-sm font-bold">نسبة نجاح</div>
                    </div>
                  </div>

                  <div className="flex flex-wrap gap-3">
                    <button
                      onClick={() => {
                        const message = "السلام عليكم، ارغب في التواصل مع عيادات صالح العجلان للنطق والتخاطب";
                        window.open(`https://wa.me/966537312399?text=${encodeURIComponent(message)}`, '_blank');
                      }}
                      className="flex items-center gap-2 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white px-6 py-3 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg font-bold"
                    >
                      <MessageCircle className="w-5 h-5" />
                      <span>واتساب</span>
                    </button>
                    <button
                      onClick={handleCall}
                      className="flex items-center gap-2 bg-gradient-to-r from-blue-500 to-cyan-600 hover:from-blue-600 hover:to-cyan-700 text-white px-6 py-3 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg font-bold"
                    >
                      <Phone className="w-5 h-5" />
                      <span>اتصال</span>
                    </button>
                    <Link
                      to="/appointment"
                      className="flex items-center gap-2 bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-white px-6 py-3 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg font-bold"
                    >
                      <Calendar className="w-5 h-5" />
                      <span>حجز موعد</span>
                    </Link>
                  </div>
                </div>

                <div className="space-y-6">
                  <h3 className="text-2xl font-black text-white flex items-center gap-3 mb-6">
                    <div className="p-2 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-lg">
                      <Building2 className="w-6 h-6 text-white" />
                    </div>
                    روابط سريعة
                  </h3>
                  <nav className="space-y-2">
                    <Link to="/" className="flex items-center gap-3 text-gray-200 hover:text-white hover:bg-white/15 p-3 rounded-xl transition-all duration-200 group border border-transparent hover:border-white/20">
                      <Building2 className="w-5 h-5 text-cyan-400" />
                      <span className="font-bold">الرئيسية</span>
                    </Link>
                    <Link to="/team" className="flex items-center gap-3 text-gray-200 hover:text-white hover:bg-white/15 p-3 rounded-xl transition-all duration-200 group border border-transparent hover:border-white/20">
                      <Users className="w-5 h-5 text-emerald-400" />
                      <span className="font-bold">فريقنا المتخصص</span>
                    </Link>
                    <Link to="/ramadan-offers" className="flex items-center gap-3 text-gray-200 hover:text-white hover:bg-white/15 p-3 rounded-xl transition-all duration-200 group border border-transparent hover:border-white/20">
                      <Moon className="w-5 h-5 text-amber-400" />
                      <span className="font-bold">عروض رمضان</span>
                    </Link>
                    <Link to="/appointment" className="flex items-center gap-3 text-gray-200 hover:text-white hover:bg-white/15 p-3 rounded-xl transition-all duration-200 group border border-transparent hover:border-white/20">
                      <Calendar className="w-5 h-5 text-orange-400" />
                      <span className="font-bold">حجز موعد</span>
                    </Link>
                    <Link to="/contact" className="flex items-center gap-3 text-gray-200 hover:text-white hover:bg-white/15 p-3 rounded-xl transition-all duration-200 group border border-transparent hover:border-white/20">
                      <Phone className="w-5 h-5 text-rose-400" />
                      <span className="font-bold">اتصل بنا</span>
                    </Link>
                  </nav>
                </div>

                <div className="space-y-6">
                  <h3 className="text-2xl font-black text-white flex items-center gap-3 mb-6">
                    <div className="p-2 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-lg">
                      <Phone className="w-6 h-6 text-white" />
                    </div>
                    معلومات التواصل
                  </h3>
                  <div className="space-y-4">
                    <div className="flex items-start gap-3 bg-white/10 backdrop-blur-sm p-4 rounded-xl border border-white/20">
                      <div className="p-2 bg-cyan-500/20 rounded-lg">
                        <Phone className="w-5 h-5 text-cyan-300 flex-shrink-0" />
                      </div>
                      <div>
                        <p className="text-cyan-300 font-bold text-sm mb-1">رقم الهاتف</p>
                        <button onClick={handleCall} className="text-xl font-black text-white hover:text-cyan-200 transition duration-200 block">
                          0537312399
                        </button>
                      </div>
                    </div>

                    <div className="flex items-start gap-3 bg-white/10 backdrop-blur-sm p-4 rounded-xl border border-white/20">
                      <div className="p-2 bg-emerald-500/20 rounded-lg">
                        <Mail className="w-5 h-5 text-emerald-300 flex-shrink-0" />
                      </div>
                      <div>
                        <p className="text-emerald-300 font-bold text-sm mb-1">البريد الالكتروني</p>
                        <p className="text-white break-all text-sm">salah.clinc.for.rehabilitation@gmail.com</p>
                      </div>
                    </div>

                    <div className="flex items-start gap-3 bg-white/10 backdrop-blur-sm p-4 rounded-xl border border-white/20">
                      <div className="p-2 bg-rose-500/20 rounded-lg">
                        <MapPin className="w-5 h-5 text-rose-300 flex-shrink-0" />
                      </div>
                      <div>
                        <p className="text-rose-300 font-bold text-sm mb-1">العنوان</p>
                        <p className="text-white text-sm">شارع سعيد ابن زيد</p>
                        <p className="text-gray-300 text-sm">الرياض، المملكة العربية السعودية</p>
                      </div>
                    </div>

                    <div className="flex items-start gap-3 bg-white/10 backdrop-blur-sm p-4 rounded-xl border border-white/20">
                      <div className="p-2 bg-amber-500/20 rounded-lg">
                        <Clock className="w-5 h-5 text-amber-300 flex-shrink-0" />
                      </div>
                      <div>
                        <p className="text-amber-300 font-bold text-sm mb-1">ساعات العمل (رمضان)</p>
                        <p className="text-white text-sm font-bold">الاحد، الثلاثاء، الاربعاء: 9ص - 3م</p>
                        <p className="text-white text-sm font-bold">الاثنين، الخميس: 8ص - 2م</p>
                        <p className="text-rose-300 font-bold text-sm mt-1">الجمعة والسبت: مغلق</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="border-t border-white/20 pt-12 mb-12">
                <div className="text-center mb-10">
                  <h3 className="text-3xl font-black text-white mb-3">خدماتنا المتخصصة</h3>
                  <p className="text-gray-200 text-lg">نقدم مجموعة شاملة من الخدمات العلاجية المتخصصة</p>
                </div>

                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                  <div className="bg-gradient-to-br from-cyan-500/10 to-blue-500/10 backdrop-blur-sm rounded-xl p-6 text-center border border-cyan-400/30 hover:scale-105 transition-all duration-300 group">
                    <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
                      <Brain className="w-8 h-8 text-white" />
                    </div>
                    <h4 className="font-black text-white mb-1 text-sm">علاج النطق</h4>
                    <p className="text-gray-300 text-xs">علاج شامل للاضطرابات</p>
                  </div>
                  <div className="bg-gradient-to-br from-emerald-500/10 to-teal-500/10 backdrop-blur-sm rounded-xl p-6 text-center border border-emerald-400/30 hover:scale-105 transition-all duration-300 group">
                    <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
                      <Target className="w-8 h-8 text-white" />
                    </div>
                    <h4 className="font-black text-white mb-1 text-sm">تعديل السلوك</h4>
                    <p className="text-gray-300 text-xs">برامج سلوكية متطورة</p>
                  </div>
                  <div className="bg-gradient-to-br from-sky-500/10 to-cyan-500/10 backdrop-blur-sm rounded-xl p-6 text-center border border-sky-400/30 hover:scale-105 transition-all duration-300 group">
                    <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-br from-sky-500 to-cyan-600 flex items-center justify-center">
                      <MessageSquare className="w-8 h-8 text-white" />
                    </div>
                    <h4 className="font-black text-white mb-1 text-sm">الاستشارات</h4>
                    <p className="text-gray-300 text-xs">مع الاخصائي صالح</p>
                  </div>
                  <div className="bg-gradient-to-br from-amber-500/10 to-orange-500/10 backdrop-blur-sm rounded-xl p-6 text-center border border-amber-400/30 hover:scale-105 transition-all duration-300 group">
                    <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center">
                      <Users className="w-8 h-8 text-white" />
                    </div>
                    <h4 className="font-black text-white mb-1 text-sm">البرامج الجماعية</h4>
                    <p className="text-gray-300 text-xs">للاطفال والمراهقين</p>
                  </div>
                  <div className="bg-gradient-to-br from-yellow-500/10 to-amber-500/10 backdrop-blur-sm rounded-xl p-6 text-center border border-yellow-400/30 hover:scale-105 transition-all duration-300 group">
                    <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-br from-yellow-500 to-amber-600 flex items-center justify-center">
                      <Award className="w-8 h-8 text-white" />
                    </div>
                    <h4 className="font-black text-white mb-1 text-sm">التقييم والتشخيص</h4>
                    <p className="text-gray-300 text-xs">فحوصات دقيقة</p>
                  </div>
                  <div className="bg-gradient-to-br from-rose-500/10 to-pink-500/10 backdrop-blur-sm rounded-xl p-6 text-center border border-rose-400/30 hover:scale-105 transition-all duration-300 group">
                    <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-br from-rose-500 to-pink-600 flex items-center justify-center">
                      <Heart className="w-8 h-8 text-white" />
                    </div>
                    <h4 className="font-black text-white mb-1 text-sm">الارشاد الاسري</h4>
                    <p className="text-gray-300 text-xs">دعم شامل للاسرة</p>
                  </div>
                </div>
              </div>

              <div className="border-t border-white/20 pt-10 mb-10">
                <div className="flex flex-wrap justify-center gap-4">
                  <div className="flex items-center gap-3 bg-gradient-to-r from-emerald-500/20 to-teal-500/20 border-2 border-emerald-400/50 text-white px-6 py-3 rounded-full backdrop-blur-sm">
                    <Shield className="w-6 h-6 text-emerald-300" />
                    <span className="font-black">مرخص رسميا</span>
                  </div>
                  <div className="flex items-center gap-3 bg-gradient-to-r from-cyan-500/20 to-blue-500/20 border-2 border-cyan-400/50 text-white px-6 py-3 rounded-full backdrop-blur-sm">
                    <Award className="w-6 h-6 text-cyan-300" />
                    <span className="font-black">جودة معتمدة</span>
                  </div>
                  <div className="flex items-center gap-3 bg-gradient-to-r from-rose-500/20 to-pink-500/20 border-2 border-rose-400/50 text-white px-6 py-3 rounded-full backdrop-blur-sm">
                    <Heart className="w-6 h-6 text-rose-300" />
                    <span className="font-black">رعاية متميزة</span>
                  </div>
                </div>
              </div>

              <div className="border-t border-white/20 pt-10 space-y-6">
                <div className="text-center space-y-3">
                  <p className="text-white text-xl font-black">2025 عيادات صالح العجلان للنطق والتخاطب</p>
                  <p className="text-gray-300 text-sm">جميع الحقوق محفوظة</p>
                  <div className="inline-block bg-gradient-to-r from-amber-500/20 to-orange-500/20 border border-amber-400/30 px-6 py-3 rounded-full backdrop-blur-sm">
                    <p className="text-amber-300 text-lg font-bold">نؤمن بان التواصل هو اساس الحياة</p>
                  </div>
                </div>

                <div className="flex flex-col md:flex-row items-center justify-between gap-6 bg-white/5 rounded-2xl p-6 backdrop-blur-sm border border-white/10">
                  <div className="text-gray-200 text-sm font-bold flex items-center gap-2">
                    <Heart className="w-5 h-5 text-rose-400" />
                    <span>صمم لخدمة المجتمع</span>
                  </div>
                  <div className="flex items-center gap-4 text-white text-sm font-bold">
                    <span className="flex items-center gap-2">
                      <Shield className="w-5 h-5 text-emerald-400" />
                      مرخص من هيئة التخصصات الصحية
                    </span>
                    <div className="flex items-center gap-2">
                      <div className="w-3 h-3 bg-emerald-500 rounded-full animate-pulse"></div>
                      <span className="text-emerald-300">متاح الان</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </Router>
  );
}

function NavLink({ to, children, icon, className = "" }: {
  to: string;
  children: React.ReactNode;
  icon: React.ReactNode;
  className?: string
}) {
  return (
    <Link to={to} className={`nav-link ${className}`}>
      {icon}
      <span>{children}</span>
    </Link>
  );
}

function MobileNavLink({ to, children, icon, onClick }: {
  to: string;
  children: React.ReactNode;
  icon: React.ReactNode;
  onClick?: () => void;
}) {
  return (
    <Link
      to={to}
      onClick={onClick}
      className="flex items-center space-x-2 space-x-reverse bg-white/10 text-white hover:bg-white/20 hover:text-amber-300 px-4 py-3 rounded-md transition-all duration-200"
    >
      {icon}
      <span>{children}</span>
    </Link>
  );
}

export default App;