script.js

/* ═══════════════════════════════════════════════════════════
   IPL DATA INTELLIGENCE — script.js
═══════════════════════════════════════════════════════════ */

// ── NAV: add scrolled class on scroll ───────────────────
const nav = document.getElementById('nav');

window.addEventListener('scroll', () => {
  if (window.scrollY > 40) {
    nav.classList.add('scrolled');
  } else {
    nav.classList.remove('scrolled');
  }
}, { passive: true });


// ── SMOOTH SCROLL for nav links ──────────────────────────
document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', e => {
    const target = document.querySelector(link.getAttribute('href'));
    if (!target) return;
    e.preventDefault();
    const offset = 72; // nav height
    const top = target.getBoundingClientRect().top + window.scrollY - offset;
    window.scrollTo({ top, behavior: 'smooth' });
  });
});


// ── SCROLL REVEAL ─────────────────────────────────────────
const revealEls = () => {
  // Wrap all animatable elements
  const targets = [
    '.obj-block',
    '.insight-card',
    '.rec-item',
    '.tool-card',
    '.dataset-card',
    '.phase-card',
    '.metric-card',
    '.step-card',
    '.graph-card',
    '.extra-card',
    '.hypo-box',
    '.stat-pill',
  ];

  targets.forEach(selector => {
    document.querySelectorAll(selector).forEach(el => {
      el.classList.add('reveal');
    });
  });

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.08, rootMargin: '0px 0px -40px 0px' }
  );

  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
};


// ── STAGGERED reveals inside grids ───────────────────────
const staggerChildren = (parentSelector, childSelector, delayStep = 80) => {
  document.querySelectorAll(parentSelector).forEach(parent => {
    parent.querySelectorAll(childSelector).forEach((child, i) => {
      child.style.transitionDelay = `${i * delayStep}ms`;
    });
  });
};


// ── IMAGE lazy load + fade ────────────────────────────────
const lazyImages = () => {
  const imgs = document.querySelectorAll('img[loading="lazy"]');

  imgs.forEach(img => {
    img.style.opacity = '0';
    img.style.transition = 'opacity 0.5s ease';

    if (img.complete) {
      img.style.opacity = '1';
    } else {
      img.addEventListener('load', () => { img.style.opacity = '1'; });
      img.addEventListener('error', () => {
        // Show a styled placeholder if image fails
        img.style.opacity = '0.2';
        img.style.filter = 'grayscale(1)';
      });
    }
  });
};


// ── ACTIVE NAV highlight on scroll ───────────────────────
const activeNav = () => {
  const sections = document.querySelectorAll('section[id]');
  const navLinks = document.querySelectorAll('.nav-links a');

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          navLinks.forEach(link => link.classList.remove('active'));
          const active = document.querySelector(
            `.nav-links a[href="#${entry.target.id}"]`
          );
          if (active) active.classList.add('active');
        }
      });
    },
    { threshold: 0.35 }
  );

  sections.forEach(s => observer.observe(s));
};


// ── GRAPH CARD: click to expand ──────────────────────────
const expandableGraphs = () => {
  document.querySelectorAll('.graph-card img').forEach(img => {
    img.style.cursor = 'zoom-in';

    img.addEventListener('click', () => {
      // Create overlay
      const overlay = document.createElement('div');
      overlay.style.cssText = `
        position: fixed; inset: 0; z-index: 999;
        background: rgba(0,0,0,0.92);
        display: flex; align-items: center; justify-content: center;
        cursor: zoom-out;
        backdrop-filter: blur(8px);
        animation: fade-in 0.25s ease;
      `;

      const expandedImg = document.createElement('img');
      expandedImg.src = img.src;
      expandedImg.alt = img.alt;
      expandedImg.style.cssText = `
        max-width: 92vw; max-height: 90vh;
        object-fit: contain;
        border-radius: 12px;
        box-shadow: 0 40px 120px rgba(0,0,0,0.8);
        animation: scale-in 0.25s cubic-bezier(0.34,1.56,0.64,1);
      `;

      const closeHint = document.createElement('div');
      closeHint.textContent = 'Click anywhere to close';
      closeHint.style.cssText = `
        position: absolute; bottom: 32px; left: 50%;
        transform: translateX(-50%);
        font-size: 12px; color: rgba(255,255,255,0.4);
        letter-spacing: 1px; font-family: 'DM Mono', monospace;
        text-transform: uppercase;
      `;

      overlay.appendChild(expandedImg);
      overlay.appendChild(closeHint);
      document.body.appendChild(overlay);
      document.body.style.overflow = 'hidden';

      overlay.addEventListener('click', () => {
        overlay.remove();
        document.body.style.overflow = '';
      });

      document.addEventListener('keydown', function escHandler(e) {
        if (e.key === 'Escape') {
          overlay.remove();
          document.body.style.overflow = '';
          document.removeEventListener('keydown', escHandler);
        }
      });
    });
  });
};


// ── CSS: inject dynamic keyframes ────────────────────────
const injectKeyframes = () => {
  const style = document.createElement('style');
  style.textContent = `
    @keyframes scale-in {
      from { opacity: 0; transform: scale(0.88); }
      to   { opacity: 1; transform: scale(1); }
    }
    .nav-links a.active {
      color: #F5A623 !important;
    }
  `;
  document.head.appendChild(style);
};


// ── INIT ─────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
  injectKeyframes();
  revealEls();
  lazyImages();
  activeNav();

  // Stagger grid children
  staggerChildren('.insights-grid', '.insight-card', 80);
  staggerChildren('.tools-grid', '.tool-card', 60);
  staggerChildren('.eda-steps', '.step-card', 50);
  staggerChildren('.phase-cards', '.phase-card', 80);
  staggerChildren('.regression-metrics', '.metric-card', 60);
  staggerChildren('.rec-extras', '.extra-card', 70);
  staggerChildren('.dataset-grid', '.dataset-card', 60);

  // Expandable graphs — init after a tick to avoid blocking paint
  setTimeout(expandableGraphs, 200);
});