/*prevent FOUC on mobile when using sidebar */
.dwc-mobile :is(.bricks-is-frontend.brx-header-left, .bricks-is-frontend.brx-header-right) #brx-header {
  position: relative;
  inline-size: 100%;
  flex-direction: column;
}

.dwc-mobile .bricks-is-frontend:is(.brx-header-left, .brx-header-right) :is(#brx-content, #brx-footer) {
  margin-inline-start: 0;
}

/*prevent FOUC on desktop when using sidebar */
.bricks-is-frontend:is(.brx-header-left, .brx-header-right):not(.show-nav) .dwc-nav-wrapper {
  display: none;
}

/*=== sidebar css ===*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header {
  flex-direction: column;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);  
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]).no-scroll {
  overflow: visible;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  max-block-size: 100dvb;
  padding-block-end: 12rem;
  overscroll-behavior: contain;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nav-wrapper {
  position: relative;
  overflow: hidden;
  block-size: 100%;
  transform: translateX(0%);
  visibility: visible;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu .brxe-toggle {
  display: none !important;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu {
  display: flex;
  flex-direction: column;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header > div {
  display: flex;
  grid-template-columns: 1fr;
  block-size: 100%;
  flex-direction: column;
  justify-content: flex-start;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-menu-wrap {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr;
  block-size: 100%;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header :is(.brxe-code, .dwc-nest-menu-overlay) {
  display: none;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header {
  inline-size: 100%;
  padding-inline: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu-top {
  min-block-size: var(--top-offset);
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not( [data-hide-close-bar = 'true']) .brx-dropdown-content {
  inset-block-start: calc(var(--top-offset) + 1px) !important;

}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not( [data-submenu-reveal = 'slide']) .brx-dropdown-content:not([data-submenu-reveal = 'slide'] *) {  
  inset-inline-start: 0;
  inset-block-start: unset !important;
  overflow: hidden;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not([data-submenu-reveal = 'slide']) .brxe-dropdown:not(.open.active) > .brx-dropdown-content > .brxe-dropdown:not([data-submenu-reveal = 'slide'] *){
  visibility: hidden;  
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content {
  overscroll-behavior: contain;
  min-inline-size: var(--mobile-menu-width);

}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button:not([data-submenu-reveal = 'expand'] button)  {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal = 'slide'] > .brx-submenu-toggle button  {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button {
  min-block-size: 0;    
}

/* sidebar css ends*/



