// Mock data for demonstration
const mockData = {
    trending: [
        { id: 1, title: "One Piece", category: "Manga", image: "http://static.photos/anime/320x200/101" },
        { id: 2, title: "Attack on Titan", category: "Manga", image: "http://static.photos/anime/320x200/102" },
        { id: 3, title: "Demon Slayer", category: "Manga", image: "http://static.photos/anime/320x200/103" },
        { id: 4, title: "My Hero Academia", category: "Cómic", image: "http://static.photos/anime/320x200/104" },
        { id: 5, title: "Jujutsu Kaisen", category: "Manga", image: "http://static.photos/anime/320x200/105" },
        { id: 6, title: "Chainsaw Man", category: "Cómic", image: "http://static.photos/anime/320x200/106" },
        { id: 7, title: "Tokyo Revengers", category: "Manga", image: "http://static.photos/anime/320x200/107" },
        { id: 8, title: "Black Clover", category: "Cómic", image: "http://static.photos/anime/320x200/108" },
        { id: 9, title: "Spy x Family", category: "Manga", image: "http://static.photos/anime/320x200/109" },
        { id: 10, title: "Bleach", category: "Cómic", image: "http://static.photos/anime/320x200/110" },
        { id: 11, title: "Naruto", category: "Manga", image: "http://static.photos/anime/320x200/111" },
        { id: 12, title: "Dragon Ball", category: "Cómic", image: "http://static.photos/anime/320x200/112" }
    ],
    popular: [
        { id: 1, title: "Solo Leveling", chapters: 200, views: "500k", likes: "25k", genre: ["Acción", "Fantasía"], image: "http://static.photos/anime/200x300/201" },
        { id: 2, title: "Tower of God", chapters: 543, views: "350k", likes: "18k", genre: ["Aventura", "Drama"], image: "http://static.photos/anime/200x300/202" },
        { id: 3, title: "The Beginning After The End", chapters: 175, views: "280k", likes: "15k", genre: ["Fantasía", "Reencarnación"], image: "http://static.photos/anime/200x300/203" },
        { id: 4, title: "Omniscient Reader", chapters: 125, views: "200k", likes: "12k", genre: ["Acción", "Fantasía"], image: "http://static.photos/anime/200x300/204" },
        { id: 5, title: "Martial Peak", chapters: 3800, views: "450k", likes: "22k", genre: ["Artes Marciales", "Cultivación"], image: "http://static.photos/anime/200x300/205" },
        { id: 6, title: "Apotheosis", chapters: 1200, views: "180k", likes: "9k", genre: ["Acción", "Fantasía"], image: "http://static.photos/anime/200x300/206" },
        { id: 7, title: "Star Martial God", chapters: 450, views: "150k", likes: "8k", genre: ["Artes Marciales", "Romance"], image: "http://static.photos/anime/200x300/207" },
        { id: 8, title: "Tales of Demons and Gods", chapters: 450, views: "220k", likes: "11k", genre: ["Fantasía", "Reencarnación"], image: "http://static.photos/anime/200x300/208" }
    ],
    chapters: [
        { id: 1, title: "One Piece", chapter: "Capítulo 1095", scan: "MangoScan", time: "Hace 15 min", image: "http://static.photos/anime/80x120/301" },
        { id: 2, title: "Jujutsu Kaisen", chapter: "Capítulo 240", scan: "ScanManga", time: "Hace 30 min", image: "http://static.photos/anime/80x120/302" },
        { id: 3, title: "My Hero Academia", chapter: "Capítulo 406", scan: "HeroScan", time: "Hace 1 hora", image: "http://static.photos/anime/80x120/303" },
        { id: 4, title: "Chainsaw Man", chapter: "Capítulo 150", scan: "DemonScan", time: "Hace 2 horas", image: "http://static.photos/anime/80x120/304" },
        { id: 5, title: "Black Clover", chapter: "Capítulo 370", scan: "CloverScan", time: "Hace 3 horas", image: "http://static.photos/anime/80x120/305" },
        { id: 6, title: "Spy x Family", chapter: "Capítulo 89", scan: "SpyScan", time: "Hace 4 horas", image: "http://static.photos/anime/80x120/306" },
        { id: 7, title: "Demon Slayer", chapter: "Capítulo 205", scan: "DemonScan", time: "Hace 5 horas", image: "http://static.photos/anime/80x120/307" },
        { id: 8, title: "Bleach", chapter: "Capítulo 686", scan: "BleachScan", time: "Hace 6 horas", image: "http://static.photos/anime/80x120/308" },
        { id: 9, title: "Naruto", chapter: "Epílogo", scan: "NinjaScan", time: "Hace 8 horas", image: "http://static.photos/anime/80x120/309" },
        { id: 10, title: "Dragon Ball Super", chapter: "Capítulo 103", scan: "DBScan", time: "Hace 10 horas", image: "http://static.photos/anime/80x120/310" }
    ],
    lists: [
        { id: 1, title: "Fantasía Épica", count: 45, description: "Las mejores historias de fantasía", image: "http://static.photos/fantasy/200x300/401" },
        { id: 2, title: "Romance Shojo", count: 32, description: "Historias de amor tiernas", image: "http://static.photos/pink/200x300/402" },
        { id: 3, title: "Acción Shonen", count: 67, description: "Batallas épicas y superpoderes", image: "http://static/photos/red/200x300/403" },
        { id: 4, title: "Psicológico", count: 28, description: "Mentes complejas y giros inesperados", image: "http://static/photos/monochrome/200x300/404" },
        { id: 5, title: "Ciencia Ficción", count: 41, description: "Futuro, tecnología y espacio", image: "http://static/photos/technology/200x300/405" },
        { id: 6, title: "Comedia Diaria", count: 55, description: "Risas garantizadas", image: "http://static.photos/yellow/200x300/406" }
    ],
    blog: [
        { id: 1, title: "Top 10 Mangas de 2024", excerpt: "Descubre los mangas más populares y aclamados de este año...", tag: "Ranking", image: "http://static.photos/anime/640x360/501" },
        { id: 2, title: "Guía para Principiantes", excerpt: "Todo lo que necesitas saber para empezar en el mundo del manga...", tag: "Tutorial", image: "http://static.photos/anime/640x360/502" },
        { id: 3, title: "Arte del Mangaka", excerpt: "Explora las técnicas y estilos de los artistas más influyentes...", tag: "Arte", image: "http://static.photos/anime/640x360/503" },
        { id: 4, title: "Manga vs Anime", excerpt: "Comparativa entre versiones y cuál elegir primero...", tag: "Análisis", image: "http://static.photos/anime/640x360/504" },
        { id: 5, title: "Historia del Manga", excerpt: "Desde sus orígenes hasta la actualidad: una cronología completa...", tag: "Historia", image: "http://static.photos/anime/640x360/505" },
        { id: 6, title: "Cultura Otaku", excerpt: "Sumérgete en el fascinante mundo de la cultura japonesa...", tag: "Cultura", image: "http://static.photos/anime/640x360/506" }
    ]
};

