$(function () {
  const $body = $('body');
  const $mobileMenu = $('#mobileMenu');
  const $arabicOverlay = $('#arabicOverlay');
  const $heroLine1 = $('#heroTypeLine1');
  const $heroOr = $('#heroTypeOr');
  const $heroLine2 = $('#heroTypeLine2');
  const $heroParagraph = $('#heroParagraphTyped');
  const $heroActions = $('#heroActions');
  // Scroll-load reveal disabled — see styles.css .scroll-load
  // const $scrollLoads = $('.scroll-load');
  const $mobileStickyBar = $('#mobileStickyBar');

  function openMenu() {
    $mobileMenu.addClass('open');
    $body.addClass('menu-open');
  }

  function closeMenu() {
    $mobileMenu.removeClass('open');
    $body.removeClass('menu-open');
  }

  $('#menuToggle').on('click', openMenu);
  $('#menuClose').on('click', closeMenu);

  $mobileMenu.on('click', function (e) {
    if (e.target === this) closeMenu();
  });

  $(document).on('click', '.mobile-submenu-toggle', function () {
    const $btn = $(this);
    const $block = $btn.closest('[data-mobile-submenu]');
    const $panel = $('#' + $btn.attr('aria-controls'));
    const expanded = $block.hasClass('is-open');
    $block.toggleClass('is-open', !expanded);
    $btn.attr('aria-expanded', expanded ? 'false' : 'true');
    if ($panel.length) {
      $panel.prop('hidden', expanded);
    }
  });


  function showArabicLoader() {
    $body.addClass('ar-loading');
    $arabicOverlay.addClass('show');
    setTimeout(function () {
      $arabicOverlay.removeClass('show');
      $body.removeClass('ar-loading');
    }, 1700);
  }

  $('#arabicSwitcher, #arabicSwitcherMobile').on('click', showArabicLoader);

  // function revealOnScroll() {
  //   const trigger = window.innerHeight * 0.9;
  //   $scrollLoads.each(function () {
  //     if (this.getBoundingClientRect().top < trigger) {
  //       $(this).addClass('active');
  //     }
  //   });
  // }

  function updateStickyBar() {
    // Match Bootstrap d-md-none: bar only on viewports <768px; reveal after scroll (all pages).
    const showBar = $(window).width() <= 767 && $(window).scrollTop() > 500;
    if (showBar) {
      $mobileStickyBar.addClass('show');
      $body.addClass('mobile-bottom-bar-visible');
    } else {
      $mobileStickyBar.removeClass('show');
      $body.removeClass('mobile-bottom-bar-visible');
    }
  }

  function openCallbackModalIfRequested() {
    const $modal = $('#callbackModal');
    if (!$modal.length || typeof bootstrap === 'undefined') return;

    const shouldOpen = $modal.attr('data-open-on-load') === '1';
    if (!shouldOpen) return;

    const instance = bootstrap.Modal.getOrCreateInstance($modal[0]);
    instance.show();

    $modal.on('shown.bs.modal', function () {
      const $firstInput = $modal.find('input[name="name"]');
      if ($firstInput.length) $firstInput.trigger('focus');
    });
  }

  // revealOnScroll();
  updateStickyBar();
  openCallbackModalIfRequested();

  $(window).on('scroll', function () {
    // revealOnScroll();
    updateStickyBar();
  });

  $(window).on('resize', updateStickyBar);

  $('.interactive').on('click', function () {
    const $el = $(this);
    $el.addClass('pressed');
    setTimeout(function () {
      $el.removeClass('pressed');
    }, 160);
  });

  function typeText($element, text, speed) {
    return new Promise(function (resolve) {
      $element.text('');
      let index = 0;
      const timer = setInterval(function () {
        $element.text($element.text() + text.charAt(index));
        index += 1;
        if (index >= text.length) {
          clearInterval(timer);
          resolve();
        }
      }, speed);
    });
  }

  function wait(ms) {
    return new Promise(function (resolve) {
      setTimeout(resolve, ms);
    });
  }

  function readHeroTypingConfig() {
    const $cfg = $('#heroTypingConfig');
    if (!$cfg.length) {
      return null;
    }

    try {
      return JSON.parse($cfg.text());
    } catch (e) {
      return null;
    }
  }

  async function runHeroSequence() {
    if (!$heroLine1.length || !$heroLine2.length || !$heroParagraph.length) {
      return;
    }

    const cfg = readHeroTypingConfig();

    const line1 = (cfg && cfg.line1) ? cfg.line1 : 'Hire Maid';
    const connector = (cfg && cfg.connector) ? cfg.connector : 'OR';
    const line2 = (cfg && cfg.line2) ? cfg.line2 : 'Maid Visa';
    const paragraphText = (cfg && cfg.paragraph)
      ? cfg.paragraph
      : 'Alebdaa Center (a MOHRE-Licensed TADBEER Agency) is your trusted partner for hiring full time maids & nannies, as well as securing maid visa sponsorship for your domestic workers.';

    await wait(350);
    await typeText($heroLine1, line1, 85);
    $heroLine1.addClass('show');

    await wait(240);
    if ($heroOr.length) {
      $heroOr.text(connector).addClass('show');
    }

    await wait(260);
    await typeText($heroLine2, line2, 85);
    $heroLine2.addClass('show');

    await wait(260);
    await typeText($heroParagraph, paragraphText, 18);

    await wait(180);
    if ($heroActions.length) {
      $heroActions.addClass('active');
    }
  }

  runHeroSequence();
});