/*sidebar in builder*/
/*=== sidebar css ===*/
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header {
  flex-direction: column;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
  --top-offset: 40px;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  max-block-size: 100dvb;
  padding-block-end: 12rem;
  overscroll-behavior: contain;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nav-wrapper {
  position: relative;
  overflow: hidden;
  block-size: 100%;
  transform: translateX(0%);
  visibility: visible;
}

body:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu .brxe-toggle {
  display: none !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu {
  display: flex;
  flex-direction: column;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header > div {
  display: flex;
  grid-template-columns: 1fr;
  block-size: 100%;
  flex-direction: column;
  justify-content: flex-start;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-menu-wrap {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr;
  block-size: 100%;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header {
  inline-size: 100%;
  padding-inline: 0;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu-top {
  min-block-size: var(--top-offset);
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brx-dropdown-content {
  inset-block-start: calc(var(--top-offset) - 1px) !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content {
  overscroll-behavior: contain;  
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button {
  min-block-size: 0;    
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu {
  margin: 0 !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] .brx-nav-nested-items {  
  flex-direction: column !important;  
}
   
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-toggle--open.brxe-toggle {
  display: flex !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu .brx-nav-nested-items {
  position: relative !Important;
  background: var(--mobile-menu-bg) !important;
  align-items: stretch;
  flex: 1;
}

:where(.brx-header-left, .brx-header-right)[data-builder-mode]:not(:has(.dwc-sidebar)) .dwc-nest-menu-top::before {
    content: 'this space is the back text bar';
    padding: 1rem;
    background-color: gray;
    color: white;
    width: 100%;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}
 
/* MENU CTA (LAST BUTTON) */
:is(.brx-header-left, .brx-header-right)[data-builder-window] [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
  padding-inline: var(--menu-item-inline-padding) !important;
  padding-block: var(--menu-item-block-padding) !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu-top {
  min-block-size: 80px !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-nav-items {
  overflow-y: scroll;
}

:is(.brx-header-left, .brx-header-right)[data-builder-mode] .brx-dropdown-content {
  min-inline-size: var(--mobile-menu-width);
  position: static;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  flex-wrap: nowrap;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brx-dropdown-content {   
  visibility: visible !important;
  opacity: 1;
}

/*OVERLAY SIDEBAR*/


html:not(.dwc-mobile):has([data-overlay-sidebar=true])  {
 --mobile-menu-bg: rgb(255 255 255 / 0%);
  --menu-item-border: solid 1px rgb(255 255 255 / 50%);
 
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer){
  margin: 0 !important
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer) :where(section):not(section>section) {
  padding-inline-start: calc(var(--mobile-menu-width) + clamp(1.5rem, calc(0.625vw + 1.375rem), 1.875rem));
  max-inline-size: 100%
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) #brx-header {
  border-radius: var(--overlay-sidebar-radius);
  overflow: hidden;
  background: var(--overlay-sidebar-bg);
  box-shadow: var(--overlay-sidebar-shadow) !important;
  inset: var(--overlay-sidebar-inset);
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) .dwc-nest-header{
  backdrop-filter: blur(13px);
  background: transparent !important;
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]):not([data-builder-modee])  .brx-dropdown-content {
   background-color: rgb(255 255 255 / 100%);
}

/*NO BRX-OPEN STYLES*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column !important;
}


  html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu.brxe-nav-nested .brxe-dropdown .brx-dropdown-content {
      visibility: visible;
      min-inline-size: var(--mobile-menu-width) !important;
  }


  html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-dropdown-content {
   position: static;
}


class SidebarNavigation {
  constructor(options = {}) {
    // Basic configuration properties
    this.config = {
      minWidth: options.minWidth || MegaMenuCONFIG.minWidth, // Using external minWidth variable
      menuSelector: options.menuSelector || '.dwc-nest-menu',
      openClass: options.openClass || 'brx-open',
      activeClasses: options.activeClasses || ['open', 'active'],
      leftHeaderClass: options.leftHeaderClass || 'brx-header-left',
      rightHeaderClass: options.rightHeaderClass || 'brx-header-right',
      debounceDelay: options.debounceDelay || 100,
      menuItemClickDelay: options.menuItemClickDelay || 300
    };
    
    // Set dependent selectors
    const menuSelector = this.config.menuSelector;
    this.config.submenuToggleSelector = options.submenuToggleSelector || `${menuSelector} .brx-submenu-toggle`;
    this.config.dropdownSelector = options.dropdownSelector || `${menuSelector} .brxe-dropdown`;
    this.config.dropdownContentSelector = options.dropdownContentSelector || `${menuSelector} .brx-dropdown-content`;
    
    // State
    this.previousHeaderClass = null;
    this.dropdownClickHandlers = new Map();
    this.menuHoverHandlers = null;
    this.menuItemClickTimeout = null;
    this.keyboardNavHandler = null;
    this.cachedFocusableElements = null;
    this.cachedElements = {
      menuElement: null,
      navElement: null,
      dropdowns: null,
      dropdownToggles: null,
      menuItems: null
    };
    
    // Bind methods to this instance
    this.handleResize = this.debounce(this.handleMenu.bind(this), this.config.debounceDelay);
    this.handleOutsideClick = this.handleOutsideClick.bind(this);
  }
  
  // Initialize everything - called once
  init() {
    // Wait for DOM to be fully loaded before attaching events
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => {
        this.initAfterDOMLoaded();
      }, { once: true });
    } else {
      this.initAfterDOMLoaded();
    }
    
    return this;
  }
  
  // Separate initialization method to run after DOM is loaded
  initAfterDOMLoaded() {
    // Cache DOM elements once
    this.cacheElements();
    
    // Setup resize event with passive flag
    window.addEventListener('resize', this.handleResize, { passive: true });
    
    // Setup mutation observer for critical class changes only
    this.setupMutationObserver();
    
    // Initial setup based on current screen size
    this.handleMenu();
    
    // Cache focusable elements once if header class is present
    if (this.hasHeaderClass()) {
      this.cacheFocusableElements();
      this.setupMenuFocusNavigation();
    }
  }
  
  // Cache all required DOM elements upfront
  cacheElements() {
    this.cachedElements.menuElement = document.querySelector(this.config.menuSelector);
    
    if (this.cachedElements.menuElement) {
      this.cachedElements.navElement = this.cachedElements.menuElement.querySelector('.dwc-nest-nav-items');
      this.cachedElements.dropdowns = Array.from(document.querySelectorAll(this.config.dropdownSelector));
      this.cachedElements.dropdownToggles = Array.from(document.querySelectorAll(this.config.submenuToggleSelector));
      this.cachedElements.menuItems = Array.from(document.querySelectorAll(`${this.config.menuSelector} .menu-item`));
    }
  }
  
  // Set up a focused mutation observer only for dropdown state changes
  setupMutationObserver() {
    if (!this.cachedElements.dropdowns || this.cachedElements.dropdowns.length === 0) return;
    
    const callback = (mutations) => {
      for (let mutation of mutations) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          const target = mutation.target;
          const prevClassList = mutation.oldValue ? mutation.oldValue.split(' ') : [];
          const hadBothBefore = prevClassList.includes('open') && prevClassList.includes('active');
          const hasBothNow = target.classList.contains('open') && target.classList.contains('active');
    
          if (hadBothBefore !== hasBothNow) {
            this.updateDropdownAccessibility();
            break; // Only need to update once per batch
          }
        }
      }
    };
    
    // Create observer with optimized options
    this.classObserver = new MutationObserver(callback);
    
    // Observe only the dropdown elements
    this.cachedElements.dropdowns.forEach(dropdown => {
      this.classObserver.observe(dropdown, { 
        attributes: true, 
        attributeFilter: ['class'], 
        attributeOldValue: true 
      });
    });
  }
  
  // Cache focusable elements for keyboard navigation
  cacheFocusableElements() {
    if (!this.cachedElements.navElement) return;
    
    // Get direct children of nav
    const directChildren = Array.from(this.cachedElements.navElement.children);
    
    // Find the first focusable element within each direct child
    this.cachedFocusableElements = directChildren.map(child => {
      // Check if the child itself is focusable
      if (child.matches('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')) {
        return child;
      }
      // Otherwise, find the first focusable element within this child
      return child.querySelector('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
    }).filter(Boolean); // Remove null/undefined values
  }
  
  // Clean up all event listeners and observers
  destroy() {
    // Clean up the mutation observer
    if (this.classObserver) {
      this.classObserver.disconnect();
      this.classObserver = null;
    }
    
    // Clean up resize listener
    window.removeEventListener('resize', this.handleResize);
    
    // Clean up click handlers
    if (this.dropdownClickHandlers.size > 0) {
      this.dropdownClickHandlers.forEach((handler, toggle) => {
        toggle.removeEventListener('click', handler);
      });
      this.dropdownClickHandlers.clear();
    }
    
    // Clean up hover handlers
    this.cleanupMenuHover();
    
    // Clean up menu item click handlers
    this.cleanupMenuItemClicks();
    
    // Clean up outside click handler
    document.removeEventListener('click', this.handleOutsideClick);
    
    // Clean up keyboard navigation
    if (this.keyboardNavHandler) {
      document.removeEventListener('keydown', this.keyboardNavHandler);
      this.keyboardNavHandler = null;
    }
    
    // Clear any pending timeouts
    if (this.menuItemClickTimeout) {
      clearTimeout(this.menuItemClickTimeout);
      this.menuItemClickTimeout = null;
    }
  }
  
  // Utility methods
  hasHeaderClass() {
    return document.body.classList.contains(this.config.leftHeaderClass) || 
           document.body.classList.contains(this.config.rightHeaderClass);
  }
  
  debounce(func, delay) {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => func(...args), delay);
    };
  }

  // Check if an element has all the required active classes
  hasAllActiveClasses(element) {
    return this.config.activeClasses.every(className => element.classList.contains(className));
  }
  
  // Toggle all active classes on an element
  toggleActiveClasses(element) {
    this.config.activeClasses.forEach(className => {
      element.classList.toggle(className);
    });
  }
  
  // Core functionality methods
  handleMenu() {
    if (!this.cachedElements.menuElement) return;
    if (!this.hasHeaderClass() && !this.previousHeaderClass) return;

    const screenWidth = window.innerWidth;
    const isLargeScreen = screenWidth >= this.config.minWidth;
    const menuElement = this.cachedElements.menuElement;

    if (!isLargeScreen) {
      // Save which class was present before removal
      if (this.hasHeaderClass()) {
        this.previousHeaderClass = document.body.classList.contains(this.config.leftHeaderClass) 
          ? this.config.leftHeaderClass 
          : this.config.rightHeaderClass;
        
        // Remove header classes
        document.body.classList.remove(this.config.leftHeaderClass, this.config.rightHeaderClass);
        menuElement.classList.remove(this.config.openClass);
        
        // Reset accessibility attributes
        this.resetAccessibilityAttributes();
      }
      
      // Clean up event handlers for mobile view
      this.cleanupMenuHover();
      this.cleanupMenuItemClicks();
      this.cleanupDropdownHandlers();
      document.removeEventListener('click', this.handleOutsideClick);
      
      return;
    }

    // Large screen behavior
    if (!this.hasHeaderClass() && this.previousHeaderClass) {
      document.body.classList.add(this.previousHeaderClass);
    }

    if (this.hasHeaderClass()) {
      if (!menuElement.classList.contains(this.config.openClass)) {
        menuElement.classList.add(this.config.openClass);
      }
      
      // Setup elements for large screen view
      this.setupMenuHover();
      this.setupMenuItemClicks();
      this.setupDropdownHandlers();
      this.setupMenuFocusNavigation();
      this.updateDropdownAccessibility();
      
      // Ensure outside click handler is set up
      document.removeEventListener('click', this.handleOutsideClick);
      document.addEventListener('click', this.handleOutsideClick, { passive: false });
    }
  }
  
  // Reset accessibility attributes when switching to mobile
  resetAccessibilityAttributes() {
    if (!this.cachedElements.dropdowns) return;
    
    // Remove all inert attributes from dropdown contents
    this.cachedElements.dropdowns.forEach(dropdown => {
      const content = dropdown.querySelector(this.config.dropdownContentSelector);
      if (content) {
        content.removeAttribute('inert');
      }
      
      const button = dropdown.querySelector('button');
      if (button) {
        button.setAttribute('aria-expanded', 'false');
      }
    });
  }
  
  setupMenuFocusNavigation() {
    // Only run if hasHeaderClass() is true and we have focusable elements
    if (!this.hasHeaderClass() || !this.cachedFocusableElements || this.cachedFocusableElements.length === 0) {
      return;
    }
    
    // Clean up previous handler if it exists
    if (this.keyboardNavHandler) {
      document.removeEventListener('keydown', this.keyboardNavHandler, true);
      this.keyboardNavHandler = null;
    }
    
    const navMenu = this.cachedElements.menuElement;
    const focusableElements = this.cachedFocusableElements;
    const firstFocusableElement = focusableElements[0];
    const lastFocusableElement = focusableElements[focusableElements.length - 1];
    
    // Find adjacent focusable elements outside the menu (only once during setup)
    const headerElement = navMenu.closest('header') || document.querySelector('header');
    
    // Prepare variables to hold adjacent elements
    let prevFocusableElement = null;
    let nextFocusableElement = null;
    let firstElementAfterHeader = null;
    
    if (headerElement) {
      // Get all focusable elements within the header - do this once and cache the result
      const headerFocusables = Array.from(
        headerElement.querySelectorAll('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])')
      ).filter(el => window.getComputedStyle(el).display !== 'none');
      
      // Find the index of our first and last menu elements in one pass
      const menuStartIndex = headerFocusables.indexOf(firstFocusableElement);
      const menuEndIndex = headerFocusables.indexOf(lastFocusableElement);
      
      // Cache the adjacent elements
      if (menuStartIndex > 0) {
        prevFocusableElement = headerFocusables[menuStartIndex - 1];
      }
      
      if (menuEndIndex !== -1 && menuEndIndex < headerFocusables.length - 1) {
        nextFocusableElement = headerFocusables[menuEndIndex + 1];
      }
      
      // Pre-calculate the first element after header - but only if needed
      if (!nextFocusableElement) {
        // Use a more efficient selector that targets immediate children of body that aren't the header
        const selector = 'body > *:not(header)';
        const nonHeaderElements = document.querySelectorAll(selector);
        
        // Only process if we have elements
        if (nonHeaderElements.length > 0) {
          // Create a function to find the first focusable element (used later if needed)
          this.findFirstFocusableAfterHeader = () => {
            for (const element of nonHeaderElements) {
              const focusable = element.querySelector('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])');
              if (focusable && window.getComputedStyle(focusable).display !== 'none') {
                return focusable;
              }
            }
            return null;
          };
        }
      }
    }
    
    // Create keyboard navigation handler with closure over the cached elements
    this.keyboardNavHandler = (e) => {
      // Quick check for Tab key first
      if (e.key !== 'Tab') return;
      
      // Then check if focus is inside the menu
      if (!navMenu.contains(document.activeElement)) return;
      
      let targetElement = null;
      
      // Handle tab navigation at boundaries only
      if (!e.shiftKey && document.activeElement === lastFocusableElement) {
        // Forward tab from last element
        e.preventDefault();
        e.stopPropagation();
        
        if (nextFocusableElement) {
          targetElement = nextFocusableElement;
        } else if (this.findFirstFocusableAfterHeader) {
          // Only search for elements after header if needed and not already found
          firstElementAfterHeader = this.findFirstFocusableAfterHeader();
          targetElement = firstElementAfterHeader;
        }
        
        // Focus on the target or body as fallback
        setTimeout(() => {
          if (targetElement) {
            targetElement.focus();
          } else {
            document.body.setAttribute('tabindex', '-1');
            document.body.focus();
            document.body.removeAttribute('tabindex');
          }
        }, 10);
      } 
      else if (e.shiftKey && document.activeElement === firstFocusableElement) {
        // Backward tab from first element
        e.preventDefault();
        e.stopPropagation();
        
        setTimeout(() => {
          if (prevFocusableElement) {
            prevFocusableElement.focus();
          } else {
            document.body.setAttribute('tabindex', '-1');
            document.body.focus();
            document.body.removeAttribute('tabindex');
          }
        }, 10);
      }
    };
    
    // Use capture phase for the event
    document.addEventListener('keydown', this.keyboardNavHandler, true);
  }
  
  setupMenuHover() {
    const menuElement = this.cachedElements.menuElement;
    if (!menuElement) return;
    
    // Clean up existing hover handlers first
    this.cleanupMenuHover();
    
    // Create event handlers
    const mouseenterHandler = () => {
      menuElement.classList.add(this.config.openClass);
    };
    
    const mouseleaveHandler = () => {
      menuElement.classList.remove(this.config.openClass);
    };
    
    // Add event listeners with passive flag for better performance
    menuElement.addEventListener('mouseenter', mouseenterHandler, { passive: true });
    menuElement.addEventListener('mouseleave', mouseleaveHandler, { passive: true });
    
    // Store the handlers for cleanup
    this.menuHoverHandlers = {
      element: menuElement,
      mouseenter: mouseenterHandler,
      mouseleave: mouseleaveHandler
    };
  }
  
  cleanupMenuHover() {
    if (this.menuHoverHandlers) {
      const { element, mouseenter, mouseleave } = this.menuHoverHandlers;
      element.removeEventListener('mouseenter', mouseenter);
      element.removeEventListener('mouseleave', mouseleave);
      this.menuHoverHandlers = null;
    }
  }
  
  setupMenuItemClicks() {
    if (!this.cachedElements.menuItems || this.cachedElements.menuItems.length === 0) return;
    
    // Clean up existing handlers first
    this.cleanupMenuItemClicks();
    
    const menuElement = this.cachedElements.menuElement;
    const menuItemHandlers = new Map();
    
    this.cachedElements.menuItems.forEach(item => {
      const clickHandler = () => {
        if (this.hasHeaderClass()) {
          // Clear any existing timeout
          if (this.menuItemClickTimeout) {
            clearTimeout(this.menuItemClickTimeout);
          }
          
          // Set timeout before adding the class
          this.menuItemClickTimeout = setTimeout(() => {
            if (!menuElement.classList.contains(this.config.openClass)) {
              menuElement.classList.add(this.config.openClass);
            }
          }, this.config.menuItemClickDelay);
        }
      };
      
      menuItemHandlers.set(item, clickHandler);
      item.addEventListener('click', clickHandler);
    });
    
    this.menuItemClickHandlers = menuItemHandlers;
  }
  
  cleanupMenuItemClicks() {
    if (this.menuItemClickHandlers && this.menuItemClickHandlers instanceof Map) {
      this.menuItemClickHandlers.forEach((handler, item) => {
        item.removeEventListener('click', handler);
      });
      this.menuItemClickHandlers.clear();
    }
    
    if (this.menuItemClickTimeout) {
      clearTimeout(this.menuItemClickTimeout);
      this.menuItemClickTimeout = null;
    }
  }
  
  setupDropdownHandlers() {
    if (!this.hasHeaderClass() || !this.cachedElements.dropdownToggles) return;
    
    // Clean up existing handlers first
    this.cleanupDropdownHandlers();
    
    this.cachedElements.dropdownToggles.forEach(toggle => {
      const clickHandler = (event) => {
        event.stopPropagation();
        event.preventDefault();
        
        const dropdown = toggle.closest(this.config.dropdownSelector);
        if (dropdown) {
          this.toggleActiveClasses(dropdown);
          this.updateDropdownAccessibility();
        }
      };
      
      this.dropdownClickHandlers.set(toggle, clickHandler);
      toggle.addEventListener('click', clickHandler);
    });
  }
  
  cleanupDropdownHandlers() {
    if (this.dropdownClickHandlers.size > 0) {
      this.dropdownClickHandlers.forEach((handler, toggle) => {
        toggle.removeEventListener('click', handler);
      });
      this.dropdownClickHandlers.clear();
    }
  }
  
  handleOutsideClick(event) {
    if (event.target.tagName === 'A') return;
    if (!event.target.closest(this.config.dropdownSelector)) return;
    if (!event.target.closest(this.config.submenuToggleSelector)) {
      event.preventDefault();
      event.stopPropagation();
    }
  }
  
  updateDropdownAccessibility() {
    // Only run if hasHeaderClass() is true
    if (!this.hasHeaderClass() || !this.cachedElements.dropdowns) return;
    
    this.cachedElements.dropdowns.forEach(dropdown => {
      const content = dropdown.querySelector(this.config.dropdownContentSelector);
      const button = dropdown.querySelector('button');
      
      // Check if dropdown has all active classes
      const isOpen = this.hasAllActiveClasses(dropdown);
      
      if (content) {
        if (isOpen) {
          content.removeAttribute('inert');
        } else {
          content.setAttribute('inert', '');
        }
      }
      
      if (button) {
        button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
      }
    });
  }
}


const sidebarNav = new SidebarNavigation().init();

Cloverdale construction services

Trusted Local Construction Experts in Cloverdale

VALROC Development Ltd. is proud to serve homeowners, businesses, and strata communities within Cloverdale, BC, with our trusted construction services and expertise.

Explore our construction services, completed projects, and customer-focused solutions.

Customer confidence

Why Cloverdale customers can plan with confidence

Cloverdale projects benefit from local operating support and planning that accounts for established neighbourhoods, growing areas, access, drainage, and City of Surrey requirements.

What clients value

  • Insurance and liability coverage that helps protect the homeowner
  • Detailed contracts covering materials, payment schedules, walkthroughs, and warranties
  • Competitive pricing supported by coordinated scheduling and in-house services
  • One accountable contractor for communication, scheduling, trades, and project efficiencies
  • Reliable crews, consistent communication, and project accountability from start to finish

Local operating support for Cloverdale construction

Cloverdale combines established homes and businesses with growing neighbourhoods and changing site conditions. Proximity to our construction yard supports practical discussions about equipment, materials, crews, access, and mobilization.

Customers benefit from a property-specific plan that connects Surrey requirements, drainage, staging, neighbouring properties, and the services needed to complete the work.

Local construction planning

Construction support for Cloverdale properties

Construction planning in Cloverdale starts with the property, the municipal jurisdiction, and the practical conditions that affect approvals, access, sequencing, equipment, and material movement.

CONSTRUCTION SERVICE DIRECTORY

Browse construction services by category

Open the complete construction service hub, choose a service category, or go directly to a core service.

Decisions before construction

What we assess during a Cloverdale on-site visit

A site conversation can identify alternatives before costs are committed, particularly where driveway access, neighbouring homes, occupied spaces, deliveries, drainage, and material movement affect the plan.

01

Property and access

Review driveway access, neighbouring homes, occupied spaces, deliveries, drainage, and material movement in relation to the result you want and the equipment or material movement the work may require.

02

City of Surrey requirements

Identify likely City of Surrey permit, demolition, and land-development requirements, utility-locate responses, disposal requirements, and property-specific questions before finalizing the sequence.

03

Phasing around the property

Coordinate crews, deliveries, occupied areas, hauling, and site protection so the construction sequence reflects how this Cloverdale property is actually used.

A practical route forward

How a Cloverdale project moves from idea to construction

The exact sequence depends on the work and property. Early review of City of Surrey requirements, access, disposal, equipment, and customer priorities helps turn an idea into a coordinated plan.

Confirm City of Surrey requirements

Identify likely permits, utility locates, disposal needs, technical details, and property-specific approvals.

Coordinate local mobilization

Plan crews, equipment, deliveries, hauling, protection, and staging around the neighbourhood and property conditions.

Complete and review the work

Build the agreed scope in sequence, review important site and finished details, and provide a clear customer handoff.

Review the Cloverdale property

Discuss the result, access, drainage, neighbours, existing services, active use, and the space available for equipment and materials.

What customers gain from the way we work

Customer benefits behind a well-planned Cloverdale project

These advantages help customers evaluate more than a price, including project clarity, relevant experience, site coordination, in-house capability, and the way disruption will be managed.

Customer benefit icon

Minimal Disruptions, Maximum Efficiency

We respect your time and space, ensuring efficient construction with minimal disruptions to your home or business.

Customer benefit icon

Comprehensive Contracts – No Surprises, Just Clarity

Our contracts eliminate guesswork with clearly defined terms, pricing, timelines, and warranties, ensuring total transparency and peace of mind.

Customer benefit icon

Expertise Built on Hundreds of Completed Projects

With a strong portfolio of completed work, our experience ensures high-quality craftsmanship and efficient project execution.

Customer benefit icon

A Reputation Built on Trust and Customer Satisfaction

Our reputation is built on trust, industry recognition, and strong professional relationships, ensuring confidence in every project we take on.

In-house capability

Equipment that supports construction work in Cloverdale

Our Langley yard provides a base for selecting and staging equipment for Cloverdale projects around access, excavation depth, hauling, material movement, compaction, and the actual scope of work.

John Deere excavator representing VALROC's compact to large excavator fleet.
Excavation and demolition site in Metro Vancouver with heavy machinery preparing for new construction.

Excavation fleet

Excavators matched to the site

Our in-house range includes compact machines for tight access, mid-size excavators for precise residential work, larger Deere excavators for deeper excavation and material handling, plus hydraulic breaker capability for concrete and rock removal.

  • Large, medium, small excavators
  • Demolition, Site preparation
  • Hydraulic hammers, crushers
  • Multiple attachments
Ammann ARX 2.1-2 and ARX 2-2 light tandem rollers featuring advanced articulation joints and electronic drive levers for precise asphalt and soil compaction.
Asphalt paving with a modern roller compactor in Metro Vancouver construction site.

Heavy Machinery & Earthmoving Equipment

Tandem Roller Compactor

Delivers smooth, even asphalt and soil compaction, improving surface durability and road longevity.

Heavy-duty flatbed service and delivery truck used for transporting equipment, towing gooseneck trailers, and carrying on-site fuel tanks.
Modern building renovation site in Vancouver featuring VALROC Development Ltd. truck for construction and building improvements.

Mobile Construction Equipped Service Vehicles

Flatbed Service & Delivery Truck

Facilitates equipment and material transport, allowing us to move multiple machines and long materials efficiently.

Wacker Neuson DT08 track dumper – compact 0.8-ton payload machine with hydrostatic drive and 79 cm width, ideal for confined construction sites.
Efficient street paving in Vancouver with Wacker Neuson mini dumper for smooth road construction.

Heavy Machinery & Earthmoving Equipment

Rubber Track Dumper

A compact, maneuverable track dumper that allows us to transport materials through tight spaces, improving site logistics and reducing manual labour.

International single-axle dump truck used for hauling materials, demolition debris, and construction site logistics.
Professional construction truck at VALROC Development Ltd. site in Metro Vancouver, showcasing quality renovation and development services.

Heavy Machinery & Earthmoving Equipment

Single Axle Dump Truck

A high-capacity hauler for transporting materials, debris, and equipment, streamlining job site cleanup and logistics.

Hino 198 box truck – a fully equipped 3-ton mobile service truck carrying essential contracting tools for concrete, asphalt, and carpentry work.
Reliable Vancouver-based construction and development services by Valroc Development Ltd. in Metro Vancouver.

Mobile Construction Equipped Service Vehicles

Fully Stocked Mobile Service Truck

Our fully equipped mobile service truck, essential for transporting contracting tools, materials, and heavy-duty equipment, ensuring on-site readiness and maximum efficiency.

John Deere 320D Skid Steer Loader with a 63 hp engine and 2,000 lbs operating capacity, ideal for versatile construction tasks.
Excavator working in a lush forested area for land clearing and excavation services.

Heavy Machinery & Earthmoving Equipment

Versatile Skid Steer Loader

A compact excavator with strong digging power, perfect for tight job sites requiring precision excavation.

High-value planning information

Local resources for construction decisions

Verified municipal, utility, recycling, and disposal contacts for construction decisions in Cloverdale. Use each section for a focused task, then confirm current requirements with the authority before acting.

Municipal information for construction planning in Cloverdale, British Columbia.

Common local questions

Frequently asked questions for Cloverdale

Open only the answer you need. These questions remain connected through the existing Location relationship.

Do I need a permit for a new driveway in Cloverdale, BC ?

Yes, a permit is required if you are building a new driveway or modifying the size or placement of an existing one. However, if you are repairing or replacing an existing driveway with the same dimensions, a permit is generally not required. The City of Surrey’s Engineering Department oversees driveway regulations and approvals.

At VALROC Development Ltd., we handle all necessary approvals and construction processes, ensuring your project meets Surrey’s municipal guidelines. If you need a driveway installation, repair, or extension in Cloverdale, we can help streamline the process and ensure compliance with city standards.

📍 Contact: Engineering Department – Engineering Counter Services

📍 Permit Information: planningdevelopment@surrey.ca

Do I need a permit for a new driveway in Cloverdale, BC ?

Yes, a permit is required if you are building a new driveway or modifying the size or placement of an existing one. However, if you are repairing or replacing an existing driveway with the same dimensions, a permit is generally not required. The City of Surrey’s Engineering Department oversees driveway regulations and approvals.

At VALROC Development Ltd., we handle all necessary approvals and construction processes, ensuring your project meets Surrey’s municipal guidelines. If you need a driveway installation, repair, or extension in Cloverdale, we can help streamline the process and ensure compliance with city standards.

📍 Contact: Engineering Department – Engineering Counter Services

📍 Permit Information: planningdevelopment@surrey.ca

How do I submit a land development or building permit application in Cloverdale?


The City of Surrey’s Planning and Development Department handles all land development, zoning, and building permits. Applications can be submitted online for:

• Residential and commercial building permits

• Development and rezoning applications

• Subdivision approvals

Our team at VALROC Development Ltd. has extensive experience securing permits in Cloverdale for everything from custom home builds to major renovations and commercial developments. We can assist with applications, engineering approvals, and zoning compliance to keep your project on track.

📍 Contact: Planning and Development – Apply for a Permit

How do I submit a land development or building permit application in Cloverdale?


The City of Surrey’s Planning and Development Department handles all land development, zoning, and building permits. Applications can be submitted online for:

• Residential and commercial building permits

• Development and rezoning applications

• Subdivision approvals

Our team at VALROC Development Ltd. has extensive experience securing permits in Cloverdale for everything from custom home builds to major renovations and commercial developments. We can assist with applications, engineering approvals, and zoning compliance to keep your project on track.

📍 Contact: Planning and Development – Apply for a Permit

Where can I find waste collection schedules and regulations in Cloverdale?

The City of Surrey’s Waste Collection Department manages garbage, recycling, and organic waste collection schedules for Cloverdale residents and businesses. You can view your collection schedule, learn about large item pickups, and find information on proper disposal of construction materials.

For our construction projects in Cloverdale, we ensure that all debris is responsibly disposed of, and we can coordinate proper waste management to meet city regulations.

📍 Contact: Waste Collection – 604-590-7289 | Collection Schedules

Where can I find waste collection schedules and regulations in Cloverdale?

The City of Surrey’s Waste Collection Department manages garbage, recycling, and organic waste collection schedules for Cloverdale residents and businesses. You can view your collection schedule, learn about large item pickups, and find information on proper disposal of construction materials.

For our construction projects in Cloverdale, we ensure that all debris is responsibly disposed of, and we can coordinate proper waste management to meet city regulations.

📍 Contact: Waste Collection – 604-590-7289 | Collection Schedules

What Are Some Construction Projects VALROC Has Completed in Cloverdale?

Cloverdale has been a key service area for VALROC Development Ltd., where we have completed a wide range of residential, commercial, and strata projects. Our expertise extends across various construction disciplines, ensuring top-quality results while meeting Surrey’s municipal building codes and zoning regulations.

Custom Home Builds & Luxury Residential Projects in Cloverdale

We have built high-end custom homes tailored to our clients’ visions, incorporating modern designs, high-efficiency materials, and precision craftsmanship. Whether it’s a luxury estate, a contemporary laneway home, or a full-property redevelopment, we manage everything from permits to final finishes. Many of our Cloverdale clients have trusted us to design and build energy-efficient, smart-tech integrated homes that enhance both functionality and aesthetics.

Concrete Driveways, Sidewalks & Patios in Cloverdale

Concrete is a durable and cost-effective solution for residential and commercial properties in Cloverdale. We have installed reinforced concrete driveways, sidewalks, and patios that enhance curb appeal while providing long-lasting durability against BC’s changing weather conditions. Whether it’s a decorative stamped concrete patio or a structurally reinforced driveway, our team ensures proper base preparation and compaction to maximize longevity.

Excavation & Site Preparation for New Builds in Cloverdale

Proper site preparation is essential for any successful construction project. Our excavation and grading services in Cloverdale include:

• Land clearing and grading to prepare for home and commercial builds

• Trenching for utilities, drainage, and sewer connections

• Preload and structural fill for optimal foundation support

We have completed excavation services for residential homeowners, businesses, and strata developments, ensuring efficient land preparation for future projects.

Asphalt Paving for Commercial Parking Lots & Roadways in Cloverdale

From small business parking lots to large-scale road paving projects, we provide smooth, long-lasting asphalt paving solutions throughout Cloverdale. Our team follows strict compaction and sub-base preparation techniques, ensuring durability and resistance to heavy vehicle traffic. Whether resurfacing an existing lot or installing new asphalt infrastructure, our experience in the Cloverdale area ensures professional results.

Structural Modifications & Engineered Retaining Walls in Cloverdale

Surrey’s zoning and terrain can require custom retaining wall solutions for sloped properties, erosion control, and added stability. We have installed reinforced concrete, block, and timber retaining walls throughout Cloverdale, enhancing both function and aesthetics. Our structural modification projects also include:

• Load-bearing wall removals for home expansions

• Foundation reinforcements for aging structures

• Basement underpinning for additional living space

Perimeter Drainage, Drain Tile Repairs & Water Management in Cloverdale

Effective drainage is critical for preventing water damage and foundation issues. In Cloverdale, we have successfully installed comprehensive drainage solutions, including:

• Perimeter drain tile replacements for residential homes

• Stormwater management systems for commercial sites

• Slope drainage corrections to prevent erosion and flooding

Our experience working with Surrey’s Engineering Department ensures that all drainage projects comply with local regulations and provide long-term protection for properties.

Heritage Restorations & Home Additions in Cloverdale

Cloverdale is known for its historic charm, and we have worked on numerous heritage restoration projects to preserve the integrity of older buildings while upgrading them to modern standards. Our team specializes in:

• Structural reinforcements for aging homes

• Restoring historical features while enhancing energy efficiency

• Seamless home additions that blend with the existing structure

For homeowners looking to expand their living space, our custom home addition services provide everything from foundation work to final interior finishes, ensuring smooth project execution.


At VALROC Development Ltd., we are proud to be a trusted construction partner for homeowners, businesses, and strata properties in Cloverdale. Whether you need a new driveway, custom home, drainage solution, or full-scale excavation project, our experienced team is ready to help.

📍 Contact Us for a Free Estimate – VALROC Development Ltd.

This format enhances SEO visibility by incorporating Cloverdale throughout the descriptions while making the content engaging and informative for potential clients. Let me know if you need any refinements!

What Are Some Construction Projects VALROC Has Completed in Cloverdale?

Cloverdale has been a key service area for VALROC Development Ltd., where we have completed a wide range of residential, commercial, and strata projects. Our expertise extends across various construction disciplines, ensuring top-quality results while meeting Surrey’s municipal building codes and zoning regulations.

Custom Home Builds & Luxury Residential Projects in Cloverdale

We have built high-end custom homes tailored to our clients’ visions, incorporating modern designs, high-efficiency materials, and precision craftsmanship. Whether it’s a luxury estate, a contemporary laneway home, or a full-property redevelopment, we manage everything from permits to final finishes. Many of our Cloverdale clients have trusted us to design and build energy-efficient, smart-tech integrated homes that enhance both functionality and aesthetics.

Concrete Driveways, Sidewalks & Patios in Cloverdale

Concrete is a durable and cost-effective solution for residential and commercial properties in Cloverdale. We have installed reinforced concrete driveways, sidewalks, and patios that enhance curb appeal while providing long-lasting durability against BC’s changing weather conditions. Whether it’s a decorative stamped concrete patio or a structurally reinforced driveway, our team ensures proper base preparation and compaction to maximize longevity.

Excavation & Site Preparation for New Builds in Cloverdale

Proper site preparation is essential for any successful construction project. Our excavation and grading services in Cloverdale include:

• Land clearing and grading to prepare for home and commercial builds

• Trenching for utilities, drainage, and sewer connections

• Preload and structural fill for optimal foundation support

We have completed excavation services for residential homeowners, businesses, and strata developments, ensuring efficient land preparation for future projects.

Asphalt Paving for Commercial Parking Lots & Roadways in Cloverdale

From small business parking lots to large-scale road paving projects, we provide smooth, long-lasting asphalt paving solutions throughout Cloverdale. Our team follows strict compaction and sub-base preparation techniques, ensuring durability and resistance to heavy vehicle traffic. Whether resurfacing an existing lot or installing new asphalt infrastructure, our experience in the Cloverdale area ensures professional results.

Structural Modifications & Engineered Retaining Walls in Cloverdale

Surrey’s zoning and terrain can require custom retaining wall solutions for sloped properties, erosion control, and added stability. We have installed reinforced concrete, block, and timber retaining walls throughout Cloverdale, enhancing both function and aesthetics. Our structural modification projects also include:

• Load-bearing wall removals for home expansions

• Foundation reinforcements for aging structures

• Basement underpinning for additional living space

Perimeter Drainage, Drain Tile Repairs & Water Management in Cloverdale

Effective drainage is critical for preventing water damage and foundation issues. In Cloverdale, we have successfully installed comprehensive drainage solutions, including:

• Perimeter drain tile replacements for residential homes

• Stormwater management systems for commercial sites

• Slope drainage corrections to prevent erosion and flooding

Our experience working with Surrey’s Engineering Department ensures that all drainage projects comply with local regulations and provide long-term protection for properties.

Heritage Restorations & Home Additions in Cloverdale

Cloverdale is known for its historic charm, and we have worked on numerous heritage restoration projects to preserve the integrity of older buildings while upgrading them to modern standards. Our team specializes in:

• Structural reinforcements for aging homes

• Restoring historical features while enhancing energy efficiency

• Seamless home additions that blend with the existing structure

For homeowners looking to expand their living space, our custom home addition services provide everything from foundation work to final interior finishes, ensuring smooth project execution.


At VALROC Development Ltd., we are proud to be a trusted construction partner for homeowners, businesses, and strata properties in Cloverdale. Whether you need a new driveway, custom home, drainage solution, or full-scale excavation project, our experienced team is ready to help.

📍 Contact Us for a Free Estimate – VALROC Development Ltd.

This format enhances SEO visibility by incorporating Cloverdale throughout the descriptions while making the content engaging and informative for potential clients. Let me know if you need any refinements!

What local business and development resources are available in Cloverdale?

Cloverdale offers several business and trade resources, including:

• Cloverdale District Chamber of Commerce – Supports local businesses and economic development.

• Kwantlen Polytechnic University (KPU) Trades Programs – Provides skilled trade apprenticeships and training in construction-related fields.

We actively support local businesses, work with skilled tradespeople, and participate in Cloverdale’s economic growth through our construction services.

📍 Cloverdale Chamber of Commerce – Learn More

📍 KPU Trades Programs – Explore Trades

What local business and development resources are available in Cloverdale?

Cloverdale offers several business and trade resources, including:

• Cloverdale District Chamber of Commerce – Supports local businesses and economic development.

• Kwantlen Polytechnic University (KPU) Trades Programs – Provides skilled trade apprenticeships and training in construction-related fields.

We actively support local businesses, work with skilled tradespeople, and participate in Cloverdale’s economic growth through our construction services.

📍 Cloverdale Chamber of Commerce – Learn More

📍 KPU Trades Programs – Explore Trades

What makes VALROC Development Ltd. the right choice for construction projects in Cloverdale?

With a strong track record in Cloverdale and throughout Metro Vancouver, we offer:

✅ Comprehensive construction services – From permits to final completion.

✅ Expert knowledge of local regulations – Ensuring compliance with city bylaws.

✅ A hands-on approach – Our team is involved in every stage, from excavation to finishing.

✅ High-quality craftsmanship – Proven experience in residential, strata, and commercial projects.

Whether you need a new driveway, custom home build, or large-scale site development, we provide trusted, professional construction solutions.

📍 Get in Touch for a Consultation – VALROC Development Ltd.

What makes VALROC Development Ltd. the right choice for construction projects in Cloverdale?

With a strong track record in Cloverdale and throughout Metro Vancouver, we offer:

✅ Comprehensive construction services – From permits to final completion.

✅ Expert knowledge of local regulations – Ensuring compliance with city bylaws.

✅ A hands-on approach – Our team is involved in every stage, from excavation to finishing.

✅ High-quality craftsmanship – Proven experience in residential, strata, and commercial projects.

Whether you need a new driveway, custom home build, or large-scale site development, we provide trusted, professional construction solutions.

📍 Get in Touch for a Consultation – VALROC Development Ltd.

The Types of Clients We Work With in Cloverdale

At VALROC Development Ltd., we provide comprehensive construction solutions for homeowners, strata properties, and commercial businesses in Cloverdale, BC. Our expertise spans a diverse range of projects, from custom home builds and driveways to large-scale commercial infrastructure. With a hands-on team, advanced equipment, and years of experience, we ensure high-quality results tailored to the unique needs of each client type.

Residential Construction for Homeowners in Cloverdale

Homeowners in Cloverdale trust us for everything from home renovations to complete new builds. Whether it’s a small upgrade or a major construction project, we offer full-service solutions, including:

• Concrete & Asphalt Driveways – Professionally installed to enhance curb appeal and long-term durability.

• Home Additions & Structural Modifications – Expanding living spaces while maintaining seamless design integration.

• Excavation & Site Preparation – Ensuring a stable foundation for new builds and landscaping projects.

• Custom Home Builds – Working with homeowners to create fully customized, energy-efficient homes.

We also help homeowners navigate permits, zoning requirements, and construction approvals in Cloverdale, making the process seamless and stress-free. Our team ensures that every project is built to last, using high-quality materials and precision craftsmanship.

Strata Property Construction & Maintenance in Cloverdale

Strata properties require expert planning and execution to maintain safety, longevity, and curb appeal. We work with property managers, strata councils, and building owners to provide reliable construction and maintenance services, such as:

• Asphalt & Concrete Paving for Strata Complexes – Ensuring smooth, durable surfaces for parking lots, walkways, and communal areas.

• Structural Repairs & Upgrades – Keeping buildings safe, up to code, and visually appealing.

• Drainage & Water Management Solutions – Preventing foundation damage, pooling water, and erosion issues.

• Regular Maintenance & Emergency Repairs – Addressing issues before they escalate and providing quick solutions for urgent repairs.

Our team understands the unique challenges that come with strata construction, ensuring that projects are completed efficiently, within budget, and with minimal disruption to residents.

Business & Commercial Construction in Cloverdale

Cloverdale is home to a thriving business community, and VALROC Development Ltd. is proud to support commercial clients with high-quality construction services. From small business renovations to large-scale commercial builds, we help businesses enhance their spaces, functionality, and operational efficiency. Our services include:

• Commercial Parking Lot Paving & Maintenance – High-traffic surfaces that withstand wear and tear while maintaining safety and aesthetics.

• Retail & Office Space Renovations – Upgrading business spaces for better functionality and customer experience.

• Excavation & Land Development for Business Expansions – Preparing sites for new commercial construction.

• Industrial & Warehouse Construction – Providing safe, durable, and efficient workspaces for businesses in Cloverdale.

Our hands-on approach ensures that commercial clients receive custom solutions that meet their operational needs, all while adhering to local building codes and zoning regulations.


Why Choose VALROC Development Ltd. for Your Cloverdale Project?

Our deep-rooted experience in Cloverdale allows us to deliver exceptional results across residential, strata, and commercial projects. We handle everything from permitting to final construction, making the process efficient, cost-effective, and stress-free.

📍 Get in Touch for a Free Estimate – VALROC Development Ltd.

The Types of Clients We Work With in Cloverdale

At VALROC Development Ltd., we provide comprehensive construction solutions for homeowners, strata properties, and commercial businesses in Cloverdale, BC. Our expertise spans a diverse range of projects, from custom home builds and driveways to large-scale commercial infrastructure. With a hands-on team, advanced equipment, and years of experience, we ensure high-quality results tailored to the unique needs of each client type.

Residential Construction for Homeowners in Cloverdale

Homeowners in Cloverdale trust us for everything from home renovations to complete new builds. Whether it’s a small upgrade or a major construction project, we offer full-service solutions, including:

• Concrete & Asphalt Driveways – Professionally installed to enhance curb appeal and long-term durability.

• Home Additions & Structural Modifications – Expanding living spaces while maintaining seamless design integration.

• Excavation & Site Preparation – Ensuring a stable foundation for new builds and landscaping projects.

• Custom Home Builds – Working with homeowners to create fully customized, energy-efficient homes.

We also help homeowners navigate permits, zoning requirements, and construction approvals in Cloverdale, making the process seamless and stress-free. Our team ensures that every project is built to last, using high-quality materials and precision craftsmanship.

Strata Property Construction & Maintenance in Cloverdale

Strata properties require expert planning and execution to maintain safety, longevity, and curb appeal. We work with property managers, strata councils, and building owners to provide reliable construction and maintenance services, such as:

• Asphalt & Concrete Paving for Strata Complexes – Ensuring smooth, durable surfaces for parking lots, walkways, and communal areas.

• Structural Repairs & Upgrades – Keeping buildings safe, up to code, and visually appealing.

• Drainage & Water Management Solutions – Preventing foundation damage, pooling water, and erosion issues.

• Regular Maintenance & Emergency Repairs – Addressing issues before they escalate and providing quick solutions for urgent repairs.

Our team understands the unique challenges that come with strata construction, ensuring that projects are completed efficiently, within budget, and with minimal disruption to residents.

Business & Commercial Construction in Cloverdale

Cloverdale is home to a thriving business community, and VALROC Development Ltd. is proud to support commercial clients with high-quality construction services. From small business renovations to large-scale commercial builds, we help businesses enhance their spaces, functionality, and operational efficiency. Our services include:

• Commercial Parking Lot Paving & Maintenance – High-traffic surfaces that withstand wear and tear while maintaining safety and aesthetics.

• Retail & Office Space Renovations – Upgrading business spaces for better functionality and customer experience.

• Excavation & Land Development for Business Expansions – Preparing sites for new commercial construction.

• Industrial & Warehouse Construction – Providing safe, durable, and efficient workspaces for businesses in Cloverdale.

Our hands-on approach ensures that commercial clients receive custom solutions that meet their operational needs, all while adhering to local building codes and zoning regulations.


Why Choose VALROC Development Ltd. for Your Cloverdale Project?

Our deep-rooted experience in Cloverdale allows us to deliver exceptional results across residential, strata, and commercial projects. We handle everything from permitting to final construction, making the process efficient, cost-effective, and stress-free.

📍 Get in Touch for a Free Estimate – VALROC Development Ltd.