{# Categories Grid - 3 صور #}
<section class="categories-section">
    <div class="categories-grid">
        {% for category in categories | slice(0, 3) %}
        <a href="{{ category.url }}" class="category-card">
            <img src="{{ category.image }}" alt="{{ category.name }}">
            <span class="category-btn">{{ category.name }}</span>
        </a>
        {% endfor %}
    </div>
</section>
{# Features Bar #}
<section class="features-bar">
    <div class="feature-item">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
        </svg>
        <span>شحن مجاني فوق 500 ر.س</span>
    </div>
    <div class="feature-item">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
        </svg>
        <span>توصيل سريع خلال 3 ساعات</span>
    </div>
    <div class="feature-item">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
        </svg>
        <span>منتجات أصلية 100%</span>
    </div>
    <div class="feature-item">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
        </svg>
        <span>دفع آمن</span>
    </div>
</section>