// Load trending items
function loadTrending() {
    const grid = document.getElementById('trending-grid');
    grid.innerHTML = mockData.trending.map(item => `
        <div class="relative group cursor-pointer card-hover">
            <div class="rounded-lg overflow-hidden h-40 relative">
                <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                <div class="absolute bottom-0 left-0 right-0 p-3">
                    <h3 class="font-semibold text-sm text-white group-hover:text-purple-300 transition-colors">${item.title}</h3>
                    <span class="inline-block px-2 py-1 bg-purple-600/80 text-xs rounded-full mt-1">${item.category}</span>
                </div>
            </div>
        </div>
    `).join('');
}

// Load popular items
function loadPopular() {
    const container = document.getElementById('popular-container');
    container.innerHTML = mockData.popular.map(item => `
        <div class="flex-shrink-0 w-48 cursor-pointer card-hover">
            <div class="bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-750 transition-colors">
                <div class="h-64 relative">
                    <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover">
                    <div class="absolute top-2 left-2 flex gap-1">
                        ${item.genre.map(g => `<span class="px-2 py-1 bg-black/60 text-xs rounded">${g}</span>`).join('')}
                    </div>
                </div>
                <div class="p-3">
                    <h3 class="font-semibold mb-2 text-white group-hover:text-purple-300 transition-colors">${item.title}</h3>
                    <div class="flex items-center gap-3 text-xs text-gray-400">
                        <span class="flex items-center gap-1">
                            <i data-feather="book" class="w-3 h-3"></i>
                            ${item.chapters}
                        </span>
                        <span class="flex items-center gap-1">
                            <i data-feather="eye" class="w-3 h-3"></i>
                            ${item.views}
                        </span>
                        <span class="flex items-center gap-1">
                            <i data-feather="heart" class="w-3 h-3"></i>
                            ${item.likes}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    `).join('');
    feather.replace();
}

