{% extends 'base.html' %}
{% from 'macros.html' import ic, sec_head, best_card %}
{% block content %}

{# ───────── Hero ───────── #}
<section class="hero" aria-labelledby="hero-title">
  <div class="hero__media" aria-hidden="true">
    <img src="assets/img/hero.jpg" alt="" width="1400" height="2071" fetchpriority="high">
  </div>
  <img class="hero__leaf" src="assets/img/leaves-side-l.png" alt="" aria-hidden="true">
  <div class="container hero__in">
    <div class="hero__text">
      <p class="hero__eyebrow">{{ ic('leaf-solid') }}<span>تازه، خانگی، آماده</span></p>
      <h1 class="hero__title" id="hero-title">
        <svg class="hero__sprig" viewBox="0 0 200 100" aria-hidden="true">
          <path class="sprig-stem" d="M38 52c22 22 70 38 158 42"/>
          <path class="sprig-leaf" d="M6 10c22-4 40 6 44 34C30 46 10 36 6 10Z"/>
          <path class="sprig-vein" d="M10 13c14 9 25 19 38 30"/>
          <path class="sprig-leaf" d="M30 66c10-12 26-14 38-6-10 10-24 13-38 6Z"/>
        </svg>
        آشپزی راحت‌تر،<br>با <em>طعم واقعی</em><br>خونه
      </h1>
      <p class="hero__lead">سبزیجات تازه خردشده، سبزی و صیفی سرخ‌شده، غذاهای نیمه‌آماده، ادویه‌ها و پک‌های آشپزی، همه با کیفیت و آماده برای یک آشپزی دلپذیر.</p>
      <div class="hero__cta">
        <a class="btn btn--primary btn--lg btn--chev" href="shop.html"><span>مشاهده محصولات</span>{{ ic('chev-left') }}</a>
        <a class="btn btn--outline btn--lg btn--chev" href="packs.html"><span>پک‌های آشپزی</span>{{ ic('chev-left') }}</a>
      </div>
      <ul class="hero__perks">
        <li><span>{{ ic('truck-fast') }}</span>ارسال سریع</li>
        <li><span>{{ ic('box-leaf') }}</span>بسته‌بندی استاندارد</li>
        <li><span>{{ ic('leaves') }}</span>مواد اولیه باکیفیت</li>
      </ul>
    </div>
  </div>
  <p class="hero__chip hero__chip--ship"><span class="hero__chip-ic">{{ ic('truck') }}</span><span>ارسال رایگان<small>منطقه ۲۲ و اطراف فروشگاه</small></span></p>
  <p class="hero__chip hero__chip--home"><span class="hero__chip-ic">{{ ic('house') }}</span><span>طعم خانگی<small>با دستورهای اصیل</small></span></p>
</section>

{# ───────── Categories ───────── #}
<section class="cats" aria-labelledby="cats-title">
  <img class="cats__sprout" src="assets/img/leaf-pair.png" alt="" aria-hidden="true" width="112" height="136">
  <img class="side-leaves side-leaves--l" src="assets/img/leaves-side-l.png" alt="" aria-hidden="true">
  <div class="container">
    {{ sec_head('امروز دنبال چی هستی؟', leaves=False, id='cats-title') }}
    <div class="cat-grid">
      {% for slug in HOME_CATS %}{% set c = CAT[slug] %}
      <a class="cat-card" href="shop.html#{{ c.slug }}">
        <span class="cat-card__media"><img src="assets/img/{{ c.img }}" alt="" loading="lazy" width="422" height="224"></span>
        <span class="cat-card__foot"><span class="cat-card__name">{{ c.name }}</span><span class="chev-dot">{{ ic('chev-left') }}</span></span>
      </a>
      {% endfor %}
    </div>
  </div>
</section>

{# ───────── Bestsellers ───────── #}
<section class="section best" aria-labelledby="best-title">
  <div class="container">
    {{ sec_head('پرفروش‌های نوش جان', id='best-title') }}
    <div class="best-grid">
      {% for slug in BESTSELLERS %}{{ best_card(PROD[slug]) }}{% endfor %}
    </div>
  </div>
</section>

{# ───────── What to cook today (packs) ───────── #}
<section class="section packs" aria-labelledby="packs-title">
  <img class="side-leaves side-leaves--l side-leaves--packs" src="assets/img/leaves-side-l.png" alt="" aria-hidden="true">
  <div class="container">
    {{ sec_head('امروز چی بپزیم؟', leaves=False, sub='با پک‌های آماده نوش جان، آشپزی ساده‌تر و لذت‌بخش‌تر.', id='packs-title') }}
    <div class="pack-grid">
      {% for k in PACKS %}
      <article class="pack-card">
        <img class="pack-card__img" src="assets/img/{{ k.img }}" alt="" loading="lazy" width="432" height="288">
        <div class="pack-card__text">
          <h3>{{ k.name }}</h3>
          <p>{{ k.line1 }}<br>{{ k.line2 }}</p>
        </div>
        <a class="btn btn--pill-outline btn--chev pack-card__btn" href="packs.html#{{ k.slug }}"><span>مشاهده پک</span>{{ ic('chev-left') }}</a>
      </article>
      {% endfor %}
    </div>
  </div>
</section>

{# ───────── Pack banner ───────── #}
<section class="section-tight" aria-label="پک‌های آشپزی نوش جان">
  <div class="container">
    <div class="pack-banner">
      <div class="pack-banner__top">
        <h2 class="pack-banner__title">همه‌چی برای یه غذای خوشمزه،<br><span>توی یک پک {{ ic('leaf-solid') }}</span></h2>
        <div class="pack-banner__media" aria-hidden="true"><img src="assets/img/banner-box.jpg" alt="" loading="lazy" width="650" height="210"></div>
      </div>
      <ul class="perks">
        {% for k in PACK_PERKS %}
        <li class="perk"><span class="perk__ic">{{ ic(k.icon) }}</span><span>{{ k.t1 }}<br>{{ k.t2 }}</span></li>
        {% endfor %}
      </ul>
    </div>
  </div>
</section>

{# ───────── DIY or ours ───────── #}
<section class="section-tight" aria-labelledby="diy-title">
  <div class="container">
    <div class="diy">
      <header class="diy__head">
        <h2 id="diy-title">{{ ic('leaf-solid', 'diy__leaf') }}<span>خودت درست کن یا بسپرش به ما</span></h2>
        <p>همون کیفیت، با هر روشی که راحت‌تری.</p>
      </header>
      <div class="diy__row">
        <a class="diy-card diy-card--ours" href="product-kashk.html">
          <h3>کشک بادمجان نیمه‌آماده نوش جان</h3>
          <div class="diy-card__body">
            <ul class="checks">
              <li>{{ ic('check') }}همون طعم اصیل</li>
              <li>{{ ic('check') }}آماده در چند دقیقه</li>
              <li>{{ ic('check') }}بدون دردسر تهیه مواد</li>
              <li>{{ ic('check') }}مناسب روزهای پرمشغله</li>
            </ul>
            <img src="assets/img/diy-ready.jpg" alt="" loading="lazy" width="314" height="200">
          </div>
        </a>
        <span class="diy__swap" aria-hidden="true">{{ ic('swap') }}</span>
        <a class="diy-card" href="shop.html#fried">
          <h3>مواد لازم برای کشک بادمجان</h3>
          <div class="diy-card__body">
            <ul class="dots">
              <li>بادمجان تازه</li>
              <li>پیاز و سیر</li>
              <li>کشک محلی</li>
              <li>نعنا داغ و ادویه‌ها</li>
            </ul>
            <img src="assets/img/diy-ingredients.jpg" alt="" loading="lazy" width="304" height="200">
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

{# ───────── Party order ───────── #}
<section class="section-tight" aria-labelledby="party-title">
  <div class="container">
    <div class="party">
      <div class="party__text">
        <h2 id="party-title"><span>سفارش مهمانی</span><span class="party__ic">{{ ic('users-solid') }}</span></h2>
        <p class="party__sub">پذیرای دورهمی‌های شما هستیم!</p>
        <p class="party__desc">سفارش‌های عمده و سفارش مهمانی با کیفیت همیشگی نوش جان پذیرفته می‌شود.</p>
        <div class="party__cta">
          <a class="btn btn--outline btn--sm" href="contact.html">{{ ic('phone-solid') }}<span>تماس با ما</span></a>
          <a class="btn btn--primary btn--sm btn--chev" href="party.html"><span>ثبت سفارش مهمانی</span>{{ ic('chev-left') }}</a>
        </div>
      </div>
      <div class="party__media" aria-hidden="true"><img src="assets/img/party.jpg" alt="" loading="lazy" width="780" height="278"></div>
    </div>
  </div>
</section>

{# ───────── Why us ───────── #}
<section class="section" aria-labelledby="why-title">
  <div class="container">
    {{ sec_head('چرا نوش جان؟', id='why-title') }}
    <ul class="why-grid">
      {% for w in WHY %}
      <li class="why-card"><span class="why-card__ic">{{ ic(w.icon) }}</span><span class="why-card__t">{{ w.t }}</span></li>
      {% endfor %}
    </ul>
  </div>
</section>

{# ───────── Process ───────── #}
<section class="section-tight" aria-labelledby="steps-title">
  <div class="container">
    {{ sec_head('از آشپزخانه نوش جان تا سفره شما', leaves=False, id='steps-title') }}
    <ol class="steps">
      {% for s in STEPS %}
      <li class="step">
        <span class="step__media"><img src="assets/img/{{ s.img }}" alt="" loading="lazy" width="284" height="324">{% if not loop.last %}<span class="step__arrow" aria-hidden="true">{{ ic('chev-left') }}</span>{% endif %}</span>
        <p class="step__t">{{ s.t }}</p>
      </li>
      {% endfor %}
    </ol>
  </div>
</section>

{# ───────── Reviews ───────── #}
<section class="section" aria-labelledby="rev-title">
  <div class="container">
    {{ sec_head('نظر مشتریان', id='rev-title') }}
    <div class="rev-grid">
      {% for r in REVIEWS %}
      <figure class="rev">
        <figcaption class="rev__who">
          <img src="assets/img/{{ r.img }}" alt="" width="112" height="112" loading="lazy">
          <span><strong>{{ r.name }}</strong><span class="stars" role="img" aria-label="۵ از ۵ ستاره">{% for i in range(5) %}{{ ic('star') }}{% endfor %}</span></span>
        </figcaption>
        <blockquote>«{{ r.text }}»</blockquote>
        {{ ic('quote', 'rev__q') }}
      </figure>
      {% endfor %}
    </div>
  </div>
</section>

{# ───────── Ways to order ───────── #}
<section class="section section--last" aria-labelledby="ways-title">
  <div class="container">
    {{ sec_head('راه‌های ثبت سفارش', id='ways-title') }}
    <ul class="ways">
      {% for w in ORDER_WAYS %}
      <li class="way"><span class="way__ic">{{ ic(w.icon) }}</span><strong>{{ w.t }}</strong><span>{{ w.s }}</span></li>
      {% endfor %}
    </ul>
  </div>
</section>
{% endblock %}