script.js

/* ============================================
   PLUGINSTREAM - MODERN INTERACTIVE SCRIPTS
   ============================================ */

const premiumPlatforms = [
    {
        category: "Global Leaders",
        platforms: [
            { name: "Netflix", origin: "USA", bestFor: "Original Series", status: "Free" },
            { name: "Amazon Prime", origin: "USA", bestFor: "Shopping + Streaming", status: "Free" },
            { name: "Disney+", origin: "USA", bestFor: "Superheroes & Kids", status: "Free" },
            { name: "Max (HBO)", origin: "USA", bestFor: "Game of Thrones", status: "Free" },
            { name: "Apple TV+", origin: "USA", bestFor: "High-Quality", status: "Free" }
        ]
    },
    {
        category: "South Asia (Desi)",
        platforms: [
            { name: "SonyLIV", origin: "India", bestFor: "Sports & Thriller", status: "Free" },
            { name: "Zee5", origin: "India", bestFor: "Bollywood", status: "Free" },
            { name: "Tamasha", origin: "Pakistan", bestFor: "Live TV", status: "Free" },
            { name: "Tapmad", origin: "Pakistan", bestFor: "Live Sports", status: "Free" }
        ]
    },
    {
        category: "Specialty & Niche",
        platforms: [
            { name: "MUBI", origin: "Global", bestFor: "Classic Cinema", status: "Free" },
            { name: "F1 TV", origin: "Global", bestFor: "Formula 1 Racing", status: "Free" },
            { name: "UFC Fight Pass", origin: "Global", bestFor: "MMA & Fighting", status: "Free" }
        ]
    }
];

const pluginCategories = [
    {
        title: "Global Major OTTs",
        region: "Worldwide",
        plugins: [
            "Netflix", "Amazon Prime Video", "Disney+", "Max (HBO Max)", "Apple TV+",
            "YouTube", "YouTube Premium", "Paramount+", "Peacock", "Hulu",
            "Crunchyroll", "Spotify (Video)", "Tubi", "Pluto TV", "The Roku Channel"
        ]
    },
    {
        title: "Global Collections (Movies/Torrents/Pirate Addons)",
        region: "Worldwide",
        plugins: [
            "AllMovieLand", "AllWish", "Anichi", "Animeav1", "AnimeCloud", "AnimeDekho",
            "HDO", "UHDmovies", "YTS", "Stremio", "Torrentio", "Comet", "MediaFusion",
            "YTS", "Cinemeta", "SuperStream", "Ultima"
        ]
    },
    {
        title: "Indian & South Asian",
        region: "India, Pakistan, Bangladesh, Sri Lanka, Nepal",
        plugins: [
            "JioCinema", "JioHotstar (Disney+ Hotstar)", "SonyLIV", "Zee5", "Aha",
            "ALTBalaji", "MX Player", "Airtel Xstream", "Voot", "SunNXT",
            "TamilDhool", "Bilibili", "CastleTv", "CineTv", "Pikashow", "Castle",
            "SunGo", "BanglaPlex", "Desicinemas", "MassTamilan", "Tamilian", "Telugumv"
        ]
    },
    {
        title: "North America (US + Canada)",
        region: "USA, Canada",
        plugins: [
            "Hulu", "Peacock", "Paramount+", "Sling TV", "FuboTV", "Philo",
            "DirecTV Stream", "YouTube TV", "Discovery+", "Starz", "Showtime",
            "AMC+", "MGM+", "ESPN+", "Crackle", "Redbox"
        ]
    },
    {
        title: "Europe",
        region: "UK, Germany, France, Spain, Italy, etc.",
        plugins: [
            "SkyShowtime", "Now TV", "ITVX", "BBC iPlayer", "All4 (Channel 4)",
            "My5", "Rakuten TV", "Joyn", "DAZN", "Salto", "Canal+", "Movistar+",
            "BluTV (Turkey)", "Player (Poland)", "Voyo", "HBO Max (in some countries)"
        ]
    },
    {
        title: "Latin America",
        region: "Brazil, Mexico, Argentina, etc.",
        plugins: [
            "Globoplay", "Claro Video", "Movistar Play", "Pluto TV", "Plex",
            "Flow", "América Play Go", "Box Brazil", "Megamedia", "Cinepolis KLIC"
        ]
    },
    {
        title: "Asia (East & Southeast)",
        region: "China, Japan, Korea, Indonesia, Philippines, etc.",
        plugins: [
            "iQIYI", "Tencent Video", "Youku", "WeTV", "Viu", "Iflix",
            "Astro Go", "MeWatch", "TrueID", "Line TV", "CatchPlay",
            "KKTV (Taiwan)", "FriDay Video", "GomTV", "Wavve (Korea)"
        ]
    },
    {
        title: "Middle East & Africa",
        region: "UAE, Saudi, Egypt, South Africa, etc.",
        plugins: [
            "Shahid", "OSN+", "StarzPlay", "Showmax", "iROKOtv", "Netflix (strong here)",
            "Amazon Prime Video", "beIN Connect", "MBC Shahid", "TOD"
        ]
    },
    {
        title: "Anime & Niche Global",
        region: "Worldwide (Anime Focus)",
        plugins: [
            "Crunchyroll", "Funimation", "HIDIVE", "AnimeKitsu", "9anime",
            "Kickassanime", "HiAnime", "AnimePahe", "AnimeWorld", "AniWatch"
        ]
    },
    {
        title: "Free & Ad-Supported (FAST)",
        region: "Worldwide",
        plugins: [
            "Tubi", "Pluto TV", "The Roku Channel", "Freevee (Amazon)", "Xumo",
            "Crackle", "IMDb TV", "YouTube (Free)", "Plex", "DistroTV"
        ]
    }
];

