{% extends "base.html" %}

{% block title %}Linguotree - 专业英语外教平台{% endblock %}

{% block extra_css %}
<style>
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("{{ url_for('static', filename='images/pattern.png') }}");
    opacity: 0.1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.feature-icon i {
    font-size: 2rem;
    color: white;
}

.teacher-card, .course-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 15px;
    overflow: hidden;
}

.teacher-card:hover, .course-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.teacher-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.course-image {
    height: 200px;
    object-fit: cover;
}

.stats-section {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.cta-section {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}
</style>
{% endblock %}

{% block content %}
<!-- 英雄区域 -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 hero-content">
                <h1 class="display-4 fw-bold mb-4">遇见全球优秀外教，开启英语学习新旅程</h1>
                <p class="lead mb-4">Linguotree 连接您与来自世界各地的专业英语教师，提供个性化的一对一课程，让学习英语变得简单、有趣、高效。</p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="{{ url_for('auth.register') }}" class="btn btn-light btn-lg px-4 py-2">
                        <i class="fas fa-rocket me-2"></i>立即免费体验
                    </a>
                    <a href="{{ url_for('main.teachers') }}" class="btn btn-outline-light btn-lg px-4 py-2">
                        <i class="fas fa-search me-2"></i>浏览外教老师
                    </a>
                </div>
                <div class="mt-4 d-flex flex-wrap gap-4 text-white-50">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-check-circle text-success me-2"></i>
                        <span>100+ 专业外教</span>
                    </div>
                    <div class="d-flex align-items-center">
                        <i class="fas fa-check-circle text-success me-2"></i>
                        <span>一对一专属课程</span>
                    </div>
                    <div class="d-flex align-items-center">
                        <i class="fas fa-check-circle text-success me-2"></i>
                        <span>灵活预约时间</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <img src="{{ url_for('static', filename='images/hero-image.png') }}" alt="English Learning" class="img-fluid" style="max-height: 500px;">
            </div>
        </div>
    </div>
</section>

<!-- 特色服务 -->
<section class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">为什么选择 Linguotree？</h2>
            <p class="text-muted lead">我们提供全方位的英语学习解决方案</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="text-center p-4">
                    <div class="feature-icon">
                        <i class="fas fa-globe-americas"></i>
                    </div>
                    <h4 class="fw-bold">全球优秀外教</h4>
                    <p class="text-muted">来自英美加澳等英语母语国家的认证教师，拥有丰富的教学经验和专业资质。</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center p-4">
                    <div class="feature-icon">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                    <h4 class="fw-bold">个性化学习</h4>
                    <p class="text-muted">根据您的英语水平、学习目标和兴趣定制专属课程，实现高效学习。</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center p-4">
                    <div class="feature-icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <h4 class="fw-bold">灵活预约</h4>
                    <p class="text-muted">随时随地预约课程，支持线上和线下多种学习方式，完美适应您的日程安排。</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 推荐老师 -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-5">
            <div>
                <h2 class="fw-bold">推荐外教老师</h2>
                <p class="text-muted">经验丰富、备受好评的认证外教</p>
            </div>
            <a href="{{ url_for('main.teachers') }}" class="btn btn-outline-primary">查看全部老师 <i class="fas fa-arrow-right ms-2"></i></a>
        </div>
        <div class="row g-4">
            {% for teacher in featured_teachers %}
            <div class="col-lg-4 col-md-6">
                <div class="card teacher-card h-100">
                    <div class="card-body text-center p-4">
                        <img src="{{ url_for('static', filename='uploads/avatars/' + teacher.avatar) if teacher.avatar else url_for('static', filename='images/default-avatar.png') }}" 
                             alt="{{ teacher.full_name }}" class="teacher-avatar mb-3">
                        <h5 class="card-title fw-bold">{{ teacher.full_name }}</h5>
                        <p class="text-muted mb-2">{{ teacher.nationality }} • {{ teacher.experience }}年教学经验</p>
                        <div class="rating mb-3">
                            {% for i in range(5) %}
                                <i class="fas fa-star {{ 'text-warning' if i < teacher.rating|int else 'text-muted' }}"></i>
                            {% endfor %}
                            <span class="text-muted ms-1">({{ teacher.total_reviews }})</span>
                        </div>
                        <p class="card-text text-muted small mb-3">{{ teacher.bio[:100] }}{% if teacher.bio|length > 100 %}...{% endif %}</p>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-primary fw-bold">¥{{ teacher.hourly_rate }}/小时</span>
                            <span class="badge bg-{{ 'success' if teacher.available_online else 'secondary' }}">
                                {{ '在线授课' if teacher.available_online else '仅线下' }}
                            </span>
                        </div>
                        <a href="{{ url_for('main.teacher_detail', teacher_id=teacher.id) }}" class="btn btn-primary w-100">
                            <i class="fas fa-eye me-2"></i>查看详情
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- 热门课程 -->
<section class="py-5">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-5">
            <div>
                <h2 class="fw-bold">热门课程</h2>
                <p class="text-muted">精心设计的课程体系，满足不同学习需求</p>
            </div>
            <a href="{{ url_for('course.course_list') }}" class="btn btn-outline-primary">查看全部课程 <i class="fas fa-arrow-right ms-2"></i></a>
        </div>
        <div class="row g-4">
            {% for course in popular_courses %}
            <div class="col-lg-3 col-md-6">
                <div class="card course-card h-100">
                    <img src="{{ url_for('static', filename='uploads/courses/' + course.cover_image) if course.cover_image else url_for('static', filename='images/default-course.jpg') }}" 
                         class="card-img-top course-image" alt="{{ course.title }}">
                    <div class="card-body">
                        <span class="badge bg-primary mb-2">{{ course.level }}</span>
                        <h6 class="card-title fw-bold">{{ course.title }}</h6>
                        <p class="card-text text-muted small">{{ course.description[:80] }}{% if course.description|length > 80 %}...{% endif %}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-primary fw-bold">¥{{ course.price }}</span>
                            <small class="text-muted">{{ course.duration }}分钟</small>
                        </div>
                    </div>
                    <div class="card-footer bg-transparent">
                        <a href="{{ url_for('course.course_detail', course_id=course.id) }}" class="btn btn-outline-primary btn-sm w-100">
                            课程详情
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- 数据统计 -->
<section class="stats-section py-5">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-3">
                <div class="stat-number">500+</div>
                <p class="mb-0">注册学员</p>
            </div>
            <div class="col-md-3">
                <div class="stat-number">100+</div>
                <p class="mb-0">专业外教</p>
            </div>
            <div class="col-md-3">
                <div class="stat-number">10,000+</div>
                <p class="mb-0">完成课时</p>
            </div>
            <div class="col-md-3">
                <div class="stat-number">98%</div>
                <p class="mb-0">满意率</p>
            </div>
        </div>
    </div>
</section>

<!-- 学习流程 -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">简单四步，开始学习</h2>
            <p class="text-muted">轻松预约，高效学习</p>
        </div>
        <div class="row g-4">
            <div class="col-md-3">
                <div class="text-center">
                    <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                        <span class="h4 mb-0">1</span>
                    </div>
                    <h5>注册账号</h5>
                    <p class="text-muted">快速注册，完善学习档案</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="text-center">
                    <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                        <span class="h4 mb-0">2</span>
                    </div>
                    <h5>选择老师</h5>
                    <p class="text-muted">浏览老师资料，选择适合的教师</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="text-center">
                    <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                        <span class="h4 mb-0">3</span>
                    </div>
                    <h5>预约课程</h5>
                    <p class="text-muted">选择合适时间，一键预约</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="text-center">
                    <div class="bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                        <span class="h4 mb-0">4</span>
                    </div>
                    <h5>开始学习</h5>
                    <p class="text-muted">按时上课，享受学习过程</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 行动号召 -->
<section class="cta-section py-5">
    <div class="container text-center">
        <h2 class="fw-bold mb-4">准备好提升您的英语水平了吗？</h2>
        <p class="lead mb-4">立即注册，获得一次免费的试听课程</p>
        <div class="d-flex justify-content-center gap-3 flex-wrap">
            <a href="{{ url_for('auth.register') }}" class="btn btn-light btn-lg px-5">
                <i class="fas fa-user-plus me-2"></i>免费注册
            </a>
            <a href="{{ url_for('main.teachers') }}" class="btn btn-outline-light btn-lg px-5">
                <i class="fas fa-search me-2"></i>浏览老师
            </a>
        </div>
    </div>
</section>

<!-- 最新公告 -->
{% if announcements %}
<section class="py-5">
    <div class="container">
        <h2 class="fw-bold text-center mb-5">最新公告</h2>
        <div class="row justify-content-center">
            <div class="col-lg-8">
                {% for announcement in announcements %}
                <div class="card mb-3 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-2">
                            <h5 class="card-title mb-0 me-3">{{ announcement.title }}</h5>
                            {% if announcement.is_pinned %}
                            <span class="badge bg-warning"><i class="fas fa-thumbtack me-1"></i>置顶</span>
                            {% endif %}
                        </div>
                        <p class="card-text text-muted">{{ announcement.content[:150] }}{% if announcement.content|length > 150 %}...{% endif %}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted">
                                <i class="fas fa-clock me-1"></i>
                                {{ announcement.publish_at.strftime('%Y年%m月%d日') }}
                            </small>
                            <span class="badge bg-secondary">{{ announcement.announcement_type }}</span>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endif %}
{% endblock %}