@extends('layouts.app')
@section('content')

    <main>
        <section class="hero" id="home">
            <div class="container">
                <div class="main_hero_container">
                    <div class="hero-content">
                        <h1>
                            خطوتك الأولى
                            <span class="orange-text">للتأهيل </span> و<span class="blue-text">الشفاء</span>
                            يبدأ من هنا
                        </h1>

                        <p class="hero-description">
                            تلتزم برايا الطبية بتقديم الرعاية الصحية المتكاملة، بما في ذلك الرعاية الممتدة، وإعادة
                            التأهيل الطبي، والرعاية الصحية المنزلية.
                            <br>
                            خدماتنا الطبية مصممة بعناية لتلبية احتياجات جميع المرضى.
                        </p>



                        <div class="cta-buttons">
                            <button class="btn btn-orange btn-book" data-service-id="0">
                                <span data-service-id="0">احجز موعدك الآن</span>
                                <i class="fas fa-arrow-left"></i>
                            </button>

                            <a href="tel:+966920014962" class="btn btn-blue">
                                <i class="fas fa-phone"></i>
                                <span>تواصل معنا</span>
                            </a>
                        </div>
                    </div>


                    <div class="hero-image">
                        <div class="image-wrapper">
                            <div class="main-image-container">
                                <div class="glow-orange"></div>
                                <div class="image-border">
                                    <div class="image-inner">
                                        <img src="./assets/img/main_top.jpg" alt="أخصائي علاج طبيعي"
                                            class="doctor-image"
                                            onerror="this.src='https://images.unsplash.com/photo-1622253692010-333f2da6031d?w=600&h=600&fit=crop'">
                                    </div>
                                </div>
                            </div>

                            <div class="floating-card card-customers">
                                <div class="card-title">
                                    <i class="fas fa-smile"></i>
                                    <span>عملاء سعداء</span>
                                </div>
                                <div class="avatars-row">
                                    <img src="https://i.pravatar.cc/150?img=33" alt="عميل" class="avatar">
                                    <img src="https://i.pravatar.cc/150?img=12" alt="عميل" class="avatar">
                                    <img src="https://i.pravatar.cc/150?img=25" alt="عميل" class="avatar">
                                    <div class="avatar-more">+90</div>
                                </div>
                            </div>

                            <div class="floating-card card-rating">
                                <div class="rating-icon">
                                    <i class="fas fa-bolt"></i>
                                </div>
                                <div class="rating-text">نتائج سريعة<br>ومضمونة</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="who-we-are-section" id="about">
            <div class="container">
                <div class="main_about">
                    <div class="video-container">
                        <div class="video-wrapper">
                            <div class="image-box">
                                <video id="myVideo" width="100%" autoplay loop playsinline>
                                    <source src="./assets/img/vaidou (1).mp4" type="video/mp4">
                                    متصفحك لا يدعم الفيديو.
                                </video>

                                <div class="video-controls">
                                    <button id="playPauseBtn">
                                        <i class="fa-solid fa-pause"></i>
                                    </button>

                                    <button id="muteBtn">
                                        <i class="fa-solid fa-volume-high"></i>
                                    </button>
                                </div>
                            </div>
                        </div>


                        <div class="info-cards">
                            <div class="info-card">
                                <div class="info-number">5000+</div>
                                <div class="info-label">مريض</div>
                            </div>
                            <div class="info-card">
                                <div class="info-number">30+</div>
                                <div class="info-label">متخصص</div>
                            </div>
                            <div class="info-card">
                                <div class="info-number">98%</div>
                                <div class="info-label">نجاح</div>
                            </div>
                        </div>
                    </div>
                    <div class="values-container_main">
                        <h2 class="section-title">من نحن</h2>
                        <p class="description-text">
                            مستشفيات وعيادات برايا الطبية هي أحد مشاريع واستثمارات تي في إم كابيتال هيلثكير بارتنرز،
                            الصندوق الاستثماري المعروف بخبراته في إنشاء وتشغيل مرافق الرعاية المديدة والتأهيل الطبي في
                            منطقة الخليج العربي.

                        </p>
                        <div class="main_item">
                            <div class="value-item">
                                <div class="value-icon">
                                    <i class="fas fa-shield-alt"></i>
                                </div>
                                <span class="value-text">الثقة</span>
                            </div>

                            <div class="value-item">
                                <div class="value-icon">
                                    <i class="fas fa-heart"></i>
                                </div>
                                <span class="value-text">العناية</span>
                            </div>

                            <div class="value-item">
                                <div class="value-icon">
                                    <i class="fas fa-star"></i>
                                </div>
                                <span class="value-text">التميز</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="services" id="services">
            <div class="container">
                <div class="section-header">
                    <h2>خدماتنا الطبية</h2>
                    <p class="section-subtitle">نقدم مجموعة شاملة من الخدمات الطبية المتخصصة بأعلى معايير الجودة</p>
                </div>

                <div class="services-grid">
                    @forelse ($services as $service)
                    <div class="service-card">
                        <div class="icon-wrapper">
                            <img src="{{ asset('storage/' . $service->image) }}" alt="{{ $service->name_ar }}">
                        </div>
                        <div class="service-content">
                            <h3>{{ $service->name_ar }}</h3>
                            <p>{{ $service->short_description_ar }}</p>
                            <button class="btn-book" data-service-id="{{ $service->id }}">
                                <span data-service-id="{{ $service->id }}">احجز الآن</span>
                                <i class="fas fa-arrow-left"></i>
                            </button>
                        </div>
                    </div>
                    @empty
                    @endforelse

                </div>
            </div>
        </section>

        <section class="main-section" id="why">

            <div class="container">
                <h2 class="section-title_main">لماذا تختار براية</h2>
                <p>نقدم مجموعة شاملة من الخدمات الطبية المتخصصة بأعلى معايير الجودة</p>
                <div class="container">
                    <div class="main_card_container">
                        <div class="card">
                            <img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=600&h=800&fit=crop"
                                alt="العلاج الطبيعي" class="card-image">
                            <div class="card-overlay">
                                <div class="card-icon">
                                    <div class="gear"></div>
                                </div>
                                <h3 class="card-title">العلاج الطبيعي وإعادة التأهيل</h3>
                                <p class="card-description">
                                    نقدم خدمات علاج طبيعي متكاملة تشمل إعادة التأهيل الحركي، علاج الإصابات الرياضية،
                                    والعلاج بالتمارين العلاجية. فريقنا المتخصص يستخدم أحدث التقنيات لضمان تعافيك السريع
                                    واستعادة قدرتك الحركية بشكل كامل.
                                </p>
                                <button class="card-btn btn-book"  data-service-id="0">احجز الآن</button>

                            </div>
                        </div>

                        <div class="card">
                            <img src="./assets/img/docto.jpg" alt="العلاج الطبيعي" class="card-image">
                            <div class="card-overlay">
                                <div class="card-icon">
                                    <div class="gear"></div>
                                </div>
                                <h3 class="card-title">برامج التمارين العلاجية المخصصة</h3>
                                <p class="card-description">
                                    نصمم برامج تمارين علاجية مخصصة لكل حالة تستهدف تقوية العضلات، زيادة المرونة،
                                    وتحسين التوازن والتناسق الحركي. البرامج تتناسب مع جميع الأعمار وتساعد في
                                    الوقاية من الإصابات المستقبلية.
                                </p>
                                <button class="card-btn btn-book"  data-service-id="0">احجز الآن</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


    </main>

@endsection