const screenshotImages = [
    "assets/pluginstream/pluginstream.png",
    "assets/pluginstream/home.png",
    "assets/pluginstream/provider.png",
    "assets/pluginstream/moveis.png",
    "assets/pluginstream/detail.png",
    "assets/pluginstream/vidio_player.png",
    "assets/protube/protube-player.png",
    "assets/protube/protube-vidio.png",
    "assets/protube/protube-vidio-player.png",
    "assets/protube/protube-shorts.png",
    "assets/protube/protube-features.png",
    "assets/protube/protube-like.png",
    "assets/protube/protube-description.png",
    "assets/protube/protube-download-quality.png",
    "assets/protube/protube-downloads-selector.png",
    "assets/protube/protube-download.png",
    "assets/protube/protube-music.png",
    "assets/protube/protube-details.png",
];

// Intersection Observer for scroll animations
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const scrollObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('is-visible');
        }
    });
}, observerOptions);

// Populate Platforms with enhanced animations
function populatePlatforms() {
    const grid = document.getElementById('platforms-grid');
    if (!grid) return;
    
    premiumPlatforms.forEach((cat, catIndex) => {
        const card = document.createElement('div');
        card.className = 'card scroll-reveal';
        card.style.transitionDelay = `${catIndex * 0.1}s`;
        
        let platformsHtml = '';
        cat.platforms.forEach((p, pIndex) => {
            platformsHtml += `
            <div class="platform-item" style="animation-delay: ${pIndex * 0.05}s">
                <div class="platform-info">
                    <h4>${p.name}</h4>
                    <p>${p.origin} • ${p.bestFor}</p>
                </div>
                <div class="status-badge">
                    <span>${p.status}</span>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                </div>
            </div>`;
        });

        card.innerHTML = `
            <div class="card-header">
                <h3 class="card-title">${cat.category}</h3>
            </div>
            <div class="platform-list">
                ${platformsHtml}
            </div>
        `;
        grid.appendChild(card);
        scrollObserver.observe(card);
    });
}

