{% extends 'base.html' %}
{% block title %}Short Courses | Try English{% endblock %}

{% block extra_css %}
<script src="https://cdn.tailwindcss.com"></script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
    body { font-family:'Inter',sans-serif; background:#04091a; }
    @keyframes fiu { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
    .fiu { animation:fiu 0.55s ease-out both; }
    .s1{animation-delay:.05s} .s2{animation-delay:.12s} .s3{animation-delay:.19s}
    .s4{animation-delay:.26s} .s5{animation-delay:.33s} .s6{animation-delay:.40s}
    /* dot grid */
    .dg { background-image:radial-gradient(rgba(6,182,212,0.18) 1px,transparent 1px); background-size:28px 28px; }
    /* glass card */
    .gc { background:rgba(6,182,212,0.04); border:1px solid rgba(6,182,212,0.14); border-radius:1rem; backdrop-filter:blur(8px); }
    /* course card */
    .cc { background:rgba(255,255,255,0.03); border:1px solid rgba(6,182,212,0.12); border-radius:1rem;
          transition:transform .3s,box-shadow .3s,border-color .3s; }
    .cc:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(6,182,212,0.10); border-color:rgba(6,182,212,0.35); }
    /* tag */
    .tag-c { background:rgba(6,182,212,0.10); border:1px solid rgba(6,182,212,0.22); color:#67e8f9; }
    .tag-g { background:rgba(34,197,94,0.10); border:1px solid rgba(34,197,94,0.22); color:#4ade80; }
    /* pill */
    .pill { display:inline-flex; align-items:center; gap:.4rem;
            background:rgba(6,182,212,0.10); border:1px solid rgba(6,182,212,0.22);
            border-radius:9999px; padding:.35rem 1rem; font-size:.8rem; color:#67e8f9; }
    /* buttons */
    .btn-p { display:inline-flex; align-items:center; gap:.45rem; padding:.65rem 1.6rem;
             background:linear-gradient(135deg,#22d3ee,#6366f1); color:#04091a;
             font-weight:700; font-size:.875rem; border-radius:.65rem;
             transition:opacity .2s,transform .2s; border:none; cursor:pointer; text-decoration:none; }
    .btn-p:hover { opacity:.88; transform:translateY(-1px); }
    .btn-ghost { display:inline-flex; align-items:center; gap:.45rem; padding:.6rem 1.5rem;
                 background:rgba(6,182,212,0.08); border:1px solid rgba(6,182,212,0.30);
                 color:#67e8f9; font-weight:600; font-size:.875rem; border-radius:.65rem;
                 transition:background .2s,transform .2s; text-decoration:none; }
    .btn-ghost:hover { background:rgba(6,182,212,0.16); transform:translateY(-1px); }
    /* enroll btn */
    .enroll-btn { background:linear-gradient(135deg,#22d3ee,#6366f1); color:#04091a;
                  font-weight:700; border-radius:.65rem; text-align:center;
                  padding:.65rem 0; transition:opacity .2s,transform .2s; text-decoration:none;
                  display:flex; align-items:center; justify-content:center; gap:.4rem; }
    .enroll-btn:hover { opacity:.85; transform:translateY(-1px); }
    /* stat tile */
    .stat-tile { background:rgba(255,255,255,0.03); border:1px solid rgba(6,182,212,0.12); border-radius:.85rem; padding:1rem 1.5rem; text-align:center; }
</style>
{% endblock extra_css %}

{% block content %}
<div class="min-h-screen relative" style="background:#04091a">

    <!-- Hero -->
    <div class="relative overflow-hidden" style="background:linear-gradient(160deg,#080f1f 60%,#0b1225 100%)">
        <div class="absolute inset-0 dg opacity-25 pointer-events-none"></div>
        <div class="absolute left-1/3 top-0 w-[600px] h-[400px] rounded-full pointer-events-none"
             style="background:radial-gradient(ellipse,rgba(99,102,241,0.12),transparent 70%)"></div>
        <div class="absolute right-0 bottom-0 w-[400px] h-[400px] rounded-full pointer-events-none"
             style="background:radial-gradient(ellipse,rgba(6,182,212,0.09),transparent 70%)"></div>

        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
            <!-- Breadcrumb -->
            <nav class="flex items-center gap-2 text-sm mb-7 fiu" style="color:#475569">
                <a href="{{ url_for('main.index') }}" class="flex items-center gap-1 transition-colors" style="color:#67e8f9"
                   onmouseover="this.style.color='#22d3ee'" onmouseout="this.style.color='#67e8f9'">
                    <i class="fas fa-home text-xs"></i> Home
                </a>
                <i class="fas fa-chevron-right text-xs" style="color:#334155"></i>
                <span class="font-medium text-white">Short Courses</span>
            </nav>

            <div class="max-w-3xl fiu">
                <div class="pill mb-6"><i class="fas fa-bolt" style="color:#fbbf24"></i> Quick &amp; Focused Learning</div>
                <h1 class="text-4xl sm:text-5xl font-extrabold text-white mb-5 leading-tight">
                    Short <span style="background:linear-gradient(90deg,#22d3ee,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">Courses</span>
                </h1>
                <p class="text-lg mb-8 max-w-2xl leading-relaxed" style="color:#94a3b8">
                    Jumpstart your English skills with targeted, practical modules.
                    Complete a course in days — not months.
                </p>
                <div class="flex flex-wrap gap-3">
                    <a href="{{ url_for('auth.signup') }}" class="btn-p"><i class="fas fa-user-plus"></i> Sign Up Free</a>
                    <a href="{{ url_for('auth.login') }}" class="btn-ghost"><i class="fas fa-sign-in-alt"></i> Login</a>
                </div>
            </div>
        </div>

        <!-- Wave -->
        <div class="relative h-14 overflow-hidden">
            <svg viewBox="0 0 1440 56" fill="none" preserveAspectRatio="none" class="absolute bottom-0 w-full h-14">
                <path d="M0 56L1440 56L1440 0C1200 46 900 62 720 46C540 30 240 4 0 28L0 56Z" fill="#04091a"/>
            </svg>
        </div>
    </div>

    <!-- Stats bar -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-2 mb-14">
        <div class="grid grid-cols-3 gap-4">
            <div class="stat-tile fiu s1">
                <p class="text-2xl font-extrabold mb-0.5" style="color:#22d3ee">{{ courses|length }}</p>
                <p class="text-xs" style="color:#64748b">Courses Available</p>
            </div>
            <div class="stat-tile fiu s2">
                <p class="text-2xl font-extrabold mb-0.5" style="color:#22d3ee">100%</p>
                <p class="text-xs" style="color:#64748b">Free to Join</p>
            </div>
            <div class="stat-tile fiu s3">
                <p class="text-2xl font-extrabold mb-0.5" style="color:#22d3ee">AI</p>
                <p class="text-xs" style="color:#64748b">Powered Feedback</p>
            </div>
        </div>
    </div>

    <!-- Courses Grid -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-24">
        <div class="flex items-center justify-between mb-8 fiu">
            <h2 class="text-xl font-bold text-white">All Short Courses</h2>
            <a href="{{ url_for('main.learning_courses') }}" class="flex items-center gap-1.5 text-sm font-medium transition-colors"
               style="color:#67e8f9" onmouseover="this.style.color='#22d3ee'" onmouseout="this.style.color='#67e8f9'">
                Browse Learning Courses <i class="fas fa-arrow-right text-xs"></i>
            </a>
        </div>

        {% if courses %}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for course in courses %}
            <div class="cc flex flex-col overflow-hidden fiu s{{ loop.index if loop.index <= 6 else '1' }}">
                <!-- Top accent bar -->
                <div class="h-1" style="background:linear-gradient(90deg,#22d3ee,#6366f1)"></div>

                <div class="p-6 flex flex-col flex-1">
                    <!-- Icon -->
                    <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 overflow-hidden"
                         style="background:rgba(6,182,212,0.10);border:1px solid rgba(6,182,212,0.20)">
                        <img src="{{ url_for('static', filename='images/lgu.png') }}" alt="Course" class="w-10 h-10 object-contain opacity-90">
                    </div>

                    <h3 class="text-lg font-bold text-white mb-2 line-clamp-2">{{ course.title }}</h3>
                    <p class="text-sm mb-4 leading-relaxed flex-1 line-clamp-3" style="color:#64748b">
                        {{ course.description or "Improve your English with this focused short course designed for practical skill development." }}
                    </p>

                    <!-- Tags -->
                    <div class="flex flex-wrap gap-2 mb-5">
                        <span class="tag-c inline-flex items-center gap-1 text-xs px-2.5 py-1 rounded-full font-medium">
                            <i class="fas fa-bolt text-xs"></i> Short Course
                        </span>
                        <span class="tag-g inline-flex items-center gap-1 text-xs px-2.5 py-1 rounded-full font-medium">
                            <i class="fas fa-robot text-xs"></i> AI Assessed
                        </span>
                    </div>

                    <!-- Rating -->
                    <div class="flex items-center gap-2 mb-5">
                        <div class="flex text-sm" style="color:#fbbf24">
                            <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                            <i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
                        </div>
                        <span class="text-xs font-medium" style="color:#475569">4.8 / 5</span>
                    </div>

                    <a href="{{ url_for('auth.signup', course_id='short_' ~ course.id) }}" class="mt-auto enroll-btn">
                        <i class="fas fa-arrow-right text-xs"></i> Enroll Now — Free
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>

        {% else %}
        <!-- Empty state -->
        <div class="text-center py-24 fiu">
            <div class="w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-5"
                 style="background:rgba(6,182,212,0.08);border:1px solid rgba(6,182,212,0.18)">
                <i class="fas fa-book-open text-3xl" style="color:#22d3ee"></i>
            </div>
            <h3 class="text-xl font-semibold text-white mb-2">No Courses Yet</h3>
            <p class="mb-6 max-w-sm mx-auto text-sm" style="color:#475569">
                Short courses are coming soon. Check back later or explore our learning courses.
            </p>
            <a href="{{ url_for('main.learning_courses') }}" class="btn-p">View Learning Courses</a>
        </div>
        {% endif %}

        <!-- Bottom CTA -->
        {% if courses %}
        <div class="mt-20 relative overflow-hidden rounded-2xl p-8 sm:p-12 text-center"
             style="background:linear-gradient(135deg,#080f1f,#0b1225);border:1px solid rgba(6,182,212,0.18)">
            <div class="absolute inset-0 dg opacity-20 pointer-events-none rounded-2xl"></div>
            <div class="absolute left-0 top-0 w-72 h-72 rounded-full pointer-events-none"
                 style="background:radial-gradient(ellipse,rgba(99,102,241,0.12),transparent 70%)"></div>
            <div class="absolute right-0 bottom-0 w-72 h-72 rounded-full pointer-events-none"
                 style="background:radial-gradient(ellipse,rgba(6,182,212,0.09),transparent 70%)"></div>
            <div class="relative z-10">
                <div class="pill mb-5 mx-auto w-fit"><i class="fas fa-rocket" style="color:#fbbf24"></i> Get Started Today</div>
                <h3 class="text-2xl sm:text-3xl font-bold text-white mb-3">Ready to Start Learning?</h3>
                <p class="mb-7 max-w-xl mx-auto" style="color:#94a3b8">
                    Create a free account and get instant access to all short courses with AI-powered feedback.
                </p>
                <div class="flex flex-col sm:flex-row gap-3 justify-center">
                    <a href="{{ url_for('auth.signup') }}" class="btn-p"><i class="fas fa-user-plus"></i> Create Free Account</a>
                    <a href="{{ url_for('main.about') }}" class="btn-ghost"><i class="fas fa-info-circle"></i> Learn More</a>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

</div>
{% endblock %}