* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #e74c3c;
    font-weight: 700;
    font-size: 1.5rem;
}

.logo img {
    width: 32px;
    height: 32px;
    margin-right: 0.5rem;
}

.nav {
    display: flex;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    color: #666;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #e74c3c;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4rem 0;
    text-align: center;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: #e74c3c;
    color: white;
}

.btn-primary:hover {
    background: #c0392b;
    transform: translateY(-2px);
}

/* Page Header */
.page-header {
    background: #f8f9fa;
    padding: 3rem 0;
    text-align: center;
}

.page-header h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.page-header p {
    font-size: 1.1rem;
    color: #666;
}

/* Video Grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.video-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.video-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: #f0f0f0;
}

.video-info {
    padding: 1.5rem;
}

.video-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.video-channel {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.video-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 0.5rem;
}

.video-description {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
}

.video-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.topic-tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.2rem 0.5rem;
    border-radius: 15px;
    font-size: 0.75rem;
}

/* Categories Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.category-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.category-card:hover {
    transform: translateY(-3px);
}

.category-name {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.category-count {
    color: #666;
    font-size: 0.9rem;
}

/* Filters */
.video-filters {
    background: #f8f9fa;
    padding: 2rem 0;
}

.filters-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    min-width: 250px;
}

.search-box input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

.filter-group select {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    background: white;
}

/* Video Detail Page */
.video-detail {
    padding: 2rem 0;
}

.video-player-container {
    margin-bottom: 2rem;
}

.video-player {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

.video-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.video-detail-info {
    max-width: 800px;
    margin: 0 auto;
}

.video-detail-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

.video-detail-meta {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
    color: #666;
    flex-wrap: wrap;
}

.video-detail-description {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 10px;
    margin: 2rem 0;
}

.content-disclaimer {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    padding: 1rem;
    border-radius: 5px;
    margin: 2rem 0;
}

.content-disclaimer p {
    margin: 0;
    color: #856404;
}

/* Sections */
.featured-videos,
.categories-preview,
.videos-listing,
.categories-listing,
.related-videos {
    padding: 3rem 0;
}

.featured-videos h2,
.categories-preview h2,
.related-videos h3 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    color: #333;
}

/* Content Sections */
.content-section,
.about-content,
.contact-content,
.legal-content {
    padding: 2rem 0;
}

.content-section h2 {
    color: #333;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.content-section h3 {
    color: #555;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.content-section ul {
    margin: 1rem 0;
    padding-left: 2rem;
}

.content-section li {
    margin-bottom: 0.5rem;
}

/* Contact Page */
.contact-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.contact-item h3 {
    color: #333;
    margin-bottom: 0.5rem;
}

.contact-item p {
    color: #666;
}

.contact-item a {
    color: #e74c3c;
    text-decoration: none;
}

.contact-item a:hover {
    text-decoration: underline;
}

/* Footer */
.footer {
    background: #2c3e50;
    color: white;
    padding: 3rem 0 1rem;
    margin-top: 4rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
    color: #ecf0f1;
}

.footer-section p {
    color: #bdc3c7;
    line-height: 1.6;
}

.footer-section a {
    display: block;
    color: #bdc3c7;
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #e74c3c;
}

.footer-bottom {
    border-top: 1px solid #34495e;
    padding-top: 1rem;
    text-align: center;
    color: #bdc3c7;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }

    .nav {
        gap: 1rem;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        min-width: auto;
    }

    .video-detail-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero {
        padding: 2rem 0;
    }

    .hero-content h1 {
        font-size: 1.5rem;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    .video-card {
        margin: 0 -5px;
    }
}

/* RTL Support */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] .header-content {
    flex-direction: row-reverse;
}

[dir="rtl"] .logo {
    flex-direction: row-reverse;
}

[dir="rtl"] .logo img {
    margin-right: 0;
    margin-left: 0.5rem;
}

[dir="rtl"] .video-meta {
    flex-direction: row-reverse;
}

[dir="rtl"] .filters-bar {
    flex-direction: row-reverse;
}

[dir="rtl"] .content-section ul {
    padding-left: 0;
    padding-right: 2rem;
}

