/**
 * IFADA Website - Main JavaScript
 * Converted from React + Motion.js to jQuery + vanilla JS
 * Dependencies: jQuery 3.7+, Bootstrap 4
 * ============================================================
 */

(function ($) {
  'use strict';

  /* ============================================================
     THEME MANAGEMENT
     ============================================================ */
  const ThemeManager = {
    isDark: true,

    init() {
      const saved = localStorage.getItem('theme');
      this.isDark = saved ? saved === 'dark' : true;
      this.apply();
    },

    apply() {
      const $body = $('body');
      if (this.isDark) {
        $body.removeClass('light-mode').addClass('dark-mode');
        document.documentElement.classList.add('dark');
        document.documentElement.classList.remove('light');
      } else {
        $body.removeClass('dark-mode').addClass('light-mode');
        document.documentElement.classList.add('light');
        document.documentElement.classList.remove('dark');
      }
      // Update all toggle labels
      const label = this.isDark ? 'الوضع الفاتح' : 'الوضع الليلي';
      $('.toggle-label').text(label);
      localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
    },

    toggle() {
      this.isDark = !this.isDark;
      this.apply();
    }
  };

  /* ============================================================
     STICKY NAVIGATION
     ============================================================ */
  const StickyNav = {
    $nav: null,
    pulseCount: 0,
    pulseTimeout: null,

    init() {
      this.$nav = $('#sticky-nav');
      $(window).on('scroll.stickyNav', () => this.handleScroll());
    },

    handleScroll() {
      const scrollY = window.scrollY || window.pageYOffset;
      if (scrollY > 120) {
        this.$nav.addClass('visible');
        this.triggerPulse();
      } else {
        this.$nav.removeClass('visible');
      }
    },

    triggerPulse() {
      if (this.pulseCount >= 3) return;
      if (this.pulseCount === 0) {
        this.showPulse();
        this.pulseCount = 1;
        // Schedule next pulses
        this.schedulePulse();
      }
    },

    showPulse() {
      const $btn = $('#sticky-nav .nav-cta');
      $btn.addClass('pulse-ring');
      setTimeout(() => $btn.removeClass('pulse-ring'), 3000);
    },

    schedulePulse() {
      if (this.pulseCount >= 3) return;
      this.pulseTimeout = setTimeout(() => {
        if (this.pulseCount < 3) {
          this.showPulse();
          this.pulseCount++;
          this.schedulePulse();
        }
      }, 13000);
    }
  };

  /* ============================================================
     SCROLL REVEAL (IntersectionObserver)
     ============================================================ */
  const ScrollReveal = {
    observer: null,

    init() {
      if (!('IntersectionObserver' in window)) {
        // Fallback: reveal all immediately
        $('.reveal').addClass('revealed');
        return;
      }

      this.observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const $el = $(entry.target);
            // Add staggered delay based on siblings
            setTimeout(() => {
              $el.addClass('revealed');
            }, 0);
            this.observer.unobserve(entry.target);
          }
        });
      }, {
        threshold: 0.1,
        rootMargin: '-50px 0px'
      });

      document.querySelectorAll('.reveal').forEach(el => {
        this.observer.observe(el);
      });
    }
  };

  /* ============================================================
     CLIENT LOGOS AUTO-SCROLL
     ============================================================ */
  const LogosCarousel = {
    init() {
      // CSS animation handles this — just ensure accessibility
      const $track = $('.logos-track');
      $track.attr('aria-hidden', 'true');
      // Pause on hover
      $track.on('mouseenter', function () {
        $(this).css('animation-play-state', 'paused');
      }).on('mouseleave', function () {
        $(this).css('animation-play-state', 'running');
      });
    }
  };

  /* ============================================================
     TESTIMONIALS CAROUSEL
     ============================================================ */
  const TestimonialsCarousel = {
    currentIndex: 0,
    total: 0,
    autoTimer: null,
    isAnimating: false,

    init() {
      const $slides = $('.testimonial-slide');
      this.total = $slides.length;
      if (this.total === 0) return;

      this.showSlide(0);
      this.startAuto();

      // Desktop nav buttons
      $('#t-nav-prev').on('click', () => this.prev());
      $('#t-nav-next').on('click', () => this.next());

      // Mobile nav buttons
      $('#t-mob-prev').on('click', () => this.prev());
      $('#t-mob-next').on('click', () => this.next());

      // Dots
      $(document).on('click', '.t-dot', (e) => {
        const idx = parseInt($(e.currentTarget).data('index'));
        this.goTo(idx);
      });
    },

    showSlide(index) {
      const $slides = $('.testimonial-slide');
      $slides.hide().attr('aria-hidden', 'true');
      $($slides[index]).fadeIn(350).attr('aria-hidden', 'false');
      // Update dots
      $('.t-dot').removeClass('active');
      $(`.t-dot[data-index="${index}"]`).addClass('active');
      this.currentIndex = index;
      // Animate stars
      this.animateStars(index);
    },

    animateStars(index) {
      const $card = $($('.testimonial-slide')[index]);
      $card.find('.star-icon').each(function (i) {
        $(this).css({ opacity: 0, transform: 'scale(0)' });
        setTimeout(() => {
          $(this).css({ transition: 'all 0.3s cubic-bezier(0.34,1.56,0.64,1)', opacity: 1, transform: 'scale(1)' });
        }, i * 100);
      });
    },

    goTo(index) {
      if (this.isAnimating || index === this.currentIndex) return;
      this.isAnimating = true;
      this.showSlide(index);
      this.restartAuto();
      setTimeout(() => { this.isAnimating = false; }, 400);
    },

    next() {
      const next = (this.currentIndex + 1) % this.total;
      this.goTo(next);
    },

    prev() {
      const prev = (this.currentIndex - 1 + this.total) % this.total;
      this.goTo(prev);
    },

    startAuto() {
      this.autoTimer = setInterval(() => this.next(), 5000);
    },

    restartAuto() {
      clearInterval(this.autoTimer);
      this.startAuto();
    }
  };

  /* ============================================================
     FAQ ACCORDION
     ============================================================ */
  const FAQAccordion = {
    init() {
      // Open first item by default
      $('.faq-item:first').addClass('open').find('.faq-answer').show();

      $(document).on('click', '.faq-question', function () {
        const $item = $(this).closest('.faq-item');
        const $answer = $item.find('.faq-answer');
        const isOpen = $item.hasClass('open');

        // Close all
        $('.faq-item').removeClass('open').find('.faq-answer').slideUp(300);

        if (!isOpen) {
          $item.addClass('open');
          $answer.slideDown(300);
        }
      });
    }
  };

  /* ============================================================
     CASE STUDY PANEL
     ============================================================ */
  const CasePanel = {
    $panel: null,
    $overlay: null,

    init() {
      this.$overlay = $('#panel-overlay');

      // Open
      $(document).on('click', '.btn-view-case', (e) => {
        const panelId = $(e.currentTarget).data('panel');
        this.open(panelId);
      });

      // Close via overlay
      this.$overlay.on('click', () => this.close());

      // Close via button
      $(document).on('click', '.panel-close', () => this.close());

      // Close via ESC
      $(document).on('keydown', (e) => {
        if (e.key === 'Escape' && this.$panel && this.$panel.hasClass('open')) {
          this.close();
        }
      });
    },

    open(panelId) {
      // أغلق أي بانل مفتوح
      if (this.$panel) this.close();

      this.$panel = $('#' + panelId);
      if (!this.$panel.length) return;

      this.$overlay.addClass('active');
      this.$panel.addClass('open');
      $('body').css('overflow', 'hidden');
      this.$panel.scrollTop(0);
    },

    close() {
      if (!this.$panel) return;
      this.$overlay.removeClass('active');
      this.$panel.removeClass('open');
      $('body').css('overflow', '');
      this.$panel = null;
    },
  };

  CasePanel.init();

  /* ============================================================
     CONTACT FORM MODAL
     ============================================================ */
  const ContactModal = {
    $modal: null,
    $overlay: null,

    init() {
      this.$modal = $('#contact-modal');
      this.$overlay = $('#modal-overlay');

      // Open triggers
      $(document).on('click', '.open-form', () => this.open());

      // Close via overlay
      this.$overlay.on('click', (e) => {
        if ($(e.target).is(this.$overlay)) this.close();
      });

      // Close button
      $('#modal-close').on('click', () => this.close());

      // ESC key
      $(document).on('keydown', (e) => {
        if (e.key === 'Escape' && this.$modal.hasClass('active')) this.close();
      });

      // Form submit
      $('#contact-form').on('submit', (e) => this.handleSubmit(e));

      // Phone validation - digits only
      $('#form-phone').on('input', function () {
        let val = $(this).val().replace(/\D/g, '');
        if (val.length > 9) val = val.substring(0, 9);
        $(this).val(val);
      });
    },

    open() {
      this.$overlay.addClass('active');
      this.$modal.addClass('active');
      $('body').css('overflow', 'hidden');
      $('#contact-form').show();
      $('.form-success').hide();
    },

    close() {
      this.$overlay.removeClass('active');
      this.$modal.removeClass('active');
      $('body').css('overflow', '');
    },

    handleSubmit(e) {
      e.preventDefault();
      const phone = $('#form-phone').val().replace(/\D/g, '');

      if (phone.length !== 9) {
        alert('يرجى إدخال رقم جوال سعودي صحيح (9 أرقام)');
        return;
      }
      if (!phone.startsWith('5')) {
        alert('رقم الجوال يجب أن يبدأ بـ 5');
        return;
      }

      // Show success state
      $('#contact-form').fadeOut(200, () => {
        $('.form-success').fadeIn(400);
      });

      // Auto close after 2 seconds and reset
      setTimeout(() => {
        this.close();
        setTimeout(() => {
          $('#contact-form')[0].reset();
          $('#contact-form').show();
          $('.form-success').hide();
        }, 400);
      }, 2000);
    }
  };

  /* ============================================================
     WHATSAPP BUTTON
     ============================================================ */
  const WhatsAppBtn = {
    init() {
      // Show popup on click
      $('#wa-btn').on('click', () => {
        const $popup = $('#wa-popup');
        if ($popup.hasClass('open')) {
          $popup.removeClass('open').fadeOut(200);
        } else {
          $popup.fadeIn(10).addClass('open');
        }
      });

      // Close popup
      $('#wa-popup-close').on('click', (e) => {
        e.stopPropagation();
        $('#wa-popup').removeClass('open').fadeOut(200);
      });

      // Animate in on load after 1 second
      setTimeout(() => {
        $('.whatsapp-float').css({ opacity: 0, transform: 'scale(0)' }).animate({ opacity: 1 }, 300);
        $('.whatsapp-float').css('transform', 'scale(1)');
      }, 1000);
    }
  };

  /* ============================================================
     CASE STUDIES DATA
     ============================================================ */
  const caseStudiesData = {
    ecommerce: {
      title: 'متجر الأزياء الفاخرة',
      category: 'التجارة الإلكترونية',
      industry: 'أزياء وموضة',
      description: 'منصة تجارة إلكترونية متكاملة مع نظام إدارة المخزون وبوابة دفع آمنة',
      challenge: 'العميل كان يواجه تحديات في زيادة التحويلات وتحسين تجربة المستخدم على الموقع. كانت معدلات الارتداد عالية وكان المستخدمون يواجهون صعوبة في إتمام عمليات الشراء.',
      solution: {
        ux: 'أعدنا تصميم تجربة المستخدم بالكامل مع تركيز على البساطة والوضوح',
        development: 'بنينا الموقع بتقنيات حديثة لضمان أداء سريع وتجربة سلسة',
        integrations: 'ربطنا الموقع مع أنظمة الدفع والشحن وإدارة المخزون',
        optimization: 'حسّنا السرعة والأداء ومحركات البحث لضمان أفضل النتائج'
      },
      results: {
        metric1: { label: 'زيادة المبيعات', value: '+250%', description: 'في أول 3 أشهر من الإطلاق' },
        metric2: { label: 'معدل التحويل', value: '4.2%', description: 'مقارنة بالموقع السابق' },
        metric3: { label: 'وقت التحميل', value: '1.2 ثانية', description: 'حسب تقييمات المستخدمين' }
      },
      image: 'https://images.unsplash.com/photo-1642143231828-786fbd515a13?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=800',
      gradFrom: '#2E6BFF', gradTo: '#1E50CC'
    },
    consulting: {
      title: 'موقع شركة الاستشارات',
      category: 'خدمات مؤسسية',
      industry: 'استشارات أعمال',
      description: 'موقع مؤسسي احترافي مع نظام حجز مواعيد ذكي وإدارة محتوى متقدمة',
      challenge: 'الشركة تعاني من ضعف الظهور في محركات البحث وصعوبة حجز المواعيد بشكل رقمي مع تراجع في الاستفسارات الواردة.',
      solution: {
        ux: 'صممنا تجربة مستخدم سلسة مع نظام حجز مواعيد متكامل',
        development: 'طورنا الموقع بأحدث تقنيات الويب مع أداء عالٍ',
        integrations: 'ربطنا نظام إدارة المواعيد مع التقويمات والإشعارات التلقائية',
        optimization: 'حسّنا الموقع لمحركات البحث وحققنا نتائج استثنائية'
      },
      results: {
        metric1: { label: 'زيادة العملاء المحتملين', value: '+180%', description: 'في أول 3 أشهر من الإطلاق' },
        metric2: { label: 'تحسين السيو', value: '+320%', description: 'مقارنة بالموقع السابق' },
        metric3: { label: 'سرعة الأداء', value: '98/100', description: 'حسب تقييم Google PageSpeed' }
      },
      image: 'https://images.unsplash.com/photo-1609941535028-83e3b0291aae?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=800',
      gradFrom: '#D63384', gradTo: '#A02866'
    },
    restaurant: {
      title: 'منصة حجز المطاعم',
      category: 'تطبيق ويب',
      industry: 'مطاعم وضيافة',
      description: 'تطبيق حجز متقدم مع إدارة الطاولات ونظام ولاء العملاء',
      challenge: 'المطعم يواجه مشكلة في إدارة الحجوزات يدوياً مما يسبب تداخلاً في المواعيد وتجربة سلبية للعملاء.',
      solution: {
        ux: 'صممنا واجهة بسيطة للحجز من الجوال في 3 خطوات فقط',
        development: 'طورنا نظام إدارة الطاولات في الوقت الفعلي',
        integrations: 'دمجنا نظام ولاء العملاء مع الإشعارات والعروض',
        optimization: 'حسّنا السرعة لضمان تجربة سلسة على جميع الأجهزة'
      },
      results: {
        metric1: { label: 'زيادة الحجوزات', value: '+320%', description: 'في أول 3 أشهر من الإطلاق' },
        metric2: { label: 'رضا العملاء', value: '4.8/5', description: 'حسب تقييمات العملاء' },
        metric3: { label: 'تقليل الانتظار', value: '-60%', description: 'مقارنة بالنظام السابق' }
      },
      image: 'https://images.unsplash.com/photo-1561284081-ebf6c977bbde?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=800',
      gradFrom: '#F59E0B', gradTo: '#D97706'
    }
  };

  /* ============================================================
     DOCUMENT READY
     ============================================================ */
  $(document).ready(function () {
    // Initialize all modules
    ThemeManager.init();
    StickyNav.init();
    ScrollReveal.init();
    LogosCarousel.init();
    TestimonialsCarousel.init();
    FAQAccordion.init();
    CasePanel.init();
    ContactModal.init();
    WhatsAppBtn.init();

    // Theme toggle handlers
    $(document).on('click', '.theme-toggle', function () {
      ThemeManager.toggle();
    });

    $('.testimonial-slide').each(function () {
      var authorName = $(this).find('.author-name').text().trim();
      var firstLetter = authorName.charAt(0).toUpperCase();
      $(this).find('.author-avatar').text(firstLetter);
    });

    // Smooth scroll for anchor links
    $(document).on('click', 'a[href^="#"]', function (e) {
      const target = $(this).attr('href');
      if ($(target).length) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $(target).offset().top - 80 }, 600);
      }
    });

    // Prevent body scroll when panel/modal open on desktop nav
    $('#panel-close-form').on('click', function () {
      CasePanel.close();
      ContactModal.open();
    });

    // Initial animate-in for hero elements
    setTimeout(() => {
      $('.hero-animate').each(function (i) {
        const $el = $(this);
        const delay = parseInt($el.data('delay') || 0);
        setTimeout(() => {
          $el.addClass('animate-fadeInUp');
        }, delay);
      });
    }, 100);
  });

})(jQuery);
