Header auto Background change JS

// Constants
  const BREAKPOINT_DESKTOP = MegaMenuCONFIG.minWidth;
  const DEBOUNCE_DELAY = 100;

  // Configuration object for all header-related selectors
  const HEADER_CONFIG = {
    // Main header element
    headerElement: '.dwc-nest-header',
    // Wrapper element (try class first, then ID as fallback)
    wrapperElement: {
      class: '.dwc-nest-header__container-',
      id: 'brxe-8dc5d5'
    },
    // Logo element and its white variant class
    logo: {
      selector: '.dwc-nest-menu__logo svg',
      whiteClass: 'logo-svg-main--white'
    },
    // Hero section class
    heroSectionClass: 'hero-section', // Configurable hero section class
    // Store original header background color
    originalHeaderBgColor: null
  };

  // Configuration for video sections
  const VIDEO_CONFIG = {
    // Class that identifies video sections
    sectionClass: 'hero-video',
    // Background color to apply to header when over video sections
    headerBgColor: 'transparent', // Change this to your desired color
    // Background class to apply to header when over video sections
    headerBgClass: 'bg--ultra-dark'
  };

  // Text color classes
  const TEXT_CLASSES = {
    light: 'dwc-on-dark-bg',
    dark: 'dwc-on-light-bg'
  };

  // Debounce function for performance optimization
  function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  }

  // Function to get computed background color of an element
  function getComputedBackgroundColor(element) {
    const computedStyle = window.getComputedStyle(element);
    let bgColor = computedStyle.backgroundColor;

    // console.log('Element background color:', bgColor, 'for element:', element);

    return bgColor;
  }

  // Function to convert color to RGB values
  function getRGBValues(color) {
    // Create a temporary element to get computed color
    const temp = document.createElement('div');
    temp.style.color = color;
    document.body.appendChild(temp);
    const computedColor = window.getComputedStyle(temp).color;
    document.body.removeChild(temp);

    // Extract RGB values
    const match = computedColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
    if (match) {
      return {
        r: parseInt(match[1]),
        g: parseInt(match[2]),
        b: parseInt(match[3])
      };
    }

    // Fallback for rgba
    const rgbaMatch = computedColor.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
    if (rgbaMatch) {
      return {
        r: parseInt(rgbaMatch[1]),
        g: parseInt(rgbaMatch[2]),
        b: parseInt(rgbaMatch[3])
      };
    }

    return { r: 255, g: 255, b: 255 }; // Default to white
  }

  // Function to determine if a color is dark or light
  function isColorDark(color) {
    if (color === 'transparent' || color === 'rgba(0, 0, 0, 0)') {
      return false; // Treat transparent as light
    }

    const rgb = getRGBValues(color);
    // Calculate luminance using the standard formula
    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
    return luminance < 0.5;
  }

  // Function that detects which section is currently visible
  function getCurrentSection() {
    const headerElement = document.querySelector(HEADER_CONFIG.headerElement);
    if (!headerElement) return null;

    const headerHeight = headerElement.offsetHeight;
    const sections = Array.from(document.querySelectorAll('section'));

    for (const section of sections) {
      const rect = section.getBoundingClientRect();
      if (rect.top <= headerHeight && rect.bottom > headerHeight) {
        return section;
      }
    }

    return sections[0] || null;
  }

  // Function to initialize original header background color
  function initializeOriginalHeaderBgColor() {
    const headerElement = document.querySelector(HEADER_CONFIG.headerElement);
    if (headerElement) {
      HEADER_CONFIG.originalHeaderBgColor = window.getComputedStyle(headerElement).backgroundColor;
      // console.log('Original header background color:', HEADER_CONFIG.originalHeaderBgColor);
    }
  }

  // Function to determine header style configuration based on section
  function determineHeaderConfig(section) {
    if (!section) return null;

    // Check if it's a hero section
    const isHeroSection = section.classList.contains(HEADER_CONFIG.heroSectionClass);

    // Check if it's a video section
    const isVideoSection = section.classList.contains(VIDEO_CONFIG.sectionClass);

    if (isHeroSection) {
      return {
        backgroundColor: HEADER_CONFIG.originalHeaderBgColor || 'rgb(255, 255, 255)', // Fallback to white if not set
        bgClass: null,
        needsWhiteText: isColorDark(HEADER_CONFIG.originalHeaderBgColor || 'rgb(255, 255, 255)'),
        applyOverrideClass: false, // No override class for hero section
        applyHeroClass: true // Apply hero class for hero section
      };
    }

    if (isVideoSection) {
      return {
        backgroundColor: VIDEO_CONFIG.headerBgColor,
        bgClass: VIDEO_CONFIG.headerBgClass,
        needsWhiteText: true, // Video sections typically need white text
        applyOverrideClass: true, // Apply override class for video section
        applyHeroClass: false // No hero class for video section
      };
    }

    // Get the actual background color of the section
    const sectionBgColor = getComputedBackgroundColor(section);
    const needsWhiteText = isColorDark(sectionBgColor);

    return {
      backgroundColor: sectionBgColor,
      bgClass: null, // We'll determine this based on the color
      needsWhiteText: needsWhiteText,
      applyOverrideClass: true, // Apply override class for other sections
      applyHeroClass: false // No hero class for other sections
    };
  }

  // Function to get header elements
  function getHeaderElements() {
    const headerElement = document.querySelector(HEADER_CONFIG.headerElement);

    // Try to find wrapper by class first, then ID
    let wrapperElement = document.querySelector(HEADER_CONFIG.wrapperElement.class);
    if (!wrapperElement) {
      wrapperElement = document.getElementById(HEADER_CONFIG.wrapperElement.id.replace('#', ''));
    }

    const logo = document.querySelector(HEADER_CONFIG.logo.selector);

    return { headerElement, wrapperElement, logo };
  }

  // Function to apply styles to header elements
  function applyHeaderStyles(elements, config) {
    const { headerElement, wrapperElement, logo } = elements;

    if (!headerElement || !config) return;

    // Remove existing background classes that start with 'bg--'
    const elementsToStyle = [headerElement, wrapperElement].filter(Boolean);

    elementsToStyle.forEach(element => {
      // Remove existing bg classes
      const classList = Array.from(element.classList);
      classList.forEach(cls => {
        if (cls.startsWith('bg--')) {
          element.classList.remove(cls);
        }
      });

      // Remove existing text color classes
      element.classList.remove(TEXT_CLASSES.light, TEXT_CLASSES.dark);

      // Remove bg-color-override and header-on-hero classes
      element.classList.remove('bg-color-override', 'header-on-hero');

      // Apply background color, ensuring no transparency
      const appliedBgColor = config.backgroundColor || '';
      element.style.backgroundColor = appliedBgColor;

      // Set CSS custom property for current background color
      element.style.setProperty('--var-current-header-bg', appliedBgColor);

      // Apply background class if specified
      if (config.bgClass) {
        element.classList.add(config.bgClass);
      }

      // Apply override class if specified
      if (config.applyOverrideClass) {
        element.classList.add('bg-color-override');
      }

      // Apply hero class if specified
      if (config.applyHeroClass) {
        element.classList.add('header-on-hero');
      }

      // Apply text color class
      if (config.needsWhiteText) {
        element.classList.add(TEXT_CLASSES.light);
      } else {
        element.classList.add(TEXT_CLASSES.dark);
      }
    });

    // Handle logo color
    if (logo) {
      if (config.needsWhiteText) {
        logo.classList.add(HEADER_CONFIG.logo.whiteClass);
      } else {
        logo.classList.remove(HEADER_CONFIG.logo.whiteClass);
      }
    }
  }

  // Main function to update header styles
  function updateHeaderStyles() {
    // Apply only on screens larger than the breakpoint
    if (window.innerWidth <= BREAKPOINT_DESKTOP) {
      // console.log('Window width is below breakpoint, skipping header update');
      return;
    }

    const currentSection = getCurrentSection();
    if (!currentSection) {
      // console.log('No current section found');
      return;
    }

    // console.log('Current section:', currentSection, 'Classes:', Array.from(currentSection.classList));

    const headerConfig = determineHeaderConfig(currentSection);
    if (!headerConfig) {
      // console.log('No header config determined');
      return;
    }

    // console.log('Header config:', headerConfig);

    const headerElements = getHeaderElements();
    // console.log('Header elements found:', {
    //   header: !!headerElements.headerElement,
    //   wrapper: !!headerElements.wrapperElement,
    //   logo: !!headerElements.logo
    // });

    applyHeaderStyles(headerElements, headerConfig);
    // console.log('Header styles applied');
  }

  // Initialize on page load
  initializeOriginalHeaderBgColor();
  updateHeaderStyles();

  // Create debounced version for scroll and resize events
  const debouncedUpdateHeaderStyles = debounce(updateHeaderStyles, DEBOUNCE_DELAY);

  // Add event listeners
  window.addEventListener('scroll', debouncedUpdateHeaderStyles);
  window.addEventListener('resize', debouncedUpdateHeaderStyles);