<?php get_header(); ?>

    <!-- ============================================================
        1. HERO SECTION
        ============================================================ -->
    <section id="hero" aria-label="قسم الرئيسي">
        <div class="hero-bg"></div>
        <!-- Glow blobs -->
        <div class="glow-ball glow-blue" aria-hidden="true"></div>
        <div class="glow-ball glow-pink" aria-hidden="true"></div>

        <!-- Static nav header -->
        <div class="hero-static-nav">
            <div class="container-custom">
                <div class="hero-animate d-flex justify-content-between align-items-center" data-delay="0"
                     style="opacity:0;">
                    <!-- Logo -->
                    <div class="logo-wrap">
                        <a href="<?php echo home_url(); ?>" class='li'>
                            <img class="img-fluid" alt="<?php echo bloginfo('title') ?>"
                                 title="<?php echo bloginfo('title') ?>" src="<?php the_field('logo', 'option') ?>">
                        </a>
                        <a href="<?php echo home_url(); ?>" class='dr'>
                            <img class="img-fluid" alt="<?php echo bloginfo('title') ?>"
                                 title="<?php echo bloginfo('title') ?>" src="<?php the_field('logo-dark', 'option') ?>">
                        </a>
                    </div>
                    <!-- Actions -->
                    <div class="d-flex align-items-center" style="gap:0.75rem;">
                        <button class="theme-toggle" aria-label="تبديل الوضع">
                            <div class="toggle-track">
                                <div class="toggle-thumb">
                                    <span class="toggle-icon">🌙</span>
                                </div>
                            </div>
                            <span class="toggle-label d-none d-md-inline">الوضع الفاتح</span>
                        </button>
                        <button class="btn-primary open-form d-none d-md-inline-flex py-2 px-4"
                                style="font-size:0.875rem;" aria-label="احجز استشارتك">
                            احجز استشارتك
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Hero Content -->
        <div class="position-relative" style="z-index:10;">
            <div class="container-custom">
                <div class="text-center" style="padding:5rem 0 4rem; max-width:56rem; margin:0 auto;">

                    <!-- Badge -->
                    <div class="hero-animate" data-delay="100" style="opacity:0;">
                        <div class="hero-badge d-inline-flex">
                            <span class="badge-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-4 h-4 text-[#F59E0B]"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>
                            </span>
                            <span><?php the_field('fir-tit', 'option') ?></span>
                        </div>
                    </div>

                    <!-- Headline -->
                    <div class="hero-animate" data-delay="200" style="opacity:0;">
                        <h1 class="hero-headline">
                            <?php the_field('sec-tit', 'option') ?>
                            <br/>
                            <span class="gradient-text"><?php the_field('thre-tit', 'option') ?></span>
                        </h1>
                    </div>

                    <!-- Subheadline -->
                    <div class="hero-animate" data-delay="300" style="opacity:0;">
                        <p class="hero-sub">
                            <?php the_field('cont-tit', 'option') ?>
                        </p>
                    </div>

                    <!-- CTA Buttons -->
                    <div class="hero-animate" data-delay="400" style="opacity:0;">
                        <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center align-items-center mb-4">
                            <button class="btn-primary open-form  w-sm-auto" aria-label="احجز استشارة مجانية">
                                احجز استشارة مجانية
                            </button>
                        </div>
                    </div>

                    <!-- Trust Indicators -->
                    <?php if (get_field('add-hero', 'option')): ?>
                        <div class="hero-animate" data-delay="500" style="opacity:0;">
                            <div class="trust-badges">

                                <?php while (has_sub_field('add-hero', 'option')): ?>
                                    <div class="trust-item">
                                        <?php if ($img = get_sub_field('img', 'option')) : ?>
                                            <img src="<?php echo esc_url($img['url']); ?>"
                                                 alt="<?php echo esc_attr($img['alt'] ?: get_bloginfo('name')); ?>"
                                                 title="<?php echo esc_attr($img['title'] ?: get_bloginfo('name')); ?>"
                                                 class="img-fluid" loading="lazy">
                                        <?php endif; ?>
                                        <span><?php the_sub_field('content', 'option') ?></span>
                                    </div>
                                <?php endwhile; ?>


                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Scroll Indicator -->
        <div class="scroll-indicator" aria-hidden="true">
            <div class="scroll-dot"></div>
        </div>
    </section>
    <!-- ============================================================
          2. CLIENT LOGOS SECTION
          ============================================================ -->
