---
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: var(--hero-glow);
        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, #ffffff, #67e8f9); /* Crisp white to bright ice blue */
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -3px;
        line-height: 1.2;
        padding-bottom: 0.1em;
    }

    .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 {
        font-family: inherit;
        background: var(--surface-soft);
        border: 1px solid var(--border);
        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,
    .category-box:focus-visible {
        transform: translateY(-8px);
        background: var(--surface-hover);
        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: var(--text);
    }

    .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: var(--surface-soft);
        padding: 30px;
        border-radius: 24px;
        border: 1px solid var(--border);
        text-decoration: none;
        color: var(--text);
        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: var(--surface-hover);
        border-color: var(--accent);
        transform: translateY(-8px);
        box-shadow: var(--shadow);
    }

    .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: var(--surface-soft);
        border: 2px solid var(--border);
        border-radius: 999px;
        padding: 18px 30px 18px 60px;
        font-size: 1.1rem;
        color: var(--text);
        outline: none;
        transition: all 0.3s;
        backdrop-filter: blur(10px);
    }

    .search-input:focus {
        background: var(--surface-hover);
        border-color: var(--primary);
        box-shadow: var(--shadow);
    }

    .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); }
    }

    /* Small screens: let the portal scroll and stack the category tiles */
    @media (max-width: 820px) {
        body.home-page {
            overflow: auto;
        }

        .hero-section {
            height: auto;
            min-height: 100vh;
            padding: 60px 20px 10vh;
        }

        .hero-title {
            font-size: 2.6rem;
            letter-spacing: -1px;
        }

        .hero-subtitle {
            font-size: 1.15rem;
            margin-bottom: 40px;
        }

        .category-grid {
            grid-template-columns: repeat(2, 1fr);
            max-width: 500px;
        }

        .results-container {
            padding: 30px 16px;
        }
    }
</style>
<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">
        <button type="button" class="category-box" onclick="filterCategory('Grammar')">
            <i>🧩</i>
            <span>Grammar</span>
        </button>
        <button type="button" class="category-box" onclick="filterCategory('Reading')">
            <i>📖</i>
            <span>Reading</span>
        </button>
        <button type="button" class="category-box" onclick="filterCategory('Writing')">
            <i>✍️</i>
            <span>Writing</span>
        </button>
        <button type="button" class="category-box" onclick="filterCategory('Listening')">
            <i>🎧</i>
            <span>Listening</span>
        </button>
        <button type="button" class="category-box" onclick="filterCategory('Speaking')">
            <i>🗣️</i>
            <span>Speaking</span>
        </button>
    </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 = [];

    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));

            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();

    // 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) {
            const queryLower = searchQuery.toLowerCase();
            
            // Strict Title-Only Search (No full-text noise)
            filtered = resources.filter(res => 
                res.title.toLowerCase().includes(queryLower)
            );
        } 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' });
    }
</script>