<!-- ============================================================
       10. FINAL CTA SECTION
       ============================================================ -->

<section id="final-cta" class="section-divider" aria-labelledby="cta-heading">
    <div class="section-bg"></div>
    <div class="cta-glow" aria-hidden="true"></div>
    <div class="position-relative" style="z-index:10;">
        <div class="container-custom py-4">
            <div class="max-w-5xl mx-auto reveal scale-up">
                <div class="cta-box">
                    <!-- Particles -->
                    <div aria-hidden="true" id="particles-wrap"></div>

                    <!-- Content -->
                    <div class="text-center position-relative" style="z-index:1;">
                        <!-- Badge -->
                        <div class="d-inline-flex align-items-center gap-2 mb-4 px-3 py-2 rounded-pill" style="background:linear-gradient(90deg,rgba(46,107,255,0.2),rgba(214,51,132,0.2),rgba(245,158,11,0.2));border:1px solid rgba(255,255,255,0.2);">
                            <span style="color:#F59E0B;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 style="font-size:0.875rem;">ابدأ رحلتك الرقمية اليوم</span>
                        </div>

                        <!-- Headline -->
                        <h2 class="cta-headline" id="cta-heading">
                            <?php the_field('jour-fir', 'option') ?>
                            <br />
                            <span class="gradient-text"><?php the_field('jour-sec', 'option') ?></span>
                        </h2>

                        <!-- Description -->
                        <p class="cta-desc">
                            <?php the_field('jour-thr', 'option') ?>
                        </p>

                        <!-- Benefits -->
                        <?php if (get_field('journy', 'option')): ?>

                        <div class="benefits-list">
                            <?php while (has_sub_field('journy', 'option')): ?>
                            <div class="benefit-item"><span class="benefit-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#2e6bff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check w-5 h-5 text-[#2E6BFF]"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>
                                </span>
                                <?php the_sub_field('title', 'option') ?>
                            </div>
                            <?php endwhile; ?>
                        </div>

                        <?php endif; ?>
                        <!-- CTA Buttons -->
                        <div class="cta-buttons">
                            <button class="btn-main-cta open-form" aria-label="اطلب عرض سعر الآن">
                                اطلب عرض سعر الآن
                                <span>←</span>
                            </button>
                            <a href="https://wa.me/<?php the_field('whatsapp', 'option') ?>?text=%D8%A7%D9%84%D8%B3%D9%84%D8%A7%D9%85%20%D8%B9%D9%84%D9%8A%D9%83%D9%85%D8%8C%20%D8%A3%D8%B1%D9%8A%D8%AF%20%D8%A7%D8%B3%D8%AA%D8%B4%D8%A7%D8%B1%D8%A9%20%D9%85%D8%AC%D8%A7%D9%86%D9%8A%D8%A9" target="_blank" rel="noopener noreferrer" class="btn-secondary w-sm-auto">
                                تواصل عبر واتساب
                            </a>
                        </div>

                        <!-- Trust Small -->
                        <?php if (get_field('add-jorny', 'option')): ?>
                        <div class="trust-small">
                            <?php while (has_sub_field('add-jorny', 'option')): ?>
                            <span class="trust-dot"><span class="dot"></span>
                            <?php the_sub_field('title', 'option') ?>
                            </span>
                            <?php endwhile; ?>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <!-- Footer Note -->
            <div class="footer-note">
                <p>© <?php echo date('Y')?> جميع الحقوق محفوظة</p>
            </div>

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

<!-- ============================================================
     11. FAQ SECTION
     ============================================================ -->
<?php if (get_field('faq', 'option')): ?>
<section id="faq" aria-labelledby="faq-heading">
    <div class="section-bg"></div>
    <div class="glow-faq" aria-hidden="true"></div>
    <div class="position-relative" style="z-index:10;">
        <div class="container-custom py-4">
            <div style="max-width:48rem; margin:0 auto;">

                <!-- Header -->
                <div class="text-center mb-5 reveal">
                    <div class="d-inline-flex align-items-center section-badge badge-pink 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="#d63384" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-help w-3.5 h-3.5 text-[#D63384]"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg>
                        </span>
                        <span>أسئلة شائعة</span>
                    </div>
                    <h2 class="section-title" id="faq-heading">
                        <?php the_field('faq-fir', 'option') ?> <span class="gradient-text"><?php the_field('faq-sec', 'option') ?></span>
                    </h2>
                    <p class="section-desc"><?php the_field('faq-thr', 'option') ?>ً</p>
                </div>

                <!-- FAQ Items -->
                <div class="faq-list reveal reveal-delay-2">
<?php while (has_sub_field('faq', 'option')): ?>
                    <div class="faq-item">
                        <button class="faq-question" aria-expanded="true">
                            <span class="faq-q-text"><?php the_sub_field('title', 'option') ?></span>
                            <span class="faq-chevron" aria-hidden="true">