// Populate Screenshots with smooth infinite scroll
function populateScreenshots() {
    const scroller = document.querySelector('.screenshot-scroller-container');
    const track = document.getElementById('screenshot-track');
    if (!scroller || !track) return;
    
    // Get existing static items (already in HTML for Google indexing)
    const existingItems = track.querySelectorAll('.screenshot-item');
    const existingHtml = Array.from(existingItems).map(item => item.outerHTML).join('');
    
    // Triple the existing items for smoother looping (append duplicates)
    track.innerHTML = existingHtml + existingHtml + existingHtml + existingHtml;
    
    // Add click handlers to all screenshot items
    const allItems = track.querySelectorAll('.screenshot-item');
    allItems.forEach((item, index) => {
        const img = item.querySelector('img');
        if (img) {
            item.onclick = () => openFullImage(img.src);
        }
    });

    // Variables for dragging and auto-scroll
    let isDown = false;
    let startX;
    let scrollLeft;
    let isPaused = false;
    const speed = 0.8;

    // Pause on hover
    scroller.addEventListener('mouseenter', () => isPaused = true);
    scroller.addEventListener('mouseleave', () => {
        isPaused = false;
        isDown = false;
    });

    // Drag functionality
    scroller.addEventListener('mousedown', (e) => {
        isDown = true;
        isPaused = true;
        scroller.style.cursor = 'grabbing';
        startX = e.pageX - scroller.offsetLeft;
        scrollLeft = scroller.scrollLeft;
    });

    scroller.addEventListener('mouseup', () => {
        isDown = false;
        scroller.style.cursor = 'grab';
    });

    scroller.addEventListener('mousemove', (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - scroller.offsetLeft;
        const walk = (x - startX) * 2;
        scroller.scrollLeft = scrollLeft - walk;
    });

    // Touch support
    let touchStartX = 0;
    scroller.addEventListener('touchstart', (e) => {
        isPaused = true;
        touchStartX = e.touches[0].pageX;
        scrollLeft = scroller.scrollLeft;
    });
    
    scroller.addEventListener('touchmove', (e) => {
        const touchX = e.touches[0].pageX;
        const walk = (touchStartX - touchX) * 1.5;
        scroller.scrollLeft = scrollLeft + walk;
    });
    
    scroller.addEventListener('touchend', () => isPaused = false);

    // Smooth auto-scroll animation
    function step() {
        if (!isPaused && !isDown) {
            scroller.scrollLeft += speed;
            const itemWidth = track.firstChild ? track.firstChild.offsetWidth + 28 : 268;
            const maxScroll = itemWidth * screenshotImages.length;
            
            if (scroller.scrollLeft >= maxScroll * 2) {
                scroller.scrollLeft -= maxScroll;
            } else if (scroller.scrollLeft <= 0) {
                scroller.scrollLeft += maxScroll;
            }
        }
        requestAnimationFrame(step);
    }
    
    // Start animation after a brief delay
    setTimeout(() => requestAnimationFrame(step), 500);
}

// Full image viewer with smooth animation
function openFullImage(src) {
    const viewer = document.createElement('div');
    viewer.className = 'modal image-viewer-modal';
    viewer.innerHTML = `
        <div class="modal-content">
            <button class="close-btn" style="position:fixed; top:32px; right:32px; z-index:10">&times;</button>
            <img src="${src}" alt="Screenshot Full View" class="full-size-image" style="opacity: 0; transform: scale(0.9); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);">
        </div>
    `;
    
    document.body.appendChild(viewer);
    document.body.style.overflow = 'hidden';
    
    // Trigger animation
    requestAnimationFrame(() => {
        viewer.classList.add('active');
        const img = viewer.querySelector('.full-size-image');
        img.style.opacity = '1';
        img.style.transform = 'scale(1)';
    });
    
    // Close handlers
    const closeViewer = () => {
        const img = viewer.querySelector('.full-size-image');
        img.style.opacity = '0';
        img.style.transform = 'scale(0.9)';
        setTimeout(() => {
            viewer.remove();
            document.body.style.overflow = '';
        }, 300);
    };
    
    viewer.querySelector('.close-btn').onclick = closeViewer;
    viewer.onclick = (e) => {
        if (e.target === viewer || e.target.classList.contains('modal-content')) {
            closeViewer();
        }
    };
    
    // ESC key to close
    const escHandler = (e) => {
        if (e.key === 'Escape') {
            closeViewer();
            document.removeEventListener('keydown', escHandler);
        }
    };
    document.addEventListener('keydown', escHandler);
}

