(function () {
  "use strict";

  // Touch swipe handler
  let touchStartX = 0;
  let touchEndX = 0;
  let touchStartY = 0;
  let touchEndY = 0;
  let isScrolling = false;

  function handleSwipe() {
    const deltaX = touchEndX - touchStartX;
    const deltaY = touchEndY - touchStartY;
    const minSwipeDistance = 50;

    // Prevent vertical scroll from triggering swipe
    if (Math.abs(deltaY) > Math.abs(deltaX)) {
      return;
    }

    // Check if Flowtime is available
    if (typeof Flowtime === 'undefined') {
      console.error('Flowtime is not available');
      return;
    }

    // Swipe right - go to previous slide
    if (deltaX > minSwipeDistance) {
      console.log("Swipe Right - Previous");
      Flowtime.prevFragment();
    }
    // Swipe left - go to next slide
    else if (deltaX < -minSwipeDistance) {
      console.log("Swipe Left - Next");
      Flowtime.nextFragment();
    }
  }

  // Touch event listeners
  document.addEventListener(
    "touchstart",
    function (event) {
      touchStartX = event.changedTouches[0].screenX;
      touchStartY = event.changedTouches[0].screenY;
      isScrolling = false;
    },
    { passive: true }
  );

  document.addEventListener(
    "touchmove",
    function (event) {
      const deltaX = Math.abs(event.changedTouches[0].screenX - touchStartX);
      const deltaY = Math.abs(event.changedTouches[0].screenY - touchStartY);

      // Check if this is a vertical scroll
      if (deltaY > deltaX) {
        isScrolling = true;
      }
    },
    { passive: true }
  );

  document.addEventListener(
    "touchend",
    function (event) {
      if (!isScrolling) {
        touchEndX = event.changedTouches[0].screenX;
        touchEndY = event.changedTouches[0].screenY;
        handleSwipe();
      }
    },
    { passive: true }
  );

  // Mobile navigation buttons
  function createMobileNav() {
    // Check if already created
    if (document.getElementById("mobile-nav")) {
      return;
    }

    // Add CSS styles
    const style = document.createElement("style");
    style.textContent = `
      /* Mobile Navigation Styles */
      .mobile-nav-container {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        background: rgba(0, 0, 0, 0.8);
        padding: 12px 18px;
        border-radius: 35px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      }

      .mobile-nav-btn {
        background: linear-gradient(135deg, #ff6b9d, #ff8e72);
        border: none;
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 28px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(255, 107, 157, 0.4);
        padding: 0;
        min-width: 50px;
        min-height: 50px;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
        outline: none;
      }

      .mobile-nav-btn:active {
        transform: scale(0.95);
        box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
      }

      .mobile-nav-btn:hover {
        background: linear-gradient(135deg, #ff5a8f, #ff7d61);
        box-shadow: 0 6px 20px rgba(255, 107, 157, 0.5);
      }

      .swipe-hint {
        color: #fff;
        font-size: 12px;
        white-space: nowrap;
        padding: 0 10px;
        animation: fadeInOut 3s infinite;
        font-weight: 500;
      }

      @keyframes fadeInOut {
        0%, 100% {
          opacity: 0.5;
        }
        50% {
          opacity: 1;
        }
      }

      /* Responsive Text Sizing */
      @media (max-width: 1024px) {
        .text1 {
          font-size: 28px !important;
          line-height: 1.3 !important;
        }
        
        .text2 {
          font-size: 14px !important;
        }
        
        h2 {
          font-size: 22px !important;
        }
        
        h3 {
          font-size: 18px !important;
        }
        
        p {
          font-size: 15px !important;
        }
      }

      @media (max-width: 768px) {
        /* Show mobile navigation */
        .mobile-nav-container {
          display: flex;
        }
        
        /* Page spacing to prevent overlap with nav */
        .ft-page {
          padding: 15px !important;
          padding-bottom: 80px !important;
        }
        
        /* Text sizes */
        .text1 {
          font-size: 24px !important;
          line-height: 1.3 !important;
          margin: 20px 0 !important;
        }
        
        .text2 {
          font-size: 13px !important;
          display: block !important;
        }
        
        h2 {
          font-size: 20px !important;
          padding: 15px 10px !important;
          margin: 10px 0 !important;
        }
        
        h3 {
          font-size: 16px !important;
          padding: 10px !important;
          line-height: 1.4 !important;
        }
        
        p {
          font-size: 14px !important;
          line-height: 1.5 !important;
          padding: 10px !important;
        }
        
        img {
          max-width: 95% !important;
          height: auto !important;
          margin: 10px auto !important;
          display: block !important;
        }
        
        /* Layout adjustments */
        .left-img {
          flex-direction: column !important;
        }
        
        .left-img img {
          margin-top: 15px !important;
          order: 2 !important;
        }
        
        .left-img h2,
        .left-img h3 {
          order: 1 !important;
        }
        
        .top-text {
          padding: 20px 10px 10px !important;
        }
        
        .bottom-text {
          padding: 10px 10px 20px !important;
        }
        
        .center-text {
          text-align: center !important;
        }
        
        /* Remove horizontal scroll */
        body {
          overflow-x: hidden !important;
        }
        
        .flowtime {
          overflow-x: hidden !important;
        }
      }

      @media (max-width: 600px) {
        .mobile-nav-container {
          bottom: 10px;
          padding: 10px 12px;
          gap: 12px;
        }
        
        .mobile-nav-btn {
          width: 48px;
          height: 48px;
          font-size: 26px;
          min-width: 48px;
          min-height: 48px;
        }
        
        .swipe-hint {
          font-size: 11px;
          padding: 0 8px;
        }
        
        .text1 {
          font-size: 20px !important;
          margin: 15px 0 !important;
        }
        
        .text2 {
          font-size: 12px !important;
        }
        
        h2 {
          font-size: 18px !important;
          padding: 12px 8px !important;
        }
        
        h3 {
          font-size: 14px !important;
          padding: 8px !important;
        }
        
        p {
          font-size: 13px !important;
          padding: 8px !important;
        }
        
        .ft-page {
          padding: 10px !important;
          padding-bottom: 75px !important;
        }
      }

      @media (max-width: 480px) {
        .mobile-nav-container {
          bottom: 8px;
          padding: 8px 10px;
          gap: 8px;
        }
        
        .mobile-nav-btn {
          width: 44px;
          height: 44px;
          font-size: 22px;
          min-width: 44px;
          min-height: 44px;
        }
        
        .swipe-hint {
          font-size: 10px;
          padding: 0 6px;
        }
        
        .text1 {
          font-size: 18px !important;
          margin: 12px 0 !important;
        }
        
        .text2 {
          font-size: 11px !important;
        }
        
        h2 {
          font-size: 16px !important;
          padding: 10px 6px !important;
        }
        
        h3 {
          font-size: 13px !important;
          padding: 6px !important;
          line-height: 1.3 !important;
        }
        
        p {
          font-size: 12px !important;
          padding: 6px !important;
        }
        
        .ft-page {
          padding: 8px !important;
          padding-bottom: 70px !important;
        }
        
        img {
          max-width: 100% !important;
        }
      }

      @media (max-width: 360px) {
        .mobile-nav-container {
          bottom: 5px;
          padding: 6px 8px;
          gap: 6px;
        }
        
        .mobile-nav-btn {
          width: 40px;
          height: 40px;
          font-size: 20px;
          min-width: 40px;
          min-height: 40px;
        }
        
        .swipe-hint {
          display: none;
        }
        
        .text1 {
          font-size: 16px !important;
        }
        
        .text2 {
          font-size: 10px !important;
        }
        
        h2 {
          font-size: 14px !important;
        }
        
        h3 {
          font-size: 12px !important;
        }
        
        .ft-page {
          padding-bottom: 65px !important;
        }
      }

      /* Hide navigation hints on mobile - show swipe instruction instead */
      @media (max-width: 768px) {
        .text2::before {
          content: "← Swipe to navigate →";
          display: block;
          font-size: 12px;
          margin-top: 10px;
        }
      }

      /* Desktop - hide mobile nav */
      @media (min-width: 769px) {
        .mobile-nav-container {
          display: none !important;
        }
        
        .ft-page {
          padding-bottom: initial !important;
        }
      }

      /* Improve touch targets */
      button {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
      }

      /* Prevent zoom on input */
      input, textarea, select {
        font-size: 16px !important;
      }

      /* Smooth scrolling */
      html {
        scroll-behavior: smooth;
      }

      /* Better image handling */
      img {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
      }

      /* Fix for final page text visibility */
      @media (max-width: 768px) {
        /* ...existing code... */
        
        /* Ensure final page is visible */
        .page-55 {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          min-height: 100vh;
          padding: 40px 15px !important;
        }
        
        .page-55 img {
          max-width: 100% !important;
          height: auto !important;
          margin-bottom: 20px !important;
        }
        
        .page-55 .text {
          width: 100% !important;
          text-align: center !important;
          font-size: 14px !important;
          line-height: 1.6 !important;
          color: inherit !important;
        }
        
        .page-55 p {
          padding: 15px !important;
          background: rgba(255, 255, 255, 0.1) !important;
          border-radius: 10px !important;
          margin: 10px 0 !important;
        }
        
        .page-55 span {
          display: block !important;
          margin: 8px 0 !important;
          font-size: 14px !important;
        }
      }

      @media (max-width: 600px) {
        .page-55 {
          min-height: 100vh;
          padding: 30px 12px !important;
        }
        
        .page-55 .text {
          font-size: 13px !important;
          line-height: 1.5 !important;
        }
        
        .page-55 p {
          padding: 12px !important;
        }
        
        .page-55 span {
          font-size: 13px !important;
          margin: 6px 0 !important;
        }
      }

      @media (max-width: 480px) {
        .page-55 {
          min-height: 100vh;
          padding: 20px 10px !important;
        }
        
        .page-55 img {
          max-width: 90% !important;
          margin-bottom: 15px !important;
        }
        
        .page-55 .text {
          font-size: 12px !important;
          line-height: 1.4 !important;
        }
        
        .page-55 p {
          padding: 10px !important;
          margin: 8px 0 !important;
        }
        
        .page-55 span {
          font-size: 12px !important;
          margin: 4px 0 !important;
        }
      }

      /* Ensure center-img is visible */
      .center-img {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        font-size: 48px;
        font-weight: bold;
        text-align: center;
        padding: 20px;
      }

      @media (max-width: 768px) {
        .center-img {
          min-height: 80vh;
          font-size: 36px;
          padding: 15px;
        }
      }

      @media (max-width: 480px) {
        .center-img {
          min-height: 70vh;
          font-size: 28px;
          padding: 10px;
        }
      }

      /* Fix for all pages with .text class */
      .ft-page .text {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
      }

      /* Improve readability of final message */
      .right-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      @media (max-width: 768px) {
        .right-img {
          flex-direction: column;
        }
        
        .right-img img {
          max-width: 100% !important;
          order: 1 !important;
        }
        
        .right-img p {
          order: 2 !important;
          width: 100% !important;
        }
      }

      /* Ensure text doesn't overflow */
      p, h2, h3, span {
        max-width: 100%;
        box-sizing: border-box;
      }

      /* Add better contrast for final message */
      .page-55 p {
        color: white !important;
        font-weight: 500;
      }
    `;
    document.head.appendChild(style);

    const navContainer = document.createElement("div");
    navContainer.id = "mobile-nav";
    navContainer.className = "mobile-nav-container";

    // Previous button
    const prevBtn = document.createElement("button");
    prevBtn.id = "mobile-prev";
    prevBtn.className = "mobile-nav-btn prev-btn";
    prevBtn.innerHTML = "&#8249;"; // Left arrow
    prevBtn.setAttribute("aria-label", "Previous slide");
    prevBtn.setAttribute("type", "button");
    prevBtn.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      console.log("Previous button clicked");
      if (typeof Flowtime !== 'undefined') {
        Flowtime.prevFragment();
      } else {
        console.error('Flowtime not available');
      }
    }, false);

    // Add touch event for better mobile response
    prevBtn.addEventListener("touchend", function (e) {
      e.preventDefault();
      e.stopPropagation();
      console.log("Previous button touched");
      if (typeof Flowtime !== 'undefined') {
        Flowtime.prevFragment();
      }
    }, false);

    // Next button
    const nextBtn = document.createElement("button");
    nextBtn.id = "mobile-next";
    nextBtn.className = "mobile-nav-btn next-btn";
    nextBtn.innerHTML = "&#8250;"; // Right arrow
    nextBtn.setAttribute("aria-label", "Next slide");
    nextBtn.setAttribute("type", "button");
    nextBtn.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      console.log("Next button clicked");
      if (typeof Flowtime !== 'undefined') {
        Flowtime.nextFragment();
      } else {
        console.error('Flowtime not available');
      }
    }, false);

    // Add touch event for better mobile response
    nextBtn.addEventListener("touchend", function (e) {
      e.preventDefault();
      e.stopPropagation();
      console.log("Next button touched");
      if (typeof Flowtime !== 'undefined') {
        Flowtime.nextFragment();
      }
    }, false);

    // Swipe hint
    const hint = document.createElement("div");
    hint.className = "swipe-hint";
    hint.textContent = "← Swipe →";

    navContainer.appendChild(prevBtn);
    navContainer.appendChild(hint);
    navContainer.appendChild(nextBtn);
    document.body.appendChild(navContainer);

    console.log("Mobile navigation created");

    // Hide hint after a few seconds
    setTimeout(function() {
      if (hint) {
        hint.style.transition = 'opacity 1s';
        hint.style.opacity = '0.5';
      }
    }, 5000);
  }

  // Detect if mobile
  function isMobile() {
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
    const isPhone = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
      userAgent.toLowerCase()
    );
    const isSmallScreen = window.innerWidth < 768;

    console.log(
      "Device check - UserAgent Mobile: " +
        isPhone +
        ", Small Screen: " +
        isSmallScreen
    );
    return isPhone || isSmallScreen;
  }

  // Initialize - wait for Flowtime to be available
  function init() {
    console.log("Mobile Nav Init Started");
    
    // Wait for Flowtime to be loaded
    const checkFlowtime = setInterval(function() {
      if (typeof Flowtime !== 'undefined') {
        clearInterval(checkFlowtime);
        console.log("Flowtime is ready");
        
        if (isMobile()) {
          console.log("Mobile device detected");
          createMobileNav();
        }
      }
    }, 100);

    // Timeout after 5 seconds
    setTimeout(function() {
      clearInterval(checkFlowtime);
      if (typeof Flowtime === 'undefined') {
        console.error("Flowtime failed to load");
      }
    }, 5000);
  }

  // Run on DOM ready
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }

  // Also check on resize
  window.addEventListener("resize", function () {
    if (isMobile() && !document.getElementById("mobile-nav")) {
      createMobileNav();
    } else if (!isMobile() && document.getElementById("mobile-nav")) {
      const nav = document.getElementById("mobile-nav");
      if (nav) nav.remove();
    }
  });
})();