// Decorative texture: fill each .tile-field with a 12x6 grid of grout-line cells
document.querySelectorAll('.tile-field').forEach(field=>{
  field.innerHTML = '<span></span>'.repeat(72);
});

// Decorative texture: fill the About mosaic with a 6x6 grid of tile blocks
document.querySelectorAll('.mosaic').forEach(mosaic=>{
  mosaic.innerHTML = '<div></div>'.repeat(36);
});

// Scroll reveal
const revealEls = document.querySelectorAll('.reveal');
const io = new IntersectionObserver((entries)=>{
  entries.forEach(e=>{
    if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); }
  });
}, {threshold:.15});
revealEls.forEach(el=>io.observe(el));

// Scroll-based active nav highlighting. Built custom instead of relying on
// Bootstrap's data-bs-spy: the mega-menu's product links (AMI 101, AMIFLOOR...)
// also point to href="#products", which made Bootstrap's scrollspy unable to
// reliably tell which link was the "real" nav item — so Products (and, for
// unrelated timing reasons, Contact) never lit up. Watching only the direct
// top-level nav links avoids that ambiguity entirely.
const navLinkMap = new Map();
document.querySelectorAll('#mainNav > li > a.nav-link').forEach(link=>{
  const id = link.getAttribute('href').replace('#','');
  navLinkMap.set(id, link);
});
function setActiveNav(id){
  navLinkMap.forEach((link, key)=> link.classList.toggle('active', key === id));
}
const trackedSections = [...navLinkMap.keys()].map(id=>document.getElementById(id)).filter(Boolean);
const navObserver = new IntersectionObserver((entries)=>{
  let best = null;
  entries.forEach(entry=>{
    if(entry.isIntersecting && (!best || entry.boundingClientRect.top < best.boundingClientRect.top)){
      best = entry;
    }
  });
  if(best) setActiveNav(best.target.id);
}, { rootMargin:'-20% 0px -70% 0px', threshold:0 });
trackedSections.forEach(sec=>navObserver.observe(sec));

// Hero index sync (optional live counter could go here)
const carouselEl = document.getElementById('heroCarousel');
carouselEl.addEventListener('slide.bs.carousel', function () {
  // placeholder for future slide-driven UI updates
});

// Mega menu: hover-intent swap — a short pause before the preview changes,
// so quickly passing the mouse over the list doesn't flicker the image
const megaLinks = document.querySelectorAll('.mega-link');
const megaPreviewImg = document.getElementById('megaPreviewImg');
const megaPreviewLabel = document.getElementById('megaPreviewLabel');
if (megaPreviewImg) megaPreviewImg.classList.add('is-loaded');
let previewIntentTimer = null;
megaLinks.forEach(link=>{
  link.addEventListener('mouseenter', ()=>{
    clearTimeout(previewIntentTimer);
    previewIntentTimer = setTimeout(()=>{
      megaLinks.forEach(l=>l.classList.remove('is-active'));
      link.classList.add('is-active');
      const newSrc = link.dataset.image;
      if (megaPreviewImg.getAttribute('src') === newSrc) return;
      megaPreviewImg.classList.remove('is-loaded');
      setTimeout(()=>{
        megaPreviewImg.src = newSrc;
        megaPreviewImg.alt = link.dataset.label;
        megaPreviewLabel.textContent = link.dataset.label;
        megaPreviewImg.onload = ()=> megaPreviewImg.classList.add('is-loaded');
      }, 120);
    }, 180);
  });
  link.addEventListener('mouseleave', ()=> clearTimeout(previewIntentTimer));
});

// Products dropdown: open instantly, but close only after a short grace
// period — stops the panel from vanishing while the cursor is mid-travel
const megaItem = document.querySelector('.mega-item');
let megaCloseTimer = null;
if (megaItem) {
  const openDropdown = ()=>{ clearTimeout(megaCloseTimer); megaItem.classList.add('mega-open'); };
  const closeDropdown = ()=>{ megaCloseTimer = setTimeout(()=> megaItem.classList.remove('mega-open'), 400); };
  megaItem.addEventListener('mouseenter', openDropdown);
  megaItem.addEventListener('mouseleave', closeDropdown);
  megaItem.addEventListener('focusin', openDropdown);
  megaItem.addEventListener('focusout', closeDropdown);
}

// Mobile menu icon: morph hamburger into a close (X) while the drawer is open
const mobileToggleBtn = document.querySelector('.mobile-toggle');
const mobileNavEl = document.getElementById('mobileNav');
if (mobileToggleBtn && mobileNavEl) {
  mobileNavEl.addEventListener('show.bs.offcanvas', ()=> mobileToggleBtn.classList.add('is-open'));
  mobileNavEl.addEventListener('hidden.bs.offcanvas', ()=> mobileToggleBtn.classList.remove('is-open'));
}

// Tube Epoxy accordion
const solutionItems = document.querySelectorAll('.solution-item');
solutionItems.forEach(item=>{
  item.addEventListener('click', ()=>{
    const isOpen = item.classList.contains('is-open');
    solutionItems.forEach(i=>i.classList.remove('is-open'));
    if(!isOpen) item.classList.add('is-open');
  });
});