// Search Functionality with debounce
const searchInput = document.getElementById('plugin-query');
const resultsGrid = document.getElementById('results-grid');

let searchTimeout;
if (searchInput) {
    searchInput.addEventListener('input', (e) => {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            performSearch(e.target.value);
        }, 150);
    });
}

function performSearch(value) {
    const query = value.toLowerCase().replace(/\s+/g, '');
    
    if (query === '') {
        resultsGrid.innerHTML = '<div class="search-placeholder">Start searching to see channels</div>';
        return;
    }

    let results = [];
    pluginCategories.forEach(cat => {
        const regionMatch = cat.region.toLowerCase().replace(/\s+/g, '').includes(query);
        
        cat.plugins.forEach(plugin => {
            const pluginMatch = plugin.toLowerCase().replace(/\s+/g, '').includes(query);
            
            if (pluginMatch || regionMatch) {
                results.push({ name: plugin, region: cat.region });
            }
        });
    });

    if (results.length > 0) {
        resultsGrid.innerHTML = '';
        results.forEach((res, index) => {
            const card = document.createElement('div');
            card.className = 'result-card';
            card.style.animationDelay = `${index * 0.05}s`;
            card.innerHTML = `
                <div class="result-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg></div>
                <span class="result-name">${res.name}</span>
                <span class="result-region">${res.region}</span>
            `;
            resultsGrid.appendChild(card);
        });
    } else {
        resultsGrid.innerHTML = `<div class="search-placeholder">No results found for "${value}"</div>`;
    }
}

// Smooth scroll to search
function scrollToSearch() {
    const searchSection = document.getElementById('plugin-search');
    if (searchSection) {
        searchSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        setTimeout(() => {
            const input = document.getElementById('plugin-query');
            if (input) input.focus();
        }, 600);
    }
}

// Modal functionality
const modal = document.getElementById('login-modal');
function toggleModal() {
    if (modal) {
        modal.classList.toggle('active');
        document.body.style.overflow = modal.classList.contains('active') ? 'hidden' : '';
    }
}

// Mobile menu
function toggleMobileMenu() {
    const mobileMenu = document.getElementById('mobile-menu');
    if (mobileMenu) {
        mobileMenu.classList.toggle('active');
        document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : '';
    }
}

// Share website function
function shareWebsite() {
    const shareData = {
        title: 'PluginStream - Free Premium Movies & OTT Plugins',
        text: 'Unlimited Movies Streaming + YouTube Ads-Free available for Zero fee! Plus, exclusive premium games coming soon. Get 100+ powerful plugins for free with PluginStream!',
        url: window.location.href
    };

    if (navigator.share) {
        navigator.share(shareData).catch((error) => console.log('Error sharing:', error));
    } else {
        navigator.clipboard.writeText(window.location.href).then(() => {
            // Simple visual feedback instead of alert
            const shareBtn = document.querySelector('.hero-social-icons a[title="Share Website"] i') || 
                             document.querySelector('.mobile-social-icons a[title="Share"] i');
            if (shareBtn) {
                const originalClass = shareBtn.getAttribute('data-lucide');
                shareBtn.setAttribute('data-lucide', 'check');
                lucide.createIcons();
                setTimeout(() => {
                    shareBtn.setAttribute('data-lucide', originalClass);
                    lucide.createIcons();
                }, 2000);
            }
        }).catch(() => {
            alert('Could not copy link. Please share manually!');
        });
    }
}

