{% extends 'base.html' %}
{% block title %}Try English | Master English with AI & Expert Teachers{% 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&display=swap');
    body { font-family: 'Inter', sans-serif; }
    
    .hero-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        background-attachment: fixed;
        position: relative;
        overflow: hidden;
    }
    
    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,.1)" fill-opacity="1" d="M0,64L48,80C96,96,192,128,288,128C384,128,480,96,576,90.7C672,85,768,107,864,122.7C960,139,1056,149,1152,144C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        opacity: 0.3;
    }
    
    .hero-content {
        position: relative;
        z-index: 10;
    }
    
    .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
    .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); }
    }
    @keyframes scaleIn {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    @keyframes cardIn {
        from { opacity: 0; transform: translateY(40px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
    
    .hero-badge {
        display: inline-block;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.875rem;
        color: white;
        margin-bottom: 1.5rem;
        animation: fadeInUp 0.8s ease forwards;
    }
</style>
{% endblock extra_css %}

{% block content %}
<div class="bg-gray-50">

    <!-- Hero Section with Image Background -->
    <section class="hero-section text-white py-24 md:py-32">
        <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-star mr-2"></i>
                        Join 10,000+ Learners Worldwide
                    </div>
                    <h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight">
                        Master English with
                        <span class="text-yellow-300 block mt-2">AI-Powered Learning</span>
                    </h1>
                    <p class="text-lg md:text-xl mb-8 text-indigo-100 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="bg-white text-indigo-600 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-gray-100 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                            <i class="fas fa-arrow-right mr-2"></i>Join Now - Free
                        </a>
                        <a href="{{ url_for('auth.login') }}" class="border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-white hover:text-indigo-600 transition-all duration-300 backdrop-blur-sm">
                            <i class="fas fa-sign-in-alt mr-2"></i>Login
                        </a>
                    </div>
                    
                    <!-- Trust Indicators -->
                    <div class="flex flex-wrap gap-6 mt-12 pt-8 border-t border-indigo-400/30">
                        <div>
                            <div class="text-3xl font-bold text-yellow-300">500+</div>
                            <p class="text-indigo-100 text-sm">Learning Topics</p>
                        </div>
                        <div>
                            <div class="text-3xl font-bold text-yellow-300">3-Stage</div>
                            <p class="text-indigo-100 text-sm">Assessment System</p>
                        </div>
                        <div>
                            <div class="text-3xl font-bold text-yellow-300">24/7</div>
                            <p class="text-indigo-100 text-sm">AI Support</p>
                        </div>
                    </div>
                </div>
                
                <!-- Visual Element -->
                <div class="fade-in-up hidden md:block relative">
                    <div class="relative w-full h-96 bg-gradient-to-br from-indigo-400/20 to-purple-600/20 rounded-2xl backdrop-blur-xl border border-white/10 p-8 flex flex-col justify-center items-center">
                        <div class="absolute top-0 right-0 w-40 h-40 bg-yellow-300/10 rounded-full -mr-20 -mt-20"></div>
                        <div class="absolute bottom-0 left-0 w-32 h-32 bg-indigo-300/10 rounded-full -ml-16 -mb-16"></div>
                        
                        <div class="relative z-10 text-center">
                            <div class="mb-6">
                                <svg class="w-20 h-20 mx-auto text-yellow-300" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M10.5 1.5H2.75A1.25 1.25 0 001.5 2.75v12.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25V8m-13-6h8m-8 3h5m-5 3h8m-8 3h5m8.5-8.5L16 2.5m0 0L13.5 5m2.5-2.5l2.5 2.5"></path>
                                </svg>
                            </div>
                            <h3 class="text-2xl font-bold text-white mb-3">Interactive Learning</h3>
                            <p class="text-indigo-100">Adaptive lessons tailored to your pace and style</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 fade-in-up">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    Why Choose Try English?
                </h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">
                    Combining cutting-edge AI technology with human expertise for the most effective English learning experience.
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="text-center p-6 rounded-xl bg-gray-50 card-hover fade-in-up">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">AI-Powered Assessment</h3>
                    <p class="text-gray-600">Advanced AI analyzes your progress and adapts lessons to your learning style.</p>
                </div>

                <div class="text-center p-6 rounded-xl bg-gray-50 card-hover fade-in-up">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Expert Teachers</h3>
                    <p class="text-gray-600">Qualified teachers supervise your journey and provide personalized guidance.</p>
                </div>

                <div class="text-center p-6 rounded-xl bg-gray-50 card-hover fade-in-up">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Fast Results</h3>
                    <p class="text-gray-600">See measurable improvement in your English skills within weeks.</p>
                </div>

                <div class="text-center p-6 rounded-xl bg-gray-50 card-hover fade-in-up">
                    <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Flexible Schedule</h3>
                    <p class="text-gray-600">Learn at your own pace with 24/7 access to lessons and materials.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section id="how-it-works" class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 fade-in-up">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    How It Works
                </h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">
                    Our proven 3-stage methodology ensures comprehensive English learning through structured progression.
                </p>
            </div>
            
            <div class="relative">
                <div class="grid md:grid-cols-3 gap-8 relative">
                    <!-- Step 1 -->
                    <div class="text-center fade-in-up">
                        <div class="relative">
                            <div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
                                <span class="text-2xl font-bold text-white">1</span>
                            </div>
                            <div class="absolute top-10 left-1/2 transform translate-x-12 hidden md:block">
                                <svg class="w-8 h-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"/>
                                </svg>
                            </div>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-3">Read</h3>
                        <p class="text-gray-600">
                            Start with engaging reading passages tailored to your level and interests.
                        </p>
                    </div>

                    <!-- Step 2 -->
                    <div class="text-center fade-in-up">
                        <div class="relative">
                            <div class="w-20 h-20 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
                                <span class="text-2xl font-bold text-white">2</span>
                            </div>
                            <div class="absolute top-10 left-1/2 transform translate-x-12 hidden md:block">
                                <svg class="w-8 h-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"/>
                                </svg>
                            </div>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-3">Speak</h3>
                        <p class="text-gray-600">
                            Practice pronunciation and fluency with AI-powered speaking exercises and instant feedback.
                        </p>
                    </div>

                    <!-- Step 3 -->
                    <div class="text-center fade-in-up">
                        <div class="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
                            <span class="text-2xl font-bold text-white">3</span>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-3">Comprehend</h3>
                        <p class="text-gray-600">
                            Test your understanding with interactive comprehension questions and real-world scenarios.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Course Options Section -->
    <section class="py-20 bg-white dark:bg-slate-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 fade-in-up">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    Choose Your Learning Path
                </h2>
                <p class="text-xl text-gray-600 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 rounded-2xl hover:shadow-xl transition-all duration-300 card-hover course-card-short">
                    <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">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <h3 class="text-2xl font-bold course-card-short-title">Short Courses</h3>
                    </div>
                    <p class="text-lg mb-4 course-card-short-text">
                        Quick, focused modules to boost specific skills. Perfect for busy learners who want targeted improvement.
                    </p>
                    <div class="flex items-center font-semibold course-card-short-cta">
                        <span>Start Quick Learning</span>
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                        </svg>
                    </div>
                </a>

                <a href="{{ url_for('main.learning_courses') }}" class="block p-8 rounded-2xl hover:shadow-xl transition-all duration-300 card-hover course-card-learning">
                    <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">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
                            </svg>
                        </div>
                        <h3 class="text-2xl font-bold course-card-learning-title">Learning Courses</h3>
                    </div>
                    <p class="text-lg mb-4 course-card-learning-text">
                        Comprehensive, structured learning paths for mastery. Deep dive into English with expert guidance.
                    </p>
                    <div class="flex items-center font-semibold course-card-learning-cta">
                        <span>Begin Comprehensive Learning</span>
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                        </svg>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 gradient-bg text-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center fade-in-up">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">
                Ready to Transform Your English Skills?
            </h2>
            <p class="text-xl text-indigo-100 mb-8 max-w-2xl mx-auto">
                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="bg-white text-indigo-600 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-gray-100 transition-colors">
                    Join Now - It's Free
                </a>
                <a href="{{ url_for('auth.login') }}" class="border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-white hover:text-indigo-600 transition-colors">
                    Login to Continue
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-4 gap-8">
                <div class="col-span-2">
                    <div class="flex items-center mb-4">
                        <div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center mr-3">
                            <img src="{{ url_for('static', filename='images/icon.png') }}" alt="Try English" class="w-6 h-6 rounded">
                        </div>
                        <span class="text-xl font-bold">Try English</span>
                    </div>
                    <p class="text-gray-400 mb-4">
                        Empowering learners worldwide with AI-driven English education. Master the language that opens doors to global opportunities.
                    </p>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="#features" class="text-gray-400 hover:text-white transition-colors">Features</a></li>
                        <li><a href="#how-it-works" class="text-gray-400 hover:text-white transition-colors">How It Works</a></li>
                        <li><a href="{{ url_for('main.short_courses') }}" class="text-gray-400 hover:text-white transition-colors">Short Courses</a></li>
                        <li><a href="{{ url_for('main.learning_courses') }}" class="text-gray-400 hover:text-white transition-colors">Learning Courses</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">Get Started</h4>
                    <ul class="space-y-2">
                        <li><a href="{{ url_for('auth.signup') }}" class="text-gray-400 hover:text-white transition-colors">Join Now</a></li>
                        <li><a href="{{ url_for('auth.login') }}" class="text-gray-400 hover:text-white transition-colors">Login</a></li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center">
                <p class="text-gray-400">&copy; 2024 Try English. All rights reserved.</p>
            </div>
        </div>
    </footer>
</body>

<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 %}