{% extends 'base.html' %}
{% load course_tags %}
{% block title %}آکادمی مهبد نتاج | آموزش کاربردی کسب‌وکار{% endblock %}
{% block content %}
<section class="hero">
  <div class="hero-copy">
    <div class="hero-subtitle"><i class="bi bi-stars"></i> یادگیری برای ساختن یک کسب‌وکار بهتر</div>
    <h1>دانش کاربردی برای <span>رشد واقعی کسب‌وکار</span></h1>
    <p>دوره‌های ویدیویی کوتاه، روشن و نتیجه‌محور در حوزه مدیریت، فروش، رهبری و هوش مصنوعی؛ برای اینکه آموخته‌هایتان را همان روز به کار بگیرید.</p>
    <div class="hero-cta"><a href="{% url 'courses:catalog' %}" class="btn-gold">مشاهده دوره‌ها <i class="bi bi-arrow-left"></i></a><a href="#why-us" class="btn-outline">چرا آکادمی مهبد نتاج؟</a></div>
    <div class="hero-stats"><div class="stat-item"><h3>۱۲٬۵۰۰+</h3><p>دانشجوی همراه</p></div><div class="stat-item"><h3>۴٫۹ از ۵</h3><p>رضایت دانشجویان</p></div><div class="stat-item"><h3>همیشگی</h3><p>دسترسی به آموزش</p></div></div>
  </div>
  <div class="hero-media" aria-hidden="true">
    <div class="hero-vector-card">
      <svg viewBox="0 0 620 500" class="hero-vector">
        <defs><linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#6d5dfc"/><stop offset="1" stop-color="#30b58d"/></linearGradient><filter id="shadow"><feDropShadow dx="0" dy="12" stdDeviation="12" flood-opacity=".12"/></filter></defs>
        <circle cx="305" cy="245" r="205" fill="#f1edff"/><circle cx="490" cy="100" r="46" fill="#fff0c7"/><path d="M75 408h470" stroke="#dcd7ec" stroke-width="3" stroke-linecap="round"/>
        <rect x="137" y="112" width="345" height="238" rx="22" fill="white" filter="url(#shadow)"/><rect x="158" y="135" width="303" height="42" rx="12" fill="#f7f5fc"/><circle cx="181" cy="156" r="7" fill="#ff8d7b"/><circle cx="204" cy="156" r="7" fill="#ffd167"/><circle cx="227" cy="156" r="7" fill="#51c7a3"/>
        <path d="M182 299V267M238 299v-66M294 299v-43M350 299v-91M406 299v-119" stroke="url(#g1)" stroke-width="25" stroke-linecap="round"/><path d="m183 229 54-30 57 12 55-54 58-27" fill="none" stroke="#ff9b65" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/><path d="m394 128 20-3-7 20" fill="none" stroke="#ff9b65" stroke-width="8" stroke-linecap="round"/>
        <circle cx="125" cy="345" r="62" fill="#6d5dfc"/><path d="M100 350l18 18 35-43" fill="none" stroke="white" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"/><rect x="420" y="315" width="128" height="88" rx="18" fill="#fff" filter="url(#shadow)"/><circle cx="454" cy="350" r="17" fill="#dff7ef"/><path d="M447 350h14m-7-7v14" stroke="#30b58d" stroke-width="4" stroke-linecap="round"/><path d="M482 344h43M482 359h30M442 382h83" stroke="#d5d0e1" stroke-width="7" stroke-linecap="round"/>
      </svg>
      <span class="floating-note note-one"><i class="bi bi-graph-up-arrow"></i> رشد قدم‌به‌قدم</span><span class="floating-note note-two"><i class="bi bi-play-circle"></i> آموزش ویدیویی</span>
    </div>
  </div>
</section>

<section class="category-filter-section"><div class="category-pills"><a href="{% url 'courses:catalog' %}" class="cat-pill active"><i class="bi bi-grid"></i> همه موضوع‌ها</a>{% for cat in categories %}<a href="{% url 'courses:catalog' %}?category={{ cat.slug }}" class="cat-pill"><i class="bi {{ cat.icon }}"></i> {{ cat.name }}</a>{% endfor %}</div></section>