// Load chapters
function loadChapters() {
    const list = document.getElementById('chapters-list');
    list.innerHTML = mockData.chapters.map(item => `
        <div class="bg-gray-800 rounded-lg p-4 hover:bg-gray-750 transition-colors cursor-pointer flex gap-4">
            <div class="flex-shrink-0">
                <img src="${item.image}" alt="${item.title}" class="w-16 h-20 object-cover rounded">
            </div>
            <div class="flex-grow">
                <h3 class="font-semibold text-lg mb-1">${item.title}</h3>
                <p class="text-purple-400 text-sm mb-1">${item.chapter}</p>
                <div class="flex items-center gap-4 text-xs text-gray-400">
                    <span class="flex items-center gap-1">
                        <i data-feather="users" class="w-3 h-3"></i>
                        ${item.scan}
                    </span>
                    <span class="flex items-center gap-1">
                        <i data-feather="clock" class="w-3 h-3"></i>
                        ${item.time}
                    </span>
                </div>
            </div>
        </div>
    `).join('');
    feather.replace();
}

// Load lists
function loadLists() {
    const container = document.getElementById('lists-container');
    container.innerHTML = mockData.lists.map(item => `
        <div class="flex-shrink-0 w-48 cursor-pointer card-hover">
            <div class="bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-750 transition-colors">
                <div class="h-64 relative">
                    <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 right-0 p-3">
                        <h3 class="font-semibold text-white">${item.title}</h3>
                        <p class="text-xs text-gray-300 mb-2">${item.description}</p>
                        <span class="text-xs text-blue-400">${item.count} obras</span>
                    </div>
                </div>
            </div>
        </div>
    `).join('');
}

// Load blog
function loadBlog() {
    const grid = document.getElementById('blog-grid');
    grid.innerHTML = mockData.blog.map(item => `
        <article class="bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-750 transition-colors cursor-pointer">
            <div class="h-48 relative">
                <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover">
            </div>
            <div class="p-4">
                <span class="inline-block px-2 py-1 bg-indigo-600/80 text-xs rounded-full mb-2">${item.tag}</span>
                <h3 class="font-semibold text-lg mb-2 text-white hover:text-indigo-300 transition-colors">${item.title}</h3>
                <p class="text-sm text-gray-400 mb-3">${item.excerpt}</p>
                <button class="text-indigo-400 text-sm font-semibold hover:text-indigo-300 transition-colors flex items-center gap-1">
                    Leer artículo <i data-feather="arrow-right" class="w-4 h-4"></i>
                </button>
            </div>
        </article>
    `).join('');
    feather.replace();
}

// Initialize carousels
function initCarousels() {
    const popularCarousel = document.getElementById('popular-carousel');
    const listsCarousel = document.getElementById('lists-carousel');
    
    // Popular carousel controls
    document.getElementById('scroll-left').addEventListener('click', () => {
        popularCarousel.scrollBy({ left: -200, behavior: 'smooth' });
    });
    
    document.getElementById('scroll-right').addEventListener('click', () => {
        popularCarousel.scrollBy({ left: 200, behavior: 'smooth' });
    });
}

// Initialize everything when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    loadTrending();
    loadPopular();
    loadChapters();
    loadLists();
    loadBlog();
    initCarousels();
    
    // Add smooth scroll behavior
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
});

// Add intersection observer for fade-in animations
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('fade-in-up');
        }
    });
}, observerOptions);

// Observe all sections
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('section').forEach(section => {
        observer.observe(section);
    });
});