<?php
/**
 * Practice Test Listing Page — Gmind Institute
 *
 * Practice test portal with info section, available practice sets as cards,
 * filter tabs by course category, language badges, and blinking NEW tag
 * for recently added tests.
 *
 * Expected PHP variables:
 *   $sets       — array of published practice set records
 *   $courses    — array of courses for filter
 *   $csrfToken  — CSRF token string
 *   $currentPage — string 'practice'
 *   $title      — page title
 */

$sets       = $sets       ?? [];
$courses    = $courses    ?? [];
$csrfToken  = $csrfToken  ?? '';
$basePath   = defined('BASE_PATH') ? BASE_PATH : '/gmind';
$currentPage = $currentNav ?? 'practice';
$userName   = $userName ?? '';
$isLoggedIn = $isLoggedIn ?? false;

// Determine which sets are "new" (created within last 7 days)
$now = time();
$newThreshold = 7 * 24 * 60 * 60; // 7 days in seconds
include __DIR__ . '/../layouts/header.php';

?>
<!-- Practice-specific styles -->
<style>
/* Practice Info Section */
.practice-info-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.practice-info-block { background-color: #f4f7fc; border-radius: 12px; padding: 24px; text-align: center; }
.practice-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; margin-bottom: 10px; color: #ffffff; }
.practice-info-icon.icon-navy { background-color: #1a4fa0; }
.practice-info-icon.icon-scarlet { background-color: #e84118; }
.practice-info-icon.icon-gold { background-color: #f39c12; }
.practice-info-block h3 { font-size: 1.05rem; margin-bottom: 6px; color: #0d2b6e; }
.practice-info-block p { font-size: 0.88rem; color: #666666; margin-bottom: 0; line-height: 1.6; }

/* Filter Tabs */
.practice-filter-bar { margin-bottom: 1.5rem; display: flex; gap: 8px; flex-wrap: wrap; }
.practice-filter-btn { padding: 8px 18px; border: 1px solid #d0d0d0; border-radius: 50px; background-color: #ffffff; font-size: 0.85rem; font-weight: 500; color: #555555; cursor: pointer; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.practice-filter-btn:hover { border-color: #1a4fa0; color: #1a4fa0; }
.practice-filter-btn.active { background-color: #1a4fa0; color: #ffffff; border-color: #1a4fa0; }

/* Practice Cards Grid */
.practice-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Practice Card */
.practice-card { background-color: #ffffff; border-radius: 12px; border: 1px solid #e8e8e8; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; position: relative; }
.practice-card:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(26,79,160,0.12); }
.practice-card-header { background-color: #0d2b6e; padding: 16px 20px; position: relative; }
.practice-card-title { color: #ffffff; font-size: 1.05rem; margin-bottom: 4px; }
.practice-card-title-hindi { color: rgba(255,255,255,0.8); font-size: 0.88rem; margin-bottom: 4px; }
.practice-card-course { font-size: 0.78rem; color: rgba(255,255,255,0.8); background-color: rgba(255,255,255,0.15); padding: 2px 10px; border-radius: 50px; }
.practice-card-lang-badge { position: absolute; top: 12px; right: 12px; font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 50px; background-color: #f39c12; color: #ffffff; }
.practice-card-body { padding: 20px; }
.practice-card-details { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.practice-detail-item { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: #555555; }
.practice-detail-item svg { color: #1a4fa0; flex-shrink: 0; }
.practice-detail-item .negative-info { color: #e84118; font-weight: 500; }
.practice-card-desc { font-size: 0.82rem; color: #888888; line-height: 1.5; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Exam Details Badge Row */
.exam-details-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.exam-detail-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 50px; }
.badge-duration { background-color: #e8f0fe; color: #1a4fa0; }
.badge-marks { background-color: #eafaf1; color: #27ae60; }
.badge-pass { background-color: #fff8e1; color: #f39c12; }
.badge-questions { background-color: #f4f7fc; color: #555555; }
.badge-negative { background-color: #fff5f5; color: #e84118; }
.badge-attempts { background-color: #f0e6ff; color: #8e44ad; }

/* Blinking NEW Badge */
.badge-new { position: absolute; top: -4px; left: -4px; z-index: 10; background-color: #e84118; color: #ffffff; font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; letter-spacing: 0.5px; animation: blinkNew 1.2s ease-in-out infinite; box-shadow: 0 2px 8px rgba(232,65,24,0.4); }
@keyframes blinkNew {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

/* Result Status Badge on Card */
.result-published-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 50px; margin-bottom: 12px; }
.badge-result-on { background-color: #eafaf1; color: #27ae60; }
.badge-result-off { background-color: #fff8e1; color: #f39c12; }

/* User Attempt Status Badge */
.user-attempt-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 50px; margin-bottom: 8px; }
.badge-attempt-done { background-color: #e8f0fe; color: #1a4fa0; }
.badge-attempt-pass { background-color: #eafaf1; color: #27ae60; }
.badge-attempt-fail { background-color: #fff5f5; color: #e84118; }
.badge-attempt-partial { background-color: #fff8e1; color: #f39c12; }

/* History Link */
.history-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 50px; background-color: #1a4fa0; color: #ffffff; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: background-color 0.25s; }
.history-link:hover { background-color: #0d2b6e; color: #ffffff; }
.history-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 1.5rem; }

.btn-start-practice { display: block; text-align: center; background-color: #e84118; color: #ffffff; padding: 12px 20px; border-radius: 6px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.92rem; transition: background-color 0.25s, transform 0.25s; text-decoration: none; }
.btn-start-practice:hover { background-color: #c73510; transform: translateY(-1px); color: #ffffff; }
.btn-start-practice.btn-already-taken { background-color: #999999; cursor: default; }
.btn-start-practice.btn-already-taken:hover { background-color: #999999; transform: none; }

/* No Login Notice */
.no-login-notice { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: #27ae60; font-weight: 500; margin-bottom: 12px; }
.no-login-notice svg { flex-shrink: 0; }

/* Section styles */
.practice-listing-section { background-color: #f4f7fc; padding: 48px 0; }
.section-heading { text-align: center; margin-bottom: 2rem; }
.section-heading h2 { font-size: 1.5rem; color: #0d2b6e; margin-bottom: 0.5rem; }
.section-heading p { font-size: 0.92rem; color: #666666; }

/* Responsive */
@media (min-width: 576px) {
  .practice-grid { grid-template-columns: repeat(2, 1fr); }
  .practice-info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .practice-info-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .practice-grid { grid-template-columns: repeat(3, 1fr); }
}
</style>

<!-- ============================================================
     Page Banner
     ============================================================ -->
<section class="page-banner" aria-label="Page heading">
    <div class="container">
        <h1><?= __('practice.title') ?></h1>
        <p><?= __('practice.banner_subtitle') ?></p>
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="<?= $basePath ?>/"><?= __('practice.breadcrumb_home') ?></a>
            <span aria-hidden="true">/</span>
            <span><?= __('practice.title') ?></span>
        </nav>
    </div>
</section>

<!-- ============================================================
     Practice Info Section
     ============================================================ -->
<section class="section-white" aria-label="Practice test information">
    <div class="container">
        <div class="practice-info-grid">
            <div class="practice-info-block">
                <div class="practice-info-icon icon-navy" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
                </div>
                <h3><?= __('practice.info_practice_anytime') ?></h3>
                <p><?= __('practice.info_practice_anytime_desc') ?></p>
            </div>
            <div class="practice-info-block">
                <div class="practice-info-icon icon-scarlet" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                </div>
                <h3><?= __('practice.info_timed_sessions') ?></h3>
                <p><?= __('practice.info_timed_sessions_desc') ?></p>
            </div>
            <div class="practice-info-block">
                <div class="practice-info-icon icon-gold" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                </div>
                <h3><?= __('practice.info_bilingual') ?></h3>
                <p><?= __('practice.info_bilingual_desc') ?></p>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     Available Practice Tests Section
     ============================================================ -->
<section class="practice-listing-section" aria-label="<?= __('practice.available_tests') ?>">
    <div class="container">
        <div class="section-heading">
            <h2><?= __('practice.available_tests') ?></h2>
            <p><?= __('practice.available_tests_desc') ?></p>
        </div>

        <?php if ($isLoggedIn): ?>
        <!-- User welcome and history link -->
        <div class="history-bar">
            <span style="font-size:0.92rem;color:#0d2b6e;font-weight:500;">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:4px;"><path d="M20 21v-2a4 4 0 00-3-3.87"/><path d="M4 21v-2a4 4 0 013-3.87"/><circle cx="12" cy="7" r="4"/></svg>
                <?= __('practice.welcome') ?>, <strong><?= htmlspecialchars($userName, ENT_QUOTES, 'UTF-8') ?></strong>
            </span>
            <a href="<?= $basePath ?>/practice/history" class="history-link">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                <?= __('practice.my_test_history') ?>
            </a>
        </div>
        <?php else: ?>
        <div class="history-bar" style="justify-content:flex-end;">
            <a href="<?= $basePath ?>/practice/history" class="history-link" style="background-color:#f39c12;">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                <?= __('practice.my_test_history') ?>
            </a>
        </div>
        <?php endif; ?>

        <?php if (!empty($courses)): ?>
        <!-- Filter Tabs -->
        <div class="practice-filter-bar" role="tablist" aria-label="Filter by course category">
            <button type="button" class="practice-filter-btn active" data-category="all" role="tab" aria-selected="true"><?= __('practice.filter_all') ?></button>
            <?php foreach ($courses as $course): ?>
            <?php
            $catSlug = preg_replace('/[^a-z0-9]+/', '-', strtolower($course['category'] ?? ''));
            $catSlug = trim($catSlug, '-');
            ?>
            <button type="button" class="practice-filter-btn" data-category="<?= htmlspecialchars($catSlug, ENT_QUOTES, 'UTF-8') ?>" role="tab" aria-selected="false"><?= htmlspecialchars($course['category'] ?? 'Other', ENT_QUOTES, 'UTF-8') ?></button>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <?php if (!empty($sets)): ?>
        <div class="practice-grid" id="practiceGrid">
            <?php foreach ($sets as $set): ?>
            <?php
            $setCategorySlug = preg_replace('/[^a-z0-9]+/', '-', strtolower($set['course_category'] ?? ''));
            $setCategorySlug = trim($setCategorySlug, '-');

            // Check if this is a "new" test (created within last 7 days)
            $createdAt = strtotime($set['created_at'] ?? '');
            $isNew = ($createdAt !== false && ($now - $createdAt) <= $newThreshold);

            $setDuration = (int) ($set['duration_minutes'] ?? 30);
            $setTotalMarks = (int) ($set['total_marks'] ?? 0);
            $setPassMarks = (int) ($set['pass_marks'] ?? 0);
            $setQuestions = (int) ($set['question_count'] ?? 0);
            $setNegativeMarks = (float) ($set['negative_marks'] ?? 0);
            $setMaxAttempts = (int) ($set['max_attempts'] ?? 0);
            $setResultPublished = (bool) ($set['result_published'] ?? 1);

            // User attempt summary
            $attemptSummary = $set['user_attempt_summary'] ?? ['count' => 0, 'latest' => null, 'best_score' => 0];
            $userAttemptCount = (int) ($attemptSummary['count'] ?? 0);
            $userBestScore = (float) ($attemptSummary['best_score'] ?? 0);
            $userLatestStatus = $attemptSummary['latest']['status'] ?? '';
            $isMaxReached = ($setMaxAttempts > 0 && $userAttemptCount >= $setMaxAttempts);
            ?>
            <div class="practice-card animate-on-scroll" data-category="<?= htmlspecialchars($setCategorySlug, ENT_QUOTES, 'UTF-8') ?>">
                <?php if ($isNew): ?>
                <span class="badge-new"><?= __('practice.new_badge') ?></span>
                <?php endif; ?>

                <div class="practice-card-header">
                    <h3 class="practice-card-title"><?= htmlspecialchars(getBilingual($set, 'title'), ENT_QUOTES, 'UTF-8') ?></h3>
                    <?php if (!empty($set['title_hindi']) && getCurrentLocale() !== 'hi'): ?>
                    <p class="practice-card-title-hindi"><?= htmlspecialchars($set['title_hindi'], ENT_QUOTES, 'UTF-8') ?></p>
                    <?php endif; ?>
                    <?php if (!empty($set['course_name'])): ?>
                    <span class="practice-card-course"><?= htmlspecialchars($set['course_name'], ENT_QUOTES, 'UTF-8') ?></span>
                    <?php endif; ?>
                    <?php if (!empty($set['language_mode']) && $set['language_mode'] !== 'english'): ?>
                    <span class="practice-card-lang-badge"><?= htmlspecialchars(ucfirst($set['language_mode']), ENT_QUOTES, 'UTF-8') ?></span>
                    <?php endif; ?>
                </div>
                <div class="practice-card-body">
                    <?php if (!empty($set['description']) || !empty($set['description_hi']) || !empty($set['description_hindi'])): ?>
                    <p class="practice-card-desc"><?= htmlspecialchars(getBilingual($set, 'description'), ENT_QUOTES, 'UTF-8') ?></p>
                    <?php endif; ?>

                    <!-- Exam Detail Badges Row -->
                    <div class="exam-details-row">
                        <span class="exam-detail-badge badge-duration">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            <?= $setDuration ?> <?= __('practice.min') ?>
                        </span>
                        <span class="exam-detail-badge badge-questions">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                            <?= $setQuestions ?> <?= __('practice.qs') ?>
                        </span>
                        <span class="exam-detail-badge badge-marks">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                            <?= $setTotalMarks ?> <?= __('practice.marks') ?>
                        </span>
                        <span class="exam-detail-badge badge-pass">
                            <?= __('practice.pass_label') ?>: <?= $setPassMarks ?>
                        </span>
                        <?php if ($setNegativeMarks > 0): ?>
                        <span class="exam-detail-badge badge-negative">
                            -<?= $setNegativeMarks ?> <?= __('practice.neg') ?>
                        </span>
                        <?php endif; ?>
                        <?php if ($setMaxAttempts > 0): ?>
                        <span class="exam-detail-badge badge-attempts">
                            <?= __('practice.max') ?>: <?= $setMaxAttempts ?>
                        </span>
                        <?php endif; ?>
                        <?php
                        $totalAttempts = (int) ($set['attempt_count'] ?? 0);
                        $uniqueStudents = (int) ($set['unique_student_count'] ?? 0);
                        ?>
                        <?php if ($totalAttempts > 0): ?>
                        <span class="exam-detail-badge" style="background-color:#f0e6ff;color:#8e44ad;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
                            <?= $uniqueStudents ?> <?= __('practice.students') ?> | <?= $totalAttempts ?> <?= __('practice.attempts') ?>
                        </span>
                        <?php endif; ?>
                    </div>

                    <!-- Result Published Indicator -->
                    <div class="result-published-badge <?= $setResultPublished ? 'badge-result-on' : 'badge-result-off' ?>">
                        <?php if ($setResultPublished): ?>
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        <?= __('practice.instant_result') ?>
                        <?php else: ?>
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                        <?= __('practice.result_later') ?>
                        <?php endif; ?>
                    </div>

                    <!-- User Attempt Status -->
                    <?php if ($isLoggedIn && $userAttemptCount > 0): ?>
                    <!-- Show attempt status for logged-in user -->
                    <div class="user-attempt-badge <?= $userLatestStatus === 'pass' ? 'badge-attempt-pass' : 'badge-attempt-fail' ?>">
                        <?php if ($userLatestStatus === 'pass'): ?>
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        <?= __('practice.passed') ?> (<?= __('practice.best') ?>: <?= number_format($userBestScore, 1) ?>%) | <?= __('practice.attempts') ?>: <?= $userAttemptCount ?><?= $setMaxAttempts > 0 ? '/' . $setMaxAttempts : '' ?>
                        <?php else: ?>
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                        <?= __('practice.not_passed') ?> (<?= __('practice.best') ?>: <?= number_format($userBestScore, 1) ?>%) | <?= __('practice.attempts') ?>: <?= $userAttemptCount ?><?= $setMaxAttempts > 0 ? '/' . $setMaxAttempts : '' ?>
                        <?php endif; ?>
                        <?php
                        $remAttempts = (int) ($set['remaining_attempts'] ?? -1);
                        if ($remAttempts >= 0):
                        ?>
                        <span style="margin-left:6px;font-size:0.72rem;opacity:0.85;">| <?= $remAttempts ?> <?= __('practice.left') ?></span>
                        <?php endif; ?>
                    </div>
                    <?php elseif (!$isLoggedIn): ?>
                    <div class="no-login-notice">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        <?= __('practice.no_login_required') ?>
                    </div>
                    <?php endif; ?>

                    <?php if ($isMaxReached): ?>
                    <a href="<?= $basePath ?>/practice/<?= htmlspecialchars((string) ($set['id'] ?? '#'), ENT_QUOTES, 'UTF-8') ?>" class="btn-start-practice btn-already-taken" onclick="return false;" style="pointer-events:none;"><?= __('practice.already_completed') ?></a>
                    <?php else: ?>
                    <a href="<?= $basePath ?>/practice/<?= htmlspecialchars((string) ($set['id'] ?? '#'), ENT_QUOTES, 'UTF-8') ?>" class="btn-start-practice">
                        <?= $userAttemptCount > 0 ? __('practice.retake_test') : __('practice.start_test') ?>
                    </a>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php else: ?>
        <div class="empty-state">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
            <h3><?= __('practice.no_tests') ?></h3>
            <p><?= __('practice.no_tests_desc') ?></p>
        </div>
        <?php endif; ?>
    </div>
</section>

<!-- Filter JavaScript -->
<script>
(function() {
    'use strict';

    var filterBtns = document.querySelectorAll('.practice-filter-btn');
    var cards = document.querySelectorAll('.practice-card');

    filterBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            // Update active state
            filterBtns.forEach(function(b) {
                b.classList.remove('active');
                b.setAttribute('aria-selected', 'false');
            });
            this.classList.add('active');
            this.setAttribute('aria-selected', 'true');

            var category = this.getAttribute('data-category');

            // Show/hide cards
            cards.forEach(function(card) {
                if (category === 'all' || card.getAttribute('data-category') === category) {
                    card.style.display = '';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });
})();
</script>

<?php include __DIR__ . '/../layouts/footer.php'; ?>
