script.js

// Hide splash after animation completes
window.addEventListener('load', () => {
  const splash = document.getElementById('splash');
  if (!splash) return;

  // Fallback in case animationend doesn't fire
  const fallback = setTimeout(() => {
    splash.style.display = 'none';
  }, 4600);

  splash.addEventListener('animationend', e => {
    if (e.animationName === 'splash-complete') {
      splash.style.display = 'none';
      clearTimeout(fallback);
    }
  });

  // Allow skip with Enter or Space
  const skip = e => {
    if (e.key === 'Enter' || e.key === ' ') {
      splash.style.display = 'none';
      clearTimeout(fallback);
      document.removeEventListener('keydown', skip);
    }
  };
  document.addEventListener('keydown', skip);
});

// Solid nav background on scroll
const nav = document.getElementById('nav');
const handleScroll = () => {
  if (!nav) return;
  nav.style.background = window.scrollY > 40
    ? 'rgba(0,0,0,.85)'
    : 'linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,0))';
};
document.addEventListener('scroll', handleScroll, { passive: true });

const initRailKeys = () => {
  document.querySelectorAll('.rail').forEach(rail => {
    rail.tabIndex = 0;
    rail.addEventListener('keydown', e => {
      const step = 280;
      if (e.key === 'ArrowRight') { rail.scrollBy({ left: step, behavior: 'smooth' }); e.preventDefault(); }
      if (e.key === 'ArrowLeft')  { rail.scrollBy({ left: -step, behavior: 'smooth' }); e.preventDefault(); }
    });
  });
};
initRailKeys();


document.querySelectorAll('.btn--play').forEach(btn =>
  btn.addEventListener('click', () => document.querySelector('.row')?.scrollIntoView({ behavior: 'smooth' }))
);
document.querySelectorAll('.btn--info').forEach(btn =>
  btn.addEventListener('click', () => alert('More info coming soon.'))
);

// Hero elements
const heroElem = document.querySelector('.hero');
const heroTitle = document.querySelector('.hero .title');
const heroDesc = document.querySelector('.hero .desc');
const heroTag = document.querySelector('.hero .tag');

const heroSlides = [
  {
    img: "https://image.tmdb.org/t/p/w1280/aw4FOsWr2FY373nKSxbpNi3fz4F.jpg",
    tag: "Critics Choice",
    title: "Mission: Impossible – Fallout",
    desc: "In this film that follows Ethan Hunt as he races against time to prevent a global catastrophe involving stolen plutonium and a terrorist group known as the Apostles"
  }
];

let heroIndex = 0;

// Image brightness detection to toggle text color
function detectImageBrightness(url, cb) {
  const img = new Image();
  img.crossOrigin = "Anonymous";
  img.src = url;
  img.onload = function() {
    const canvas = document.createElement("canvas");
    canvas.width = img.width; canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    let r = 0, g = 0, b = 0, count = 0;
    for (let i = 0; i < data.length; i += 32) { 
      r += data[i]; g += data[i + 1]; b += data[i + 2]; count++;
    }
    const avg = (r + g + b) / count / 3;
    cb(avg > 160); 
  };
}

function setHeroSlide(idx) {
  if (!heroElem || !heroSlides[idx]) return;
  heroElem.classList.add('fade');

  setTimeout(() => {
    heroElem.style.backgroundImage = `url('${heroSlides[idx].img}')`;
    if (heroTitle) heroTitle.textContent = heroSlides[idx].title;
    if (heroDesc) heroDesc.textContent = heroSlides[idx].desc;
    if (heroTag) heroTag.textContent = heroSlides[idx].tag;

    detectImageBrightness(heroSlides[idx].img, (isLight) => {
      if (isLight) heroElem.classList.add('light-text');
      else heroElem.classList.remove('light-text');
    });

    heroElem.classList.remove('fade');
  }, 700); // half the transition time
}

setHeroSlide(heroIndex);

function handleSearch(e) {
  e.preventDefault();
  const q = document.getElementById('navSearch').value.trim();
  if (!q) return;
  alert(`Search: ${q}`);
}

document.addEventListener('keydown', (e) => {
  if (e.key === '/' && !/input|textarea|select/i.test(document.activeElement.tagName)) {
    e.preventDefault(); 
    const el = document.getElementById('navSearch');
    if (el) {
      el.focus();
    }
  }
});