<?php
$args = array(
        'post_type' => 'partner',
        'order' => 'ASC',
        'posts_per_page' => -1,
);
$loop = new WP_Query($args);
if ($loop->have_posts()) {
    ?>
    <section id="client-logos" class="section-divider" aria-label="شركاؤنا">
        <div class="section-bg"></div>
        <div class="position-relative" style="z-index:10;">
            <div class="container-custom">

                <!-- Header -->
                <div class="text-center mb-4 reveal">
                    <div class="d-inline-flex align-items-center"
                         style="gap:0.5rem; padding:0.375rem 0.875rem; border-radius:999px; background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.2); margin-bottom:0.5rem;">
                        <span style="color:#F59E0B; font-size:0.8rem;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-3 h-3 text-[#F59E0B]"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>
                        </span>
                        <span style="font-size:0.75rem; color:#9CA3AF;"><?php the_field('fir-part', 'option') ?></span>
                    </div>
                    <h2 class="section-title" style="font-size:1.4rem;">
                        <span class="gradient-text-blue-pink"><?php the_field('sec-part', 'option') ?></span>
                    </h2>
                </div>

                <!-- Carousel -->
                <div class="carousel-track-wrapper reveal reveal-delay-2">
                    <div class="carousel-fade-right" aria-hidden="true"></div>
                    <div class="carousel-fade-left" aria-hidden="true"></div>
                    <div class="overflow-hidden">
                        <div class="logos-track" role="list" aria-label="شعارات العملاء">
                            <!-- Set 1 -->
                            <?php $i = 1;
                            while ($loop->have_posts()) : $loop->the_post(); ?>
                                <div class="logo-card" role="listitem" title="<?php the_title(); ?>">
                                    <?php $id = get_post_thumbnail_id(); ?>
                                    <img src="<?= esc_url(get_the_post_thumbnail_url(null, 'full')); ?>"
                                         alt="<?= esc_attr(get_post_meta($id, '_wp_attachment_image_alt', true) ?: get_the_title()); ?>"
                                         title="<?= esc_attr(get_the_title($id) ?: get_the_title()); ?>"
                                         class="img-fluid" loading="lazy">
                                </div>
                                <?php $i++; endwhile; ?>
                        </div>
                    </div>
                </div>

                <!-- Stats Pills -->
                <?php if (get_field('feat-part', 'option')): ?>
                    <div class="stats-pills reveal reveal-delay-3">
                        <?php while (has_sub_field('feat-part', 'option')): ?>
                            <div class="stat-pill">
                                <span class="stat-num"><?php the_sub_field('num', 'option') ?></span>
                                <span><?php the_sub_field('tit', 'option') ?></span>
                            </div>
                        <?php endwhile; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </section>
<?php }
wp_reset_postdata(); ?>
    <!-- ============================================================
           3. PROBLEM SECTION
           ============================================================ -->
    <section id="problem" class="section-divider" aria-labelledby="problem-heading">
        <div class="section-bg"></div>
        <div class="position-relative" style="z-index:10;">
            <div class="container-custom py-4">
                <div class="row align-items-center" style="gap:0 0;">

                    <!-- Right: Header -->
                    <div class="col-lg-4 mb-4 mb-lg-0 reveal from-right">
                        <div class="d-inline-flex align-items-center section-badge badge-red mb-3">
                            <span style="font-size:0.8rem;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                 height="24" viewBox="0 0 24 24" fill="none"
                                                                 stroke="currentColor" stroke-width="2"
                                                                 stroke-linecap="round" stroke-linejoin="round"
                                                                 class="lucide lucide-circle-alert w-3.5 h-3.5 text-red-500"><circle
                                            cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line
                                            x1="12" x2="12.01" y1="16" y2="16"></line></svg>
                            </span>
                            <span>تحذير</span>
                        </div>
                        <h2 class="section-title" id="problem-heading">
                            <?php the_field('fir-war', 'option') ?> <span style="background:linear-gradient(90deg,#EF4444,#F97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;"><?php the_field('sec-war', 'option') ?></span>
                        </h2>
                        <p class="section-desc" style="max-width:none; margin:0; font-size:1rem;">
                            <?php the_field('ther-war', 'option') ?>
                        </p>
                    </div>

                    <!-- Left: Problem Grid -->
                    <?php if (get_field('war', 'option')): ?>
                    <div class="col-lg-8 reveal from-left reveal-delay-2">
                        <div class="row" style="gap:0.75rem 0; margin:0 -0.375rem;">
                            <?php while (has_sub_field('war', 'option')): ?>
                            <div class="col-6 col-md-4 px-2 mb-3">
                                <div class="problem-card reveal reveal-delay-1">
                                    <div class="problem-icon-box">
                                        <?php if ( $img = get_sub_field('image', 'option') ) : ?>
                                            <img src="<?php echo esc_url( $img['url'] ); ?>"
                                                 alt="<?php echo esc_attr( $img['alt'] ?: get_bloginfo('name') ); ?>"
                                                 title="<?php echo esc_attr( $img['title'] ?: get_bloginfo('name') ); ?>"
                                                 class="img-fluid" loading="lazy">
                                        <?php endif; ?>
                                    </div>
                                    <h3>
                                        <?php the_sub_field('title', 'option') ?>
                                    </h3>
                                    <p>
                                        <?php the_sub_field('content', 'option') ?>
                                    </p>
                                </div>
                            </div>
                            <?php endwhile; ?>
                        </div>
                    </div>

                </div>
                <?php endif; ?>
                <!-- Bottom CTA Text -->
                <div class="reveal reveal-delay-4">
                    <p class="bottom-cta-text">
                        <?php the_field('four-war', 'option') ?>    <span class="gradient-text-blue-pink"><?php the_field('last-war', 'option') ?></span>
                    </p>
                </div>

            </div>
        </div>
    </section>
    <!-- ============================================================
          4. SOLUTION SECTION
          ============================================================ -->
    <section id="solution" class="section-divider" aria-labelledby="solution-heading">
        <div class="section-bg"></div>
        <div class="glow-left" aria-hidden="true"></div>
        <div class="glow-right" aria-hidden="true"></div>
        <div class="position-relative" style="z-index:10;">
            <div class="container-custom py-4">

                <!-- Header -->
                <div class="text-center mb-5 reveal">
                    <div class="d-inline-flex align-items-center section-badge badge-blue mb-3">
                        <span style="font-size:0.8rem;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2e6bff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap w-3.5 h-3.5 text-[#2E6BFF]"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
                        </span>
                        <span>منهجيتنا</span>
                    </div>
                    <h2 class="section-title" id="solution-heading">
                        <span class="gradient-text"><?php the_field('fir-soul', 'option') ?></span>
                    </h2>
                    <p class="section-desc"><?php the_field('sec-soul', 'option') ?></p>
                </div>
                <?php if (get_field('soul', 'option')): ?>
                <!-- Desktop Timeline -->
                <div class="solution-timeline reveal reveal-delay-2" aria-label="مراحل العمل">
                    <div class="timeline-line" aria-hidden="true"></div>
                    <div class="row">
                        <?php $i = 1; while (has_sub_field('soul', 'option')): ?>
                        <div class="col-3">
                            <div class="solution-step">
                                <div class="step-number" aria-hidden="true"><?php echo $i ?></div>
                                <div class="step-node blue mx-auto mb-4">
                                    <?php if ( $img = get_sub_field('image', 'option') ) : ?>
                                        <img src="<?php echo esc_url( $img['url'] ); ?>"
                                             alt="<?php echo esc_attr( $img['alt'] ?: get_bloginfo('name') ); ?>"
                                             title="<?php echo esc_attr( $img['title'] ?: get_bloginfo('name') ); ?>"
                                             class="img-fluid" loading="lazy">
                                    <?php endif; ?>
                                </div>
                                <div class="step-title"><?php the_sub_field('title', 'option') ?></div>
                                <div class="step-desc"><?php the_sub_field('content', 'option') ?></div>
                                <div class="process-arrow" aria-hidden="true">›</div>
                            </div>
                        </div>
                        <?php $i++; endwhile; ?>
                    </div>
                </div>

                <!-- Mobile Swipe Cards -->
                <div class="solution-mobile reveal reveal-delay-2" aria-label="مراحل العمل للجوال">
                    <div class="solution-mobile-track">
                        <?php $i = 1; while (has_sub_field('soul', 'option')): ?>
                        <div class="solution-mobile-card">
                            <div class="step-node blue mb-3" style="width:3.5rem;height:3.5rem;font-size:1.25rem;">
                                <?php if ( $img = get_sub_field('image', 'option') ) : ?>
                                    <img src="<?php echo esc_url( $img['url'] ); ?>"
                                         alt="<?php echo esc_attr( $img['alt'] ?: get_bloginfo('name') ); ?>"
                                         title="<?php echo esc_attr( $img['title'] ?: get_bloginfo('name') ); ?>"
                                         class="img-fluid" loading="lazy">
                                <?php endif; ?>
                            </div>
                            <span class="d-flex w-5 h-5 align-items-center justify-content-center rounded-circle mb-2" style="width:1.25rem;height:1.25rem;background:rgba(255,255,255,0.1);font-size:0.75rem;font-weight:700;"><?php echo $i ?></span>
                            <div class="step-title" style="font-size:1rem;"><?php the_sub_field('title', 'option') ?></div>
                            <div class="step-desc"><?php the_sub_field('content', 'option') ?></div>
                        </div>
                        <?php $i++; endwhile; ?>
                    </div>
                    <p class="text-center mt-2" style="font-size:0.75rem;color:#6B7280;">← مرر لعرض المزيد</p>
                </div>
                <?php  endif; ?>
                <!-- Note Pill -->
                <div class="text-center reveal reveal-delay-5">
                    <div class="note-pill d-inline-flex">
                        <div class="pulse-dot" aria-hidden="true"></div>
                        <span><?php the_field('thir-soul', 'option') ?></span>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- ============================================================
           5. CASE STUDIES SECTION
           ============================================================ -->
