/* BUTTON COLORING BITS BLOP BLOP */

/* Experience button selected state */
#expButton[data-selected="true"] {
  background-color: #A6D59A; /* Replace with your desired color */
}

/* Transport button selected state */
#traButton[data-selected="true"] {
  background-color: #F5C359; /* Replace with your desired color */
}

/* Concierge button selected state */
#conButton[data-selected="true"] {
  background-color: #2F9BFF; /* Replace with your desired color */
}


/* FOOTER SHOW/HIDE FUNCTION */

/* Footer */
.bottom-bar {
  position: fixed;
  bottom: 0;
  transform: translateY(100%); /* Start position: fully hidden below viewport */
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out,
    visibility 0s linear 0.3s; /* Delay visibility change until after fade */
}

.bottom-bar.active {
  transform: translateY(0); /* End position: fully visible */
  opacity: 1;
  visibility: visible;
  transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out,
    visibility 0s linear 0s; /* No delay when showing */
}

document.addEventListener("DOMContentLoaded", function () {
  // Get all elements
  const mainButtons = document.querySelectorAll(
    ".navbar-tabs-wrapper .lib-nav-button"
  );
  const footerButtons = document.querySelectorAll(
    ".footer-tabs-wrapper .lib-nav-button"
  );
  const sections = document.querySelectorAll('[id$="Section"]');
  const footers = document.querySelectorAll(".bottom-bar");

  // Add flag to track manually closed footers
  const manuallyClosedFooters = new Set();

  // Function to show active section and hide others
  function showSection(sectionId) {
    sections.forEach((section) => {
      section.style.display = section.id === sectionId ? "flex" : "none";
    });
    // Hide all footers initially when switching sections
    footers.forEach((footer) => {
      footer.classList.remove("active");
      manuallyClosedFooters.delete(footer); // Reset the manually closed state
    });
  }

  // Function to set active button state
  function setSelectedButton(targetSectionId) {
    // Remove 'Section' and add 'Button' to get the corresponding button ID
    const activeButtonId = targetSectionId.replace("Section", "Button");

    // Update main navigation buttons
    mainButtons.forEach((button) => {
      button.setAttribute(
        "data-selected",
        button.id === activeButtonId ? "true" : "false"
      );
    });
  }

  // Function to scroll to top smoothly
  function scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  }

  // Handle scroll behavior for footers
  function handleScroll() {
    sections.forEach((section) => {
      if (section.style.display === "flex") {
        const viewportHeight = window.innerHeight;
        const scrollPosition = window.scrollY;

        // Simple height calculation
        let sectionHeight = section.scrollHeight; // Using scrollHeight instead of getBoundingClientRect

        // Debug logging
        console.log({
          sectionId: section.id,
          viewportHeight,
          scrollHeight: section.scrollHeight,
          offsetHeight: section.offsetHeight,
          clientHeight: section.clientHeight,
          scrollPosition,
          isConSection: section.id === "conSection",
          activeTabId: section.querySelector(
            '[id^="concierge-tabsec"][style*="display: flex"]'
          )?.id,
        });

        const documentHeight = Math.max(sectionHeight, viewportHeight);
        const maxScroll = documentHeight - viewportHeight;
        const scrollPercentage =
          maxScroll <= 0 ? 0 : (scrollPosition / maxScroll) * 100;

        // Get corresponding footer
        const sectionType = section.id.replace("Section", "");
        const correspondingFooter = document.querySelector(
          `.bottom-bar[data-footer="${sectionType}"]`
        );

        if (correspondingFooter) {
          // Adjust threshold for mobile
          const showThreshold = window.innerWidth <= 768 ? 30 : 50;

          if (scrollPercentage >= 98) {
            correspondingFooter.classList.add("active");
            manuallyClosedFooters.delete(correspondingFooter);
          } else if (
            scrollPercentage >= showThreshold &&
            !manuallyClosedFooters.has(correspondingFooter)
          ) {
            correspondingFooter.classList.add("active");
          } else if (scrollPercentage < showThreshold) {
            correspondingFooter.classList.remove("active");
          }

          // Debug footer state
          console.log({
            footerType: sectionType,
            scrollPercentage,
            threshold: showThreshold,
            isActive: correspondingFooter.classList.contains("active"),
            isManuallyClosed: manuallyClosedFooters.has(correspondingFooter),
          });
        }
      }
    });
  }

  // Function to force recalculation of scroll position
  function forceScrollUpdate() {
    setTimeout(() => {
      handleScroll();
    }, 100); // Small delay to ensure content is rendered
  }

  // Add click event listeners to main navigation buttons
  mainButtons.forEach((button) => {
    button.addEventListener("click", function () {
      const sectionId = this.id.replace("Button", "Section");
      showSection(sectionId);
      setSelectedButton(sectionId);
      scrollToTop();

      // If switching to conSection, force update after a delay
      if (sectionId === "conSection") {
        forceScrollUpdate();
      }
    });
  });

  // Add click event listeners to footer buttons
  footerButtons.forEach((button) => {
    button.addEventListener("click", function () {
      const targetSection = this.getAttribute("data-footer-target");
      showSection(targetSection);
      setSelectedButton(targetSection);
      scrollToTop();
    });
  });

  // Set default active section and button
  showSection("expSection");
  setSelectedButton("expSection");

  // Initial scroll handler setup
  window.addEventListener("scroll", handleScroll);

  // Force initial update for conSection if it's the starting section
  if (document.querySelector("#conSection").style.display === "flex") {
    forceScrollUpdate();
  }

  // Add close button functionality
  document.addEventListener("click", function (e) {
    if (e.target.matches("[data-close-footer]")) {
      const footer = e.target.closest(".bottom-bar");
      if (footer) {
        console.log("👆 Footer manually closed");
        footer.classList.remove("active");
        manuallyClosedFooters.add(footer);
        console.log("Currently closed footers:", manuallyClosedFooters.size);
      }
    }
  });
});