<i class="fa-solid fa-chevron-down"></i>
                            </span>
                        </button>
                        <div class="faq-answer">
                            <p>
                            <?php the_sub_field('content', 'option') ?>
</p>
                        </div>
                    </div>
<?php endwhile; ?>

                </div>

                <!-- FAQ Contact -->
                <div class="faq-contact reveal reveal-delay-7">
                    <p>ما حصلت على إجابة سؤالك؟</p>
                    <a href="https://wa.me/<?php the_field('whatsapp', 'option') ?>?text=%D8%A7%D9%84%D8%B3%D9%84%D8%A7%D9%85%20%D8%B9%D9%84%D9%8A%D9%83%D9%85%D8%8C%20%D8%B9%D9%86%D8%AF%D9%8A%20%D8%A7%D8%B3%D8%AA%D9%81%D8%B3%D8%A7%D8%B1" target="_blank" rel="noopener noreferrer" class="faq-link">
                        تواصل معنا مباشرة عبر واتساب
                        <span>›</span>
                    </a>
                </div>

            </div>
        </div>
    </div>
</section>
<?php endif; ?>
<!-- ============================================================
      CONTACT FORM MODAL
      ============================================================ -->
<div class="modal-overlay" id="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <div class="modal-box" id="contact-modal">
        <div class="modal-bg-blur" aria-hidden="true">
            <div class="blur-1"></div>
            <div class="blur-2"></div>
        </div>

        <!-- Header -->
        <div class="modal-header">
            <button class="modal-close" id="modal-close" aria-label="إغلاق">✕</button>
            <h3 class="modal-title" id="modal-title">
                <span class="gradient-text">ابدأ مشروعك الآن</span>
            </h3>
            <p class="modal-subtitle">عبي البيانات وراح نتواصل معك خلال 24 ساعة</p>
        </div>

        <!-- Body -->
        <div class="modal-body">
            <!-- Form -->
            <?php echo do_shortcode('[contact-form-7 id="59dae70" title="تواصل معنا"]');?>

            <!-- Success State -->
            <div class="form-success">
                <div class="success-icon">✓</div>
                <h4 class="success-title">شكراً لك!</h4>
                <p class="success-desc">لقد تم استلام طلبك وسيتم التواصل معك خلال 24 ساعة.</p>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================
     WHATSAPP FLOATING BUTTON
     ============================================================ -->
<div class="whatsapp-float" aria-label="واتساب">
    <!-- Popup -->
    <div class="wa-popup" id="wa-popup" role="dialog" aria-label="تواصل عبر واتساب">
        <button class="wa-popup-close" id="wa-popup-close" aria-label="إغلاق">✕</button>
        <div class="wa-icon-box" aria-hidden="true">
            <i class="fa-brands fa-whatsapp"></i>
        </div>
        <div class="wa-popup-title">تواصل معنا مباشرة</div>
        <p class="wa-popup-desc">فريق المبيعات متاح للرد على استفساراتك</p>
        <a href="https://wa.me/<?php the_field('whatsapp', 'option') ?>?text=%D8%A7%D9%84%D8%B3%D9%84%D8%A7%D9%85%20%D8%B9%D9%84%D9%8A%D9%83%D9%85%D8%8C%20%D8%B9%D9%86%D8%AF%D9%8A%20%D8%A7%D8%B3%D8%AA%D9%81%D8%B3%D8%A7%D8%B1" target="_blank" rel="noopener noreferrer" class="wa-open-btn">
            افتح واتساب
        </a>
    </div>
    <!-- Main Button -->
    <button class="wa-main-btn" id="wa-btn" aria-label="فتح واتساب" aria-expanded="false" aria-controls="wa-popup">
        <div class="wa-pulse" aria-hidden="true"></div>
        <span style="position:relative;z-index:1;font-size:1.75rem;"><i class="fa-brands fa-whatsapp"></i></span>
        <div class="wa-notif" aria-hidden="true"></div>
    </button>
</div>
 <?php wp_footer() ?>
 <!-- Particle generator script (inline, lightweight) -->
 <script>
     // Generate particles for CTA section
     (function() {
         var wrap = document.getElementById('particles-wrap');
         if (!wrap) return;
         for (var i = 0; i < 20; i++) {
             var p = document.createElement('div');
             p.className = 'particle';
             p.style.top = Math.random() * 100 + '%';
             p.style.left = Math.random() * 100 + '%';
             p.style.animationDelay = (i * 0.2) + 's';
             p.style.animationDuration = (2 + Math.random() * 2) + 's';
             wrap.appendChild(p);
         }
     })();
 </script>
 </main>
</body>
</html>