<?php
$args = array(
        'post_type' => 'work',
        'order' => 'ASC',
        'posts_per_page' => 3,
);
$loop = new WP_Query($args);
if ($loop->have_posts()) {
    ?>
    <section id="case-studies" class="section-divider" aria-labelledby="case-heading">
        <div class="section-bg"></div>
        <div class="position-relative" style="z-index:10; opacity:0.3; pointer-events:none; position:absolute; inset:0;">
            <div style="position:absolute; top:25%; right:33%; width:24rem; height:24rem; border-radius:50%; filter:blur(150px); background:#2E6BFF;" aria-hidden="true"></div>
            <div style="position:absolute; bottom:25%; left:33%; width:24rem; height:24rem; border-radius:50%; filter:blur(150px); background:#D63384;" aria-hidden="true"></div>
        </div>

        <div class="position-relative" style="z-index:10;">
            <div class="container-custom py-4">

                <!-- Section Header -->
                <div class="text-center mb-5 reveal">
                    <div class="d-inline-flex align-items-center section-badge badge-blue mb-3">
                        <span style="font-size:0.8rem;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2e6bff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up w-3.5 h-3.5 text-[#2E6BFF]"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>
                        </span>
                        <span>نتائج حقيقية</span>
                    </div>
                    <h2 class="section-title" id="case-heading">
                        <?php the_field('main-tit-num', 'option') ?>  <span class="gradient-text"><?php the_field('sec-num', 'option') ?></span>
                    </h2>
                    <p class="section-desc"><?php the_field('main-cont-num', 'option') ?></p>
                </div>

                <!-- Case Study 1: E-commerce -->
                <?php $i = 1;
                while ($loop->have_posts()) : $loop->the_post(); ?>
                <div class="case-study-item new<?php echo $i;?> reveal">
                    <div class="case-image-wrap">
                        <div class="case-img-inner">
                            <?php $id = get_post_thumbnail_id(); ?>
                            <img src="<?= esc_url( get_the_post_thumbnail_url(null,'full') ); ?>"
                                 alt="<?= esc_attr( get_post_meta($id,'_wp_attachment_image_alt',true) ?: get_the_title() ); ?>"
                                 title="<?= esc_attr( get_the_title($id) ?: get_the_title() ); ?>"
                                 class="img-fluid" loading="lazy">
                            <div class="case-img-overlay"></div>
                            <div class="case-icon-badge" >
                                <?php if ( $img = get_field('icon-im') ) : ?>
                                    <img src="<?php echo esc_url( $img['url'] ); ?>"
                                         alt="<?php echo esc_attr( $img['alt'] ?: get_bloginfo('name') ); ?>"
                                         title="<?php echo esc_attr( $img['title'] ?: get_bloginfo('name') ); ?>"
                                         class="img-fluid" loading="lazy">
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    <div class="case-details">
                        <?php if (get_field('badges')): ?>
                        <div class="case-tags">
                            <?php while (has_sub_field('badges')): ?>
                            <span class="case-tag" ><?php the_sub_field('badge') ?></span>
                            <?php endwhile; ?>
                        </div>
                        <?php endif; ?>
                        <h3 class="case-title"><?php the_title(); ?></h3>
                        <p class="case-desc"><?php
                            echo wp_trim_words( get_the_content(), 88, ' ... ' );
                            ?></p>
                        <div class="case-result-badge">
                            <span style="color:#F59E0B;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up w-5 h-5 text-[#F59E0B]"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>
                            </span>
                            <span><?php the_field('gooal') ?></span>
                        </div>
                        <?php if (get_field('results')): ?>
                        <div class="metrics-grid">

                            <?php while (has_sub_field('results')): ?>
                            <div class="metric-card">
                                <div class="metric-value" ><?php the_sub_field('number') ?></div>
                                <div class="metric-label"><?php the_sub_field('title') ?></div>
                            </div>
                            <?php endwhile; ?>


                        </div>
                        <?php endif; ?>
                        <button class="btn-ghost btn-view-case"  data-panel="case-panel-<?php the_ID(); ?>" >
                            <span>عرض المشروع</span>
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="Currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left w-5 h-5 group-hover:translate-x-1 transition-transform duration-300"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>
                            </span>
                        </button>
                    </div>
                </div>
                    <?php $i++; endwhile; ?>

                <!-- Stats Grid -->
                <?php if (get_field('number', 'option')): ?>
                <div class="case-stats-grid reveal reveal-delay-4">
                    <?php $i = 1;
                    while (has_sub_field('number', 'option')): ?>
                    <div class="case-stat-item">
                        <div class="case-stat-value gradient-text"><?php the_sub_field('num-num', 'option') ?></div>
                        <div class="case-stat-label"><?php the_sub_field('tit-num', 'option') ?></div>
                    </div>
                        <?php $i++; endwhile; ?>

                </div>
                <?php endif; ?>
            </div>
        </div>
    </section>
    <div class="panel-overlay" id="panel-overlay" role="dialog" aria-modal="true" aria-labelledby="panel-title"></div>
    <?php $i = 1;
    while ($loop->have_posts()) : $loop->the_post(); ?>
        <div class="case-panel news<?php echo $i;?>" id="case-panel-<?php the_ID(); ?>" role="dialog" aria-modal="true" aria-labelledby="panel-title-<?php the_ID(); ?>">
        <div class="panel-header">
            <button class="panel-close" id="panel-close" aria-label="إغلاق">✕</button>
        </div>
        <div class="panel-body">

            <!-- Tags + Title + Desc -->
            <div class="mb-4">

                <?php if (get_field('badges')): ?>
                    <div class="case-tags">
                        <?php while (has_sub_field('badges')): ?>
                            <span class="case-tag" ><?php the_sub_field('badge') ?></span>
                        <?php endwhile; ?>
                    </div>
                <?php endif; ?>
                <h2 class="case-title panel-title" id="panel-title-<?php the_ID(); ?>">
                    <?php the_title(); ?>
                </h2>
                <p class="case-desc panel-desc">
                    <?php
                    echo wp_trim_words( get_the_content(), 88, ' ... ' );
                    ?>
                </p>
            </div>

            <!-- Challenge -->
            <div class="mb-4">
                <div class="panel-step">
                    <div class="panel-step-badge step-pink">1</div>
                    <h3>التحدي</h3>
                </div>
                <p class="panel-text panel-challenge-text">
                    <?php the_field('challenge') ?>
                </p>
            </div>

            <!-- Solution -->
        <?php if (get_field('solution')): ?>
            <div class="mb-4">
                <div class="panel-step">
                    <div class="panel-step-badge step-blue">2</div>
                    <h3>الحل</h3>
                </div>
                <div class="panel-solutions" style="padding-right:2.75rem;">

            <?php while (has_sub_field('solution')): ?>
                    <div class="solution-item">
                        <div class="solution-item-title "><?php the_sub_field('title') ?></div>
                        <div class="solution-item-desc"><?php the_sub_field('content') ?></div>
                    </div>
            <?php endwhile; ?>

                </div>
            </div>
        <?php endif; ?>
            <!-- Results -->
            <?php if (get_field('results')): ?>
            <div class="mb-4">
                <div class="panel-step">
                    <div class="panel-step-badge step-amber">3</div>
                    <h3>النتائج</h3>
                </div>
                <div class="panel-results">
        <?php while (has_sub_field('results')): ?>
                    <div class="result-card">
                        <div class="result-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check w-6 h-6 text-white"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>
                        </div>
                        <div>
                            <div class="result-value" ><?php the_sub_field('number') ?></div>
                            <div class="result-label"><?php the_sub_field('title') ?></div>
                            <div class="result-desc"><?php the_sub_field('content') ?></div>
                        </div>
                    </div>
        <?php endwhile; ?>
                </div>
            </div>
            <?php endif; ?>
            <!-- Visual Preview -->
            <div class="mb-4">
                <div class="panel-step mb-3">
                    <div class="panel-step-badge step-grad">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-4 h-4 text-white"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>
                    </div>
                    <h3>المعاينة</h3>
                </div>
                <div class="preview-label">
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#99a1af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor w-4 h-4"><rect width="20" height="14" x="2" y="3" rx="2"></rect><line x1="8" x2="16" y1="21" y2="21"></line><line x1="12" x2="12" y1="17" y2="21"></line></svg>
                    </span>
                    نسخة الديسكتوب</div>
                <div class="preview-img-wrap mb-3">
                    <?php if ( $img = get_field('desk-image') ) : ?>
                        <img class="panel-desktop-img"
                             src="<?php echo esc_url( $img['url'] ); ?>"
                             alt="<?php echo esc_attr( $img['alt'] ?: get_bloginfo('name') ); ?>"
                             title="<?php echo esc_attr( $img['title'] ?: get_bloginfo('name') ); ?>"
                             style="aspect-ratio:16/9;" loading="lazy" />
                    <?php endif; ?>

                </div>
                <div class="preview-label">
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#99a1af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone w-4 h-4"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg>
                    </span>
                    نسخة الجوال</div>
                <div class="preview-img-wrap" style="max-width:200px;margin:0 auto;">
                    <?php if ( $img = get_field('mob-image') ) : ?>
                        <img class="panel-mobile-img"
                             src="<?php echo esc_url( $img['url'] ); ?>"
                             alt="<?php echo esc_attr( $img['alt'] ?: get_bloginfo('name') ); ?>"
                             title="<?php echo esc_attr( $img['title'] ?: get_bloginfo('name') ); ?>"
                             style="aspect-ratio:9/16;" loading="lazy" />
                    <?php endif; ?>

                </div>
            </div>

            <!-- Panel CTA -->
            <div class="pt-2 pb-4">
                <div class="panel-cta-box">
                    <div class="panel-cta-glow" aria-hidden="true"></div>
                    <div class="position-relative">
                        <h3 style="font-size:1.5rem;font-weight:800;margin-bottom:0.75rem;">
                            حاب تحقق نفس <span class="gradient-text">النتائج؟</span>
                        </h3>
                        <p style="color:#9CA3AF;margin-bottom:1.5rem;">ابدأ مشروعك الآن واحصل على استشارة مجانية</p>
                        <button class="btn-primary open-form" id="panel-close-form" aria-label="ابدأ مشروعك الآن">
                            ابدأ مشروعك الآن
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up w-5 h-5 group-hover:translate-y-[-2px] transition-transform duration-300"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>
                            </span>
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <?php $i++; endwhile; ?>
<?php }
wp_reset_postdata(); ?>
    <!-- ============================================================
           6. TESTIMONIALS SECTION
           ============================================================ -->
