---
layout: default
title: "Home"
icon: "🏠"
---
<style>
    .hero-section {
        padding: 60px 20px;
        text-align: center;
    }

    .hero-title {
        font-size: 3.5rem;
        font-weight: 800;
        margin-bottom: 40px;
        background: linear-gradient(135deg, #fff, #b7e6ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -0.04em;
    }

    .hero-subtitle {
        color: rgba(231, 238, 247, 0.7);
        font-size: 1.25rem;
        margin-bottom: 40px;
    }

    .search-wrapper {
        max-width: 800px;
        margin: 0 auto 60px auto;
        position: relative;
    }

    input {
        width: 100%;
        padding: 24px 30px 24px 70px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 30px;
        font-size: 1.25rem;
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }

    input:focus {
        border-color: var(--primary);
        background: rgba(255, 255, 255, 0.08);
        outline: none;
        box-shadow: 0 15px 50px rgba(110, 193, 228, 0.2);
    }

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

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

    .category-box {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 24px;
        padding: 40px 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        color: inherit;
    }

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

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

    .category-box span {
        font-weight: 700;
        font-size: 1.1rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.8);
    }

    /* Results section - hidden by default */
    .results-container {
        margin-top: 60px;
        display: none;
    }

    .results-container.active {
        display: block;
    }

    .resource-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
    }

    .resource-card {
        background: rgba(255, 255, 255, 0.06);
        padding: 24px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        text-decoration: none;
        color: #fff;
        transition: all 0.2s ease;
    }

    .resource-card:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--primary);
        transform: scale(1.02);
    }

    .resource-card h3 {
        margin: 0;
        font-size: 1.25rem;
    }

    .resource-card .cat-tag {
        font-size: 0.75rem;
        text-transform: uppercase;
        opacity: 0.6;
        margin-bottom: 8px;
        display: block;
    }

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

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

    <div class="search-wrapper">
        <span class="search-icon">🔍</span>
        <input type="text" id="search" placeholder="Type to search lessons, grammar, text types..."
            onkeyup="handleSearch()">
    </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('Listening')">
            <i>🎧</i>
            <span>Listening</span>
        </a>
        <a href="javascript:void(0)" class="category-box" onclick="filterCategory('Quizzes')">
            <i>📝</i>
            <span>Quizzes</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);">Search Results</h2>
            <button onclick="clearSearch()"
                style="background: none; border: none; color: #ff6b6b; cursor: pointer; font-weight: bold;">✕
                Close</button>
        </div>
        <div id="list" class="resource-list"></div>
    </div>
</div>

<script>
    const resources = [
        {% assign sorted_pages = site.pages | sort: "title" %}
    {% assign first = true %}
    {% for p in sorted_pages %}
    {% if p.title and p.category and p.url != '/' %}
    {% unless first %}, {% endunless %}
    {
        title: { { p.title | jsonify } },
        category: { { p.category | jsonify } },
        icon: { { p.icon | jsonify } },
        file: "{{ p.url | relative_url | replace: ' ', '%20' }}"
    } {% assign first = false %}
    {% endif %}
    {% endfor %}
        ];

    function handleSearch() {
        const query = document.getElementById('search').value.toLowerCase();
        if (query.length > 0) {
            renderList(query, 'Search Results');
        } else {
            closeResults();
        }
    }

    function filterCategory(cat) {
        document.getElementById('search').value = '';
        renderList('', cat, cat);
    }

    function clearSearch() {
        document.getElementById('search').value = '';
        closeResults();
    }

    function closeResults() {
        document.getElementById('resultsWrapper').classList.remove('active');
        document.getElementById('categoryGrid').style.opacity = '1';
    }

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

        container.innerHTML = '';
        titleEl.innerText = title;
        wrapper.classList.add('active');
        grid.style.opacity = '0.3';

        const filtered = resources.filter(item => {
            const matchSearch = query ? (item.title.toLowerCase().includes(query) || item.category.toLowerCase().includes(query)) : true;
            const matchCat = categoryFilter ? (item.category === categoryFilter) : true;
            return matchSearch && matchCat;
        });

        if (!filtered.length) {
            container.innerHTML = `<div class="no-results">No lessons found matching "${query || categoryFilter}".</div>`;
            return;
        }

        const getBaseTitle = (t) => t.replace(/^Quiz[:\s-]+/i, '').replace(/[:\-\s]+Quiz$/i, '').trim();

        // Only pair Grammar/Quizzes if searching everything
        if (!categoryFilter) {
            container.style.display = 'block'; // Reset to block for paired rows
            const groups = new Map();
            filtered.forEach(item => {
                const base = getBaseTitle(item.title);
                if (!groups.has(base)) groups.set(base, { grammar: null, quiz: null, others: [] });
                
                const group = groups.get(base);
                if (item.category === 'Grammar') group.grammar = item;
                else if (item.category === 'Quizzes') group.quiz = item;
                else group.others.push(item);
            });

            groups.forEach((group, baseTitle) => {
                if (group.grammar || group.quiz) {
                    const row = document.createElement('div');
                    row.style.display = 'grid';
                    row.style.gridTemplateColumns = '1fr 1fr';
                    row.style.gap = '20px';
                    row.style.marginBottom = '20px';
                    row.style.width = '100%';

                    if (group.grammar) {
                        row.appendChild(createCard(group.grammar, baseTitle));
                    } else {
                        row.appendChild(document.createElement('div'));
                    }

                    if (group.quiz) {
                        row.appendChild(createCard(group.quiz, baseTitle));
                    } else {
                        row.appendChild(document.createElement('div'));
                    }
                    container.appendChild(row);
                }

                group.others.forEach(item => {
                    container.appendChild(createCard(item));
                });
            });
        } else {
            // Standard Grid for single categories
            container.style.display = 'grid';
            container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(280px, 1fr))';
            container.style.gap = '24px';
            
            filtered.forEach(item => {
                container.appendChild(createCard(item));
            });
        }

        wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

        function createCard(item, overrideTitle = null) {
            const link = document.createElement('a');
            link.className = 'resource-card';
            link.href = item.file;
            link.style.height = '100%';
            
            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;">${item.icon} ${item.category}</span>
                <h3 style="text-align: center; border-bottom: 2px solid var(--primary); display: inline-block; padding-bottom: 2px; margin: 15px auto 0 auto; width: fit-content;">${displayTitle}</h3>
            `;
            link.style.display = 'flex';
            link.style.flexDirection = 'column';
            link.style.alignItems = 'center';
            link.style.justifyContent = 'center';
            return link;
        }

    // Sort alphabetically by title initially
    resources.sort((a, b) => a.title.localeCompare(b.title));
</script>