{% extends 'base.html' %}
{% block title %}Try English | Master English with AI & Expert Teachers{% endblock %}

{% block footer %}{% endblock %}

{% block main_class %}{% endblock %}
{% block main_inner_class %}{% endblock %}
{% block main_inner_style %}{% 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; }
    
    /* No gap between sticky navbar and hero */
    body > main { padding-top: 0 !important; margin-top: 0 !important; }

    .hero-section {
        background: #04091a;
        position: relative;
        overflow: hidden;
    }

    /* ── Neural-network moving dot grid ── */
    .hero-section::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background-image: radial-gradient(rgba(56,189,248,0.12) 1.5px, transparent 1.5px);
        background-size: 40px 40px;
        animation: neuralDrift 28s linear infinite;
    }

    /* ── Glowing colour orbs ── */
    .hero-section::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            radial-gradient(ellipse 55% 70% at 8%  45%, rgba(79,70,229,0.30) 0%, transparent 65%),
            radial-gradient(ellipse 48% 58% at 88% 22%, rgba(6,182,212,0.26) 0%, transparent 58%),
            radial-gradient(ellipse 38% 48% at 52% 88%, rgba(124,58,237,0.22) 0%, transparent 55%);
    }

    @keyframes neuralDrift {
        from { background-position: 0 0; }
        to   { background-position: 40px 40px; }
    }

    /* ── Horizontal scan-line sweep ── */
    .hero-scan {
        position: absolute;
        inset-x: 0;
        top: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, rgba(6,182,212,0.7) 50%, transparent 100%);
        z-index: 3;
        pointer-events: none;
        animation: scanLine 9s ease-in-out infinite;
    }
    @keyframes scanLine {
        0%   { transform: translateY(0);     opacity: 0; }
        5%   { opacity: 1; }
        95%  { opacity: 0.6; }
        100% { transform: translateY(800px); opacity: 0; }
    }

    /* ── Pulsing glow on node dots ── */
    @keyframes nodeGlow {
        0%, 100% { opacity: 0.4; transform: scale(1); }
        50%       { opacity: 1;   transform: scale(1.6); }
    }
    .hero-node {
        position: absolute;
        border-radius: 50%;
        animation: nodeGlow 3s ease-in-out infinite;
        z-index: 2;
        pointer-events: none;
    }

    .hero-content {
        position: relative;
        z-index: 10;
    }
    
    .gradient-bg { background: linear-gradient(135deg, #06111f 0%, #0d1535 100%); }
    .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .card-hover:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,0.5); }
    .fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
    .fade-in-up.animate { opacity: 1; transform: translateY(0); }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ===== SECTION BASE ===== */
    .section-dark   { background: #080f1f; }
    .section-darker { background: #04091a; }
    .section-mid    { background: #0b1225; }

    /* ===== SECTION LABEL PILL ===== */
    .section-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 14px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        border: 1px solid rgba(6,182,212,0.3);
        background: rgba(6,182,212,0.08);
        color: #67e8f9;
        margin-bottom: 0.85rem;
    }

    /* ===== TECH GLASS CARD ===== */
    .tech-card {
        background: rgba(6,182,212,0.04);
        border: 1px solid rgba(6,182,212,0.14);
        border-radius: 1rem;
        transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
        position: relative;
        overflow: hidden;
    }
    .tech-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 40px rgba(6,182,212,0.12);
        border-color: rgba(6,182,212,0.35);
    }
    .tech-card-top-cyan   { border-top: 2px solid #22d3ee; }
    .tech-card-top-indigo { border-top: 2px solid #818cf8; }
    .tech-card-top-violet { border-top: 2px solid #a78bfa; }
    .tech-card-top-amber  { border-top: 2px solid #fbbf24; }

    /* ===== STEP CONNECTOR ===== */
    .step-connector {
        background: linear-gradient(90deg, rgba(6,182,212,0.5), rgba(139,92,246,0.5));
    }

    /* ===== COURSE CARDS ===== */
    .course-card-short {
        background: linear-gradient(135deg, rgba(6,182,212,0.08) 0%, rgba(99,102,241,0.10) 100%);
        border: 1px solid rgba(6,182,212,0.25);
        border-radius: 1.25rem;
        transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    }
    .course-card-short:hover  { transform: translateY(-6px); box-shadow: 0 0 48px rgba(6,182,212,0.18); border-color: rgba(6,182,212,0.5); }
    .course-card-short-icon   { background: linear-gradient(135deg,#22d3ee,#6366f1); border-radius:0.75rem; }
    .course-card-short-title  { color: #67e8f9; }
    .course-card-short-text   { color: #94a3b8; }
    .course-card-short-cta    { color: #22d3ee; }

    .course-card-learning {
        background: linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(99,102,241,0.10) 100%);
        border: 1px solid rgba(139,92,246,0.25);
        border-radius: 1.25rem;
        transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    }
    .course-card-learning:hover  { transform: translateY(-6px); box-shadow: 0 0 48px rgba(139,92,246,0.18); border-color: rgba(139,92,246,0.5); }
    .course-card-learning-icon   { background: linear-gradient(135deg,#a78bfa,#6366f1); border-radius:0.75rem; }
    .course-card-learning-title  { color: #c4b5fd; }
    .course-card-learning-text   { color: #94a3b8; }
    .course-card-learning-cta    { color: #a78bfa; }
    
    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(6, 182, 212, 0.12);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(6, 182, 212, 0.35);
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        color: #67e8f9;
        margin-bottom: 1.5rem;
        animation: fadeInUp 0.8s ease forwards;
    }

    /* ===== TEXT PROMINENCE ===== */
    .landing-title {
        font-weight: 800;
        letter-spacing: -0.035em;
        line-height: 1.15;
        color: #f0f9ff;
    }
    .landing-subtitle {
        font-size: 1.1rem;
        line-height: 1.7;
        color: #7dd3fc;
    }

    /* ===== SUPPRESS OLD LIGHT-MODE OVERRIDES (all sections are now dark) ===== */
</style>
{% endblock extra_css %}

{% block content %}
<div>

    <!-- Hero Section -->
    <section class="hero-section text-white py-24 md:py-32">
        <!-- Scan-line sweep -->
        <div class="hero-scan"></div>
        <!-- Decorative neural nodes -->
        <div class="hero-node w-2 h-2 bg-cyan-400" style="top:18%;left:12%;animation-delay:0s"></div>
        <div class="hero-node w-1.5 h-1.5 bg-indigo-400" style="top:62%;left:6%;animation-delay:1.2s"></div>
        <div class="hero-node w-2 h-2 bg-violet-400" style="top:35%;left:35%;animation-delay:2.1s"></div>
        <div class="hero-node w-1.5 h-1.5 bg-cyan-300" style="top:80%;left:48%;animation-delay:0.7s"></div>
        <div class="hero-node w-2 h-2 bg-sky-400" style="top:12%;left:72%;animation-delay:1.8s"></div>
        <div class="hero-node w-1.5 h-1.5 bg-indigo-300" style="top:55%;left:90%;animation-delay:0.4s"></div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="hero-content grid md:grid-cols-2 gap-12 items-center">

                <!-- Text Content -->
                <div class="fade-in-up">
                    <div class="hero-badge">
                        <i class="fas fa-circle text-[6px] text-cyan-400 animate-pulse"></i>
                        AI-Powered &bull; 10,000+ Learners Worldwide
                    </div>
                    <h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight">
                        Master English with
                        <span class="block mt-2" style="background:linear-gradient(90deg,#22d3ee,#818cf8,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">AI-Powered Learning</span>
                    </h1>
                    <p class="text-lg md:text-xl mb-8 text-sky-100/80 max-w-2xl leading-relaxed">
                        Experience personalized English learning through our 3-stage AI assessment system, guided by expert teachers every step of the way.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="{{ url_for('auth.signup') }}" class="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-lg text-lg font-semibold transition-all duration-300 shadow-lg hover:shadow-cyan-500/40 transform hover:-translate-y-1" style="background:linear-gradient(135deg,#22d3ee,#6366f1);color:#04091a;font-weight:700">
                            <i class="fas fa-user-plus"></i>Join Now &mdash; Free
                        </a>
                        <a href="{{ url_for('auth.login') }}" class="inline-flex items-center justify-center gap-2 border px-8 py-4 rounded-lg text-lg font-semibold hover:bg-cyan-500/10 transition-all duration-300" style="border-color:rgba(6,182,212,0.45);color:#e0f2fe">
                            <i class="fas fa-sign-in-alt"></i>Login
                        </a>
                    </div>

                    <!-- Trust Indicators -->
                    <div class="flex flex-wrap gap-8 mt-12 pt-8" style="border-top:1px solid rgba(6,182,212,0.2)">
                        <div class="flex items-center gap-3">
                            <i class="fas fa-book-open text-2xl" style="color:#22d3ee"></i>
                            <div>
                                <div class="text-2xl font-bold" style="color:#22d3ee">500+</div>
                                <p class="text-sky-300/70 text-xs uppercase tracking-wide">Learning Topics</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <i class="fas fa-layer-group text-2xl" style="color:#818cf8"></i>
                            <div>
                                <div class="text-2xl font-bold" style="color:#818cf8">3-Stage</div>
                                <p class="text-sky-300/70 text-xs uppercase tracking-wide">Assessment System</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <i class="fas fa-robot text-2xl" style="color:#a78bfa"></i>
                            <div>
                                <div class="text-2xl font-bold" style="color:#a78bfa">24/7</div>
                                <p class="text-sky-300/70 text-xs uppercase tracking-wide">AI Support</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Visual Panel — 3-Stage Learning Journey -->
                <div class="fade-in-up hidden md:flex flex-col gap-4 relative">

                    <!-- Panel header -->
                    <div class="relative z-10 rounded-2xl p-5 text-center" style="background:rgba(6,182,212,0.06);border:1px solid rgba(6,182,212,0.25);backdrop-filter:blur(16px)">
                        <p class="text-xs uppercase tracking-widest mb-1" style="color:#67e8f9">Your Learning Journey</p>
                        <h3 class="text-xl font-bold text-white">3-Stage AI Assessment</h3>
                    </div>

                    <!-- Stage cards -->
                    <div class="relative z-10 flex flex-col gap-3">
                        <div class="flex items-center gap-4 rounded-xl p-4 transition-all hover:scale-[1.02]" style="background:rgba(6,182,212,0.07);border:1px solid rgba(6,182,212,0.2);backdrop-filter:blur(12px)">
                            <div class="w-12 h-12 rounded-xl flex items-center justify-center shrink-0" style="background:rgba(6,182,212,0.2);border:1px solid rgba(6,182,212,0.3)">
                                <i class="fas fa-book-open text-cyan-300 text-xl"></i>
                            </div>
                            <div>
                                <p class="font-semibold text-white">Stage 1 &mdash; Read</p>
                                <p class="text-sky-300/70 text-sm">Curated passages, vocabulary in context</p>
                            </div>
                            <span class="ml-auto text-xs font-semibold px-2 py-1 rounded-full" style="background:rgba(6,182,212,0.2);color:#67e8f9;border:1px solid rgba(6,182,212,0.3)">Active</span>
                        </div>

                        <div class="flex items-center gap-4 rounded-xl p-4 transition-all hover:scale-[1.02]" style="background:rgba(99,102,241,0.07);border:1px solid rgba(99,102,241,0.22);backdrop-filter:blur(12px)">
                            <div class="w-12 h-12 rounded-xl flex items-center justify-center shrink-0" style="background:rgba(99,102,241,0.2);border:1px solid rgba(99,102,241,0.3)">
                                <i class="fas fa-microphone-alt text-indigo-300 text-xl"></i>
                            </div>
                            <div>
                                <p class="font-semibold text-white">Stage 2 &mdash; Speak</p>
                                <p class="text-sky-300/70 text-sm">AI pronunciation &amp; fluency feedback</p>
                            </div>
                            <span class="ml-auto text-xs font-semibold px-2 py-1 rounded-full" style="background:rgba(99,102,241,0.2);color:#a5b4fc;border:1px solid rgba(99,102,241,0.3)">AI Scored</span>
                        </div>

                        <div class="flex items-center gap-4 rounded-xl p-4 transition-all hover:scale-[1.02]" style="background:rgba(139,92,246,0.07);border:1px solid rgba(139,92,246,0.22);backdrop-filter:blur(12px)">
                            <div class="w-12 h-12 rounded-xl flex items-center justify-center shrink-0" style="background:rgba(139,92,246,0.2);border:1px solid rgba(139,92,246,0.3)">
                                <i class="fas fa-brain text-violet-300 text-xl"></i>
                            </div>
                            <div>
                                <p class="font-semibold text-white">Stage 3 &mdash; Comprehend</p>
                                <p class="text-sky-300/70 text-sm">Deep understanding &amp; real-world scenarios</p>
                            </div>
                            <span class="ml-auto text-xs font-semibold px-2 py-1 rounded-full" style="background:rgba(139,92,246,0.2);color:#c4b5fd;border:1px solid rgba(139,92,246,0.3)">Adaptive</span>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </section>

    <!-- Wave Divider: hero (#04091a) → features (#080f1f) -->
    <div class="overflow-hidden leading-none" style="background:#080f1f">
        <svg viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" class="w-full h-10" style="background:#04091a;display:block;">
            <path d="M0,30 C480,60 960,0 1440,30 L1440,50 L0,50 Z" fill="#080f1f"/>
        </svg>
    </div>

    <!-- Features Section -->
    <section id="features" class="py-24 section-dark relative overflow-hidden">
        <!-- subtle grid lines -->
        <div class="absolute inset-0 opacity-[0.03]" style="background-image:linear-gradient(#22d3ee 1px,transparent 1px),linear-gradient(90deg,#22d3ee 1px,transparent 1px);background-size:60px 60px"></div>
        <!-- glow orb -->
        <div class="absolute right-0 top-1/3 w-96 h-96 rounded-full pointer-events-none" style="background:radial-gradient(ellipse,rgba(99,102,241,0.12),transparent 70%)"></div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 fade-in-up">
                <div class="section-pill"><i class="fas fa-microchip"></i> Platform Capabilities</div>
                <h2 class="text-3xl md:text-4xl landing-title mb-4">Everything You Need to Succeed</h2>
                <p class="landing-subtitle max-w-2xl mx-auto">Cutting-edge AI technology combined with human expertise for the most effective English learning experience.</p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">

                <div class="tech-card tech-card-top-cyan p-6 fade-in-up">
                    <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-5" style="background:rgba(6,182,212,0.15);border:1px solid rgba(6,182,212,0.3)">
                        <i class="fas fa-robot text-cyan-300 text-xl"></i>
                    </div>
                    <h3 class="text-base font-bold text-white mb-2">AI-Powered Assessment</h3>
                    <p class="text-slate-400 text-sm leading-relaxed">Advanced AI analyzes your progress and adapts lessons to your unique learning style in real time.</p>
                </div>

                <div class="tech-card tech-card-top-indigo p-6 fade-in-up">
                    <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-5" style="background:rgba(99,102,241,0.15);border:1px solid rgba(99,102,241,0.3)">
                        <i class="fas fa-chalkboard-teacher text-indigo-300 text-xl"></i>
                    </div>
                    <h3 class="text-base font-bold text-white mb-2">Expert Teachers</h3>
                    <p class="text-slate-400 text-sm leading-relaxed">Qualified teachers supervise your journey, review your work, and provide personalized guidance.</p>
                </div>

                <div class="tech-card tech-card-top-violet p-6 fade-in-up">
                    <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-5" style="background:rgba(139,92,246,0.15);border:1px solid rgba(139,92,246,0.3)">
                        <i class="fas fa-chart-line text-violet-300 text-xl"></i>
                    </div>
                    <h3 class="text-base font-bold text-white mb-2">Measurable Progress</h3>
                    <p class="text-slate-400 text-sm leading-relaxed">Track improvement with detailed analytics and see measurable English skill gains within weeks.</p>
                </div>

                <div class="tech-card tech-card-top-amber p-6 fade-in-up">
                    <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-5" style="background:rgba(251,191,36,0.12);border:1px solid rgba(251,191,36,0.3)">
                        <i class="fas fa-calendar-check text-amber-300 text-xl"></i>
                    </div>
                    <h3 class="text-base font-bold text-white mb-2">Flexible Schedule</h3>
                    <p class="text-slate-400 text-sm leading-relaxed">Learn at your own pace with 24/7 access to all lessons, speaking exercises, and materials.</p>
                </div>

            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section id="how-it-works" class="py-24 section-mid relative overflow-hidden">
        <!-- left orb -->
        <div class="absolute left-0 top-1/2 -translate-y-1/2 w-80 h-80 rounded-full pointer-events-none" style="background:radial-gradient(ellipse,rgba(6,182,212,0.10),transparent 70%)"></div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 fade-in-up">
                <div class="section-pill"><i class="fas fa-route"></i> The Method</div>
                <h2 class="text-3xl md:text-4xl landing-title mb-4">How It Works</h2>
                <p class="landing-subtitle max-w-2xl mx-auto">Our proven 3-stage methodology ensures comprehensive English learning through structured, AI-guided progression.</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 relative">

                <!-- Step 1 -->
                <div class="relative text-center fade-in-up">
                    <div class="hidden md:block absolute top-10 left-[calc(50%+2.5rem)] w-[calc(100%-5rem)] h-px step-connector"></div>
                    <div class="w-20 h-20 mx-auto mb-6 rounded-2xl flex flex-col items-center justify-center shadow-lg rotate-3 hover:rotate-0 transition-transform cursor-default" style="background:linear-gradient(135deg,rgba(6,182,212,0.25),rgba(6,182,212,0.08));border:1px solid rgba(6,182,212,0.4)">
                        <i class="fas fa-book-open text-cyan-300 text-2xl mb-0.5"></i>
                        <span class="text-cyan-400 text-xs font-bold">01</span>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Read</h3>
                    <p class="text-slate-400 text-sm leading-relaxed max-w-xs mx-auto">Engage with curated reading passages tailored to your level, building vocabulary and comprehension naturally.</p>
                </div>

                <!-- Step 2 -->
                <div class="relative text-center fade-in-up">
                    <div class="hidden md:block absolute top-10 left-[calc(50%+2.5rem)] w-[calc(100%-5rem)] h-px step-connector"></div>
                    <div class="w-20 h-20 mx-auto mb-6 rounded-2xl flex flex-col items-center justify-center shadow-lg -rotate-3 hover:rotate-0 transition-transform cursor-default" style="background:linear-gradient(135deg,rgba(99,102,241,0.25),rgba(99,102,241,0.08));border:1px solid rgba(99,102,241,0.4)">
                        <i class="fas fa-microphone-alt text-indigo-300 text-2xl mb-0.5"></i>
                        <span class="text-indigo-400 text-xs font-bold">02</span>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Speak</h3>
                    <p class="text-slate-400 text-sm leading-relaxed max-w-xs mx-auto">Record your responses and receive instant AI-powered pronunciation and fluency feedback.</p>
                </div>

                <!-- Step 3 -->
                <div class="text-center fade-in-up">
                    <div class="w-20 h-20 mx-auto mb-6 rounded-2xl flex flex-col items-center justify-center shadow-lg rotate-3 hover:rotate-0 transition-transform cursor-default" style="background:linear-gradient(135deg,rgba(139,92,246,0.25),rgba(139,92,246,0.08));border:1px solid rgba(139,92,246,0.4)">
                        <i class="fas fa-brain text-violet-300 text-2xl mb-0.5"></i>
                        <span class="text-violet-400 text-xs font-bold">03</span>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Comprehend</h3>
                    <p class="text-slate-400 text-sm leading-relaxed max-w-xs mx-auto">Test deep understanding with interactive comprehension questions and challenging real-world scenarios.</p>
                </div>

            </div>
        </div>
    </section>

    <!-- Course Options Section -->
    <section class="py-24 section-dark relative overflow-hidden">
        <!-- right orb -->
        <div class="absolute right-0 bottom-0 w-96 h-96 rounded-full pointer-events-none" style="background:radial-gradient(ellipse,rgba(139,92,246,0.10),transparent 70%)"></div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 fade-in-up">
                <div class="section-pill"><i class="fas fa-code-branch"></i> Learning Paths</div>
                <h2 class="text-3xl md:text-4xl landing-title mb-4">Choose Your Learning Path</h2>
                <p class="landing-subtitle max-w-2xl mx-auto">Select the learning approach that best fits your schedule and goals.</p>
            </div>

            <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                <a href="{{ url_for('main.short_courses') }}" class="block p-8 course-card-short fade-in-up">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-4 course-card-short-icon">
                            <i class="fas fa-bolt text-white text-lg"></i>
                        </div>
                        <h3 class="text-2xl font-bold course-card-short-title">Short Courses</h3>
                    </div>
                    <p class="text-base mb-6 course-card-short-text leading-relaxed">Quick, focused modules to boost specific skills. Perfect for busy learners who want targeted improvement.</p>
                    <div class="flex items-center gap-2 font-semibold text-sm course-card-short-cta">
                        <span>Start Quick Learning</span>
                        <i class="fas fa-arrow-right text-xs"></i>
                    </div>
                </a>

                <a href="{{ url_for('main.learning_courses') }}" class="block p-8 course-card-learning fade-in-up">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-4 course-card-learning-icon">
                            <i class="fas fa-graduation-cap text-white text-lg"></i>
                        </div>
                        <h3 class="text-2xl font-bold course-card-learning-title">Learning Courses</h3>
                    </div>
                    <p class="text-base mb-6 course-card-learning-text leading-relaxed">Comprehensive, structured learning paths for mastery. Deep dive into English with expert guidance.</p>
                    <div class="flex items-center gap-2 font-semibold text-sm course-card-learning-cta">
                        <span>Begin Comprehensive Learning</span>
                        <i class="fas fa-arrow-right text-xs"></i>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-24 section-darker relative overflow-hidden">
        <!-- glow orbs -->
        <div class="absolute inset-0 pointer-events-none" style="background:radial-gradient(ellipse 60% 60% at 20% 50%,rgba(6,182,212,0.10),transparent),radial-gradient(ellipse 50% 50% at 80% 50%,rgba(139,92,246,0.10),transparent)"></div>
        <!-- subtle dot grid -->
        <div class="absolute inset-0 opacity-[0.025]" style="background-image:radial-gradient(rgba(6,182,212,0.8) 1px,transparent 1px);background-size:36px 36px"></div>

        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center fade-in-up">
            <div class="inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-semibold mb-6" style="background:rgba(6,182,212,0.10);border:1px solid rgba(6,182,212,0.3);color:#67e8f9">
                <i class="fas fa-graduation-cap"></i>
                <span>Start your journey today &mdash; it&rsquo;s completely free</span>
            </div>
            <h2 class="text-3xl md:text-4xl font-extrabold mb-5 landing-title">Ready to Transform Your English Skills?</h2>
            <p class="text-base mb-10 max-w-2xl mx-auto" style="color:#7dd3fc">Join thousands of learners who have already improved their English with our AI-powered platform.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ url_for('auth.signup') }}" class="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-lg text-base font-bold transition-all hover:-translate-y-0.5" style="background:linear-gradient(135deg,#22d3ee,#6366f1);color:#04091a;box-shadow:0 0 24px rgba(6,182,212,0.25)">
                    <i class="fas fa-user-plus"></i> Create Free Account
                </a>
                <a href="{{ url_for('auth.login') }}" class="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-lg text-base font-semibold transition-all hover:bg-cyan-500/10" style="border:1px solid rgba(6,182,212,0.4);color:#e0f2fe">
                    <i class="fas fa-sign-in-alt"></i> Login to Continue
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="py-14 relative" style="background:#020711;border-top:1px solid rgba(6,182,212,0.12)">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-4 gap-10">
                <div class="col-span-2">
                    <div class="flex items-center mb-4">
                        <div class="w-9 h-9 rounded-xl flex items-center justify-center mr-3" style="background:rgba(6,182,212,0.15);border:1px solid rgba(6,182,212,0.3)">
                            <img src="{{ url_for('static', filename='images/icon.png') }}" alt="Try English" class="w-6 h-6 rounded">
                        </div>
                        <span class="text-lg font-bold" style="background:linear-gradient(90deg,#22d3ee,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">Try English</span>
                    </div>
                    <p class="text-sm leading-relaxed" style="color:#475569">
                        Empowering learners worldwide with AI-driven English education. Master the language that opens doors to global opportunities.
                    </p>
                </div>
                <div>
                    <h4 class="text-sm font-semibold uppercase tracking-widest mb-5" style="color:#67e8f9">Quick Links</h4>
                    <ul class="space-y-2.5">
                        <li><a href="/#features" class="text-sm transition-colors" style="color:#475569" onmouseover="this.style.color='#67e8f9'" onmouseout="this.style.color='#475569'">Features</a></li>
                        <li><a href="/#how-it-works" class="text-sm transition-colors" style="color:#475569" onmouseover="this.style.color='#67e8f9'" onmouseout="this.style.color='#475569'">How It Works</a></li>
                        <li><a href="{{ url_for('main.short_courses') }}" class="text-sm transition-colors" style="color:#475569" onmouseover="this.style.color='#67e8f9'" onmouseout="this.style.color='#475569'">Short Courses</a></li>
                        <li><a href="{{ url_for('main.learning_courses') }}" class="text-sm transition-colors" style="color:#475569" onmouseover="this.style.color='#67e8f9'" onmouseout="this.style.color='#475569'">Learning Courses</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-sm font-semibold uppercase tracking-widest mb-5" style="color:#a78bfa">Get Started</h4>
                    <ul class="space-y-2.5">
                        <li><a href="{{ url_for('auth.signup') }}" class="text-sm transition-colors" style="color:#475569" onmouseover="this.style.color='#a78bfa'" onmouseout="this.style.color='#475569'">Join Now &mdash; Free</a></li>
                        <li><a href="{{ url_for('auth.login') }}" class="text-sm transition-colors" style="color:#475569" onmouseover="this.style.color='#a78bfa'" onmouseout="this.style.color='#475569'">Login</a></li>
                    </ul>
                </div>
            </div>
            <div class="mt-10 pt-6 text-center" style="border-top:1px solid rgba(255,255,255,0.05)">
                <p class="text-xs" style="color:#334155">&copy; 2025 Try English &bull; Built with AI &amp; human expertise.</p>
            </div>
        </div>
    </footer>

<script>
// Enhanced scroll animations and interactions
document.addEventListener('DOMContentLoaded', function() {
  // Intersection Observer for scroll-triggered animations
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate');
      }
    });
  }, observerOptions);

  // Observe elements for scroll animations
  const animateElements = document.querySelectorAll('.fade-in-up, .card-hover');
  animateElements.forEach(el => observer.observe(el));

  // Smooth scroll for anchor links
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        target.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }
    });
  });
});
</script>
</div>
{% endblock content %}