<?php
$args = array(
        'post_type' => 'reviews',
        'order' => 'ASC',
        'posts_per_page' => 6,
);
$loop = new WP_Query($args);
if ($loop->have_posts()) {
    ?>
    <section id="testimonials" class="section-divider" aria-labelledby="testimonials-heading">
        <div class="section-bg"></div>
        <div class="position-relative" style="z-index:10;">
            <div class="container-custom py-4">

                <!-- Header -->
                <div class="text-center mb-5 reveal">
                    <div class="d-inline-flex align-items-center section-badge badge-amber mb-3">
                        <span style="color:#F59E0B;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3.5 h-3.5 text-[#F59E0B] fill-[#F59E0B]"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
                        </span>
                        <span>آراء عملائنا</span>
                    </div>
                    <h2 class="section-title" id="testimonials-heading">
                        <span class="gradient-text"><?php the_field('testi-fir', 'option') ?></span> <?php the_field('testi-sec', 'option') ?>
                    </h2>
                    <p class="section-desc"><?php the_field('testi-thr', 'option') ?></p>
                </div>

                <!-- Carousel -->
                <div class="position-relative reveal reveal-delay-2">
                    <!-- Desktop Nav Left (RTL: right side = previous) -->
                    <button class="testimonial-nav-left d-none d-lg-flex" id="t-nav-prev" aria-label="المراجعة السابقة">&#8250;</button>
                    <button class="testimonial-nav-right d-none d-lg-flex" id="t-nav-next" aria-label="المراجعة التالية">&#8249;</button>

                    <div class="testimonials-carousel-outer" role="region" aria-label="آراء العملاء" aria-live="polite">

    <?php $i = 1;
    while ($loop->have_posts()) : $loop->the_post(); ?>
                        <div class="testimonial-slide" role="group" >
                            <div class="testimonial-card">
                                <div class="testimonial-bg-grad" aria-hidden="true"></div>
                                <div class="sparkle-deco" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-8 h-8 text-[#F59E0B]"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>
                                </div>
                                <div class="testimonial-quote-icon" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#2e6bff33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-quote w-16 h-16 md:w-20 md:h-20 text-[#2E6BFF]/20 fill-[#2E6BFF]/20"><path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path></svg>
                                </div>
                                <p class="testimonial-text">"<?php
                                    echo wp_trim_words( get_the_content(), 88, ' ... ' );
                                    ?>"</p>
                                <div class="d-flex flex-column flex-md-row md-align-items-center justify-content-between gap-3">
                                    <div class="testimonial-author">
                                        <div class="author-avatar"></div>
                                        <div>
                                            <div class="author-name"><?php the_title(); ?></div>
                                            <div class="author-role"><?php the_field('com-name') ?></div>
                                        </div>
                                    </div>
                                    <div>
                                        <?php
                                        $rating = get_field('star');
                                        if ($rating) { ?>
                                            <div class="stars-wrap ">
                                                <?php for ($i = 1; $i <= 5; $i++) {
                                                    if ($i <= $rating) { ?>
                                                        <i class="fas fa-star star-icon"></i>
                                                    <?php } elseif ($i - 0.5 == $rating) { ?>
                                                        <i class="fas fa-star-half-alt star-icon"></i>
                                                    <?php } else { ?>
                                                        <i class="far fa-star star-icon"></i>
                                                    <?php }
                                                } ?>
                                            </div>
                                        <?php }
                                        ?>


                                        <span class="cat-pill"><?php the_field('work-ina') ?></span>
                                    </div>
                                </div>
                            </div>
                        </div>
        <?php $i++; endwhile; ?>


                    </div><!-- end carousel outer -->

                    <!-- Mobile Navigation -->
                    <div class="carousel-nav d-lg-none">
                        <button class="carousel-btn" id="t-mob-prev" aria-label="المراجعة السابقة">&#8249;</button>
                        <button class="carousel-btn" id="t-mob-next" aria-label="المراجعة التالية">&#8250;</button>
                    </div>

                    <!-- Progress Dots -->
                    <div class="testimonial-dots" role="tablist" aria-label="اختيار التقييم">
        <?php $i = 1; $b = 0;
        while ($loop->have_posts()) : $loop->the_post(); ?>
                        <button class="t-dot" data-index="<?php echo $b?>" role="tab" aria-label="التقييم <?php echo $i?> "></button>
            <?php $i++; $b++; endwhile; ?>
                    </div>
                </div>

                <!-- Trust Row -->
                <div class="trust-row reveal reveal-delay-3">
                    <div class="trust-badge">
                        <div class="stars-wrap" aria-hidden="true" style="margin:0;">
                            <span class="star-icon" style="font-size:0.875rem;">★</span>
                            <span class="star-icon" style="font-size:0.875rem;">★</span>
                            <span class="star-icon" style="font-size:0.875rem;">★</span>
                            <span class="star-icon" style="font-size:0.875rem;">★</span>
                            <span class="star-icon" style="font-size:0.875rem;">★</span>
                        </div>
                        <span style="background:linear-gradient(90deg,#F59E0B,#D97706);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.25rem;font-weight:700;"><?php the_field('rate-rar', 'option') ?></span>
                        <span class="d-none d-sm-inline">متوسط التقييم</span>
                    </div>
                    <div class="trust-badge">
                        <span style="color:#2E6BFF;">✓</span>
                        <span><strong><?php the_field('pro-rar', 'option') ?> مشروع</strong> ناجح</span>
                    </div>
                    <div class="trust-badge">
                        <div class="pulse-dot" aria-hidden="true"></div>
                        <span>دعم <strong><?php the_field('help-rar', 'option') ?></strong></span>
                    </div>
                </div>

                <!-- Soft CTA -->
                <div class="soft-cta reveal reveal-delay-5">
                    <h3 style="font-size:1.25rem;color:#D1D5DB;margin-bottom:1.5rem;">
                        جاهز تكون من <span class="gradient-text-blue-pink" style="font-weight:700;">قائمة عملائنا الناجحين؟</span>
                    </h3>
                    <button class="btn-primary open-form" aria-label="احجز استشارتك المجانية">
                        احجز استشارتك المجانية
                        <span>←</span>
                    </button>
                </div>

            </div>
        </div>
    </section>
<?php }
wp_reset_postdata(); ?>
    <!-- ============================================================
           7. TECH STACK SECTION
           ============================================================ -->
<?php if (get_field('tech', 'option')): ?>
    <section id="tech-stack" class="section-divider" aria-labelledby="tech-heading">
        <div class="section-bg"></div>
        <div class="position-relative" style="z-index:10;">
            <div class="container-custom py-4">

                <!-- Header -->
                <div class="text-center mb-5 reveal">
                    <div class="d-inline-flex align-items-center section-badge mb-3" style="background:linear-gradient(90deg,rgba(46,107,255,0.1),rgba(214,51,132,0.1));border:1px solid rgba(255,255,255,0.1);">
                        <span style="color:#2E6BFF;font-size:0.8rem;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2e6bff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml w-3.5 h-3.5 text-[#2E6BFF]"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg>
                        </span>
                        <span style="color:#9CA3AF;">أدوات عالمية</span>
                    </div>
                    <h2 class="section-title" id="tech-heading">
                        <span class="gradient-text"><?php the_field('tech-fir', 'option') ?></span> <?php the_field('tech-sec', 'option') ?>
                    </h2>
                    <p class="section-desc"><?php the_field('tech-thr', 'option') ?></p>
                </div>

                <!-- Desktop 5 Column Grid -->
                <div class="d-none d-md-block">
                    <div class="row">
                        <?php $i =1; while (has_sub_field('tech', 'option')): ?>
                        <div class="col reveal reveal-delay-<?php echo $i;?> ">
                            <div class="tech-card tech-<?php echo $i;?> h-100">
                                <div class="tech-card-glow"  aria-hidden="true"></div>
                                <div class="tech-title-line">
                                    <div class="tech-icon-box" >
                                        <?php if ( $img = get_sub_field('icon', 'option') ) : ?>
                                            <img src="<?php echo esc_url( $img['url'] ); ?>"
                                                 alt="<?php echo esc_attr( $img['alt'] ?: get_bloginfo('name') ); ?>"
                                                 title="<?php echo esc_attr( $img['title'] ?: get_bloginfo('name') ); ?>"
                                                 class="img-fluid" loading="lazy">
                                        <?php endif; ?>
                                    </div>
                                    <div class="tech-title">
                                        <span >
                                            <?php the_sub_field('title', 'option') ?>
                                        </span></div>
                                </div>
                                <div class="tech-pills">
                                    <?php while (has_sub_field('teech', 'option')): ?>
                                    <span class="tech-pill"><?php the_sub_field('tiitle', 'option') ?></span>
                                        <?php endwhile; ?>
                                </div>
                                <div class="tech-count"><strong><?php the_sub_field('plus-tech', 'option') ?></strong> تقنية</div>
                            </div>
                        </div>
                        <?php $i++; endwhile; ?>
                    </div>
                </div>

                <!-- Mobile 2-col Grid -->
                <div class="d-md-none row">
                    <?php $i =1; while (has_sub_field('tech', 'option')): ?>
                    <div class="col-6 mb-3 reveal reveal-delay-<?php echo $i;?>">
                        <div class="tech-card tech-<?php echo $i;?>">
                            <div class="tech-title-line">
                                <div class="tech-icon-box" >
                                    <?php if ( $img = get_sub_field('icon', 'option') ) : ?>
                                        <img src="<?php echo esc_url( $img['url'] ); ?>"
                                             alt="<?php echo esc_attr( $img['alt'] ?: get_bloginfo('name') ); ?>"
                                             title="<?php echo esc_attr( $img['title'] ?: get_bloginfo('name') ); ?>"
                                             class="img-fluid" loading="lazy">
                                    <?php endif; ?>
                                </div>
                                <div class="tech-title" style="font-size:0.75rem;"><span><?php the_sub_field('title', 'option') ?></span></div>
                            </div>
                            <div class="tech-pills">
                                <?php
                                $techs = get_sub_field('teech', 'option');
                                $max_visible = 3;
                                $total = count($techs);
                                $remaining = $total - $max_visible;
                                ?>

                                <?php foreach (array_slice($techs, 0, $max_visible) as $tech): ?>
                                    <span class="tech-pill"><?php echo esc_html($tech['tiitle']); ?></span>
                                <?php endforeach; ?>

                                <?php if ($remaining > 0): ?>
                                    <span class="tech-pill">+<?php echo $remaining; ?></span>
                                <?php endif; ?>

                            </div>
                        </div>
                    </div>
                        <?php $i++; endwhile; ?>
                </div>

                <!-- Note -->
                <div class="text-center mt-4 reveal reveal-delay-4">
                    <div class="note-pill d-inline-flex">
                        <div class="pulse-dot" aria-hidden="true"></div>
                        <span><?php the_field('tech-four', 'option') ?></span>
                    </div>
                </div>

            </div>
        </div>
    </section>
<?php endif; ?>
    <!-- ============================================================
          8. WHY CHOOSE US SECTION
          ============================================================ -->
<?php if (get_field('why', 'option')): ?>
    <section id="why-us" class="section-divider" aria-labelledby="why-heading">
        <div class="section-bg"></div>
        <div class="glow-bottom" aria-hidden="true"></div>
        <div class="position-relative" style="z-index:10;">
            <div class="container-custom py-4">

                <!-- Header -->
                <div class="text-center mb-5 reveal">
                    <div class="d-inline-flex align-items-center section-badge badge-blue mb-3">
                        <span style="font-size:0.8rem;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2e6bff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap w-3.5 h-3.5 text-[#2E6BFF]"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
                        </span>
                        <span>ليش نحن؟</span>
                    </div>
                    <h2 class="section-title" id="why-heading">
                        <?php the_field('why-fir', 'option') ?>  <span class="gradient-text"><?php the_field('why-sec', 'option') ?></span>
                    </h2>
                    <p class="section-desc"><?php the_field('why-thr', 'option') ?></p>
                </div>

                <!-- Features Grid -->
                <div class="row">
                    <?php while (has_sub_field('why', 'option')): ?>
                    <div class="col-md-6 col-lg-4 mb-4 reveal reveal-delay-1">
                        <div class="why-card">
                            <div class="why-card-glow" aria-hidden="true"></div>
                            <div class="why-icon" aria-hidden="true">
                                <?php if ( $img = get_sub_field('icon', 'option') ) : ?>
                                    <img src="<?php echo esc_url( $img['url'] ); ?>"
                                         alt="<?php echo esc_attr( $img['alt'] ?: get_bloginfo('name') ); ?>"
                                         title="<?php echo esc_attr( $img['title'] ?: get_bloginfo('name') ); ?>"
                                         class="img-fluid" loading="lazy">
                                <?php endif; ?>
                            </div>
                            <h3 class="why-title"><?php the_sub_field('tit-why', 'option') ?></h3>
                            <p class="why-desc"><?php the_sub_field('cont-why', 'option') ?></p>
                        </div>
                    </div>
                    <?php endwhile; ?>
                </div>

                <!-- Highlight -->
                <div class="text-center reveal reveal-delay-7">
                    <div class="why-highlight">
                        <p><span class="gradient-text"><?php the_field('why-four', 'option') ?></span></p>
                        <p><?php the_field('why-five', 'option') ?></p>
                    </div>
                </div>

            </div>
        </div>
    </section>
<?php endif; ?>
    <!-- ============================================================
           9. PROCESS SECTION
           ============================================================ -->
<?php if (get_field('features', 'option')): ?>
    <section id="process" class="section-divider" aria-labelledby="process-heading">
        <div class="section-bg"></div>
        <div class="position-relative" style="z-index:10;">
            <div class="container-custom py-4">

                <!-- Header -->
                <div class="text-center mb-5 reveal">
                    <div class="d-inline-flex align-items-center section-badge badge-amber mb-3">
                        <span style="font-size:0.8rem;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket w-3.5 h-3.5 text-[#F59E0B]"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path></svg>
                        </span>
                        <span>خطوات واضحة</span>
                    </div>
                    <h2 class="section-title" id="process-heading">
                        <?php the_field('how-fir', 'option') ?> <span class="gradient-text"> <?php the_field('how-sec', 'option') ?></span>
                    </h2>
                    <p class="section-desc"><?php the_field('how-thr', 'option') ?></p>
                </div>

                <!-- Process Steps -->
                <div class="process-grid">
                    <div class="process-connect-line" aria-hidden="true"></div>
                    <?php $i = 1;
                    while (has_sub_field('features', 'option')): ?>
                    <div class="process-step reveal reveal-delay-<?php echo $i ?> process-<?php echo $i ?>">
                        <div class="process-num">0<?php echo $i ?></div>
                        <div class="process-icon-wrap">
                            <div class="process-icon" >
                                <?php if ( $img = get_sub_field('icon-feat', 'option') ) : ?>
                                    <img src="<?php echo esc_url( $img['url'] ); ?>"
                                         alt="<?php echo esc_attr( $img['alt'] ?: get_bloginfo('name') ); ?>"
                                         title="<?php echo esc_attr( $img['title'] ?: get_bloginfo('name') ); ?>"
                                         class="img-fluid" loading="lazy">
                                <?php endif; ?>
                            </div>
                            
                        </div>
                        <div class="process-step-title"><?php the_sub_field('tit-feat', 'option') ?></div>
                        <p class="process-step-desc"><?php the_sub_field('cont-feat', 'option') ?></p>
                        <div class="process-arrow" aria-hidden="true">›</div>
                    </div>
                        <?php $i++; endwhile; ?>
                </div>

                <!-- Timeline Summary -->
                <div class="timeline-summary reveal reveal-delay-4">
                    <div class="summary-box">
                        <div class="summary-inner">
                            <div class="summary-item">
                                <div class="summary-value gradient-text-blue-pink"><?php the_field('how-one', 'option') ?></div>
                                <div class="summary-label">يوم متوسط التسليم</div>
                            </div>
                            <div class="summary-divider" aria-hidden="true"></div>
                            <div class="summary-item">
                                <div class="summary-value gradient-text-pink-amber"><?php the_field('how-two', 'option') ?></div>
                                <div class="summary-label">دعم ومتابعة</div>
                            </div>
                            <div class="summary-divider" aria-hidden="true"></div>
                            <div class="summary-item">
                                <div class="summary-value" style="background:linear-gradient(90deg,#F59E0B,#2E6BFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;"><?php the_field('how-threr', 'option') ?></div>
                                <div class="summary-label">شهور ضمان</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
<?php endif; ?>



<?php get_footer(); ?>