{% extends "base.html" %}
{% load i18n static %}

{% block title %}
    {% if LANGUAGE_CODE == 'ar' %}الرئيسية | منصة التعليم الإلكتروني{% else %}Home | EduPlatform{% endif %}
{% endblock %}

{% block content %}
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold mb-4">
                    {% if LANGUAGE_CODE == 'ar' %}
                        تعلم من أفضل المعلمين في أي وقت وأي مكان
                    {% else %}
                        Learn from the best teachers anytime, anywhere
                    {% endif %}
                </h1>
                <p class="lead mb-5 text-muted">
                    {% if LANGUAGE_CODE == 'ar' %}
                        منصة تعليمية متكاملة تدعم الطلاب والمعلمين مع دروس حية ومصادر تعليمية متميزة.
                    {% else %}
                        A comprehensive educational platform supporting students and teachers with live lessons and premium resources.
                    {% endif %}
                </p>
                <div class="d-flex gap-3">
                    <a href="#levels-section" class="btn btn-primary btn-lg px-5">
                        {% if LANGUAGE_CODE == 'ar' %}ابدأ الآن{% else %}Start Now{% endif %}
                    </a>
                    <a href="#" class="btn btn-outline-secondary btn-lg px-5">
                        {% if LANGUAGE_CODE == 'ar' %}اعرف المزيد{% else %}Learn More{% endif %}
                    </a>
                </div>
            </div>
            <div class="col-lg-6 d-none d-lg-block">
                <div class="position-relative">
                    <div style="width: 400px; height: 400px; background: var(--primary-color); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; opacity: 0.1; position: absolute; top: -50px; left: 50px;"></div>
                    <div style="width: 300px; height: 300px; background: var(--secondary-color); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; opacity: 0.1; position: absolute; bottom: -50px; right: 50px;"></div>
                    <div class="glass-card text-center position-relative z-1">
                        <h3 class="fw-bold mb-3">
                            {% if LANGUAGE_CODE == 'ar' %}مستعد للبدء؟{% else %}Ready to Start?{% endif %}
                        </h3>
                        <p>
                            {% if LANGUAGE_CODE == 'ar' %}انضم لآلاف الطلاب اليوم.{% else %}Join thousands of students today.{% endif %}
                        </p>
                        <div class="avatar-group d-flex justify-content-center mt-4">
                            <div style="width: 40px; height: 40px; border-radius: 50%; background: #ccc; border: 2px solid #fff; margin-left: -10px;"></div>
                            <div style="width: 40px; height: 40px; border-radius: 50%; background: #ddd; border: 2px solid #fff; margin-left: -10px;"></div>
                            <div style="width: 40px; height: 40px; border-radius: 50%; background: #eee; border: 2px solid #fff; margin-left: -10px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="levels-section" class="subjects-section py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">
                {% if LANGUAGE_CODE == 'ar' %}برامجنا التعليمية{% else %}Our Educational Programs{% endif %}
            </h2>
            <p class="text-muted">
                {% if LANGUAGE_CODE == 'ar' %}استكشف المواد المخصصة لكل مرحلة دراسية.{% else %}Explore subjects tailored for each educational level.{% endif %}
            </p>
        </div>

        {% for level in levels %}
        <div class="mb-5">
            <div class="d-flex align-items-center mb-4">
                <div class="p-2 rounded-3 bg-primary text-white me-3" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                    {{ forloop.counter }}
                </div>
                <h3 class="fw-bold mb-0">
                    {% if LANGUAGE_CODE == 'ar' %}{{ level.name_ar }}{% else %}{{ level.name_en|default:level.name_ar }}{% endif %}
                </h3>
                <hr class="flex-grow-1 ms-4 d-none d-md-block opacity-10">
            </div>

            <div class="row g-4">
                {% for subject in level.subjects.all %}
                <div class="col-md-6 col-lg-4">
                    <div class="glass-card h-100 p-0 overflow-hidden shadow-sm">
                        <div style="height: 180px; background: {% cycle '#E3F2FD' '#F3E5F5' '#E8F5E9' %}; display: flex; align-items: center; justify-content: center;">
                            {% if subject.image %}
                            <img src="{{ subject.image.url }}" class="img-fluid" alt="{% if LANGUAGE_CODE == 'ar' %}{{ subject.name_ar }}{% else %}{{ subject.name_en }}{% endif %}">
                            {% else %}
                            <span class="display-2" style="opacity: 0.2;">📚</span>
                            {% endif %}
                        </div>
                        <div class="p-4">
                            <h4 class="fw-bold mb-3">
                                {% if LANGUAGE_CODE == 'ar' %}{{ subject.name_ar }}{% else %}{{ subject.name_en|default:subject.name_ar }}{% endif %}
                            </h4>
                            <p class="text-muted small mb-4">
                                {% if LANGUAGE_CODE == 'ar' %}
                                    {{ subject.description_ar|truncatewords:15 }}
                                {% else %}
                                    {{ subject.description_en|default:subject.description_ar|truncatewords:15 }}
                                {% endif %}
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="h5 fw-bold mb-0 text-primary">${{ subject.price }}</span>
                                <a href="{% url 'subject_detail' subject.pk %}" class="btn btn-primary btn-sm">
                                    {% if LANGUAGE_CODE == 'ar' %}اشتراك{% else %}Subscribe{% endif %}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12">
                    <div class="alert alert-light border-0 text-center py-4">
                        {% if LANGUAGE_CODE == 'ar' %}لا توجد مواد متاحة لهذا المستوى بعد.{% else %}No subjects available for this level yet.{% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</section>

<!-- MEET OUR TEACHERS SECTION -->
<section id="teachers-section" class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">
                {% if LANGUAGE_CODE == 'ar' %}تعرف على معلمينا{% else %}Meet Our Teachers{% endif %}
            </h2>
            <p class="text-muted">
                {% if LANGUAGE_CODE == 'ar' %}تعلم من نخبة من المعلمين.{% else %}Learn from elite educators.{% endif %}
            </p>
        </div>

        <div class="row g-4 justify-content-center">
            {% for teacher in teachers %}
            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card h-100 border-0 shadow-sm text-center p-4 rounded-4 hover-lift">
                    <div class="mb-4 position-relative mx-auto" style="width: 120px; height: 120px;">
                        {% if teacher.avatar %}
                            <img src="{{ teacher.avatar.url }}" alt="{{ teacher.user.get_full_name }}" class="rounded-circle img-thumbnail p-1 border-0" style="width: 100%; height: 100%; object-fit: cover;">
                        {% else %}
                            <div class="rounded-circle bg-light d-flex align-items-center justify-content-center text-primary" style="width: 100%; height: 100%; font-size: 2.5rem; border: 4px solid white; box-shadow: 0 5px 15px rgba(0,0,0,0.05);">
                                {{ teacher.user.first_name|first|default:teacher.user.username|first|upper }}
                            </div>
                        {% endif %}
                        <div class="position-absolute bottom-0 end-0 bg-success border border-white rounded-circle p-2"></div>
                    </div>
                    
                    <h5 class="fw-bold mb-1">{{ teacher.user.get_full_name|default:teacher.user.username }}</h5>
                    <p class="text-primary small fw-bold mb-3">{{ teacher.specialization|default:"معلم" }}</p>
                    
                    <p class="text-muted small mb-4">
                        {{ teacher.bio|default:"No bio available."|truncatewords:20 }}
                    </p>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center">
                <p class="text-muted">
                    {% if LANGUAGE_CODE == 'ar' %}لا يوجد معلمين حالياً.{% else %}No teachers available at the moment.{% endif %}
                </p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="features-section py-5 bg-white">
    <div class="container">
        <div class="row text-center g-4">
            <div class="col-md-4">
                <div class="p-4">
                    <div class="mb-3 text-primary h1">🎥</div>
                    <h5 class="fw-bold">
                        {% if LANGUAGE_CODE == 'ar' %}دروس مباشرة{% else %}Live Lessons{% endif %}
                    </h5>
                    <p class="text-muted">
                        {% if LANGUAGE_CODE == 'ar' %}انضم لجلسات تفاعلية عبر Google Meet.{% else %}Join interactive sessions via Google Meet.{% endif %}
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-4">
                    <div class="mb-3 text-primary h1">📁</div>
                    <h5 class="fw-bold">
                        {% if LANGUAGE_CODE == 'ar' %}المصادر{% else %}Resources{% endif %}
                    </h5>
                    <p class="text-muted">
                        {% if LANGUAGE_CODE == 'ar' %}الوصول لمواد الدورة عبر Google Drive.{% else %}Access course materials via Google Drive.{% endif %}
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-4">
                    <div class="mb-3 text-primary h1">💳</div>
                    <h5 class="fw-bold">
                        {% if LANGUAGE_CODE == 'ar' %}دفع سهل{% else %}Easy Payment{% endif %}
                    </h5>
                    <p class="text-muted">
                        {% if LANGUAGE_CODE == 'ar' %}دفع آمن عبر بوابة ثواني.{% else %}Secure payment via Thawani Gateway.{% endif %}
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}