// Close modal when clicking outside
window.onclick = function(event) {
    if (event.target == modal) {
        modal.classList.remove('active');
        document.body.style.overflow = '';
    }
}

// Populate Repositories with staggered animation
async function populateRepositories() {
    const grid = document.getElementById('repo-grid');
    if (!grid) return;
    
    try {
        const response = await fetch('plugins.json');
        const data = await response.json();
        
        if (data.repositories) {
            grid.innerHTML = '';
            data.repositories.forEach((repo, index) => {
                const card = document.createElement('div');
                card.className = 'repo-card scroll-reveal';
                card.style.transitionDelay = `${index * 0.05}s`;
                card.innerHTML = `
                    <h3 class="repo-name">${repo.name}</h3>
                    <p class="repo-desc">${repo.description}</p>
                    <div class="install-btn">
                        <span>Install Repository</span>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
                    </div>
                `;
                card.onclick = () => {
                    const deepLink = `cloudstreamrepo://${repo.url}`;
                    window.location.href = deepLink;
                };
                grid.appendChild(card);
                scrollObserver.observe(card);
            });
        }
    } catch (error) {
        console.error('Error loading plugins.json:', error);
        grid.innerHTML = '<div class="loading">Failed to load repositories.</div>';
    }
}

// Cursor Glow Effect
function initCursorGlow() {
    const glow = document.createElement('div');
    glow.className = 'cursor-glow';
    document.body.appendChild(glow);

    window.addEventListener('mousemove', (e) => {
        glow.animate({
            left: `${e.clientX}px`,
            top: `${e.clientY}px`
        }, { duration: 500, fill: "forwards" });
    });
}

// Cinematic Parallax
function initParallax() {
    window.addEventListener('mousemove', (e) => {
        const x = (e.clientX / window.innerWidth - 0.5) * 2;
        const y = (e.clientY / window.innerHeight - 0.5) * 2;

        const heroImage = document.querySelector('.hero-image-container');
        if (heroImage) {
            heroImage.style.transform = `rotateX(${y * -5}deg) rotateY(${x * 5}deg) translateY(${y * -10}px)`;
        }

        const blobs = document.querySelectorAll('.blob');
        blobs.forEach((blob, index) => {
            const speed = (index + 1) * 20;
            blob.style.transform = `translate(${x * speed}px, ${y * speed}px)`;
        });
    });
}

// Navbar Scroll Enhancement
function initNavbarScroll() {
    const navbar = document.querySelector('.navbar');
    if (!navbar) return;
    
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    }, { passive: true });
}

// Initialize scroll reveal for existing elements
function initScrollReveal() {
    const revealElements = document.querySelectorAll('.card, .feature-item, .section-header, .hero-image-container, .promo-banner, .step-card, .repo-card');
    revealElements.forEach(el => {
        el.classList.add('scroll-reveal');
        scrollObserver.observe(el);
    });
}

// Add CSS for scroll reveal animation
function addScrollRevealStyles() {
    const style = document.createElement('style');
    style.textContent = `
        .scroll-reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), transform 1s cubic-bezier(0.23, 1, 0.32, 1);
            will-change: transform, opacity;
        }
        .scroll-reveal.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Staggered children reveal */
        .is-visible .platform-item {
            animation: slideInUp 0.5s ease forwards;
        }
        
        @keyframes slideInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    `;
    document.head.appendChild(style);
}

// Init
window.addEventListener('DOMContentLoaded', () => {
    addScrollRevealStyles();
    initCursorGlow();
    initParallax();
    populatePlatforms();
    populateScreenshots();
    populateRepositories();
    initNavbarScroll();
    initScrollReveal();
});