@extends('layouts.app')

@section('title', $seo['page_title'] ?? __('الرئيسية'))

@section('meta_title', $seo['meta_title'] ?? '')
@section('description', $seo['meta_description'] ?? '')
@section('keywords', $seo['keywords'] ?? '')

@section('og:title', $seo['og_title'] ?? '')
@section('og:description', $seo['og_description'] ?? '')
@section('og_image', $seo['og_image'] ?? asset('images/RFav.png'))
@section('canonical_url', $seo['canonical_url'] ?? url()->current())
@push('home_style')
    @vite(['resources/css/style.css'])

    <style>
        .main-header {
            background: rgba(81, 76, 82, 0.7) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        }

        #home-view {
            padding: 0 !important;
        }

        .icon-btn {
            border-radius: 0;
            width: 30px;
            height: 30px;
        }

        /* ===== MENU OVERLAY (Darb Colors) ===== */
        #menu-overlay {
            position: fixed;
            inset: 0;
            z-index: 99999;
            opacity: 0;
            pointer-events: none;
            transition: opacity .25s ease;

            /* ألوان درب */
            --brand-gray: #66686a;
            /* الأساسي */
            --brand-orange: #f3741f;
            /* عند التأشير */

            /* تدرجات من الرمادي */
            --menu-mid: #4f5153;
            /* وسط أغمق من #66686a */
            --menu-panel: #66686a;
            /* الهيدر/الفوتر */
            --menu-card: #6f7173;
            /* الكارد (أخف شوي من الهيدر لتمييز بسيط) */

            --menu-border: rgba(255, 255, 255, .12);
            --menu-text: rgba(255, 255, 255, .95);
            --menu-dim: rgba(255, 255, 255, .72);

            background: var(--menu-mid);
        }

        #menu-overlay.open {
            opacity: 1;
            pointer-events: auto;
            display: block;
        }

        /* تقسيم الشاشة 3 مناطق */
        #menu-overlay .menu-shell {
            height: 100%;
            display: grid;
            grid-template-rows: 74px 1fr 64px;
        }

        /* الشبكة للكاردات */
        #menu-overlay .menu-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 16px;
            padding: 20px;
            justify-items: center;
        }

        /* اتجاه حسب اللغة */
        #menu-overlay[dir="rtl"] .menu-grid {
            direction: rtl;
        }

        #menu-overlay[dir="ltr"] .menu-grid {
            direction: ltr;
        }



        #menu-overlay .menu-brand {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
        }

        #menu-overlay .menu-brand img {
            height: 44px;
            width: auto;
            display: block;
        }

        /* زر الإغلاق داخل الهيدر */
        #menu-overlay .menu-close {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .16);
            color: var(--menu-text);
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: transform .2s ease, background .2s ease, border-color .2s ease;
        }

        #menu-overlay .menu-close:hover {
            transform: rotate(90deg);
            background: rgba(243, 116, 31, .20);
            border-color: rgba(243, 116, 31, .55);
        }




        /* الكاردات تتدفق حسب الاتجاه */

        /* ===== CARD ===== */
        #menu-overlay .menu-card {
            height: 128px;
            padding: 18px 16px;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;

            text-align: center;
            text-decoration: none;

            background: var(--menu-card);
            border: 1px solid var(--menu-border);
            color: var(--menu-text);
            border-radius: 14px;
            box-shadow: 0 10px 26px rgba(0, 0, 0, .22);

            transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
        }

        /* عند التأشير: الكارد برتقالي درب */
        #menu-overlay .menu-card:hover,
        #menu-overlay .menu-card:focus-visible {
            transform: translateY(-2px);
            background: var(--brand-orange);
            border-color: rgba(243, 116, 31, .85);
            box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
            outline: none;
        }

        #menu-overlay .card-ico2 {
            width: 54px;
            height: 54px;
            border-radius: 14px;
            display: grid;
            place-items: center;

            color: rgba(255, 255, 255, .92);
            transition: background .18s ease, border-color .18s ease, color .18s ease;
        }

        #menu-overlay .card-ico2 svg {
            width: 55px;
            height: 55px;
        }

        #menu-overlay .card-title {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.25;
            margin: 0;
            color: var(--menu-text);
            transition: color .18s ease;
        }

        #menu-overlay .menu-card:hover .card-ico2,
        #menu-overlay .menu-card:focus-visible .card-ico2 {
            color: #fff;
        }

        #menu-overlay .menu-card:hover .card-title,
        #menu-overlay .menu-card:focus-visible .card-title {
            color: #fff;
        }

        /* Active (اختياري) */
        #menu-overlay .menu-card.is-active {
            background: var(--brand-orange);
            border-color: rgba(243, 116, 31, .85);
        }

        #menu-overlay .menu-card.is-active .card-ico2 {

            color: #fff;
        }

        #menu-overlay .menu-card.is-active .card-title {
            color: #fff;
        }

        /* ===== FOOTER ===== */
        #menu-overlay .menu-footer {
            background: var(--menu-panel);
            border-top: 1px solid var(--menu-border);
            padding: 10px 22px;

            display: flex;
            flex-wrap: wrap;
            gap: 10px 14px;
            align-items: center;
            justify-content: center;

            font-size: 12px;
            color: var(--menu-dim);
        }

        #menu-overlay .menu-footer a {
            color: rgba(255, 255, 255, .78);
            text-decoration: none;
            transition: color .18s ease;
        }

        #menu-overlay .menu-footer a:hover {
            color: var(--brand-orange);
        }

        #menu-overlay .menu-footer .sep {
            opacity: .35;
        }

        #menu-overlay .menu-footer .muted {
            opacity: .65;
        }

        /* Responsive */
        @media (max-width: 768px) {
            #menu-overlay .menu-grid {
                grid-template-columns: 1fr;
            }
        }

        .video-controls {
            position: absolute;
            bottom: 40px;
            left: 40px;
            z-index: 20;
            display: flex;
            gap: 10px;
        }

        .video-control-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            pointer-events: auto !important;
        }

        .video-control-btn:hover {
            background: var(--primary);
            border-color: var(--primary);
        }

        .hero-video-container video,
        .sign-container video {
            pointer-events: none;
        }

        /* Responsive Video handling */
        #heroVideoDesktop {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        #heroVideoMobile {
            display: none;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media (max-width: 768px) {
            #heroVideoDesktop {
                display: none !important;
            }

            #heroVideoMobile {
                display: block !important;
            }
        }

        .hero-video-container video::-webkit-media-controls,
        .sign-container video::-webkit-media-controls {
            display: none !important;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 768px) {
            .video-controls {
                bottom: 120px;
                left: 20px;
            }
        }

        @media (max-width: 576px) {
            .video-controls {
                bottom: 90px;
                left: 16px;
            }
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>

    <style>
        .sign-container {
            display: none;
            position: fixed;
            top: 96px;
            left: 25px;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            border: 4px solid #e57e3a;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
            z-index: 9999;
            overflow: hidden;
            animation: slideUp 0.3s ease;
            background: #2a2a3e;
        }

        .sign-container.visible {
            display: block;
        }

        .sign-close-btn {
            display: none;
            position: fixed;
            z-index: 10000;
            top: calc(0px + 90px - 18px);
            left: calc(25px + 110px - 18px);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #e57e3a;
            border: 3px solid #fff;
            color: white;
            font-size: 18px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s, background 0.2s;
            line-height: 1;
            padding: 0;
        }

        .sign-close-btn.visible {
            display: flex;
        }

        .sign-close-btn:hover {
            background: #d06a28;
            transform: scale(1.1);
        }

        .sign-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 400px) {
            .sign-container {
                width: 180px;
                height: 180px;
                bottom: 15px;
                right: 15px;
            }

            .sign-close-btn {
                bottom: calc(15px + 180px - 16px);
                right: calc(15px + 90px - 16px);
                width: 32px;
                height: 32px;
                font-size: 15px;
            }
        }

        .nav-item-ext.active {
            background: none;
            color: #c6c6c6;
        }

        /* .nav-item-ext:hover {
                                                                            background: #ffa25a29;
                                                                            color: #c6c6c6;
                                                                            transform: translateY(-2px);
                                                                        } */


        /* ===== تنسيقات النافذة الإعلانية (التصميم الجديد) =====
                                                                                        .custom-ad-popup {
                                                                                            position: fixed;
                                                                                            top: 20%;
                                                                                            right: 30px;
                                                                                            z-index: 99900;
                                                                                            visibility: hidden;
                                                                                            opacity: 0;
                                                                                            transform: translateY(30px);
                                                                                            transition: all 0.5s ease-out;
                                                                                        }

                                                                                        .custom-ad-popup.show {
                                                                                            visibility: visible;
                                                                                            opacity: 1;
                                                                                            transform: translateY(0);
                                                                                        }

                                                                                        .ad-flex-container {
                                                                                            display: flex;
                                                                                            flex-direction: row-reverse;
                                                                                            align-items: stretch;
                                                                                            border-radius: 16px;
                                                                                            overflow: hidden;
                                                                                            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
                                                                                            height: 340px;
                                                                                            background: transparent;
                                                                                            border: none;
                                                                                        }
                                                                                        .gas-station-column {
                                                                                            width: auto;
                                                                                            height: 100%;
                                                                                            position: relative;
                                                                                            z-index: 5;
                                                                                            background: transparent;
                                                                                        }
                                                                                        .main-pillar-img {
                                                                                            width: 100%;
                                                                                            height: 100%;
                                                                                            object-fit: contain;
                                                                                            display: block;
                                                                                        }
                                                                                        .ad-slider-column {
                                                                                            width: 450px;
                                                                                            height: 100%;
                                                                                            position: relative;
                                                                                            background: rgba(81, 76, 82, 0.7) !important;
                                                                                            border-radius: 16px 0 0 16px;
                                                                                        }
                                                                                        .close-ad-btn-new {
                                                                                            position: absolute;
                                                                                            top: 20px;
                                                                                            left: 20px;
                                                                                            background: transparent;
                                                                                            border: none;
                                                                                            color: #6b7a77;
                                                                                            font-size: 18px;
                                                                                            cursor: pointer;
                                                                                            z-index: 100;
                                                                                            transition: color 0.3s ease;
                                                                                        }
                                                                                        .close-ad-btn-new:hover {
                                                                                            color: #ffffff;
                                                                                        }
                                                                                */

        /* ===== تنسيقات النافذة الإعلانية (التصميم المدمج مع الصورة) ===== */
        .custom-ad-popup {
            position: fixed;
            top: 15%;
            /* تم رفعها قليلاً لتناسب حجم الصورة */
            right: 30px;
            z-index: 99900;
            visibility: hidden;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.5s ease-out;
        }

        .custom-ad-popup.show {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
        }

        /* الحاوية الأساسية التي تحمل الصورة */
        .ad-image-wrapper {
            position: relative;
            width: 400px;
            /* عرض الإعلان بالكامل (يمكنك تكبيره أو تصغيره) */
            max-width: 90vw;
            background: transparent;
        }

        /* صورة الكابينة الأساسية */
        .main-pillar-img {
            width: 100%;
            height: auto;
            display: block;
            filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.3));
            /* ظل للصورة ككل */
        }

        /* حاوية السلايدر العائمة (توضع في المساحة الفارغة أعلى اليسار) */
        .ad-slider-floating {
            position: absolute;
            top: 0;
            left: 0;
            width: 67%;
            height: 66%;
            background: rgba(81, 76, 82, 0.7) !important;
            /* خلفية شبه شفافة لتوضيح النص */
            border-radius: 12px 0 0 0;
            /* تدوير الزاوية العلوية اليسرى فقط */
            overflow: hidden;
            z-index: 10;
        }

        /* زر الإغلاق الدائري */
        .close-ad-btn-new {
            position: absolute;
            top: 8px;
            left: 10px;
            width: 30px;
            /* عرض ثابت */
            height: 30px;
            /* طول مساوٍ للعرض ليصبح مربعاً */
            border-radius: 50%;
            /* تحويل المربع إلى دائرة مثالية */
            background: rgba(0, 0, 0, 0.3);
            /* خلفية داكنة خفيفة لتبرز شكل الدائرة */
            border: none;
            color: #ffffff;
            font-size: 12px;
            cursor: pointer;
            z-index: 100;

            /* توسيط علامة ✕ في منتصف الدائرة تماماً */
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            /* إزالة أي هوامش تسبب المط */
            line-height: 1;

            transition: all 0.3s ease;
        }

        /* تأثير عند تمرير الماوس */
        .close-ad-btn-new:hover {
            background: rgba(243, 116, 31, 0.9);
            /* لون درب البرتقالي */
            color: #ffffff;
            transform: scale(1.1) rotate(90deg);
            /* تكبير بسيط مع دوران */
        }

        /* الشريحة الواحدة */
        .ad-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.8s ease-in-out;
            display: flex;
            flex-direction: column;
            padding: 20px 25px 15px;
            /* تم تقليل الحواف لتناسب المساحة الجديدة */
            z-index: 1;
            box-sizing: border-box;
        }

        .ad-slide.active {
            opacity: 1;
            z-index: 2;
        }

        /* نصوص وعناصر الشريحة */
        .slide-main-title {
            color: #ff8c42;
            font-size: 17px;
            /* تصغير الخط قليلاً */
            font-weight: bold;
            margin: 0 0 10px 0;
            text-align: right;
            padding-left: 20px;
        }

        .slide-img-container {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 6px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .slide-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .slide-content {
            /* margin-top: 10px; */
            text-align: right;
            overflow: hidden;
        }

        .slide-content p {
            color: #ffffff;
            font-size: 12px;
            line-height: 1.4;
            margin: 0 0 5px 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* إخفاء النص الزائد إذا كان طويلاً جداً */
            -webkit-box-orient: vertical;
        }

        .slide-link {
            color: #f3741f;
            font-size: 12px;
            text-decoration: none;
            font-weight: bold;
            display: inline-block;
            margin-top: 5px;
        }

        .slide-link:hover {
            text-decoration: underline;
        }

        /* شريط التقدم السفلي */
        .slide-footer {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            direction: ltr;
        }

        .slide-dots {
            display: flex;
            gap: 4px;
        }

        .slide-dots .dot {
            width: 15px;
            height: 3px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
        }

        .slide-dots .dot.active {
            background: #f98a44;
        }

        .slide-count {
            color: #ffffff;
            font-size: 11px;
            direction: rtl;
        }

        /* شاشات الجوال */
        @media (max-width: 576px) {
            .ad-image-wrapper {
                width: min(280px, 86vw);
            }

            .bottom-nav-extended {
                gap: 0;
            }

            .custom-ad-popup {
                right: 15%;
                top: 12%;
            }

            .ad-slider-floating {
                position: relative;
                width: 67%;
                height: 202px;
                background: rgba(81, 76, 82, 0.95);
                border-radius: 16px 0 0 0;
                top: -302px;
                right: 94px;
            }

            .close-ad-btn-new {
                background: rgba(0, 0, 0, 0.2);
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                top: 10px;
                left: 10px;
            }
        }

        /* الشريحة الواحدة */
        .ad-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.8s ease-in-out;
            display: flex;
            flex-direction: column;
            padding: 20px 10px;
            z-index: 1;
            box-sizing: border-box;
        }

        .ad-slide.active {
            opacity: 1;
            z-index: 2;
        }

        /* نصوص وعناصر الشريحة */
        .slide-main-title {
            color: #ff8c42;
            /* اللون الذهبي/الأصفر الفاتح */
            font-size: 16px;
            font-weight: bold;
            margin: 0 0 10px 0;
            text-align: right;
            padding-left: 30px;
            /* لترك مساحة لزر الإغلاق */
        }

        .slide-img-container {
            width: 100%;
            /*height: 140px;*/
            border-radius: 8px;
            overflow: hidden;
        }

        .slide-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .slide-content {
            /* margin-top: 15px; */
            text-align: right;
        }

        .slide-content p {
            color: #ffffff;
            font-size: 13px;
            line-height: 1.6;
            margin: 0 0 5px 0;
        }

        .slide-link {
            color: #ff8c42;
            /* اللون الأخضر الفاتح للرابط */
            font-size: 13px;
            text-decoration: none;
            font-weight: bold;
        }

        .slide-link:hover {
            text-decoration: underline;
        }

        /* شريط التقدم السفلي */
        .slide-footer {
            margin-top: 0;
            /* يدفعه لأسفل الشريحة */
            display: flex;
            justify-content: space-between;
            align-items: center;
            direction: ltr;
            /* اتجاه من اليسار لليمين للمؤشرات */
        }

        .slide-dots {
            display: flex;
            gap: 6px;
        }

        .slide-dots .dot {
            width: 20px;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
        }

        .slide-dots .dot.active {
            background: #f98a44;
            /* اللون البنفسجي للشريط النشط */
        }

        .slide-count {
            color: #ffffff;
            font-size: 12px;
            direction: rtl;
        }

        /* شاشات الجوال */
        @media (max-width: 576px) {
            .ad-flex-container {
                flex-direction: column;
                width: 300px;
            }

            .gas-station-column {
                display: none;
                /* إخفاء الكابينة في الجوال لتوفير المساحة أو تعديل حجمها */
            }

            .ad-slider-column {
                width: 100%;
                border-radius: 16px;
                padding: 15px;
            }

            .ad-slide {
                padding: 0;
            }
        }

        /* تصميم الفوتر العائم مطابق للصورة تماماً للديسكتب */
        @media (min-width: 1025px) {
            .bottom-nav-extended {
                position: fixed !important;
                bottom: 0 !important;
                left: 50% !important;
                right: auto !important;
                transform: translateX(-50%) !important;
                width: auto !important;
                min-width: auto !important;
                /* background: rgba(81, 76, 82, 0.85) !important; */
                /* backdrop-filter: blur(15px) !important; */
                -webkit-backdrop-filter: blur(15px) !important;
                /* border-radius: 24px !important; */
                /* padding: 15px 45px !important; */
                border: 1px solid rgba(255, 255, 255, 0.08) !important;
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                gap: 28px !important;
                height: auto !important;
                z-index: 1000 !important;
                direction: rtl !important;
            }

            .bottom-nav-extended > * {
                flex: 0 0 auto !important;
                max-width: none !important;
                min-width: 80px !important;
                background: transparent !important;
            }

            .nav-item-ext {
                gap: 6px !important;
                padding: 0 !important;
                opacity: 1 !important;
                color: #ffffff !important;
                transition: transform 0.2s ease !important;
            }

            .nav-item-ext:hover {
                transform: translateY(-3px) !important;
            }

            .nav-item-ext svg {
                width: 26px !important;
                height: 26px !important;
                color: #ffffff !important;
            }

            .nav-item-ext span {
                font-size: 13.5px !important;
                font-weight: 600 !important;
                color: #ffffff !important;
                margin-top: 2px !important;
            }

            .card-ico2 {
                width: 26px !important;
                height: 26px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .card-ico2 img {
                width: 26px !important;
                height: 26px !important;
                filter: brightness(0) invert(1) !important; /* جعل الأيقونات بيضاء تماماً */
            }
        }
    </style>
@endpush

@section('content')
    <!-- الحاوية الرئيسية -->
    <div id="main-container">
        {{-- <div id="chatbot-container" class="chatbot-container">
            <button id="chatbot-toggle" class="chatbot-toggle" onclick="window.open('https://wa.me/920005804','_blank')"
                style="background-color:#25D366; border:none; border-radius:50%; width:60px; height:60px; display:flex; align-items:center; justify-content:center; cursor:pointer;">
                <svg class="chat-icon" viewBox="0 0 24 24" width="32" height="32" fill="white">
                    <path
                        d="M20.52 3.48A11.91 11.91 0 0012 0C5.37 0 0 5.37 0 12c0 2.11.55 4.09 1.6 5.85L0 24l6.45-1.64A11.91 11.91 0 0012 24c6.63 0 12-5.37 12-12 0-3.18-1.24-6.17-3.48-8.52zM12 22c-1.94 0-3.77-.57-5.29-1.55l-.38-.23-3.83.97.97-3.74-.25-.39A9.927 9.927 0 012 12c0-5.52 4.48-10 10-10s10 4.48 10 10-4.48 10-10 10zm5.27-7.03c-.3-.15-1.76-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.33.22-.61.07-.27-.15-1.13-.42-2.15-1.32-.8-.71-1.34-1.58-1.5-1.88-.16-.3-.02-.46.13-.61.13-.13.3-.33.45-.5.15-.17.2-.28.3-.47.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.48-.5-.67-.51-.17 0-.37-.01-.57-.01-.2 0-.52.07-.79.37-.27.3-1.03 1-1.03 2.44s1.06 2.83 1.21 3.03c.15.2 2.09 3.2 5.06 4.49.71.31 1.26.5 1.69.64.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.3.17-1.41-.08-.11-.27-.17-.57-.31z" />
                </svg>
            </button>
            <button id="chatbot-toggle" class="chatbot-toggle" onclick="window.open('https://wa.me/920005804','_blank')">

                <svg class="chat-icon" viewBox="0 0 24 24" width="28" height="28" fill="currentColor">
                    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" />
                </svg>

                <svg class="close-icon" viewBox="0 0 24 24" width="28" height="28" fill="currentColor">
                    <path
                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                </svg>

                <span class="chatbot-badge" id="unread-count">0</span>

            </button>
            <div id="chatbot-window" class="chatbot-window">
                <div class="chatbot-header">
                    <div class="header-info">
                        <div class="avatar">
                            <img src="{{ asset('images/favicon.png') }}" alt="مساعد درب الذكي">
                        </div>
                        <div class="bot-info">
                            <h3>مساعد درب الذكي 🤖</h3>
                            <p class="status">
                                <span class="status-dot"></span>
                                متصل الآن
                            </p>
                        </div>
                    </div>
                    <div class="header-actions">
                        <button class="header-btn" onclick="minimizeChatbot()" title="تصغير">
                            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                                <path d="M19 13H5v-2h14v2z" />
                            </svg>
                        </button>
                        <button class="header-btn" onclick="clearChat()" title="مسح المحادثة">
                            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                                <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
                            </svg>
                        </button>
                        <button class="header-btn" onclick="closeChatbot()" title="إغلاق">
                            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                                <path
                                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="quick-actions" id="quick-actions">
                    <div class="quick-action" onclick="sendQuickMessage('أين أقرب محطة؟')">
                        📍 أقرب محطة
                    </div>
                    <div class="quick-action" onclick="sendQuickMessage('ما هي خدماتكم؟')">
                        🛠 الخدمات
                    </div>
                    <div class="quick-action" onclick="sendQuickMessage('العروض الحالية')">
                        🎁 العروض
                    </div>
                    <div class="quick-action" onclick="sendQuickMessage('أوقات العمل')">
                        🕐 أوقات العمل
                    </div>
                </div>
                <div id="chatbot-messages" class="chatbot-messages">
                    <div class="message bot-message welcome-message">
                        <div class="message-avatar">
                            <img src="{{ asset('images/favicon.png') }}" alt="Bot">
                        </div>
                        <div class="message-content">
                            <div class="message-bubble">
                                <p>👋 مرحباً بك في درب!</p>
                                <p>أنا مساعدك الذكي، هنا لمساعدتك في:</p>
                                <ul>
                                    <li>🗺 إيجاد أقرب محطة</li>
                                    <li>🛠 معرفة الخدمات المتوفرة</li>
                                    <li>🎁 الاطلاع على العروض</li>
                                    <li>📞 التواصل معنا</li>
                                    <li>❓ الإجابة على أي استفسار</li>
                                </ul>
                                <p>كيف يمكنني مساعدتك اليوم؟</p>
                            </div>
                            <div class="message-time">الآن</div>
                        </div>
                    </div>
                </div>
                <div id="typing-indicator" class="typing-indicator" style="display: none;">
                    <div class="message-avatar">
                        <img src="{{ asset('images/hero-bgimages/bot-avatar.png') }}" alt="Bot">
                    </div>
                    <div class="typing-dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="chatbot-input-area">
                    <div class="input-container">
                        <button class="input-btn" onclick="toggleVoiceInput()" title="الرسائل الصوتية">
                            <svg id="mic-icon" viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
                                <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" />
                                <path
                                    d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" />
                            </svg>
                        </button>
                        <button class="input-btn" onclick="toggleEmojiPicker()" title="الرموز التعبيرية">
                            <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
                                <path
                                    d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" />
                            </svg>
                        </button>
                        <button class="input-btn" onclick="openFileInput()" title="إرفاق ملف">
                            <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
                                <path
                                    d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
                            </svg>
                        </button>
                        <input type="file" id="file-input" style="display: none;" accept="image/*"
                            onchange="handleFileUpload(event)">
                        <textarea id="chatbot-input" class="chatbot-input" placeholder="اكتب رسالتك هنا..." rows="1"
                            onkeypress="handleKeyPress(event)" oninput="adjustTextareaHeight(this)"></textarea>
                        <button class="send-btn" onclick="sendMessage()" id="send-btn">
                            <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
                                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
                            </svg>
                        </button>
                    </div>
                    <div id="emoji-picker" class="emoji-picker" style="display: none;">
                        <div class="emoji-grid">
                            😀 😃 😄 😁 😆 😅 🤣 😂 🙂 🙃 😉 😊 😇 🥰 😍 🤩 😘 😗 😚 😙
                            🥲 😋 😛 😜 🤪 😝 🤑 🤗 🤭 🤫 🤔 🤐 🤨 😐 😑 😶 😏 😒 🙄 😬
                            🤥 😌 😔 😪 🤤 😴 😷 🤒 🤕 🤢 🤮 🤧 🥵 🥶 🥴 😵 🤯 🤠 🥳 😎
                            👍 👎 👏 🙌 👐 🤲 🤝 🙏 ✍ 💪 🦵 🦶 👂 👃 🧠 🦷 🦴 👀 👁 👅
                            ❤ 🧡 💛 💚 💙 💜 🖤 🤍 🤎 💔 ❣ 💕 💞 💓 💗 💖 💘 💝 ✨ 💫
                        </div>
                    </div>
                </div>
                <div class="suggestions-container" id="suggestions-container" style="display: none;">
                </div>
            </div>
        </div> --}}
        <!-- الصفحة الرئيسية -->
        <div id="home-view" class="view-section active">
            <div class="hero-video-container" style="position: relative;">
                <video id="heroVideoDesktop" autoplay loop muted playsinline preload="auto">
                    <source src="{{ $video }}" type="video/mp4">
                </video>
                @if(!empty($mobile_video))
                    <video id="heroVideoMobile" autoplay loop muted playsinline preload="auto">
                        <source src="{{ $mobile_video }}" type="video/mp4">
                    </video>
                @endif
                <div class="video-controls d-flex gap-2">
                    <button class="video-control-btn" onclick="toggleMute()" id="muteBtn" title="الصوت">
                        <i class="fas fa-volume-mute"></i>
                    </button>
                    <button class="video-control-btn" onclick="togglePlay()" id="playBtn" title="تشغيل/إيقاف">
                        <i class="fas fa-pause"></i>
                    </button>
                </div>
            </div>

        </div>
        <nav class="bottom-nav-extended">

            <div class="nav-item-ext" onclick="window.location.href='{{ route('components/about') }}'">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                    <path
                        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
                </svg>
                <span>{{ __('menu.about') }}</span>
            </div>

           
            <div class="nav-item-ext" onclick="window.location.href='{{ route('components/investment') }}'">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                    <path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z" />
                </svg>
                <span>{{ __('menu.investment') }}</span>
            </div>

            <div class="nav-item-ext" onclick="window.location.href='{{ route('components/rental') }}'">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none">
                    <path d="M16 21v-1a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1" stroke="currentColor" stroke-width="1.8"
                        stroke-linecap="round" />
                    <path d="M9.5 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8Z" stroke="currentColor" stroke-width="1.8" />
                    <path d="M21 21v-1a3.5 3.5 0 0 0-3-3.46" stroke="currentColor" stroke-width="1.8"
                        stroke-linecap="round" />
                    <path d="M16.5 4.5a3.5 3.5 0 0 1 0 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
                </svg>
                <span>{{ __('menu.rental') }}</span>
            </div>

            <div class="nav-item-ext" onclick="window.location.href='{{ route('components/map') }}'">
                <span class="card-ico2" aria-hidden="true">

                    <img height="25" width="25" src="{{ asset('images/mapicon3.png') }}" alt="map icon">
                </span>

                <span>{{ __('menu.map') }}</span>
            </div>
 <div class="nav-item-ext" onclick="window.location.href='{{ route('components/media') }}'">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none">
                    <path d="M4 11v2a2 2 0 0 0 2 2h2l6 3V6L8 9H6a2 2 0 0 0-2 2Z" stroke="currentColor"
                        stroke-width="1.8" stroke-linejoin="round" />
                    <path d="M16 9a3 3 0 0 1 0 6" stroke="currentColor" stroke-width="1.8"
                        stroke-linecap="round" />
                    <path d="M8 15l1 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
                </svg>
                <span>{{ __('menu.media') }}</span>
            </div>

            <div class="nav-item-ext" onclick="window.location.href='{{ route('components/contact') }}'">
                <span class="card-ico2" aria-hidden="true">
                    <img height="25" width="25" src="{{ asset('images/customer-service.png') }}" alt="customer service">
                </span>
                <span>{{ __('menu.contact_center') }}</span>
            </div>

            {{-- <div class="nav-item-ext" onclick="window.location.href='#'">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                    <path
                        d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z" />
                </svg>
                <span>{{ __('menu.darb_square') }}</span>
            </div>
            <div class="nav-item-ext nav-more" onclick="toggleExtendedMenu()">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                    <path
                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
                </svg>
                <span>المزيد</span>
            </div> --}}
        </nav>
        {{-- <div id="extended-menu-popup" class="extended-menu-popup">
            <div class="extended-menu-overlay" onclick="toggleExtendedMenu()"></div>
            <div class="extended-menu-content">
                <div class="extended-menu-header">
                    <h3>جميع الصفحات</h3>
                    <button class="close-extended-menu" onclick="toggleExtendedMenu()">✕</button>
                </div>
                <div class="extended-menu-grid">
                    <div class="extended-menu-section">
                        <h4>صفحات إضافية</h4>
                        <a href="{{ route('components/app') }}" class="extended-menu-link">
                            <span class="link-icon">💼</span>
                            <span>الوظائف</span>
                        </a>
                        <a href="innovation.html" class="extended-menu-link">
                            <span class="link-icon">💡</span>
                            <span>الابتكار والتقنية</span>
                        </a>
                        <a href="{{ route('components/contact') }}" class="extended-menu-link">
                            <span class="link-icon">📞</span>
                            <span>اتصل بنا</span>
                        </a>
                    </div>
                    <div class="extended-menu-section">
                        <h4>المركز الإعلامي</h4>
                        <a href="media-center.html" class="extended-menu-link">
                            <span class="link-icon">📰</span>
                            <span>الأخبار والإعلانات</span>
                        </a>
                        <a href="media-center.html#press" class="extended-menu-link">
                            <span class="link-icon">📄</span>
                            <span>البيانات الصحفية</span>
                        </a>
                        <a href="media-center.html#events" class="extended-menu-link">
                            <span class="link-icon">🎉</span>
                            <span>الفعاليات</span>
                        </a>
                    </div>
                </div>
                <div class="extended-quick-actions">
                    <a href="tel:920001234" class="quick-action-btn">
                        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                            <path
                                d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" />
                        </svg>
                        <span>920001234</span>
                    </a>
                    <a href="mailto:info@darb.sa" class="quick-action-btn">
                        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                            <path
                                d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
                        </svg>
                        <span>info@darb.sa</span>
                    </a>
                </div>
                <div class="extended-menu-note">
                    <p>💡 يمكنك الوصول السريع للصفحات الرئيسية من القائمة السفلية مباشرة</p>
                </div>
            </div>
        </div> --}}
        {{-- <div class="notification-popup" id="sidePopup">
            <div class="corner-arm" aria-hidden="true"></div>
            <div class="corner-image" aria-hidden="true"></div>
            <div class="notification-card-container ">
                <button class="notification-close" onclick="closeSidePopup()">
                    <i class="fas fa-times"></i>
                </button>
                <div class="notification-items pt-2">
                    <div class="notification-item">
                        <div class="item-icon purple">
                            <i class="fas fa-vr-cardboard"></i>
                        </div>
                        <div class="item-content">
                            <h4>قريبا مساحة درب</h4>
                            <span class="item-tag">تجربة جديدة</span>
                        </div>
                        <i class="fas fa-chevron-left item-arrow"></i>
                    </div>
                    <div class="notification-item">
                        <div class="item-icon green">
                            <i class="fas fa-city"></i>
                        </div>
                        <a class="item-content" href="{{ route('components/investment') }}">
                            <h4>تواصل معنا</h4>
                            <span class="item-tag new">مشروع جديد</span>
                        </a>
                        <i class="fas fa-chevron-left item-arrow"></i>
                    </div>
                    <div class="notification-item" style="background: transparent;padding: 0;border: 0;">
                        <img src="{{ asset('images/1.jpeg') }}" width="235" height="230"
                            style="border-radius: 10px;width: 100%;height: 148px;">
                    </div>
                </div>
            </div>
        </div> --}}
        <!-- الإعلان المنبثق الجديد (كابينة الوقود + الإعلانات) -->
        <!-- الإعلان المنبثق الجديد (سلايدر يسار + كابينة يمين) -->
        <!-- الإعلان المنبثق الجديد (تصميم الوزارة يسار + كابينة يمين) -->
        {{-- @if (isset($advertisements) && count($advertisements) > 0)
        <div class="custom-ad-popup" id="sidePopup">
            <div class="ad-flex-container">
                <div class="ad-slider-column" id="adSlider">
                    <button class="close-ad-btn-new" style="background: #71625900;" onclick="closeSidePopup()">✕</button>
                    @foreach ($advertisements as $index => $ad)
                    <div class="ad-slide {{ $index === 0 ? 'active' : '' }}">
                        <!--<h3 class="slide-main-title">{{ $ad['title'] ?? '' }}</h3>-->
                        @if (!empty($ad['url']))
                        <div class="slide-img-container"
                            style="background-image: url('{{ $ad['image_url'] }}'); cursor: pointer;"
                            onclick="window.open('{{ $ad['url'] }}', '_blank')"></div>
                        @else
                        <div class="slide-img-container" style="background-image: url('{{ $ad['image_url'] }}')"></div>
                        @endif
                        <!--<div class="slide-content">-->
                        <!--    <p>{{ $ad['description'] ?? '' }}</p>-->
                        <!--    @if (!empty($ad['url']))-->
                        <!--    <a href="{{ $ad['url'] }}" @if (str_contains($ad['url'], 'wa.me') || str_contains($ad['url'], 'whatsapp.com')) target="_blank" @endif class="slide-link">-->
                        <!--        {{ !empty($ad['url_title']) ? $ad['url_title'] : (app()->getLocale() == 'ar' ? 'تواصل معنا الان' : 'Contact Us') }}-->
                        <!--    </a>-->
                        <!--    @endif-->
                        <!--</div>-->
                        <div class="slide-footer">
                            <div class="slide-dots">
                                @for ($i = 0; $i < count($advertisements); $i++) <span
                                    class="dot {{ $i === $index ? 'active' : '' }}"></span>
                                    @endfor
                            </div>
                            <span class="slide-count">{{ $index + 1 }}/{{ count($advertisements) }}</span>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="gas-station-column">
                    <img src="{{ asset('images/pillar.png') }}" alt="كابينة وقود" class="main-pillar-img">
                </div>
            </div>
        </div>
        @endif --}}
        {{-- @if (isset($advertisements) && count($advertisements) > 0) --}}
        @php
            $currentLocale = app()->getLocale();
            if (strpos($currentLocale, '_') !== false) {
                $currentLocale = explode('_', $currentLocale)[0];
            }
            if (strpos($currentLocale, '-') !== false) {
                $currentLocale = explode('-', $currentLocale)[0];
            }

            $filteredAdvertisements = [];
            foreach ($advertisements as $ad) {
                if ($currentLocale === 'en') {
                    if (!empty($ad['image_en_url'])) {
                        $filteredAdvertisements[] = $ad;
                    }
                } elseif (!empty($ad['image_url'])) {
                    $filteredAdvertisements[] = $ad;
                }
            }
        @endphp

        @if (!empty($filteredAdvertisements) && count($filteredAdvertisements) > 0)
            <div class="custom-ad-popup" id="sidePopup">
                <!-- حاوية جديدة تجمع الصورة والإعلان معاً -->
                <div class="ad-image-wrapper">

                    <!-- صورة الكابينة (يجب أن تكون الصورة الجديدة التي أرفقتها) -->
                    <img src="{{ asset('images/pillar.png') }}" alt="كابينة وقود" class="main-pillar-img">

                    <!-- صندوق الإعلانات العائم فوق المساحة الفارغة (أعلى اليسار) -->
                    <div class="ad-slider-floating" id="adSlider">
                        <button class="close-ad-btn-new" onclick="closeSidePopup()">✕</button>

                        @foreach ($filteredAdvertisements as $index => $ad)
                            <div class="ad-slide {{ $index === 0 ? 'active' : '' }}">

                                @php
                                    $displayImage = $ad['display_image'] ?? $ad['image_url'];
                                @endphp

                                @if (!empty($ad['url']))
                                    <div class="slide-img-container" style="background-image: url('/image/222.png'); cursor: pointer;"
                                        onclick="window.open('{{ $ad['url'] }}', '_blank')"></div>
                                @else
                                    <div class="slide-img-container" style="background-image: url('/image/222.png')"></div>
                                @endif

                                <div class="slide-footer">
                                    <div class="slide-dots">
                                        @for ($i = 0; $i < count($advertisements); $i++)
                                            <span class="dot {{ $i === $index ? 'active' : '' }}"></span>
                                        @endfor
                                    </div>
                                    <span class="slide-count">{{ $index + 1 }}/{{ count($advertisements) }}</span>
                                </div>
                            </div>
                        @endforeach

                    </div>

                </div>
            </div>
        @endif

        {{-- @endif --}}
        <!-- زر إغلاق مترجم لغة الإشارة -->
        <button class="sign-close-btn" id="signCloseBtn" onclick="toggleSign()">✕</button>
        <!-- كارد مترجم لغة الإشارة -->
        <div class="sign-container" id="signAvatar">
            <video autoplay loop muted playsinline preload="auto">
                <source src="{{ asset('images/video.mp4') }}" type="video/mp4">
            </video>
        </div>


        @push('scripts')
            <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
            <script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>

            <script>
                console.log('home page ads debug', {
                    locale: '{{ $currentLocale ?? app()->getLocale() }}',
                    originalCount: {{ count($advertisements) }},
                    filteredCount: {{ count($filteredAdvertisements) }},
                    filteredIds: {!! json_encode(array_column($filteredAdvertisements, 'id')) !!}
                });
            </script>

            <!-- 1. كود الفيديو (الخاص بك - تم تعديله وحل مشكلة أدوات المطورين بواسطة HTML Native) -->
            <script>
                let muteBtn, playBtn;

                function getHeroVideo() {
                    const desktop = document.getElementById('heroVideoDesktop');
                    const mobile = document.getElementById('heroVideoMobile');
                    if (mobile && window.getComputedStyle(mobile).display !== 'none') {
                        return mobile;
                    }
                    return desktop;
                }

                document.addEventListener('DOMContentLoaded', function () {
                    muteBtn = document.getElementById('muteBtn');
                    playBtn = document.getElementById('playBtn');
                });

                function toggleMute() {
                    const video = getHeroVideo();
                    if (!video) return;

                    video.muted = !video.muted;
                    if (muteBtn) {
                        muteBtn.innerHTML = video.muted ?
                            '<i class="fas fa-volume-mute"></i>' :
                            '<i class="fas fa-volume-up"></i>';
                    }
                }

                function togglePlay() {
                    const video = getHeroVideo();
                    if (!video) return;

                    if (video.paused) {
                        video.play();
                        if (playBtn) playBtn.innerHTML = '<i class="fas fa-pause"></i>';
                    } else {
                        video.pause();
                        if (playBtn) playBtn.innerHTML = '<i class="fas fa-play"></i>';
                    }
                }
            </script>

            <!-- 2. الكود الجديد: خاص بظهور الإعلان والسلايدر (تم استبداله هنا) -->
            <script>
                // معالجة الظهور بعد انتهاء اللودنج تماماً
                window.addEventListener('load', function () {
                    const popup = document.getElementById('sidePopup');

                    if (popup) {
                        // نؤخر ظهور المنبثق لمدة ثانيتين بعد اكتمال التحميل
                        setTimeout(() => {
                            popup.classList.add('show');
                            startAdSlider(); // تشغيل السلايدر عند ظهور المنبثق
                        }, 2000);
                    }
                });

                // دالة الإغلاق
                function closeSidePopup() {
                    const popup = document.getElementById('sidePopup');
                    if (popup) {
                        popup.classList.remove('show');
                        // تأخير الإخفاء من الـ DOM حتى ينتهي التأثير الحركي
                        setTimeout(() => {
                            popup.style.display = 'none';
                        }, 500);
                    }
                }

                // دالة تشغيل السلايدر (القلاب)
                function startAdSlider() {
                    const slides = document.querySelectorAll('.ad-slide');
                    let currentSlide = 0;

                    if (slides.length <= 1) return; // إذا كانت شريحة واحدة لا حاجة للسلايدر

                    // تغيير الشريحة كل 3.5 ثانية
                    setInterval(() => {
                        slides[currentSlide].classList.remove('active');
                        currentSlide = (currentSlide + 1) % slides.length;
                        slides[currentSlide].classList.add('active');
                    }, 3500);
                }
            </script>

            <!-- 3. كود الأفاتار (الخاص بك - لم يتم تغييره) -->
            <script>
                function toggleSign() {
                    var avatar = document.getElementById("signAvatar");
                    var closeBtn = document.getElementById("signCloseBtn");

                    var isVisible = avatar.classList.contains("visible");

                    if (isVisible) {
                        // إخفاء الكارد وزر الإغلاق
                        avatar.classList.remove("visible");
                        closeBtn.classList.remove("visible");
                    } else {
                        // إظهار الكارد وزر الإغلاق مع إعادة الأنيميشن
                        avatar.classList.add("visible");
                        closeBtn.classList.add("visible");
                        avatar.style.animation = 'none';
                        avatar.offsetHeight; // force reflow
                        avatar.style.animation = 'slideUp 0.3s ease';
                    }
                }
            </script>
            <script src="{{ asset('js/script.js') }}"></script>
        @endpush


@endsection