/* FILE: assets/app.js -->
// Video Data Store
const videoData = {
    videos: [
        {
            id: 1,
            title: "Introduction to Web Development",
            channel: "TechEdu Academy",
            category: "tutorials",
            duration: "45:30",
            views: "125K",
            shortDesc: "Learn the basics of web development including HTML, CSS, and JavaScript fundamentals.",
            longDesc: "This comprehensive tutorial covers the essential building blocks of web development. You'll learn HTML structure, CSS styling, and JavaScript programming basics. Perfect for beginners looking to start their web development journey. The course includes practical examples and hands-on exercises to reinforce learning concepts.",
            topics: ["HTML", "CSS", "JavaScript", "Web Development", "Programming"],
            embedUrl: "https://www.youtube-nocookie.com/embed/UB1O30fR-EE",
            image: "../assets/video-01.svg"
        },
        {
            id: 2,
            title: "The Science of Climate Change",
            channel: "Science Explained",
            category: "documentaries",
            duration: "32:15",
            views: "89K",
            shortDesc: "Comprehensive documentary exploring the science behind climate change and its global impact.",
            longDesc: "An in-depth exploration of climate science, examining the evidence for climate change, its causes, and potential consequences. This documentary features interviews with leading climate scientists and presents complex scientific concepts in an accessible way. Essential viewing for understanding one of the most important issues of our time.",
            topics: ["Climate Science", "Environment", "Global Warming", "Sustainability", "Earth Science"],
            embedUrl: "https://www.youtube-nocookie.com/embed/dcC8n4DaCrM",
            image: "../assets/video-02.svg"
        },
        {
            id: 3,
            title: "Advanced Mathematics: Calculus Fundamentals",
            channel: "MathPro University",
            category: "lectures",
            duration: "58:42",
            views: "67K",
            shortDesc: "University-level lecture covering differential and integral calculus concepts.",
            longDesc: "A comprehensive university lecture on calculus fundamentals, covering limits, derivatives, and integrals. This lecture is part of a complete calculus course and assumes basic knowledge of algebra and trigonometry. The instructor provides clear explanations with step-by-step examples and real-world applications of calculus concepts.",
            topics: ["Calculus", "Mathematics", "Derivatives", "Integrals", "University Level"],
            embedUrl: "https://www.youtube-nocookie.com/embed/WUvTyaaNkzM",
            image: "../assets/video-03.svg"
        },
        {
            id: 4,
            title: "Digital Camera Buying Guide 2026",
            channel: "Photo Review Central",
            category: "reviews",
            duration: "28:20",
            views: "156K",
            shortDesc: "Comprehensive review of the best digital cameras for different budgets and use cases.",
            longDesc: "This detailed review covers the top digital cameras available in 2026, comparing features, image quality, and value for money across different price ranges. Whether you're a beginner looking for your first camera or a professional seeking an upgrade, this guide provides expert insights and practical recommendations.",
            topics: ["Photography", "Camera Reviews", "Digital Cameras", "Buying Guide", "Technology"],
            embedUrl: "https://www.youtube-nocookie.com/embed/LxO-6rlihSg",
            image: "../assets/video-04.svg"
        },
        {
            id: 5,
            title: "How to Build a Raised Garden Bed",
            channel: "Garden Masters",
            category: "how-to",
            duration: "15:45",
            views: "234K",
            shortDesc: "Step-by-step guide to building a raised garden bed for vegetables and herbs.",
            longDesc: "Learn how to build a raised garden bed from scratch with this detailed tutorial. Covers material selection, tools needed, construction steps, and soil preparation. Perfect for beginners who want to start growing their own vegetables and herbs. Includes tips for drainage, pest control, and seasonal maintenance.",
            topics: ["Gardening", "DIY", "Vegetables", "Home Improvement", "Sustainable Living"],
            embedUrl: "https://www.youtube-nocookie.com/embed/jSX7djhNzx4",
            image: "../assets/video-05.svg"
        },
        {
            id: 6,
            title: "Understanding Artificial Intelligence",
            channel: "Future Tech Insights",
            category: "lectures",
            duration: "41:18",
            views: "198K",
            shortDesc: "Comprehensive overview of artificial intelligence, machine learning, and their applications.",
            longDesc: "An accessible introduction to artificial intelligence and machine learning concepts. This lecture explains how AI works, different types of AI systems, and their real-world applications. Perfect for students, professionals, and anyone curious about the technology shaping our future. No technical background required.",
            topics: ["Artificial Intelligence", "Machine Learning", "Technology", "Computer Science", "Future"],
            embedUrl: "https://www.youtube-nocookie.com/embed/ad79nYk2keg",
            image: "../assets/video-06.svg"
        },
        {
            id: 7,
            title: "Ancient Civilizations: Egypt Documentary",
            channel: "History Channel Plus",
            category: "documentaries",
            duration: "52:30",
            views: "312K",
            shortDesc: "Explore the mysteries and achievements of ancient Egyptian civilization.",
            longDesc: "Journey through ancient Egypt in this fascinating documentary that explores the pyramids, pharaohs, and daily life in one of history's greatest civilizations. Features expert historians, archaeological evidence, and stunning visuals that bring ancient Egypt to life. Discover the secrets of mummification, hieroglyphics, and monumental architecture.",
            topics: ["Ancient Egypt", "History", "Archaeology", "Pyramids", "Pharaohs"],
            embedUrl: "https://www.youtube-nocookie.com/embed/kVbkby2P5QY",
            image: "../assets/video-07.svg"
        },
        {
            id: 8,
            title: "Cooking Basics: Knife Skills Tutorial",
            channel: "Culinary Institute",
            category: "tutorials",
            duration: "22:35",
            views: "445K",
            shortDesc: "Master essential knife skills for cooking with this comprehensive tutorial.",
            longDesc: "Learn proper knife techniques from professional chefs in this detailed tutorial. Covers knife selection, proper grip, basic cuts, and safety techniques. Essential skills for anyone looking to improve their cooking. Includes demonstrations of julienne, brunoise, chiffonade, and other classic cutting techniques used in professional kitchens.",
            topics: ["Cooking", "Culinary Skills", "Kitchen Techniques", "Food Preparation", "Chef Training"],
            embedUrl: "https://www.youtube-nocookie.com/embed/JMA2SqaDgG8",
            image: "../assets/video-08.svg"
        }
    ],
    
    categories: [
        { name: "Tutorials", slug: "tutorials", count: 0 },
        { name: "Documentaries", slug: "documentaries", count: 0 },
        { name: "Lectures", slug: "lectures", count: 0 },
        { name: "Reviews", slug: "reviews", count: 0 },
        { name: "How-to", slug: "how-to", count: 0 }
    ]
};

// Calculate category counts
videoData.categories.forEach(category => {
    category.count = videoData.videos.filter(video => video.category === category.slug).length;
});

// Utility Functions
function getVideoById(id) {
    return videoData.videos.find(video => video.id === parseInt(id));
}

function getVideosByCategory(category) {
    if (!category) return videoData.videos;
    return videoData.videos.filter(video => video.category === category);
}

function searchVideos(query) {
    if (!query) return videoData.videos;
    const searchTerm = query.toLowerCase();
    return videoData.videos.filter(video => 
        video.title.toLowerCase().includes(searchTerm) ||
        video.channel.toLowerCase().includes(searchTerm) ||
        video.shortDesc.toLowerCase().includes(searchTerm) ||
        video.topics.some(topic => topic.toLowerCase().includes(searchTerm))
    );
}

function getRelatedVideos(currentVideoId, category, limit = 4) {
    return videoData.videos
        .filter(video => video.id !== currentVideoId && video.category === category)
        .slice(0, limit);
}

// Render Functions
function renderVideoCard(video) {
    return `
        <a href="/video/?id=${video.id}" class="video-card">
            <img src="${video.image}" alt="${video.title}" class="video-thumbnail">
            <div class="video-info">
                <h3 class="video-title">${video.title}</h3>
                <p class="video-channel">${video.channel}</p>
                <div class="video-meta">
                    <span class="video-duration">${video.duration}</span>
                    <span class="video-views">${video.views} views</span>
                </div>
                <p class="video-description">${video.shortDesc}</p>
                <div class="video-topics">
                    ${video.topics.slice(0, 3).map(topic => `<span class="topic-tag">${topic}</span>`).join('')}
                </div>
            </div>
        </a>
    `;
}

function renderCategoryCard(category) {
    return `
        <a href="/videos/?category=${category.slug}" class="category-card">
            <h3 class="category-name">${category.name}</h3>
            <p class="category-count">${category.count} videos</p>
        </a>
    `;
}

function renderVideoPlayer(video) {
    return `
        <div class="video-player">
            <iframe src="${video.embedUrl}" allowfullscreen></iframe>
        </div>
    `;
}

function renderVideoDetails(video) {
    return `
        <div class="video-detail-info">
            <h1 class="video-detail-title">${video.title}</h1>
            <div class="video-detail-meta">
                <span class="video-channel"><strong>Channel:</strong> ${video.channel}</span>
                <span class="video-duration"><strong>Duration:</strong> ${video.duration}</span>
                <span class="video-views"><strong>Views:</strong> ${video.views}</span>
                <span class="video-category"><strong>Category:</strong> ${video.category}</span>
            </div>
            <div class="video-topics">
                <strong>Topics:</strong>
                ${video.topics.map(topic => `<span class="topic-tag">${topic}</span>`).join('')}
            </div>
        </div>
        <div class="video-detail-description">
            <h3>About this video</h3>
            <p>${video.longDesc}</p>
        </div>
    `;
}

// Page-specific initialization functions
function initHomePage() {
    // Render featured videos (first 6 videos)
    const featuredContainer = document.getElementById('featured-videos');
    if (featuredContainer) {
        const featuredVideos = videoData.videos.slice(0, 6);
        featuredContainer.innerHTML = featuredVideos.map(renderVideoCard).join('');
    }

    // Render categories preview
    const categoriesContainer = document.getElementById('categories-preview');
    if (categoriesContainer) {
        categoriesContainer.innerHTML = videoData.categories.map(renderCategoryCard).join('');
    }
}

function initVideosPage() {
    const allVideosContainer = document.getElementById('all-videos');
    const searchInput = document.getElementById('search-input');
    const categoryFilter = document.getElementById('category-filter');

    function renderFilteredVideos() {
        const searchQuery = searchInput ? searchInput.value : '';
        const selectedCategory = categoryFilter ? categoryFilter.value : '';
        
        let filteredVideos = videoData.videos;
        
        if (searchQuery) {
            filteredVideos = searchVideos(searchQuery);
        }
        
        if (selectedCategory) {
            filteredVideos = filteredVideos.filter(video => video.category === selectedCategory);
        }
        
        if (allVideosContainer) {
            allVideosContainer.innerHTML = filteredVideos.map(renderVideoCard).join('');
        }
    }

    // Initial render
    renderFilteredVideos();

    // Event listeners
    if (searchInput) {
        searchInput.addEventListener('input', renderFilteredVideos);
    }
    
    if (categoryFilter) {
        categoryFilter.addEventListener('change', renderFilteredVideos);
    }

    // Check for category parameter in URL
    const urlParams = new URLSearchParams(window.location.search);
    const categoryParam = urlParams.get('category');
    if (categoryParam && categoryFilter) {
        categoryFilter.value = categoryParam;
        renderFilteredVideos();
    }
}

function initVideoDetailPage() {
    const urlParams = new URLSearchParams(window.location.search);
    const videoId = urlParams.get('id');
    
    if (!videoId) {
        document.body.innerHTML = '<div class="container"><h1>Video not found</h1><p><a href="/videos/">Browse all videos</a></p></div>';
        return;
    }

    const video = getVideoById(videoId);
    if (!video) {
        document.body.innerHTML = '<div class="container"><h1>Video not found</h1><p><a href="/videos/">Browse all videos</a></p></div>';
        return;
    }

    // Update page title
    document.title = `${video.title} - ValueScene`;

    // Render video player
    const playerContainer = document.getElementById('video-player');
    if (playerContainer) {
        playerContainer.innerHTML = renderVideoPlayer(video);
    }

    // Render video info
    const infoContainer = document.getElementById('video-info');
    const descContainer = document.getElementById('video-description');
    if (infoContainer || descContainer) {
        const detailsHTML = renderVideoDetails(video);
        if (infoContainer && descContainer) {
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = detailsHTML;
            infoContainer.innerHTML = tempDiv.querySelector('.video-detail-info').outerHTML;
            descContainer.innerHTML = tempDiv.querySelector('.video-detail-description').outerHTML;
        }
    }

    // Render related videos
    const relatedContainer = document.getElementById('related-videos');
    if (relatedContainer) {
        const relatedVideos = getRelatedVideos(video.id, video.category);
        relatedContainer.innerHTML = relatedVideos.map(renderVideoCard).join('');
    }
}

function initCategoriesPage() {
    const categoriesContainer = document.getElementById('all-categories');
    if (categoriesContainer) {
        categoriesContainer.innerHTML = videoData.categories.map(renderCategoryCard).join('');
    }
}

// Main initialization
document.addEventListener('DOMContentLoaded', function() {
    const path = window.location.pathname;
    
    // Determine which page we're on and initialize accordingly
    if (path === '/' || path === '/index/' || path.endsWith('/index.html')) {
        initHomePage();
    } else if (path === '/videos/' || path.includes('/videos/')) {
        initVideosPage();
    } else if (path === '/video/' || path.includes('/video/')) {
        initVideoDetailPage();
    } else if (path === '/categories/' || path.includes('/categories/')) {
        initCategoriesPage();
    }
});