@extends('front.layouts.app')

@section('title', 'منصة MedExchange | منصة متكاملة للخدمات الطبية في مصر')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/hero.css') }}">
    <link rel="stylesheet" href="{{ asset('css/services.css') }}">
    <link rel="stylesheet" href="{{ asset('css/features.css') }}">
    <link rel="stylesheet" href="{{ asset('css/how-it-works.css') }}">
    <link rel="stylesheet" href="{{ asset('css/pricing.css') }}">
    <link rel="stylesheet" href="{{ asset('css/contact.css') }}">
@endsection

@section('content')
    <!-- HERO SECTION + Stats -->
    <section class="hero" id="home">
        <div class="hero-slider">
            @forelse($heroes as $index => $hero)
            <div class="hero-slide {{ $index == 0 ? 'active' : '' }}">
                <div class="hero-image">
                    <img src="{{ asset('img/hero-' . (($index % 3) + 1) . '.jpg') }}" 
                         alt="{{ $hero->title }}" 
                         width="1920" height="1080"
                         @if($index == 0) fetchpriority="high" @else loading="lazy" @endif>
                    <div class="hero-overlay"></div>
                </div>
                <div class="container">
                    <div class="hero-content">
                        <div class="hero-badge">
                            <i class="fas fa-star"></i>
                            <span>{{ $hero->feature ?? 'الأفضل في مصر' }}</span>
                        </div>
                        <h1 class="hero-title">{{ $hero->title }}</h1>
                        <p class="hero-description">{{ $hero->description }}</p>
                        <div class="hero-buttons">
                            @if($hero->btn1_text)
                            <a href="{{ $hero->btn1_url ?? '#' }}" class="btn btn-primary">
                                <i class="fas fa-rocket"></i>
                                {{ $hero->btn1_text }}
                            </a>
                            @endif
                            @if($hero->btn2_text)
                            <a href="{{ $hero->btn2_url ?? '#services' }}" class="btn btn-secondary">
                                <i class="fas fa-info-circle"></i>
                                {{ $hero->btn2_text }}
                            </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="hero-slide active">
                <div class="hero-image">
                    <img src="{{ asset('img/hero-1.jpg') }}" alt="Default Hero" width="1920" height="1080" fetchpriority="high">
                    <div class="hero-overlay"></div>
                </div>
                <div class="container">
                    <div class="hero-content">
                        <div class="hero-badge">
                            <i class="fas fa-star"></i>
                            <span>الأفضل في مصر</span>
                        </div>
                        <h1 class="hero-title">منصة MedExchange المتكاملة</h1>
                        <p class="hero-description">اكتشف خدماتنا المتخصصة في الاستشارات الطبية، الملفات الدوائية، وفرص العمل في القطاع الطبي</p>
                        <div class="hero-buttons">
                            <a href="#" class="btn btn-primary"><i class="fas fa-rocket"></i> ابدأ الآن</a>
                            <a href="#services" class="btn btn-secondary"><i class="fas fa-info-circle"></i> اعرف المزيد</a>
                        </div>
                    </div>
                </div>
            </div>
            @endforelse
        </div>

        <div class="hero-controls">
            <button class="hero-control prev" aria-label="السابق"><i class="fas fa-chevron-right"></i></button>
            <button class="hero-control next" aria-label="التالي"><i class="fas fa-chevron-left"></i></button>
        </div>

        <div class="hero-indicators">
            @foreach($heroes as $index => $hero)
                <button class="indicator {{ $index == 0 ? 'active' : '' }}" data-slide="{{ $index }}" aria-label="شريحة {{ $index + 1 }}"></button>
            @endforeach
            @if($heroes->isEmpty())
                <button class="indicator active" data-slide="0" aria-label="شريحة 1"></button>
            @endif
        </div>

        <div class="hero-stats">
            <div class="container">
                <div class="stats-grid">
                    @foreach($statistics as $stat)
                    <div class="stat-item">
                        <div class="stat-icon"><i class="{{ $stat->icon }}"></i></div>
                        <div class="stat-content">
                            <div class="stat-number" data-count="{{ preg_replace('/\D/', '', $stat->count) }}">{{ $stat->count }}</div>
                            <div class="stat-label">{{ $stat->title }}</div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <!-- SOLUTIONS SECTION -->
    <section class="services" id="services">
        <div class="container">
            <div class="section-header">
                <span class="section-badge"><i class="fas fa-star"></i> حلولنا</span>
                <h2 class="section-title">حلول مبتكرة للقطاع الطبي</h2>
                <p class="section-description">نقدم مجموعة من الخدمات المتخصصة التي تلبي احتياجات الكوادر الطبية والمؤسسات الصحية</p>
            </div>

            <div class="services-grid">
                @foreach($solutions as $solution)
                <div class="service-card {{ $solution->is_featured ? 'featured' : '' }}">
                    @if($solution->is_featured)
                        <div class="featured-badge"><i class="fas fa-crown"></i> الأكثر شهرة</div>
                    @endif
                    
                    <div class="card-top">
                        <div class="card-badge">{{ $solution->is_business_plan ? 'أعمال' : 'أفراد' }}</div>
                        <div class="card-main-icon">
                            <i class="{{ $solution->main_icon }}"></i>
                        </div>
                    </div>

                    <div class="card-content">
                        <h3 class="card-title">{{ $solution->title }}</h3>
                        <p class="card-subtitle">{{ $solution->feature_tag }}</p>
                        
                        <div class="features-list">
                            @php 
                                $subFeatures = is_array($solution->sub_features) ? $solution->sub_features : json_decode($solution->sub_features, true); 
                            @endphp
                            @if($subFeatures)
                                @foreach($subFeatures as $sf)
                                <div class="feature-item">
                                    <div class="feature-icon-sm">
                                        <i class="{{ $sf['icon'] ?? 'fas fa-star' }}"></i>
                                    </div>
                                    <div class="feature-text">
                                        <h4>{{ $sf['title'] ?? '' }}</h4>
                                        <p>{{ $sf['description'] ?? '' }}</p>
                                    </div>
                                </div>
                                @endforeach
                            @endif
                        </div>
                    </div>

                    <div class="card-footer">
                        <div class="price-box">
                            <span class="price-value">{{ number_format($solution->price, 2) }}</span>
                            <span class="price-period">/ {{ $solution->duration }}</span>
                        </div>
                        <a href="{{ $solution->contact_link }}" class="btn-card">
                            <span>تواصل معنا</span>
                            <i class="fas fa-arrow-left"></i>
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    @if($cta)
    <!-- Call to Action -->
    <section class="services-cta-wrapper" style="padding-bottom: 80px;">
        <div class="container">
            <div class="services-cta">
                <div class="cta-content">
                    <h3>{{ $cta->title }}</h3>
                    <p>{{ $cta->description }}</p>
                </div>
                <div class="cta-buttons">
                    <a href="{{ $cta->btn_link }}" class="btn-cta primary">
                        <i class="fas fa-rocket"></i>
                        {{ $cta->btn_text }}
                    </a>
                    <a href="#how-it-works" class="btn-cta secondary">
                        <i class="fas fa-question-circle"></i>
                        كيف يعمل النظام
                    </a>
                </div>
            </div>
        </div>
    </section>
    @endif

    @if($whies->isNotEmpty())
    <!-- Why Choose Us Section -->
    <section class="features" id="features">
        <div class="container">
            <div class="section-header">
                <span class="section-badge"><i class="fas fa-sparkles"></i> المميزات</span>
                <h2 class="section-title">لماذا نحن الخيار الأفضل؟</h2>
                <p class="section-description">نقدم لك مجموعة من المميزات التي تجعلنا الخيار الأول في مجال استبدال المنتجات الطبية</p>
            </div>

            <div class="features-grid">
                @php $colors = ['blue', 'green', 'orange', 'purple', 'red', 'teal', 'yellow', 'pink', 'indigo', 'cyan', 'lime', 'brown']; @endphp
                @foreach($whies as $index => $why)
                <div class="feature-box">
                    <div class="feature-icon-wrapper">
                        <div class="feature-icon {{ $colors[$index % count($colors)] }}">
                            <i class="{{ $why->icon }}"></i>
                        </div>
                    </div>
                    <h3 class="feature-title">{{ $why->title }}</h3>
                    <p class="feature-description">{{ $why->description }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif
    @if($cta2)
    <!-- How It Works CTA -->
    <section class="how-it-works" style="padding: 0 0 80px 0; background: none;">
        <div class="container">
            <div class="how-it-works-cta">
                <div class="cta-icon">
                    <i class="fas fa-rocket"></i>
                </div>
                <h3>{{ $cta2->title }}</h3>
                <p>{{ $cta2->description }}</p>
                <a href="{{ $cta2->btn_link }}" class="btn-main-cta">
                    {{ $cta2->btn_text }}
                </a>
            </div>
        </div>
    </section>
    @endif

    @if($steps->isNotEmpty())
    <!-- HOW IT WORKS SECTION -->
    <section class="how-it-works" id="how-it-works">
        <div class="container">
            <div class="section-header">
                <span class="section-badge"><i class="fas fa-lightbulb"></i> كيف يعمل</span>
                <h2 class="section-title">البدء معنا سهل وبسيط</h2>
                <p class="section-description">أربع خطوات بسيطة فقط تفصلك عن الاستفادة من جميع خدماتنا</p>
            </div>

            <div class="steps-wrapper">
                @foreach($steps as $index => $step)
                <div class="step-item">
                    <div class="step-number">
                        <span>{{ str_pad($step->step_number, 2, '0', STR_PAD_LEFT) }}</span>
                    </div>
                    <div class="step-content">
                        <div class="step-icon">
                            <i class="{{ $step->icon }}"></i>
                        </div>
                        <h3 class="step-title">{{ $step->title }}</h3>
                        <p class="step-description">{{ $step->description }}</p>
                        
                        @php 
                            $stepFeatures = is_array($step->features) ? $step->features : json_decode($step->features, true); 
                        @endphp
                        @if($stepFeatures)
                        <ul class="step-features">
                            @foreach($stepFeatures as $feature)
                            <li><i class="fas fa-check"></i> {{ $feature }}</li>
                            @endforeach
                        </ul>
                        @endif
                    </div>
                    @if(!$loop->last)
                    <div class="step-line"></div>
                    @endif
                </div>
                @endforeach
            </div>

            @if($video)
            <!-- Video Section -->
            <div class="video-section">
                <div class="video-content">
                    <div class="video-text">
                        <h3>{{ $video->title }}</h3>
                        <p>{{ $video->description }}</p>
                        <a href="{{ $video->video_link }}" class="btn-watch-video">
                            <i class="fab fa-youtube"></i>
                            شاهد على يوتيوب
                        </a>
                    </div>
                    <div class="video-thumbnail">
                        @php
                            $videoId = '';
                            if(preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/', $video->video_link, $match)) {
                                $videoId = $match[1];
                            }
                        @endphp
                        @if($videoId)
                        <div class="video-responsive-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
                            <iframe 
                                src="https://www.youtube.com/embed/{{ $videoId }}" 
                                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" 
                                allowfullscreen
                                loading="lazy"
                                title="فيديو تعريفي للمنصة">
                            </iframe>
                        </div>
                        @else
                        <div class="video-placeholder">
                            <i class="fas fa-play"></i>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endif
        </div>
    </section>
    @endif

    @if($contact)
    <!-- CONTACT SECTION -->
    <section class="contact" id="contact">
        <div class="container">
            <!-- Section Header -->
            <div class="section-header">
                <span class="section-badge"><i class="fas fa-envelope"></i> تواصل معنا</span>
                <h2 class="section-title">نحن هنا لمساعدتك</h2>
                <p class="section-description">لا تتردد في التواصل معنا في أي وقت، فريقنا جاهز للرد على استفساراتك</p>
            </div>

            <div class="contact-content">
                <!-- Contact Info -->
                <div class="contact-info">
                    <div class="info-header">
                        <h3>معلومات التواصل</h3>
                        <p>تواصل معنا عبر أي من الطرق التالية</p>
                    </div>

                    <div class="info-items">
                        <!-- Phone -->
                        <div class="info-item">
                            <div class="info-icon"><i class="fas fa-phone-alt"></i></div>
                            <div class="info-content">
                                <h4>الهاتف</h4>
                                @if($contact->phone1) <a href="tel:{{ $contact->phone1 }}">{{ $contact->phone1 }}</a> @endif
                                @if($contact->phone2) <a href="tel:{{ $contact->phone2 }}">{{ $contact->phone2 }}</a> @endif
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="info-item">
                            <div class="info-icon"><i class="fas fa-envelope"></i></div>
                            <div class="info-content">
                                <h4>البريد الإلكتروني</h4>
                                @if($contact->email1) <a href="mailto:{{ $contact->email1 }}">{{ $contact->email1 }}</a> @endif
                                @if($contact->email2) <a href="mailto:{{ $contact->email2 }}">{{ $contact->email2 }}</a> @endif
                            </div>
                        </div>

                        @if($contact->whatsapp)
                        <!-- WhatsApp -->
                        <div class="info-item">
                            <div class="info-icon whatsapp"><i class="fab fa-whatsapp"></i></div>
                            <div class="info-content">
                                <h4>واتساب</h4>
                                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $contact->whatsapp) }}">{{ $contact->whatsapp }}</a>
                                <p class="info-note">متاح 24/7 للرد السريع</p>
                            </div>
                        </div>
                        @endif

                        @if($contact->address)
                        <!-- Address -->
                        <div class="info-item">
                            <div class="info-icon"><i class="fas fa-map-marker-alt"></i></div>
                            <div class="info-content">
                                <h4>العنوان</h4>
                                <p>{{ $contact->address }}</p>
                            </div>
                        </div>
                        @endif
                    </div>

                    <!-- Social Media -->
                    <div class="social-media">
                        <h4>تابعنا على</h4>
                        <div class="social-links">
                            @if($contact->facebook)<a href="{{ $contact->facebook }}" class="social-link facebook" target="_top" aria-label="فيسبوك"><i class="fab fa-facebook-f"></i></a>@endif
                            @if($contact->twitter)<a href="{{ $contact->twitter }}" class="social-link twitter" target="_top" aria-label="تويتر"><i class="fab fa-twitter"></i></a>@endif
                            @if($contact->instagram)<a href="{{ $contact->instagram }}" class="social-link instagram" target="_top" aria-label="انستجرام"><i class="fab fa-instagram"></i></a>@endif
                            @if($contact->linkedin)<a href="{{ $contact->linkedin }}" class="social-link linkedin" target="_top" aria-label="لينكد إن"><i class="fab fa-linkedin-in"></i></a>@endif
                            @if($contact->youtube)<a href="{{ $contact->youtube }}" class="social-link youtube" target="_top" aria-label="يوتيوب"><i class="fab fa-youtube"></i></a>@endif
                        </div>
                    </div>
                </div>

                <!-- Contact Form -->
                <div class="contact-form-wrapper">
                    <div class="form-header">
                        <h3>أرسل لنا رسالة</h3>
                        <p>املأ النموذج وسنتواصل معك في أقرب وقت</p>
                    </div>

                    <form action="#" method="POST" class="contact-form" id="contactForm">
                        @csrf
                        <div class="form-group">
                            <label for="name"><i class="fas fa-user"></i> الاسم الكامل</label>
                            <input type="text" id="name" name="name" placeholder="أدخل اسمك الكامل" required>
                        </div>
                        <div class="form-group">
                            <label for="email"><i class="fas fa-envelope"></i> البريد الإلكتروني</label>
                            <input type="email" id="email" name="email" placeholder="example@domain.com" required>
                        </div>
                        <div class="form-group">
                            <label for="phone"><i class="fas fa-phone"></i> رقم الهاتف</label>
                            <input type="tel" id="phone" name="phone" placeholder="+20 123 456 7890" required>
                        </div>
                        <div class="form-group">
                            <label for="message"><i class="fas fa-comment-dots"></i> الرسالة</label>
                            <textarea id="message" name="message" rows="5" placeholder="كيف يمكننا مساعدتك؟" required></textarea>
                        </div>
                        <button type="submit" class="btn-submit">
                            <span>إرسال الرسالة</span>
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>

            @if($map)
            <!-- Map Section -->
            <div class="map-section" style="margin-top: 60px;">
                <div class="map-header" style="text-align: center; margin-bottom: 30px;">
                    <h3>{{ $map->title ?? 'موقعنا على الخريطة' }}</h3>
                    <p>زرنا في مقرنا الرئيسي</p>
                </div>
                <div class="map-wrapper" style="border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid var(--border-color);">
                    <iframe
                        src="{{ $map->embed_url }}"
                        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
            </div>
            @endif
        </div>
    </section>
    @endif

    @if($cta3)
    <!-- Bottom CTA SECTION -->
    <section class="pricing" style="padding: 0 0 80px 0; background: none;">
        <div class="container">
            <div class="pricing-cta">
                <div class="cta-content">
                    <h3>{{ $cta3->title }}</h3>
                    <p>{{ $cta3->description }}</p>
                </div>
                <div class="cta-buttons">
                    <a href="{{ $cta3->btn1_link }}" class="btn-cta primary">
                        <i class="fas fa-rocket"></i>
                        {{ $cta3->btn1_text }}
                    </a>
                    <a href="{{ $cta3->btn2_link }}" class="btn-cta secondary">
                        <i class="fas fa-phone"></i>
                        {{ $cta3->btn2_text }}
                    </a>
                </div>
            </div>
        </div>
    </section>
    @endif
@endsection

@section('scripts')
    <script src="{{ asset('js/hero.js') }}" defer></script>
    <script src="{{ asset('js/services.js') }}" defer></script>
    <script src="{{ asset('js/how-it-works.js') }}" defer></script>
    <script src="{{ asset('js/pricing.js') }}" defer></script>
    <script src="{{ asset('js/contact.js') }}" defer></script>
@endsection