script.js

// Dataset of curated drone footage (simulated with high-quality images for prototype)
const footageData = [
    {
        id: 1,
        title: "Tokyo Neon Drift",
        location: "Tokyo, Japan",
        category: "asia",
        subCategory: "night",
        thumbnail: "https://picsum.photos/id/1015/800/600",
        videoUrl: "https://www.youtube.com/embed/5aQ2qT6Qx-w?autoplay=1&mute=0", // Placeholder YouTube link
        duration: "3:42"
    },
    {
        id: 2,
        title: "Manhattan Golden Hour",
        location: "New York City, USA",
        category: "americas",
        subCategory: "day",
        thumbnail: "https://picsum.photos/id/1016/800/600",
        videoUrl: "https://www.youtube.com/embed/5aQ2qT6Qx-w?autoplay=1&mute=0",
        duration: "4:15"
    },
    {
        id: 3,
        title: "Parisian Rooftops",
        location: "Paris, France",
        category: "europe",
        subCategory: "day",
        thumbnail: "https://picsum.photos/id/1025/800/600",
        videoUrl: "https://www.youtube.com/embed/5aQ2qT6Qx-w?autoplay=1&mute=0",
        duration: "2:50"
    },
    {
        id: 4,
        title: "Singapore Gardens",
        location: "Singapore",
        category: "asia",
        subCategory: "night",
        thumbnail: "https://picsum.photos/id/1035/800/600",
        videoUrl: "https://www.youtube.com/embed/5aQ2qT6Qx-w?autoplay=1&mute=0",
        duration: "3:10"
    },
    {
        id: 5,
        title: "London Fog",
        location: "London, UK",
        category: "europe",
        subCategory: "day",
        thumbnail: "https://picsum.photos/id/1045/800/600",
        videoUrl: "https://www.youtube.com/embed/5aQ2qT6Qx-w?autoplay=1&mute=0",
        duration: "5:00"
    },
    {
        id: 6,
        title: "Dubai Skyline",
        location: "Dubai, UAE",
        category: "asia",
        subCategory: "night",
        thumbnail: "https://picsum.photos/id/106/800/600",
        videoUrl: "https://www.youtube.com/embed/5aQ2qT6Qx-w?autoplay=1&mute=0",
        duration: "3:30"
    },
    {
        id: 7,
        title: "Chicago Architecture",
        location: "Chicago, USA",
        category: "americas",
        subCategory: "day",
        thumbnail: "https://picsum.photos/id/1076/800/600",
        videoUrl: "https://www.youtube.com/embed/5aQ2qT6Qx-w?autoplay=1&mute=0",
        duration: "4:05"
    },
    {
        id: 8,
        title: "Hong Kong Harbour",
        location: "Hong Kong",
        category: "asia",
        subCategory: "night",
        thumbnail: "https://picsum.photos/id/1075/800/600",
        videoUrl: "https://www.youtube.com/embed/5aQ2qT6Qx-w?autoplay=1&mute=0",
        duration: "2:45"
    },
    {
        id: 9,
        title: "Berlin Streets",
        location: "Berlin, Germany",
        category: "europe",
        subCategory: "day",
        thumbnail: "https://picsum.photos/id/122/800/600",
        videoUrl: "https://www.youtube.com/embed/5aQ2qT6Qx-w?autoplay=1&mute=0",
        duration: "3:55"
    }
];

// DOM Elements
const gridContainer = document.getElementById('video-grid');
const filterBtns = document.querySelectorAll('.filter-btn');
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const modal = document.getElementById('video-modal');
const closeModalBtn = document.getElementById('close-modal');
const modalIframe = document.getElementById('modal-iframe');
const modalTitle = document.getElementById('modal-title');
const modalLocation = document.getElementById('modal-location');

// Render Grid Items
function renderGrid(filter = 'all') {
    gridContainer.innerHTML = '';
    
    let filteredData = footageData;
    if (filter !== 'all') {
        filteredData = footageData.filter(item => 
            filter === 'night' ? item.subCategory === 'night' : item.category === filter
        );
    }

    // Add animation delay for staggered effect
    filteredData.forEach((item, index) => {
        const card = document.createElement('div');
        card.className = 'group relative overflow-hidden rounded-xl bg-slate-800 shadow-xl cursor-pointer hover:-translate-y-2 transition-all duration-300';
        card.style.animation = `fadeIn 0.5s ease-out forwards ${index * 0.1}s`;
        card.style.opacity = '0'; // Initial state for animation
        
        card.innerHTML = `
            <div class="aspect-video relative overflow-hidden">
                <img src="${item.thumbnail}" alt="${item.title}" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700">
                <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <div class="w-16 h-16 bg-electric/90 rounded-full flex items-center justify-center transform scale-0 group-hover:scale-100 transition-transform duration-300 delay-100 shadow-lg shadow-electric/50">
                        <svg class="w-8 h-8 text-midnight ml-1" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M8 5v14l11-7z"/>
                        </svg>
                    </div>
                </div>
                <div class="absolute bottom-3 right-3 bg-black/70 px-2 py-1 rounded text-xs font-mono font-medium text-white">
                    ${item.duration}
                </div>
            </div>
            <div class="p-5 border-t border-slate-700">
                <div class="flex justify-between items-start mb-2">
                    <h3 class="font-bold text-lg text-white group-hover:text-electric transition-colors">${item.title}</h3>
                    <span class="text-xs font-semibold px-2 py-1 bg-slate-700 rounded text-gray-300 uppercase">${item.category}</span>
                </div>
                <p class="text-gray-400 text-sm flex items-center gap-1">
                    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                    ${item.location}
                </p>
            </div>
        `;

        card.addEventListener('click', () => openModal(item));
        gridContainer.appendChild(card);
    });
}

// Filter Logic
filterBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        // Remove active class from all
        filterBtns.forEach(b => {
            b.classList.remove('bg-electric', 'text-midnight');
            b.classList.add('bg-slate-800', 'text-gray-300');
        });
        
        // Add active class to clicked
        btn.classList.remove('bg-slate-800', 'text-gray-300');
        btn.classList.add('bg-electric', 'text-midnight');
        
        const filter = btn.getAttribute('data-filter');
        renderGrid(filter);
    });
});

// Modal Logic
function openModal(item) {
    modalTitle.textContent = item.title;
    modalLocation.textContent = item.location;
    // NOTE: In a real app, we would use the actual video ID. 
    // For this demo, we're using a placeholder, but this structure works.
    modalIframe.src = item.videoUrl; 
    
    modal.classList.remove('hidden');
    // Force reflow for transition
    void modal.offsetWidth;
    modal.classList.remove('opacity-0');
    document.body.style.overflow = 'hidden';
}

function closeModal() {
    modal.classList.add('opacity-0');
    setTimeout(() => {
        modal.classList.add('hidden');
        modalIframe.src = '';
        document.body.style.overflow = 'auto';
    }, 300);
}

closeModalBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
    if (e.target === modal) closeModal();
});

// Escape key to close modal
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
        closeModal();
    }
});

// Mobile Menu
mobileMenuBtn.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
});

// Navbar Scroll Effect
window.addEventListener('scroll', () => {
    const navbar = document.getElementById('navbar');
    if (window.scrollY > 50) {
        navbar.classList.add('shadow-lg');
        navbar.classList.replace('bg-midnight/80', 'bg-midnight/95');
    } else {
        navbar.classList.remove('shadow-lg');
        navbar.classList.replace('bg-midnight/95', 'bg-midnight/80');
    }
});

// Initial Render
document.addEventListener('DOMContentLoaded', () => {
    renderGrid();
});