@extends('layouts.store', ['title' => 'RaseedNow | شحن ألعاب وبطاقات رقمية'])

@section('content')
    @php
        $isEnglish = app()->getLocale() === 'en';
        $productImages = collect(range(108, 143))->map(fn ($number) => 'product-'.$number.'.webp')->values();
        $featuredGames = $services->take(10)->values();
        $fallbackServices = $featuredGames->isNotEmpty() ? $featuredGames : collect();
        $offerService = $services->first();
        $heroImage = asset('assets/images/home/hero-games.png');
        $heroMobileImage = asset('assets/images/home/hero-mobile-reference.png');
        $offersImage = asset('assets/images/home/offers-banner.png');
        $appImage = asset('assets/images/home/mobile-app-banner.png');
        $features = $isEnglish
            ? [
                ['title' => 'Instant top-up', 'text' => 'Your order is delivered in seconds.', 'icon' => 'bolt'],
                ['title' => 'Fair prices', 'text' => 'Competitive prices every day.', 'icon' => 'tag'],
                ['title' => 'High security', 'text' => 'Protected payments and clear orders.', 'icon' => 'shield'],
                ['title' => '24/7 support', 'text' => 'We are here whenever you need us.', 'icon' => 'headset'],
            ]
            : [
                ['title' => 'شحن فوري', 'text' => 'طلبك يوصل في ثواني.', 'icon' => 'bolt'],
                ['title' => 'أسعار منافسة', 'text' => 'أفضل الأسعار كل يوم.', 'icon' => 'tag'],
                ['title' => 'أمان عالي', 'text' => 'مدفوعات محمية وطلبات واضحة.', 'icon' => 'shield'],
                ['title' => 'دعم فوري', 'text' => 'معاك وقت ما تحتاج.', 'icon' => 'headset'],
            ];
        $steps = $isEnglish
            ? [
                ['title' => 'Choose the game', 'text' => 'Pick the game you want to top up.', 'icon' => 'gamepad'],
                ['title' => 'Enter details', 'text' => 'Add the player ID and package.', 'icon' => 'form'],
                ['title' => 'Select payment', 'text' => 'Complete the payment safely.', 'icon' => 'card'],
            ]
            : [
                ['title' => 'اختر اللعبة', 'text' => 'اختار اللعبة اللي تريد شحنها.', 'icon' => 'gamepad'],
                ['title' => 'أدخل البيانات', 'text' => 'أدخل معرف اللاعب والباقة.', 'icon' => 'form'],
                ['title' => 'اختر طريقة الدفع', 'text' => 'أكمل عملية الدفع بأمان.', 'icon' => 'card'],
            ];
        $testimonials = $isEnglish
            ? [
                ['name' => 'Ahmed Ali', 'text' => 'Smooth experience, fast top-up and clear order tracking.'],
                ['name' => 'Sara Khaled', 'text' => 'Reliable prices and support that actually answers quickly.'],
                ['name' => 'Mohamed Ahmed', 'text' => 'The order arrived instantly. Everything felt professional.'],
            ]
            : [
                ['name' => 'أحمد علي', 'text' => 'تعاملت معهم أكثر من مرة وكل مرة الخدمة أفضل من السابقة.'],
                ['name' => 'سارة خالد', 'text' => 'أسعار ممتازة وخدمة موثوقة، أنصح الجميع بالتعامل معهم.'],
                ['name' => 'محمد أحمد', 'text' => 'أسرع موقع شحن جربته، الشحن وصل في ثواني والدعم رائع.'],
            ];
        $iconPath = [
            'bolt' => 'M13 2 4 14h7l-1 8 10-13h-7l1-7Z',
            'tag' => 'M4 5v6.5L12.5 20 20 12.5 11.5 4H5a1 1 0 0 0-1 1Zm4 3h.01',
            'shield' => 'M12 3 20 6v6c0 5-3.4 8-8 9-4.6-1-8-4-8-9V6l8-3Z',
            'headset' => 'M4 13v-1a8 8 0 0 1 16 0v1M6 17h2v-6H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2Zm10 0h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2v6Zm0 0v1a2 2 0 0 1-2 2h-2',
            'gamepad' => 'M7 9h10l3 7a3 3 0 0 1-5 3l-1.4-1.4h-3.2L9 19a3 3 0 0 1-5-3l3-7Z',
            'form' => 'M7 3h10v4H7V3Zm-2 4h14v14H5V7Zm4 5h6m-6 4h4',
            'card' => 'M3 6h18v12H3V6Zm0 4h18M7 15h4',
        ];
