script.js

// 1. IMPORT your data
import { contentData } from './skill/categories.js'; 

// 2. DECLARE variables in the top-level scope
let contentContainer;
let searchInput;
let clearSearchBtn;
let noResultsMessage;
let backButton;
let currentCategoryTitle;
let dynamicNavBar;
let heroSection;
let categorySectionTitle; // NEW: Section title for categories

let currentView = 'categories';
let currentCategoryId = null;

// 3. DEFINE all your functions

// Function to display sub-topics within a category
function displaySubTopics(categoryId, filteredSubTopics = null) {
    const category = contentData.categories.find(cat => cat.id === categoryId);
    if (!category || !category.subTopics){
        window.location.hash = '';
        return;
    }

    contentContainer.innerHTML = '';
    
    // UX Logic
    heroSection.classList.add('hidden');
    dynamicNavBar.classList.remove('hidden');
    categorySectionTitle.classList.add('hidden'); // Hide category title
    
    noResultsMessage.classList.add('hidden');
    currentCategoryTitle.textContent = category.name;
    currentView = 'subTopics';
    currentCategoryId = categoryId;

    const topicsToDisplay = filteredSubTopics || category.subTopics;
    
    // ... rest of the function remains the same ...

    if (topicsToDisplay.length === 0) {
        noResultsMessage.classList.remove('hidden');
        return;
    }

    topicsToDisplay.forEach(subTopic => {
        const subTopicCard = createCard(subTopic, 'subTopic');
        contentContainer.appendChild(subTopicCard);
    });
}

// Function to display projects (remains similar, updating visibility)
function showProjects(filteredProjects = null) {
    const projectsCategory = contentData.categories.find(cat => cat.id === 'projects');
    if (!projectsCategory || !projectsCategory.projects) {
        window.location.hash = '';
        return;
    }

    contentContainer.innerHTML = '';
    
    // UX Logic
    heroSection.classList.add('hidden');
    dynamicNavBar.classList.remove('hidden');
    categorySectionTitle.classList.add('hidden'); // Hide category title
    
    noResultsMessage.classList.add('hidden');
    currentCategoryTitle.textContent = projectsCategory.name;
    currentView = 'projects';
    currentCategoryId = 'projects';

    const projectsToDisplay = filteredProjects || projectsCategory.projects;

    if (projectsToDisplay.length === 0) {
        noResultsMessage.classList.remove('hidden');
        return;
    }

    projectsToDisplay.forEach(project => {
        const projectCard = createCard(project, 'project');
        contentContainer.appendChild(projectCard);
    });
}

// Function to create cards (remains the same as the previous version)
function createCard(item, type) {
    // ... (omitted for brevity, as it's the same as the previous full version)
    const card = document.createElement('div');
    card.className = "bg-white p-6 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border-l-4 border-gray-200 hover:border-blue-500";

    if (type === 'category') {
        card.classList.add("cursor-pointer");
        card.innerHTML = `
            <h3 class="text-2xl font-bold text-blue-700 mb-3">${item.name}</h3>
            <p class="text-gray-700 leading-relaxed">${item.description}</p>
        `;
        card.onclick = () => {
            window.location.hash = item.id;
        };
    } else if (type === 'subTopic') {
        // ... (subTopic card content logic)
        let imageHtml = '';
        if (item.imageLink) {
            imageHtml = `<div class="mb-4">
                            <img src="${item.imageLink}" alt="${item.title}" class="rounded-lg w-full h-40 object-cover shadow-md bg-gray-100">
                        </div>`;
        }
        
        let buttonsHtml = '';
        const links = [
            { link: item.videoLink, text: 'Watch Video', color: 'bg-blue-600 hover:bg-blue-700' },
            { link: item.pdfLink, text: 'See PDF', color: 'bg-purple-600 hover:bg-purple-700' },
            { link: item.websiteLink, text: 'Visit Website', color: 'bg-green-600 hover:bg-green-700' },
            { link: item.githubLink, text: 'View GitHub', color: 'bg-gray-700 hover:bg-gray-800' },
        ];

        links.forEach(btn => {
            if (btn.link) {
                buttonsHtml += `
                    <a href="${btn.link}" target="_blank" class="flex-1 text-center ${btn.color} text-white font-medium py-2 px-4 rounded-full shadow-md transition-colors duration-200 text-sm">
                        ${btn.text}
                    </a>
                `;
            }
        });
        
        card.innerHTML = `
            ${imageHtml}
            <div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">${item.title}</h3>
                <p class="text-gray-600 mb-4">${item.description}</p>
            </div>
            <div class="mt-4 flex flex-wrap gap-2">
                ${buttonsHtml}
            </div>
        `;
    } else if (type === 'project') {
        // ... (project card content logic)
        card.classList.remove("cursor-pointer");
        card.innerHTML = `
            <h3 class="text-xl font-semibold text-gray-900 mb-2">${item.name}</h3>
            <p class="text-gray-600 mb-4">${item.description}</p>
            <a href="${item.githubLink}" target="_blank" class="inline-block bg-gray-700 text-white font-medium py-2 px-4 rounded-full shadow-md hover:bg-gray-800 transition-colors duration-200">
                View GitHub
            </a>
        `;
    }
    return card;
}