[class*=brxe-] { max-width:100%
}

document.addEventListener("DOMContentLoaded", function () {
  // Get the original ticker track and container
  const tickerTrack = document.querySelector(".ticker-track");
  const tickerContainer = document.querySelector(".ticker-container");

  // Create a second container for the reverse direction
  const reverseContainer = document.createElement("div");
  reverseContainer.className = "ticker-container reverse";
  reverseContainer.style.display = "flex";
  tickerContainer.parentNode.insertBefore(
    reverseContainer,
    tickerContainer.nextSibling
  );

  // Clone tracks for the first container (moving right to left)
  const clone1 = tickerTrack.cloneNode(true);
  const clone2 = tickerTrack.cloneNode(true);
  tickerContainer.appendChild(clone1);
  tickerContainer.appendChild(clone2);

  // Create and append tracks for the reverse container (moving left to right)
  const reverseTrack = tickerTrack.cloneNode(true);
  reverseTrack.classList.add("reverse");
  const reverseClone1 = reverseTrack.cloneNode(true);
  const reverseClone2 = reverseTrack.cloneNode(true);
  reverseContainer.appendChild(reverseTrack);
  reverseContainer.appendChild(reverseClone1);
  reverseContainer.appendChild(reverseClone2);

  // Initialize functionality for all tracks
  var tickerTracks = document.querySelectorAll(".ticker-track");

  // Set proper positioning and width for tracks
  tickerTracks.forEach((track) => {
    track.style.position = "relative";
    track.style.width = "auto";
    track.style.minWidth = "auto"; // Ensures each track takes full width
    track.style.display = "flex";
    track.style.justifyContent = "flex-start";
  });

  var tickerLogos = document.querySelectorAll(".ticker-track .ticker-logo");
  var isPaused = false;

  function toggleAnimationState() {
    isPaused = !isPaused;
    var newState = isPaused ? "paused" : "running";
    tickerTracks.forEach((track) => {
      track.style.animationPlayState = newState;
    });
  }

  function controlAnimationState(state) {
    tickerTracks.forEach((track) => {
      track.style.animationPlayState = state;
    });
  }

  tickerTracks.forEach((track) => {
    track.addEventListener("click", toggleAnimationState);
  });

  tickerLogos.forEach((logo) => {
    logo.addEventListener("click", function (event) {
      event.stopPropagation(); // Prevent bubbling
      toggleLogoTransform(this, isPaused);
      toggleAnimationState();
    });
  });

  function toggleLogoTransform(logoElement, pauseStatus) {
    // Apply transform only to the clicked or hovered logo
    if (pauseStatus) {
      logoElement.style.transform = "scale(1)";
    } else {
      logoElement.style.transform = "scale(1.3)";
    }
  }
});