@extends('layouts.app')
@section('title', __('عن درب'))

@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('styles')
    <style>
        /* إصلاح تأثير about.css على كامل الصفحة */
        body {
            display: block !important;
            height: auto !important;
            width: 100% !important;
            overflow: visible !important;
        }

        .about-page-wrapper {
            display: flex;
            min-height: calc(100vh - 80px);
            /* افتراض أن الهيدر يأخذ مساحة صغيرة */
            width: 100%;
        }

        /* تحويل القائمة الجانبية في الشاشات الصغيرة إلى وضع أفقي */
        @media (min-width: 992px) {
            .sidebar {
                /* إبطال position: fixed القادم من general.css في الشاشات الكبيرة */
                position: sticky !important;
                top: 120px !important;
                /* يظل ثابتاً ولكن داخل محتواه وينزل مع النزول */
                right: auto !important;
                height: max-content !important;
                min-height: 300px;
                border-radius: 20px !important;
                background: rgba(0, 31, 29, 0.9) !important;
                border: 1px solid rgba(255, 255, 255, 0.1) !important;
                margin-top: 40px !important;
                margin-inline-end: 20px !important;
                margin-inline-start: 10px !important;
                width: 90px !important;
                z-index: 100;
            }
        }

        @media (max-width: 991px) {
            .about-page-wrapper {
                flex-direction: column !important;
            }

            .sidebar {
                width: 100% !important;
                height: auto !important;
                flex-direction: row !important;
                padding: 10px 15px !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
                border-inline-end: none !important;
                overflow-x: auto !important;
                justify-content: flex-start;
                z-index: 10;
            }

            .logo-area {
                display: none !important;
            }

            .nav-icons {
                flex-direction: row !important;
                justify-content: space-evenly !important;
                gap: 15px !important;
                padding-bottom: 5px;
            }

            .sidebar-nav-btn {
                display: flex !important;
                width: auto !important;
                padding: 8px 15px !important;
                border-radius: 8px !important;
                white-space: nowrap !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .sidebar-nav-btn .tab-label {
                display: inline-block !important;
                margin-inline-start: 8px;
                font-size: 14px;
            }

            .sidebar-nav-btn::after {
                display: none !important;
            }

            .content-area {
                width: 100% !important;
                padding: 20px 15px !important;
            }
        }

        .section-header {
            margin-bottom: 0px !important;
            position: relative;
        }

        /* --- تنسيق شبكة من نحن الموحدة --- */
        .about-unified-grid {
            display: grid;
            /* تقسيم الشاشة لعمودين متساويين */
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        /* تنسيق الكارت الموحد لجميع العناصر */
        .about-card {
            background: #0006;
            /* خلفية شفافة خفيفة */
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* محاذاة المحتوى في الوسط عمودياً */
            align-items: flex-start;
            height: auto;
            /* لضمان تساوي الارتفاعات */
            min-height: max-content;
            /* ارتفاع أدنى لضمان التناسق */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .about-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
        }

        /* تنسيق خاص لكارت الفيديو */
        .about-card.video-card {
            padding: 0;
            /* إزالة الحواف للفيديو */
            overflow: hidden;
            position: relative;
        }

        .about-card video {
            width: 100%;
            height: 255px;
            object-fit: cover;
            /* جعل الفيديو يغطي كامل المساحة */
            border-radius: 20px;
        }

        /* تنسيق النصوص داخل الكروت */
        .about-card h3 {
            color: #fff;
            /* لون العنوان */
            font-size: 20px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .about-card p {
            color: #ddd;
            line-height: 1.7;
            font-size: 14px;
            margin: 0;
        }

        .card-icon-large {
            font-size: 2rem;
            color: var(--accent-orange, #e57e3a);
            /* استخدام لون الثيم */
            /* margin-bottom: 15px; */
        }

        /* استجابة للجوال (عمود واحد) */
        /* =========================================
                                                                                                   تعديلات الجوال (Mobile Media Query) - موحد
                                                                                                   ========================================= */
        @media (max-width: 768px) {

            /* 1. تعديل سكشن "من نحن" (موجود مسبقاً) */
            .about-unified-grid {
                grid-template-columns: 1fr;
                padding-bottom: 50px !important;
            }

            .about-card {
                height: auto !important;
                min-height: auto;
                padding: 25px;

            }

            .about-card.video-card {
                height: 250px;
                margin-bottom: 15px;
            }

            /* 2. تعديل سكشن "قيمنا" + "أعضاء مجلس الإدارة" */
            /* ملاحظة: كلاهما يستخدم نفس الكلاس values-container */
            .values-container {
                display: grid;
                grid-template-columns: 1fr;
                /* عمود واحد */
                gap: 20px;
                padding-bottom: 40px !important;
                /* مسافة للفوتر */
            }

            /* جعل كروت القيم تأخذ العرض الكامل */
            .value-card {
                width: 100%;
                margin-bottom: 15px;
            }

            /* 3. تعديل سكشن "رسالة الرئيس" */
            .message-container {
                display: flex;
                flex-direction: column;
                /* جعل الصورة فوق والنص تحت */
                height: auto !important;
                /* السماح بالتمدد */
                gap: 20px;
                padding-bottom: 80px !important;
                /* مسافة للفوتر */
            }

            /* تنسيق صورة الرئيس والنص في الجوال */
            .message-container .person-img,
            .message-container .message-text {
                width: 100% !important;
                max-width: 100%;
                flex: none;
                /* إلغاء تقسيم المساحة القديم */
            }

            .message-container .person-img {
                height: 300px;
                /* طول مناسب للصورة في الجوال */
                background-position: center top;
            }
        }


        .about-image {
            width: 100%;
        }

        .about-unified-grid {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* النبذة تأخذ العرض كامل */
        .about-full {
            width: 100%;
        }

        /* صف الفيديو + الكارد */
        .about-row {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        /* كل عنصر داخل الصف يأخذ نصف العرض */
        .about-row .about-card {
            flex: 1;
            min-width: 300px;
        }

        /* الفيديو */
        .video-card video {
            width: 100%;
            height: 100%;
            border-radius: 12px;
            object-fit: cover;
        }



        .about-card {
            height: 110px;
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-icon-large {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            /* تحكم بحجم الأيقونة */
        }

        .card-header h3 {
            margin: 0;
        }
    </style>
    @vite('resources/css/about.css')
@endpush


@section('content')
    <div class="about-page-wrapper">
        <!-- القائمة الجانبية -->
        <aside class="sidebar">
            <div class="logo-area">
                {{-- <button class="menu-trigger btn-bars btn p-0 border-0 text-white d-none d-lg-block" type="button"
                    onclick="app.toggleMenu()">
                    <i class="fas fa-bars" style="font-size: 1.5rem;"></i>
                </button> --}}
            </div>

            <nav class="nav-icons">

                <button class="sidebar-nav-btn active" onclick="showSection('about')" title="{{ __('about.about_us') }}">

                    <svg viewBox="0 0 24 24">
                        <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 class="tab-label d-lg-none">
                        {{ __('about.about_us') }}
                    </span>
                </button>


                <button class="sidebar-nav-btn" onclick="showSection('values')"
                    title="{{ __('about.values.customer_first.title') }}">

                    <svg viewBox="0 0 24 24">
                        <path
                            d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                    </svg>

                    <span class="tab-label d-lg-none">
                        {{ __('about.values.customer_first.title') }}
                    </span>
                </button>


                <button class="sidebar-nav-btn" onclick="showSection('achievements')"
                    title="{{ __('about.achievements') }}">

                    <svg viewBox="0 0 24 24">
                        <path
                            d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
                    </svg>

                    <span class="tab-label d-lg-none">
                        {{ __('about.achievements') }}
                    </span>
                </button>


                <button class="sidebar-nav-btn" onclick="showSection('chairman')"
                    title="{{ __('about.chairman_message') }}">

                    <svg viewBox="0 0 24 24">
                        <path
                            d="M20 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4V6h16v12zM6 10h2v2H6zm0 4h8v2H6zm10 0h2v2h-2zm0-4h2v2h-2z" />
                    </svg>

                    <span class="tab-label d-lg-none">
                        {{ __('about.chairman_message') }}
                    </span>
                </button>

            </nav>


        </aside>
        <!-- منطقة المحتوى -->
        <main class="content-area bg-img">

            <!-- قسم: نبذة عنا -->
            <section id="about" class="content-section active">
                <div class=" ">
                    <div class="breadcrumb">
                        <a href="{{ route('components/home') }}">{{ __('about.breadcrumb.home') }}</a>
                        <span>/</span>
                        <span>{{ $aboutPage['title'] ?? __('about.breadcrumb.about_us') }}</span>
                    </div>

                    <div class="section-header">
                        <div>
                            <h1 class="custom-title">{{ $aboutPage['title'] ?? __('about.about_us') }}</h1>
                            <p>{{ $aboutPage['description'] ?? __('about.Learn about Darb Company') }}</p>
                        </div>
                    </div>

                    <!-- الشبكة الموحدة -->
                    <div class="about-unified-grid">

                        <!-- 1. النبذة (Full Width) -->
                        <div class="about-card about-full">
                            <div class="card-header">
                                <div class="card-icon-large">
                                    <i class="fas fa-history"></i>
                                </div>

                                <h3>{{ $aboutPage['title_1'] ?? __('about.About Darb') }}</h3>
                            </div>

                            <p>{{ $aboutPage['description_1'] ?? __('about.overview') }}</p>
                        </div>

                        <!-- 2. صف الفيديو + الرسالة -->
                        <div class="about-row">

                            <!-- الفيديو -->
                            <div class="about-card video-card" style="height: 218px;">
                                @if (!empty($aboutPage['image']))
                                    <video id="heroVideo" autoplay muted loop playsinline>
                                        <source src="{{ $aboutPage['image'] }}" type="video/mp4">
                                    </video>
                                @endif
                            </div>

                            <!-- الرؤية -->
                            <div class="about-card" style="height: 218px;">
                                <div class="card-header">
                                    <div class="card-icon-large">
                                        <i class="{{ $aboutPage['icon'] }}"></i>
                                    </div>
                                    <h3>{{ $aboutPage['title_2'] ?? __('about.Vision') }}</h3>
                                </div>
                                <!-- <div class="card-icon-large"><i class="{{ $aboutPage['icon'] }}"></i></div>
                                    <h3>{{ $aboutPage['title_2'] ?? __('about.Vision') }}</h3> -->
                                <p>{{ $aboutPage['description_2'] ?? __('about.vision') }}</p>
                            </div>

                        </div>

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

            <section id="values" class="content-section">
                <div class=" " style="padding: 5px 10px;">
                    <div class="breadcrumb">
                        <a href="{{ route('components/home') }}">{{ __('about.breadcrumb.home') }}</a>
                        <span>/</span>
                        <a href="#" onclick="showSection('about'); return false;">{{ __('about.breadcrumb.about_us') }}</a>
                        <span>/</span>
                        <span>{{ __('about.breadcrumb.values') }}</span>
                    </div>

                    <div class="section-header">
                        <h1 class="custom-title">{{ __('about.our_core_values') }}</h1>
                        <p style="margin-bottom: 10px;">
                            {{ __('about.values_description') }}
                        </p>
                    </div>

                    <div class="character-container">
                        <div class="row align-items-center {{ app()->getLocale() == 'ar' ? 'rtl-flex' : 'ltr-flex' }}">
                            <!-- الكروت (9 أعمدة) -->
                            <div class="col-12 col-lg-9">
                                <div class="values-container">

                                    @foreach($coreValues as $value)
                                        <div class="value-card">

                                            <span class="icon">
                                                <img style="width:50px"
                                                    src="{{ $value['image_url'] ?? asset('images/11.png') }}">
                                            </span>

                                            <h3>{{ $value['title'] }}</h3>
                                            <p>{{ $value['description'] }}</p>

                                        </div>
                                    @endforeach

                                </div>
                            </div>

                            <!-- الصورة (3 أعمدة) -->
                            <div class="col-12 col-lg-3 text-center">
                                <div class="character"></div>
                            </div>

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

            <!-- قسم: إنجازاتنا - عداد الوقود -->
            <section id="achievements" class="content-section">
                <div class=" ">
                    <div class="breadcrumb">
                        <a href="{{ route('components/home') }}">{{ __('about.breadcrumb.home') }}</a>
                        <span>/</span>
                        <a href="#" onclick="showSection('about'); return false;">{{ __('about.breadcrumb.about_us') }}</a>
                        <span>/</span>
                        <span>{{ __('about.breadcrumb.our_history') }}</span>
                    </div>

                    <!-- عداد الوقود -->
                    <div class="gauge-container">

                        <!-- بطاقة الإنجاز - فوق العداد -->
                        <div class="achievement-card active" id="achievementCard">
                            <div class="achievement-content" id="achievementContent">
                                <div class="achievement-year" id="achievementYear">2007</div>
                                <div class="achievement-title" id="achievementTitle">{{ __('about.history.2007.title') }}
                                </div>
                                <div class="achievement-desc" id="achievementDesc">
                                    {{ __('about.history.2007.description') }}
                                </div>
                            </div>
                        </div>

                        <!-- عداد الوقود -->
                        <div class="fuel-gauge" id="fuelGauge">
                            <div class="gauge-pump-icon"><i class="fas fa-gas-pump"></i></div>
                            <div class="gauge-marks" id="gaugeMarks"></div>
                            <span class="gauge-label empty">تأسيس درب</span>
                            <span class="gauge-label full">رؤية طموحة</span>

                            <div class="gauge-needle" id="gaugeNeedle">
                                <div class="needle-body"></div>
                            </div>

                            <div class="gauge-center"></div>
                            <div id="yearLabels"></div>
                        </div>

                        <!-- أزرار التنقل -->
                        <!-- <div class="gauge-nav-buttons">
                                                                                                                            <button class="gauge-nav-btn" id="prevBtn" onclick="prevAchievement()">
                                                                                                                                <i class="fas fa-chevron-right"></i>
                                                                                                                            </button>
                                                                                                                            <button class="gauge-nav-btn" id="nextBtn" onclick="nextAchievement()">
                                                                                                                                <i class="fas fa-chevron-left"></i>
                                                                                                                            </button>
                                                                                                                        </div> -->

                        <!-- مؤشرات النقاط -->
                        <div class="gauge-dots" id="gaugeDots"></div>
                    </div>
                </div>
            </section>

            <!-- قسم: رسالة رئيس مجلس الإدارة -->
            <section id="chairman" class="content-section">
                <div class=" ">
                    <div class="breadcrumb">
                        <a href="{{ route('components/home') }}">{{ __('about.breadcrumb.home') }}</a>
                        <span>/</span>
                        <a href="#" onclick="showSection('about'); return false;">{{ __('about.breadcrumb.about_us') }}</a>
                        <span>/</span>
                        <span>
                            {{ $ceoData['title'] ?? 'كلمة الرئيس التنفيذي' }}
                        </span>
                    </div>

                    <div class="section-header">
                        <h1 class="custom-title">
                            {{ $ceoData['title'] ?? __('about.CEO.Message') }}
                        </h1>
                    </div>

                    <div class="message-container">
                        <div class="person-img chairman-img" @if (!empty($ceoData['image_url']))
                        style="background-image: url('{{ $ceoData['image_url'] }}')" @endif>
                        </div>

                        <div class="message-text">
                            {{-- <h3>{{ __('about.CEO.position') }}</h3> --}}
                            <div class="quote">
                                {{ $ceoData['statement'] ?? __('about.CEO.word') }}
                            </div>
                            <div class="signature">
                                {{ $ceoData['name'] ?? __('about.CEO.name') }}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- قسم 8: أعضاء مجلس الإدارة -->
            <section id="board" class="content-section">
                <div class=" ">
                    <div class="breadcrumb">
                        <a href="{{ route('components/home') }}">الرئيسية</a>
                        <span>/</span>
                        <a href="#" onclick="showSection('about'); return false;">من نحن</a>
                        <span>/</span>
                        <span>أعضاء مجلس الإدارة</span>
                    </div>
                    <div class="section-header">
                        <h1 class="custom-title">أعضاء مجلس الإدارة</h1>
                    </div>
                    <div class="values-container team">
                        <div class="value-card">
                            <div class="member-photo" style="background-image: url('{{ asset('images/character.png') }}')">
                            </div>
                            <h3>أ. محمد أسعد</h3>
                            <p>عضو مجلس إدارة مستقل</p>
                        </div>
                        <div class="value-card">
                            <div class="member-photo" style="background-image: url('{{ asset('images/character.png') }}')">
                            </div>
                            <h3>أ. محمد أسعد</h3>
                            <p>عضو مجلس إدارة مستقل</p>
                        </div>
                        <div class="value-card">
                            <div class="member-photo" style="background-image: url('{{ asset('images/character.png') }}')">
                            </div>
                            <h3>أ. محمد أسعد</h3>
                            <p>عضو مجلس إدارة مستقل</p>
                        </div>
                        <div class="value-card">
                            <div class="member-photo" style="background-image: url('{{ asset('images/character.png') }}')">
                            </div>
                            <h3>أ. محمد أسعد</h3>
                            <p>عضو مجلس إدارة مستقل</p>
                        </div>
                        <div class="value-card">
                            <div class="member-photo" style="background-image: url('{{ asset('images/character.png') }}')">
                            </div>
                            <h3>أ. محمد أسعد</h3>
                            <p>عضو مجلس إدارة مستقل</p>
                        </div>
                    </div>
                </div>
            </section>

            @include('partials.footerPages')

        </main>
    </div>

    @push('scripts')
        <script>
            // ========== التنقل بين الأقسام ==========
            function showSection(sectionId) {
                document.querySelectorAll('.content-section').forEach(section => {
                    section.classList.remove('active');
                });

                document.querySelectorAll('.sidebar-nav-btn').forEach(btn => {
                    btn.classList.remove('active');
                });

                const targetSection = document.getElementById(sectionId);
                if (targetSection) {
                    targetSection.classList.add('active');
                }

                const sectionIndex = {
                    'about': 0,
                    'values': 1,
                    'achievements': 2,
                    'governance': 3,
                    'reports': 4,
                    'chairman': 5,
                    'ceo': 6,
                    'board': 7
                };

                const navBtns = document.querySelectorAll('.sidebar-nav-btn');
                if (navBtns[sectionIndex[sectionId]]) {
                    navBtns[sectionIndex[sectionId]].classList.add('active');
                }

                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });

                // تهيئة عداد الوقود إذا كان قسم الإنجازات
                if (sectionId === 'achievements' && !gaugeInitialized) {
                    initGauge();
                }
            }

            // ========== عداد الوقود ==========
            const achievements = @json($achievementsData ?? []);

            let currentIndex = 0;
            let gaugeInitialized = false;
            const totalAchievements = achievements.length;

            function initGauge() {
                if (!achievements.length) {
                    return; // لو ما فيه بيانات من الـ API، لا نغيّر شيء على العداد (يبقى على النصوص الافتراضية)
                }
                createGaugeMarks();
                createGaugeDots();
                updateGaugeDisplay();
                gaugeInitialized = true;
            }

            function createGaugeMarks() {
                const marksContainer = document.getElementById('gaugeMarks');
                const yearLabelsContainer = document.getElementById('yearLabels');

                if (!marksContainer || !yearLabelsContainer || !totalAchievements) return;

                marksContainer.innerHTML = '';
                yearLabelsContainer.innerHTML = '';

                const startAngle = -60;
                const endAngle = 60;
                const angleRange = endAngle - startAngle;

                achievements.forEach((achievement, index) => {
                    const angle = (totalAchievements === 1) ?
                        0 :
                        startAngle + (angleRange / (totalAchievements - 1)) * index;

                    const mark = document.createElement('div');
                    mark.className = 'gauge-mark major';
                    mark.style.transform = `rotate(${angle}deg) translateY(-90px)`;
                    mark.dataset.index = index;
                    mark.onclick = () => goToAchievement(index);
                    marksContainer.appendChild(mark);

                    const yearLabel = document.createElement('div');
                    yearLabel.className = 'year-label';
                    yearLabel.textContent = achievement.year;
                    yearLabel.dataset.index = index;
                    yearLabel.onclick = () => goToAchievement(index);

                    const labelRadius = 160;
                    const labelAngle = (angle - 90) * (Math.PI / 180);

                    const isMobile = window.innerWidth <= 768;
                    const offsetX = isMobile ? -10 : -7; // 👈 عدل القيم هنا
                    const x = 190 + labelRadius * Math.cos(labelAngle) + offsetX;
                    const y = 200 + labelRadius * Math.sin(labelAngle);

                    yearLabel.style.left = `${x}px`;
                    yearLabel.style.top = `${y - 100}px`;
                    yearLabel.style.transform = 'translate(-50%, -50%)';

                    yearLabelsContainer.appendChild(yearLabel);
                });
            }

            function createGaugeDots() {
                const dotsContainer = document.getElementById('gaugeDots');
                if (!dotsContainer || !achievements.length) return;

                dotsContainer.innerHTML = '';
                achievements.forEach((_, index) => {
                    const dot = document.createElement('div');
                    dot.className = 'gauge-dot';
                    dot.dataset.index = index;
                    dot.onclick = () => goToAchievement(index);
                    dotsContainer.appendChild(dot);
                });
            }

            function updateGaugeDisplay() {
                if (!achievements.length) return;

                const achievement = achievements[currentIndex];

                const startAngle = -60;
                const endAngle = 60;
                const angleRange = endAngle - startAngle;
                const needleAngle = (totalAchievements === 1) ?
                    0 :
                    startAngle + (angleRange / (totalAchievements - 1)) * currentIndex;

                const needle = document.getElementById('gaugeNeedle');
                if (needle) {
                    needle.style.transform = `translateX(-50%) rotate(${needleAngle}deg)`;
                }

                const content = document.getElementById('achievementContent');
                if (content) {
                    content.style.animation = 'none';
                    content.offsetHeight;
                    content.style.animation = 'fadeInAchievement 0.5s ease forwards';
                }

                const yearEl = document.getElementById('achievementYear');
                const titleEl = document.getElementById('achievementTitle');
                const descEl = document.getElementById('achievementDesc');

                if (yearEl) yearEl.textContent = achievement.year;
                if (titleEl) titleEl.textContent = achievement.title;
                if (descEl) descEl.textContent = achievement.desc;

                document.querySelectorAll('.gauge-mark.major').forEach((mark, index) => {
                    mark.classList.toggle('active', index === currentIndex);
                });

                document.querySelectorAll('.year-label').forEach((label, index) => {
                    label.classList.toggle('active', index === currentIndex);
                });

                document.querySelectorAll('.gauge-dot').forEach((dot, index) => {
                    dot.classList.toggle('active', index === currentIndex);
                });

                const prevBtn = document.getElementById('prevBtn');
                const nextBtn = document.getElementById('nextBtn');
                if (prevBtn) prevBtn.disabled = currentIndex === 0;
                if (nextBtn) nextBtn.disabled = currentIndex === totalAchievements - 1;
            }

            function nextAchievement() {
                if (currentIndex < totalAchievements - 1) {
                    currentIndex++;
                    updateGaugeDisplay();
                }
            }

            function prevAchievement() {
                if (currentIndex > 0) {
                    currentIndex--;
                    updateGaugeDisplay();
                }
            }

            function goToAchievement(index) {
                currentIndex = index;
                updateGaugeDisplay();
            }

            // التنقل بلوحة المفاتيح
            document.addEventListener('keydown', function (e) {
                const achievementsSection = document.getElementById('achievements');
                if (achievementsSection && achievementsSection.classList.contains('active')) {
                    if (e.key === 'ArrowLeft') {
                        nextAchievement();
                    } else if (e.key === 'ArrowRight') {
                        prevAchievement();
                    }
                }
            });

            // تحميل الصفحة
            document.addEventListener('DOMContentLoaded', function () {
                showSection('about');
            });
        </script>
        <script src="{{ asset('js/script.js') }}"></script>
    @endpush


@endsection