// Function to display categories (initial view)
function displayCategories(filteredCategories = contentData.categories) {
    contentContainer.innerHTML = '';
    
    // UX Logic: Show Hero on homepage, Show category title
    dynamicNavBar.classList.add('hidden');
    heroSection.classList.remove('hidden'); 
    categorySectionTitle.classList.remove('hidden'); // Show category title
    
    noResultsMessage.classList.add('hidden'); 
    currentView = 'categories';
    currentCategoryId = null;

    if (!Array.isArray(filteredCategories) || filteredCategories.length === 0) {
        if(searchInput.value.length > 0) {
            noResultsMessage.classList.remove('hidden');
        }
        return;
    }

    filteredCategories.forEach(category => {
        const categoryCard = createCard(category, 'category');
        contentContainer.appendChild(categoryCard);
    });
}

// Function to handle search logic (unchanged)
function handleSearch() {
    const searchTerm = searchInput.value.toLowerCase();
    clearSearchBtn.style.display = searchTerm.length > 0 ? 'block' : 'none';

    if (currentView === 'categories') {
        const filteredCategories = contentData.categories.filter(cat =>
            cat.name.toLowerCase().includes(searchTerm) ||
            cat.description.toLowerCase().includes(searchTerm)
        );
        displayCategories(filteredCategories);
    } else if (currentView === 'subTopics' && currentCategoryId) {
        const category = contentData.categories.find(cat => cat.id === currentCategoryId);
        if (category && category.subTopics) {
            const filteredSubTopics = category.subTopics.filter(sub =>
                sub.title.toLowerCase().includes(searchTerm) ||
                sub.description.toLowerCase().includes(searchTerm)
            );
            displaySubTopics(currentCategoryId, filteredSubTopics);
        }
    } else if (currentView === 'projects') {
        const projectsCategory = contentData.categories.find(cat => cat.id === 'projects');
        if (projectsCategory && projectsCategory.projects) {
            const filteredProjects = projectsCategory.projects.filter(proj =>
                proj.name.toLowerCase().includes(searchTerm) ||
                proj.description.toLowerCase().includes(searchTerm)
            );
            showProjects(filteredProjects);
        }
    }
}

// --- Routing Function (unchanged) ---
function route() {
    const hash = window.location.hash.substring(1);
    const parts = hash.split('/');

    if (parts.length > 0 && parts[0]) {
        const categoryId = parts[0];
        const category = contentData.categories.find(cat => cat.id === categoryId);

        if (category) {
            if (categoryId === 'projects') {
                showProjects();
            } else if (category.subTopics) {
                displaySubTopics(categoryId);
            } else {
                window.location.hash = '';
                displayCategories();
            }
        } else {
            window.location.hash = '';
            displayCategories();
        }
    } else {
        displayCategories();
    }
}

// 4. SET UP event listeners
document.addEventListener('DOMContentLoaded', () => {
    
    // Assigning ALL variables
    contentContainer = document.getElementById('content-container');
    searchInput = document.getElementById('searchInput');
    clearSearchBtn = document.getElementById('clearSearchBtn');
    noResultsMessage = document.getElementById('noResultsMessage');
    
    dynamicNavBar = document.getElementById('dynamic-nav-bar');
    backButton = document.getElementById('backButton'); 
    currentCategoryTitle = document.getElementById('currentCategoryTitle');
    heroSection = document.getElementById('hero-section');
    categorySectionTitle = document.getElementById('category-section-title'); // NEW Assignment

    // Event listeners
    if (searchInput) {
        searchInput.addEventListener('keyup', handleSearch);
    }
    
    if (clearSearchBtn) {
        clearSearchBtn.addEventListener('click', () => {
            if (searchInput) {
                searchInput.value = '';
            }
            handleSearch();
        });
    }

    if (backButton) {
        backButton.addEventListener('click', () => {
            if (searchInput) {
                searchInput.value = '';
            }
            handleSearch();
            
            // Explicitly route to home to clear hash
            window.location.hash = '';
            route();
        });
    }

    // Initial page load
    route();
});

// Listen for hash changes (browser back/forward)
window.addEventListener('hashchange', route);