@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-unified-grid {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 20px;
        }

        /* تنسيق الكارت الموحد لجميع العناصر */
        .about-card {
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
            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: 110px;
            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;
            height: 218px;
        }

        .about-card video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
            pointer-events: none;
        }

        /* إخفاء أزرار تحكم المتصفح */
        .about-card video::-webkit-media-controls {
            display: none !important;
        }

        /* تنسيق النصوص والأيقونات داخل الكروت */
        .card-header {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-icon-large {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--accent-orange, #e57e3a);
        }

        .about-card h3 {
            color: #fff;
            font-size: 20px;
            margin: 0;
        }

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

        .about-image {
            width: 100%;
        }

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

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

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

        /* استجابة للجوال */
        @media (max-width: 768px) {
            .about-unified-grid {
                padding-bottom: 50px !important;
            }

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

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

            .values-container {
                display: grid;
                grid-template-columns: 1fr;
                gap: 20px;
                padding-bottom: 40px !important;
            }

            .value-card {
                width: 100%;
                margin-bottom: 15px;
            }

            .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;
            }
        }

        /* --- تنسيق شبكة الخدمات --- */
        .services-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        .service-card {
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: calc(25% - 15px);
            min-height: 160px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

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

        .service-card .card-icon-large {
            font-size: 2.5rem;
            margin-bottom: 15px;
            height: 50px;
        }

        .service-card .card-icon-large img {
            max-width: 100%;
            max-height: 50px;
            object-fit: contain;
        }

        .service-card h3 {
            color: #fff;
            font-size: 16px;
            margin: 0;
            font-weight: bold;
        }

        @media (max-width: 992px) {
            .service-card { width: calc(33.333% - 14px); }
        }

        @media (max-width: 768px) {
            .service-card { width: calc(50% - 10px); }
        }

        @media (max-width: 480px) {
            .service-card { width: 100%; }
        }
    </style>
    @vite('resources/css/about.css')
@endpush


@section('content')

    <!-- القائمة الجانبية -->
    <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>

                    <!-- 3. خدماتنا -->
                    <div class="services-wrapper w-100 mt-4">
                        <div class="section-header">
                            <h1 class="custom-title">
                                {{ app()->getLocale() == 'ar' ? 'خدماتنا' : 'Our Services' }}
                            </h1>
                        </div>
                    </div>
                    <div class="services-grid" id="servicesGrid">
                        <!-- سيتم حقن الخدمات هنا من الـ API -->
                    </div>
                </div>

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

        <section id="values" 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.values') }}</span>
                </div>

                <div class="section-header">
                    <h1 class="custom-title">{{ $titleValues['title'] ?? __('about.our_core_values') }}</h1>
                    <p style="margin-bottom: 10px;">
                        {{ $titleValues['description'] ?? __('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" style="background-image: @if(!empty($titleValues['photo'])) url('{{ $titleValues['photo'] }}') @else none @endif !important;"></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">
    {{ __('about.foundation_path') }}
</span>

<span class="gauge-label full">
    {{ __('about.ambitious_vision') }}
</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="signature">
                            {{ $ceoData['name'] ?? __('about.CEO.name') }}
                        </div>
                        <div class="quote">
                            {{ $ceoData['statement'] ?? __('about.CEO.word') }}
                        </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>


    @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');
                    targetSection.scrollTop = 0; // إعادة السكرول للسكشن للأعلى
                }

                // إعادة الهيدر للوضع الشفاف عند الانتقال لسكشن جديد
                const mainHeader = document.querySelector('.main-header');
                if (mainHeader) {
                    mainHeader.classList.remove('scrolled');
                }

                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') {
                    currentIndex = 0; // يرجع دائماً لأول عام
                    if (!gaugeInitialized) {
                        initGauge();
                    } else {
                        updateGaugeDisplay();
                    }
                }
            }

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

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

            function initGauge() {
                if (!achievements.length) {
                    return; 
                }
                // ضمان ترتيب البيانات كرونولوجياً (من الأقدم للأحدث) لتتوافق مع العداد
                achievements.sort((a, b) => parseInt(a.year) - parseInt(b.year));
                
                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 = `translateX(-50%) 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();
                    }
                }
            });

            // ========== تحريك العداد عند الظهور ==========
            let gaugeAnimated = false;

            function animateGaugeOnScroll() {
                const section = document.getElementById('achievements');
                if (!section) return;

                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting && !gaugeAnimated) {
                            if (!gaugeInitialized) {
                                initGauge();
                            }
                            
                            // ننتظر قليلاً ثم نبدأ التحريك من النهاية للبداية (يتصفر)
                            // ننتظر قليلاً ثم نبدأ التحريك (مسح كامل للعداد ثم العودة للبداية)
                            setTimeout(() => {
                                // 1. اذهب للنهاية بسرعة
                                currentIndex = totalAchievements - 1;
                                updateGaugeDisplay();
                                
                                // 2. عد للبداية (2007)
                                setTimeout(() => {
                                    let currentStep = totalAchievements - 1;
                                    const interval = setInterval(() => {
                                        if (currentStep > 0) {
                                            currentStep--;
                                            goToAchievement(currentStep);
                                        } else {
                                            clearInterval(interval);
                                        }
                                    }, 150); // سرعة العودة سريعة وجذابة
                                }, 1000); 
                            }, 1000);

                            gaugeAnimated = true;
                        }
                    });
                }, { threshold: 0.3 });

                observer.observe(section);
            }

            // تحميل الصفحة
            document.addEventListener('DOMContentLoaded', function () {
                showSection('about');
                fetchServices();
                fetchTitleValues();
                animateGaugeOnScroll();
            });

            // جلب الخدمات من الـ API
            async function fetchServices() {
                try {
                    const response = await fetch('https://darbcp.sys.newtouch.sa/api/pages/services');
                    const json = await response.json();

                    if (json && json.data) {
                        const servicesGrid = document.getElementById('servicesGrid');
                        const lang = '{{ app()->getLocale() }}';

                        servicesGrid.innerHTML = json.data.map(service => {
                            // فك ترميز الاسم حسب اللغة الحالية
                            let serviceName = '';
                            try {
                                const names = JSON.parse(service.service_name);
                                serviceName = names[lang] || names['ar'] || '';
                            } catch (e) {
                                serviceName = service.service_name || '';
                            }

                            // تجهيز الصورة والآيقونة المؤقتة
                            let iconHtml = '';
                            if (service.photo) {
                                // إذا كانت الصورة موجودة
                                iconHtml = `<img src="${service.photo}" alt="${serviceName}">`;
                            } else {
                                // تفريغ الصورة لكي تكون جاهزة مستقبلاً بالكود، مع وضع أيقونة مناسبة كبديل حالي
                                let fallbackIcon = 'fa-concierge-bell';
                                if (service.id == 1) fallbackIcon = 'fa-gas-pump'; // وقود
                                else if (service.id == 2) fallbackIcon = 'fa-utensils'; // مطاعم
                                else if (service.id == 3) fallbackIcon = 'fa-coffee'; // كافيهات
                                else if (service.id == 4) fallbackIcon = 'fa-shopping-cart'; // سوبرماركت
                                else if (service.id == 5) fallbackIcon = 'fa-money-bill-wave'; // صرافات
                                else if (service.id == 6) fallbackIcon = 'fa-building'; // مرافق عامة

                                iconHtml = `<img src="" class="d-none" data-placeholder="true" alt="${serviceName}">
                                                            <i class="fas ${fallbackIcon}"></i>`;
                            }

                            return `
                                                <div class="service-card">
                                                    <div class="card-icon-large">
                                                        ${iconHtml}
                                                    </div>
                                                    <h3>${serviceName}</h3>
                                                </div>
                                            `;
                        }).join('');
                    }
                } catch (error) {
                    console.error('Error fetching services:', error);
                }
            }

            // جلب عنوان وصورة قسم القيم من الـ API
            async function fetchTitleValues() {
                try {
                    const response = await fetch('https://darbcp.sys.newtouch.sa/api/pages/title-values');
                    const json = await response.json();
                    console.log('Title-Values API response:', json);

                    if (json && json.data && json.data.length > 0) {
                        const valData = json.data[0];
                        const lang = '{{ app()->getLocale() }}';

                        // العنوان
                        let title = '';
                        if (valData.title) {
                            if (typeof valData.title === 'object') {
                                title = valData.title[lang] || valData.title['ar'] || '';
                            } else {
                                try {
                                    const parsed = JSON.parse(valData.title);
                                    title = parsed[lang] || parsed['ar'] || '';
                                } catch (e) {
                                    title = valData.title;
                                }
                            }
                        }

                        // الوصف
                        let description = '';
                        if (valData.description) {
                            if (typeof valData.description === 'object') {
                                description = valData.description[lang] || valData.description['ar'] || '';
                            } else {
                                try {
                                    const parsed = JSON.parse(valData.description);
                                    description = parsed[lang] || parsed['ar'] || '';
                                } catch (e) {
                                    description = valData.description;
                                }
                            }
                        }

                        // الصورة - معالجة كافة الهياكل المحتملة (نص، كائن، مصفوفة، JSON)
                        let photoUrl = '';
                        if (valData.photo) {
                            if (typeof valData.photo === 'string') {
                                if (valData.photo.trim().startsWith('{') || valData.photo.trim().startsWith('[')) {
                                    try {
                                        const parsed = JSON.parse(valData.photo);
                                        photoUrl = parsed.url || parsed.path || parsed.image || (Array.isArray(parsed) ? parsed[0] : '');
                                    } catch (e) {
                                        photoUrl = valData.photo;
                                    }
                                } else {
                                    photoUrl = valData.photo;
                                }
                            } else if (typeof valData.photo === 'object') {
                                photoUrl = valData.photo.url || valData.photo.path || valData.photo.image || (Array.isArray(valData.photo) ? valData.photo[0] : '');
                            }
                        }

                        console.log('Extracted values:', { title, description, photoUrl });

                        // تحديث عناصر الصفحة
                        const titleEl = document.querySelector('#values .section-header h1');
                        const descEl = document.querySelector('#values .section-header p');
                        const characterEl = document.querySelector('#values .character');

                        if (titleEl && title) titleEl.textContent = title;
                        if (descEl && description) descEl.textContent = description;
                        if (characterEl) {
                            if (photoUrl) {
                                characterEl.style.backgroundImage = `url("${photoUrl}")`;
                            } else {
                                characterEl.style.backgroundImage = 'none';
                            }
                        }
                    }
                } catch (error) {
                    console.error('Error fetching title-values:', error);
                }
            }
        </script>
        <script src="{{ asset('js/script.js') }}"></script>
    @endpush

@endsection