@endphp

    <style>
        @media (max-width: 900px) {
            .gx-hero {
                width: 100% !important;
                max-width: none !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                margin-inline: 0 !important;
                overflow: hidden !important;
            }

            .gx-hero > .gx-container,
            .gx-hero .gx-hero-grid {
                width: 100% !important;
                max-width: none !important;
                min-height: 484px !important;
                overflow: hidden !important;
            }

            .gx-hero .gx-hero-actions {
                width: 156px !important;
                max-width: 156px !important;
                gap: 7px !important;
            }

            .gx-hero .gx-hero-actions .gx-primary-btn,
            .gx-hero .gx-hero-actions .gx-secondary-btn {
                min-height: 38px !important;
                height: 38px !important;
                padding-inline: 14px !important;
                border-radius: 12px !important;
                font-size: 11.5px !important;
            }

            .gx-hero .gx-hero-art {
                inset: 0 auto auto -7% !important;
                top: 0 !important;
                left: -7% !important;
                right: auto !important;
                width: 114% !important;
                inline-size: 114% !important;
                inset-inline-start: -7% !important;
                inset-inline-end: auto !important;
            }

            .gx-hero .gx-hero-trust {
                position: absolute !important;
                left: 50% !important;
                right: auto !important;
                bottom: 14px !important;
                transform: translateX(-50%) !important;
                z-index: 6 !important;
                width: min(calc(100% - 32px), 348px) !important;
                min-height: 72px !important;
                margin: 0 !important;
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                align-items: center !important;
                gap: 0 !important;
                border-radius: 18px !important;
                background: rgba(255,255,255,.98) !important;
                border: 1px solid #edf2fb !important;
                box-shadow: 0 14px 34px rgba(28,88,170,.12) !important;
            }

            .gx-hero .gx-hero-trust span {
                min-height: 58px !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 6px !important;
                text-align: center !important;
                font-size: 10.5px !important;
                line-height: 1.35 !important;
                color: #14213d !important;
            }

            .gx-game-slider .kr-service-card,
            .gx-game-slider .kr-service-card__image {
                background: transparent !important;
                box-shadow: none !important;
                border: 0 !important;
            }

            .gx-game-slider .kr-service-card__image img {
                background: transparent !important;
                box-shadow: 0 10px 22px rgba(15, 54, 126, .10) !important;
            }

            .gx-steps .gx-steps-btn {
                display: inline-flex !important;
                width: fit-content !important;
                min-width: 166px !important;
                margin: 28px auto 0 !important;
                justify-self: center !important;
            }
        }

        .gx-steps .gx-steps-btn {
            display: inline-flex !important;
            width: fit-content !important;
            min-width: 190px !important;
            margin-left: auto !important;
            margin-right: auto !important;
            justify-self: center !important;
            align-self: center !important;
        }

        .gx-game-slider .kr-service-card,
        .gx-game-slider .kr-service-card__image {
            background: transparent !important;
            box-shadow: none !important;
            border: 0 !important;
        }

        .gx-game-slider .kr-service-card__image img {
            background: transparent !important;
        }
    </style>
    <script>
        (() => {
            const applyMobileHeroFill = () => {
                const art = document.querySelector('.gx-hero-art');
                const hero = document.querySelector('.gx-hero');
                const heroButtons = document.querySelectorAll('.gx-hero-actions .gx-primary-btn, .gx-hero-actions .gx-secondary-btn');
                const heroActions = document.querySelector('.gx-hero-actions');
                const heroGrid = document.querySelector('.gx-hero-grid');
                const heroTrust = document.querySelector('.gx-hero-trust');
                const serviceCards = document.querySelectorAll('.gx-game-slider .kr-service-card, .gx-game-slider .kr-service-card__image');
                const stepsButton = document.querySelector('.gx-steps-btn');
                if (!art) return;

                if (window.matchMedia('(max-width: 900px)').matches) {
                    if (hero) {
                        hero.style.setProperty('width', '100%', 'important');
                        hero.style.setProperty('max-width', 'none', 'important');
                        hero.style.setProperty('margin-left', '0', 'important');
                        hero.style.setProperty('margin-right', '0', 'important');
                        hero.style.setProperty('margin-inline', '0', 'important');
                        hero.style.setProperty('overflow', 'hidden', 'important');
                    }

                    if (heroGrid) {
                        heroGrid.style.setProperty('min-height', '484px', 'important');
                        heroGrid.style.setProperty('overflow', 'hidden', 'important');
                    }
                    art.style.setProperty('inset', '0 auto auto -7%', 'important');
                    art.style.setProperty('left', '-7%', 'important');
                    art.style.setProperty('right', 'auto', 'important');
                    art.style.setProperty('width', '114%', 'important');
                    art.style.setProperty('inline-size', '114%', 'important');
                    art.style.setProperty('inset-inline-start', '-7%', 'important');
                    art.style.setProperty('inset-inline-end', 'auto', 'important');

                    if (heroActions) {
                        heroActions.style.setProperty('width', '156px', 'important');
                        heroActions.style.setProperty('max-width', '156px', 'important');
                        heroActions.style.setProperty('gap', '7px', 'important');
                    }

                    heroButtons.forEach((button) => {
                        button.style.setProperty('min-height', '38px', 'important');
                        button.style.setProperty('height', '38px', 'important');
                        button.style.setProperty('padding-inline', '14px', 'important');
                        button.style.setProperty('border-radius', '12px', 'important');
                        button.style.setProperty('font-size', '11.5px', 'important');
                        button.style.setProperty('line-height', '1', 'important');
                    });

                    if (heroTrust) {
                        heroTrust.style.setProperty('position', 'absolute', 'important');
                        heroTrust.style.setProperty('left', '50%', 'important');
                        heroTrust.style.setProperty('right', 'auto', 'important');
                        heroTrust.style.setProperty('bottom', '14px', 'important');
                        heroTrust.style.setProperty('transform', 'translateX(-50%)', 'important');
                        heroTrust.style.setProperty('z-index', '6', 'important');
                        heroTrust.style.setProperty('width', 'min(calc(100% - 32px), 348px)', 'important');
                        heroTrust.style.setProperty('min-height', '72px', 'important');
                        heroTrust.style.setProperty('margin', '0', 'important');
                    }
                } else {
                    if (hero) {
                        ['width', 'max-width', 'margin-left', 'margin-right', 'margin-inline', 'overflow'].forEach((property) => {
                            hero.style.removeProperty(property);
                        });
                    }
                    if (heroGrid) {
                        ['min-height', 'overflow'].forEach((property) => heroGrid.style.removeProperty(property));
                    }
                    ['inset', 'left', 'right', 'width', 'inline-size', 'inset-inline-start', 'inset-inline-end'].forEach((property) => {
                        art.style.removeProperty(property);
                    });

                    if (heroActions) {
                        ['width', 'max-width', 'gap'].forEach((property) => heroActions.style.removeProperty(property));
                    }

                    heroButtons.forEach((button) => {
                        ['min-height', 'height', 'padding-inline', 'border-radius', 'font-size', 'line-height'].forEach((property) => {
                            button.style.removeProperty(property);
                        });
                    });

                    if (heroTrust) {
                        ['position', 'left', 'right', 'bottom', 'transform', 'z-index', 'width', 'min-height', 'margin'].forEach((property) => {
                            heroTrust.style.removeProperty(property);
                        });
                    }
                }

                serviceCards.forEach((card) => {
                    card.style.setProperty('background', 'transparent', 'important');
                    card.style.setProperty('box-shadow', 'none', 'important');
                    card.style.setProperty('border', '0', 'important');
                });

                if (stepsButton) {
                    stepsButton.style.setProperty('display', 'flex', 'important');
                    stepsButton.style.setProperty('width', 'fit-content', 'important');
                    stepsButton.style.setProperty('min-width', window.matchMedia('(max-width: 900px)').matches ? '166px' : '190px', 'important');
                    stepsButton.style.setProperty('margin-left', 'auto', 'important');
                    stepsButton.style.setProperty('margin-right', 'auto', 'important');
                    stepsButton.style.setProperty('justify-content', 'center', 'important');
                    stepsButton.style.setProperty('align-items', 'center', 'important');
                }
            };

            applyMobileHeroFill();
            document.addEventListener('DOMContentLoaded', applyMobileHeroFill, { once: true });
            window.addEventListener('resize', applyMobileHeroFill, { passive: true });
        })();
    </script>

    <section class="gx-hero" aria-label="{{ $isEnglish ? 'Game top-up hero' : 'واجهة شحن الألعاب' }}">
        <div class="gx-container gx-hero-grid">
            <div class="gx-hero-copy">
                <span class="gx-eyebrow">{{ $isEnglish ? 'Fast gaming store' : 'متجر شحن ألعاب سريع' }}</span>
                <h1>
                    <span class="gx-hero-title-line">{{ $isEnglish ? 'Top up your favorite games' : 'اشحن ألعابك المفضلة' }}</span>
                    <strong>{{ $isEnglish ? 'fast and safely' : 'بسرعة وأمان' }}</strong>
                </h1>
                <p>{{ $isEnglish ? 'Best prices, fastest top-up, and support around the clock. Everything you need in one place.' : 'أفضل الأسعار، أسرع شحن، دعم على مدار الساعة. كل ما تحتاجه في مكان واحد.' }}</p>
                <div class="gx-hero-actions">
                    <a href="#popular-games" class="gx-primary-btn">{{ $isEnglish ? 'Top up now' : 'اشحن الآن' }}</a>
                    <a href="#popular-games" class="gx-secondary-btn">{{ $isEnglish ? 'Browse games' : 'تصفح الألعاب' }}</a>
                </div>
            </div>

            <div class="gx-hero-art">
                <picture>
                    <source media="(max-width: 900px)" srcset="{{ $heroMobileImage }}">
                    <img src="{{ $heroImage }}" alt="{{ $isEnglish ? 'Game top-up characters' : 'شخصيات ألعاب وشحن جواهر' }}" width="1680" height="933" fetchpriority="high">
                </picture>
            </div>
            <div class="gx-hero-trust" aria-label="{{ $isEnglish ? 'Store benefits' : 'مميزات المتجر' }}">
                <span>
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3 20 6v6c0 5-3.4 8-8 9-4.6-1-8-4-8-9V6l8-3Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="m8.5 12 2.2 2.2 4.8-5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    {{ $isEnglish ? '100% secure payment' : 'دفع آمن 100%' }}
                </span>
                <span>
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 5v6.5L12.5 20 20 12.5 11.5 4H5a1 1 0 0 0-1 1Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M8 8h.01" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/></svg>
                    {{ $isEnglish ? 'Fair prices' : 'أسعار تنافسية' }}
                </span>
                <span>
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 13v-1a8 8 0 0 1 16 0v1M6 17h2v-6H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2Zm10 0h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2v6Zm0 0v1a2 2 0 0 1-2 2h-2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    {{ $isEnglish ? '24/7 support' : 'دعم فوري 24/7' }}
                </span>
            </div>
        </div>
    </section>

    <main class="gx-home">
        @if($query)
            <section class="gx-section gx-container" id="search-results">
                <div class="gx-section-head">
                    <h2>{{ $isEnglish ? 'Search results' : 'نتائج البحث' }}</h2>
                    <a href="{{ route('home') }}">{{ $isEnglish ? 'View all' : 'عرض الكل' }}</a>
                </div>
                <div class="rn-scroll-section gx-slider-shell">
                    <button type="button" class="rn-scroll-btn rn-scroll-prev" data-rn-scroll-prev aria-label="{{ $isEnglish ? 'Previous' : 'السابق' }}">
                        <svg viewBox="0 0 24 24" fill="none"><path d="m15 18-6-6 6-6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                    <div class="gx-game-slider rn-mobile-carousel" data-rn-scroll-track>
                        @forelse($services->take(10) as $service)
                            @include('store.partials.kroti-product-card', [
                                'service' => $service,
                                'image' => $productImages[($loop->iteration - 1) % $productImages->count()],
                            ])
                        @empty
                            <div class="gx-empty">{{ $isEnglish ? 'No matching results.' : 'لا توجد نتائج مطابقة.' }}</div>
                        @endforelse
                    </div>
                    <button type="button" class="rn-scroll-btn rn-scroll-next" data-rn-scroll-next aria-label="{{ $isEnglish ? 'Next' : 'التالي' }}">
                        <svg viewBox="0 0 24 24" fill="none"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                </div>
            </section>
        @endif

        <section class="gx-section gx-container" id="popular-games">
            <div class="gx-section-head">
                <h2>{{ $isEnglish ? 'Top up popular games' : 'اشحن أشهر الألعاب' }}</h2>
                <span class="gx-title-mark" aria-hidden="true"></span>
            </div>
            <div class="rn-scroll-section gx-slider-shell">
                <button type="button" class="rn-scroll-btn rn-scroll-prev" data-rn-scroll-prev aria-label="{{ $isEnglish ? 'Previous' : 'السابق' }}">
                    <svg viewBox="0 0 24 24" fill="none"><path d="m15 18-6-6 6-6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
                <div class="gx-game-slider rn-mobile-carousel" data-rn-scroll-track>
                    @foreach($featuredGames as $service)
                        @include('store.partials.kroti-product-card', [
                            'service' => $service,
                            'image' => $productImages[$loop->index % $productImages->count()],
                        ])
                    @endforeach
                </div>
                <button type="button" class="rn-scroll-btn rn-scroll-next" data-rn-scroll-next aria-label="{{ $isEnglish ? 'Next' : 'التالي' }}">
                    <svg viewBox="0 0 24 24" fill="none"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
            </div>
        </section>

        <section class="gx-container gx-feature-strip" aria-label="{{ $isEnglish ? 'Store features' : 'مميزات المتجر' }}">
            @foreach($features as $feature)
                <article>
                    <span class="gx-icon">
                        <svg viewBox="0 0 24 24" fill="none"><path d="{{ $iconPath[$feature['icon']] }}" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </span>
                    <div>
                        <h3>{{ $feature['title'] }}</h3>
                        <p>{{ $feature['text'] }}</p>
                    </div>
                </article>
            @endforeach
        </section>

        <section class="gx-section gx-container gx-steps" id="steps">
            <div class="gx-centered-title">
                <h2><strong>3</strong> {{ $isEnglish ? 'simple top-up steps' : 'خطوات بسيطة للشحن' }}</h2>
            </div>
            <div class="gx-steps-grid">
                @foreach($steps as $step)
                    <article>
                        <span class="gx-step-icon">
                            <svg viewBox="0 0 24 24" fill="none"><path d="{{ $iconPath[$step['icon']] }}" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </span>
                        <b>{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</b>
                        <h3>{{ $step['title'] }}</h3>
                        <p>{{ $step['text'] }}</p>
                    </article>
                @endforeach
            </div>
            <a href="#popular-games" class="gx-primary-btn gx-steps-btn">{{ $isEnglish ? 'Start top-up now' : 'ابدأ الشحن الآن' }}</a>
        </section>

        <section class="gx-container gx-offer" id="offers">
            <div class="gx-offer-copy">
                <h2>{{ $isEnglish ? 'Exclusive offers and discounts' : 'عروض وخصومات حصرية' }}</h2>
                <p>{{ $isEnglish ? 'Discounts up to 20% on selected packages.' : 'خصومات تصل حتى 20% على باقات مختارة.' }}</p>
            </div>
            <a href="{{ $offerService ? route('games.show', $offerService->slug) : route('home') }}" class="gx-primary-btn">{{ $isEnglish ? 'View all offers' : 'عرض جميع العروض' }}</a>
            <img src="{{ $offersImage }}" alt="{{ $isEnglish ? 'Exclusive jewel offers' : 'عروض جواهر حصرية' }}" width="2048" height="768" loading="lazy">
        </section>

        <section class="gx-section gx-container gx-testimonials">
            <div class="gx-centered-title">
                <h2>{{ $isEnglish ? 'What our customers say' : 'ماذا يقول عملاؤنا' }}</h2>
            </div>
            <div class="gx-testimonial-grid">
                @foreach($testimonials as $testimonial)
                    <article>
                        <div class="gx-stars" aria-label="5 stars">★★★★★</div>
                        <p>{{ $testimonial['text'] }}</p>
                        <div class="gx-user">
                            <span>{{ mb_substr($testimonial['name'], 0, 1) }}</span>
                            <b>{{ $testimonial['name'] }}</b>
                        </div>
                    </article>
                @endforeach
            </div>
            <div class="gx-dots"><span></span><span class="is-active"></span><span></span></div>
        </section>

        <section class="gx-container gx-app" id="app">
            <div class="gx-app-stores" aria-label="{{ $isEnglish ? 'App stores' : 'متاجر التطبيقات' }}">
                <a href="{{ route('home') }}" aria-label="Google Play">
                    <span>▶</span>
                    <b>Google Play</b>
                </a>
                <a href="{{ route('home') }}" aria-label="App Store">
                    <span></span>
                    <b>App Store</b>
                </a>
            </div>
            <div class="gx-app-copy">
                <h2>{{ $isEnglish ? 'Download our app now' : 'حمّل تطبيقنا الآن' }}</h2>
                <p>{{ $isEnglish ? 'For the best top-up experience.' : 'للحصول على أفضل تجربة شحن.' }}</p>
            </div>
            <img src="{{ $appImage }}" alt="{{ $isEnglish ? 'RaseedNow mobile app' : 'تطبيق RaseedNow على الهاتف' }}" width="2048" height="768" loading="lazy">
        </section>
    </main>
@endsection