---
layout: default
title: "Home"
icon: "🏠"
hide_toc: true
---
<style>
    .hero-section {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: radial-gradient(circle at center, rgba(110, 193, 228, 0.15), transparent 70%);
        width: 100%;
        margin: 0;
        padding-bottom: 15vh; /* Shift content up optically */
    }

    .hero-title {
        font-size: 4.2rem;
        font-weight: 900;
        margin-bottom: 30px;
        background: linear-gradient(to bottom, #fff, #9ab5d1);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -3px;
        line-height: 1;
    }

    .hero-subtitle {
        color: var(--muted);
        font-size: 1.5rem;
        max-width: 900px;
        margin: 0 auto 80px auto;
        line-height: 1.6;
    }

    .category-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        max-width: 1100px;
        width: 100%;
        margin: 0 auto;
    }

    .category-box {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
        padding: 25px 15px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        color: inherit;
        backdrop-filter: blur(16px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 150px;
    }

    .category-box:hover {
        transform: translateY(-8px);
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--primary);
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    .category-box i {
        font-size: 3.2rem;
        margin-bottom: 20px;
        display: block;
    }

    .category-box span {
        font-weight: 700;
        font-size: 1.3rem;
        color: #fff;
    }

    .results-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: var(--bg);
        z-index: 999;
        display: none;
        padding: 60px;
        overflow-y: auto;
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }

    .results-container.active {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .resource-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Pillar: Auto-Balance */
        gap: 20px;
        margin-top: 60px;
    }

    .resource-card {
        flex: 1 1 320px;
        max-width: 420px;
        background: rgba(255, 255, 255, 0.08);
        padding: 30px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        text-decoration: none;
        color: #fff;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center; /* Center content horizontally */
        justify-content: center;
        text-align: center; /* Center text */
        gap: 12px;
    }

    .resource-card:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: var(--accent);
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    .resource-card h3 {
        margin: 0;
        font-size: 1.2rem;
        line-height: 1.4;
    }

    .search-container {
        max-width: 550px;
        width: 100%;
        margin: 0 auto 35px auto;
        position: relative;
    }

    .search-input {
        width: 100%;
        background: rgba(255, 255, 255, 0.05);
        border: 2px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        padding: 18px 30px 18px 60px;
        font-size: 1.1rem;
        color: #fff;
        outline: none;
        transition: all 0.3s;
        backdrop-filter: blur(10px);
    }

    .search-input:focus {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--primary);
        box-shadow: 0 0 30px rgba(110, 193, 228, 0.2);
    }

    .search-icon {
        position: absolute;
        left: 25px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.2rem;
        opacity: 0.5;
    }

    .no-results {
        text-align: center;
        padding: 40px;
        opacity: 0.6;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
<script src="https://unpkg.com/lunr/lunr.js"></script>

<div class="hero-section">
    <h1 class="hero-title">LTF Teaching Archives</h1>


    <div class="search-container">
        <span class="search-icon">🔍</span>
        <input type="text" id="searchInput" class="search-input" placeholder="Search resources (e.g. 'Tense', 'Vocabulary')..." oninput="handleSearch(this.value)">
    </div>

    <div class="category-grid" id="categoryGrid">
        <a href="javascript:void(0)" class="category-box" onclick="filterCategory('Reading')">
            <i>📖</i>
            <span>Reading</span>
        </a>
        <a href="javascript:void(0)" class="category-box" onclick="filterCategory('Grammar')">
            <i>🧩</i>
            <span>Grammar</span>
        </a>
        <a href="javascript:void(0)" class="category-box" onclick="filterCategory('Writing')">
            <i>✍️</i>
            <span>Writing</span>
        </a>
        <a href="javascript:void(0)" class="category-box" onclick="filterCategory('Speaking')">
            <i>🗣️</i>
            <span>Speaking</span>
        </a>
        <a href="javascript:void(0)" class="category-box" onclick="filterCategory('Listening')">
            <i>🎧</i>
            <span>Listening</span>
        </a>
    </div>

    <div id="resultsWrapper" class="results-container">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px;">
            <h2 id="resultsTitle" style="margin: 0; font-size: 1.5rem; color: var(--primary);">Resources</h2>
            <button onclick="closeResults()" style="background: none; border: none; color: #ff6b6b; cursor: pointer; font-weight: bold; font-size: 1.1rem;">✕ Close</button>
        </div>
        <div id="list" class="resource-list"></div>
    </div>
</div>

<script>
    let resources = [];
    let idx;

    async function init() {
        try {
            const resp = await fetch('{{ "/assets/js/search-data.json" | relative_url }}');
            resources = await resp.json();
            resources.sort((a, b) => a.title.localeCompare(b.title));
            
            // Initialize Lunr index
            idx = lunr(function () {
                this.ref('url');
                this.field('title', { boost: 10 });
                this.field('category', { boost: 5 });
                this.field('content');

                resources.forEach(doc => {
                    this.add(doc);
                });
            });
            
            console.log('📦 Search index built with ' + resources.length + ' items');

            // Handle incoming category filter from URL (Smart Back)
            handleHashNavigation();
        } catch (e) {
            console.error('Failed to load search data:', e);
        }
    }

    function handleHashNavigation() {
        const hash = window.location.hash;
        console.log('🔎 Checking hash navigation:', hash);
        if (hash.startsWith('#cat=')) {
            const cat = decodeURIComponent(hash.substring(5));
            if (cat) {
                console.log('🎯 Smart Back: Filtering for category:', cat);
                filterCategory(cat);
                // Clear the hash after a short delay to ensure it's not re-triggered but looks clean
                setTimeout(() => {
                    window.history.replaceState(null, null, window.location.pathname);
                }, 100);
            }
        }
    }

    window.addEventListener('hashchange', handleHashNavigation);

    init();
    
    // Prevent scrolling on home page
    document.body.style.overflow = 'hidden';
    document.documentElement.style.overflow = 'hidden';

    // Keyboard shortcuts
    window.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeResults();
        }
    });

    function filterCategory(cat) {
        if (resources.length === 0) {
            setTimeout(() => filterCategory(cat), 100);
            return;
        }
        renderList(cat);
    }

    function closeResults() {
        const wrapper = document.getElementById('resultsWrapper');
        wrapper.style.opacity = '0';
        
        setTimeout(() => {
            wrapper.classList.remove('active');
            wrapper.style.display = 'none';
            document.getElementById('categoryGrid').style.opacity = '1';
        }, 200);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    let searchTimeout;
    function handleSearch(query) {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            if (!query.trim()) {
                closeResults();
                return;
            }
            renderList('Search Results', query.trim().toLowerCase());
        }, 300);
    }

    function renderList(categoryFilter, searchQuery = null) {
        const container = document.getElementById('list');
        const wrapper = document.getElementById('resultsWrapper');
        const grid = document.getElementById('categoryGrid');
        const titleEl = document.getElementById('resultsTitle');

        if (!container || !wrapper || !grid || !titleEl) return;

        container.innerHTML = '';
        titleEl.innerText = searchQuery ? `Results for "${searchQuery}"` : categoryFilter;
        wrapper.style.display = 'block';
        wrapper.style.opacity = '1';
        wrapper.offsetHeight; // Force reflow
        wrapper.classList.add('active');
        grid.style.opacity = '0.3';

        let filtered = [];
        
        if (searchQuery) {
            // 1. Predictable Title Match (e.g. "pass" -> "Passive Voice")
            const titleMatches = resources.filter(res => 
                res.title.toLowerCase().includes(searchQuery.toLowerCase())
            );

            // 2. Advanced Full-text Search with Lunr
            const terms = searchQuery.split(/\s+/).filter(t => t.length > 0);
            const queryStr = terms.map(t => `${t}*`).join(' ');
            const searchResults = idx.search(queryStr);
            console.log(`🔍 Search for "${queryStr}" found ${searchResults.length} matches`);
            
            const lunrMatches = searchResults.map(result => {
                return resources.find(res => res.url === result.ref);
            }).filter(Boolean);

            // Merge results and de-duplicate by URL
            const combined = [...titleMatches, ...lunrMatches];
            const uniqueUrls = new Set();
            filtered = [];
            
            combined.forEach(res => {
                if (!uniqueUrls.has(res.url)) {
                    uniqueUrls.add(res.url);
                    filtered.push(res);
                }
            });
        } else {
            filtered = resources.filter(res => res.category === categoryFilter);
        }

        if (filtered.length === 0) {
            container.innerHTML = '<div class="no-results">No resources found matching your criteria.</div>';
        } else {
            filtered.forEach(res => {
                const card = document.createElement('a');
                card.className = 'resource-card';
                card.href = res.url || "#";
                
                const inner = document.createElement('div');
                inner.style.display = 'flex';
                inner.style.alignItems = 'center';
                inner.style.gap = '15px';
                
                const iconSpan = document.createElement('span');
                iconSpan.style.fontSize = '1.5rem';
                iconSpan.textContent = res.icon || '📄';
                
                const titleH3 = document.createElement('h3');
                titleH3.style.margin = '0';
                titleH3.textContent = res.title;
                
                inner.appendChild(iconSpan);
                inner.appendChild(titleH3);
                
                const categorySpan = document.createElement('span');
                categorySpan.style.fontSize = '0.85rem';
                categorySpan.style.color = 'var(--muted)';
                categorySpan.style.textTransform = 'uppercase';
                categorySpan.style.letterSpacing = '1px';
                categorySpan.textContent = res.category;

                card.appendChild(inner);
                card.appendChild(categorySpan);
                container.appendChild(card);
            });
        }

        // Always scroll to results for better UX
        wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    function createCard(item, overrideTitle = null) {
        const link = document.createElement('a');
        link.className = 'resource-card';
        link.href = item.file;
        
        const displayTitle = overrideTitle || item.title.replace(/^Quiz[:\s-]+/i, '').trim();

        let tagColor = 'rgba(255,255,255,0.2)';
        if (item.category === 'Grammar') tagColor = 'rgba(110, 193, 228, 0.3)';
        else if (item.category === 'Quizzes') tagColor = 'rgba(255, 107, 107, 0.3)';
        else if (item.category === 'Reading') tagColor = 'rgba(74, 222, 128, 0.3)';
        else if (item.category === 'Listening') tagColor = 'rgba(167, 139, 250, 0.3)';
        else if (item.category === 'Writing') tagColor = 'rgba(251, 159, 67, 0.3)';

        link.innerHTML = `
            <span class="cat-tag" style="background: ${tagColor}; padding: 4px 10px; border-radius: 6px; color: #fff; margin-bottom: 12px; display: inline-block;">${item.icon} ${item.category}</span>
            <h3 style="text-align: center; border-bottom: 2px solid var(--primary); display: inline-block; padding-bottom: 2px; margin: 0; width: fit-content;">${displayTitle}</h3>
        `;
        link.style.display = 'flex';
        link.style.flexDirection = 'column';
        link.style.alignItems = 'center';
        link.style.justifyContent = 'center';
        link.style.textAlign = 'center';
        return link;
    }
</script>