<section class="featured-section"><div class="section-header"><span class="eyebrow">پیشنهادهای آکادمی مهبد نتاج</span><h2>دوره‌های <span>منتخب</span></h2><p>مسیرهای آموزشی طراحی‌شده برای حل چالش‌های واقعی کسب‌وکار</p></div><div class="course-grid">
{% for course in featured_courses %}<article class="course-card"><div class="card-image-wrap"><img src="{{ course.get_cover }}" alt="تصویر دوره {{ course.name }}" loading="lazy"><div class="card-badges">{% if course.discount_percent %}<span class="discount-badge">{{ course.discount_percent|fa_number }}٪ تخفیف</span>{% endif %}{% if course.badge_text %}<span class="badge-gold">{{ course.badge_text }}</span>{% endif %}</div><span class="card-level-badge">{{ course.get_level_display }}</span></div><div class="card-body"><div class="card-instructor"><i class="bi bi-person-check"></i> {{ course.instructor.name|default:'مدرس آکادمی' }}</div><h3 class="card-title"><a href="{% url 'courses:course_detail' course.id %}">{{ course.name }}</a></h3><p class="card-tagline">{{ course.tagline }}</p><div class="card-meta"><span><i class="bi bi-clock"></i> {{ course.duration }}</span><span><i class="bi bi-star-fill"></i> {{ course.rating }}</span><span><i class="bi bi-people"></i> {{ course.enrolled_count }}</span></div><div class="card-footer"><div class="price-box">{% if course.is_free %}<span class="price-free">رایگان</span>{% elif course.discount_percent %}<span class="price-original">{{ course.price|toman }}</span><span class="price-current">{{ course.effective_price|toman }}</span>{% else %}<span class="price-current">{{ course.price|toman }}</span>{% endif %}</div><a href="{% url 'courses:course_detail' course.id %}" class="card-arrow" aria-label="مشاهده دوره"><i class="bi bi-arrow-left"></i></a></div></div></article>
{% empty %}<div class="empty-state"><svg viewBox="0 0 180 140"><path d="M28 37h48l12 14h65v70H28z" fill="#eee9ff" stroke="#6d5dfc" stroke-width="4"/><path d="M58 82h65M58 99h45" stroke="#8c82a4" stroke-width="6" stroke-linecap="round"/><circle cx="137" cy="38" r="22" fill="#dff7ef"/><path d="M137 27v22m-11-11h22" stroke="#30b58d" stroke-width="5" stroke-linecap="round"/></svg><h3>دوره‌ها به‌زودی منتشر می‌شوند</h3><p>در حال آماده‌سازی تجربه‌ای ارزشمند برای شما هستیم.</p></div>{% endfor %}</div></section>

<section id="why-us" class="why-section"><div class="why-vector"><svg viewBox="0 0 500 390"><path d="M85 325c42-91 94-137 156-138 45 0 78 21 97 60 18 38 51 57 77 78" fill="none" stroke="#e5e0f2" stroke-width="50" stroke-linecap="round"/><circle cx="91" cy="315" r="28" fill="#6d5dfc"/><circle cx="240" cy="187" r="28" fill="#ff9b65"/><circle cx="411" cy="316" r="28" fill="#30b58d"/><path d="M91 274V97h275" fill="none" stroke="#30284a" stroke-width="9" stroke-linecap="round"/><path d="m332 65 38 32-38 32" fill="none" stroke="#30284a" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/><rect x="130" y="116" width="72" height="93" rx="12" fill="#fff" stroke="#dcd7ec" stroke-width="3"/><path d="M148 142h36m-36 19h36m-36 19h22" stroke="#6d5dfc" stroke-width="6" stroke-linecap="round"/></svg></div><div class="why-copy"><span class="eyebrow">یادگیری متفاوت</span><h2>آموزش‌هایی که به <span>عمل تبدیل می‌شوند</span></h2><p>محتوا بدون حاشیه و بر پایه تجربه واقعی طراحی شده است؛ هر درس یک قدم روشن برای بهتر کردن کسب‌وکار شماست.</p><div class="feature-list"><div><i class="bi bi-check2"></i><span><strong>مسیر یادگیری منظم</strong><small>از مفاهیم پایه تا اجرای حرفه‌ای</small></span></div><div><i class="bi bi-check2"></i><span><strong>دسترسی امن و همیشگی</strong><small>تماشا در موبایل و رایانه</small></span></div><div><i class="bi bi-check2"></i><span><strong>فایل‌های کاربردی</strong><small>چک‌لیست و ابزارهای آماده اجرا</small></span></div></div><a href="{% url 'courses:catalog' %}" class="btn-gold">انتخاب مسیر یادگیری</a></div></section>

<section class="reviews-section"><div class="section-header"><span class="eyebrow">تجربه دانشجویان</span><h2>همراهان ما چه <span>می‌گویند؟</span></h2></div><div class="reviews-grid">{% for review in reviews %}<article class="review-card"><div class="quote-mark">“</div><p>{{ review.comment }}</p><div class="review-person"><span>{{ review.student_name|slice:':1' }}</span><div><strong>{{ review.student_name }}</strong><small>{{ review.student_title }}</small></div></div></article>{% empty %}<div class="empty-state"><p>به‌زودی تجربه دانشجویان اینجا منتشر می‌شود.</p></div>{% endfor %}</div></section>
{% endblock %}
{% block extra_js %}
<script>
(() => {
  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
  if ('IntersectionObserver' in window && !reduced) {
    const reveal = new IntersectionObserver(entries => entries.forEach(entry => {
      if (entry.isIntersecting) { entry.target.classList.add('is-visible'); reveal.unobserve(entry.target); }
    }), {threshold: .12});
    document.querySelectorAll('.featured-section .course-card, .why-section, .review-card').forEach(item => {
      item.classList.add('scroll-reveal'); reveal.observe(item);
    });
  }
})();
</script>
{% endblock %}