{# ==========================================================
   Kottal Premium Theme
   Shop by Category
========================================================== #}

<section class="kottal-categories section">

    <div class="container">

        <div class="section-header text-center">

            <span class="section-subtitle">

                Shop by Category

            </span>

            <h2 class="section-title">

                Discover Our Ayurveda Collections

            </h2>

            <p class="section-description">

                Explore premium Ayurvedic products carefully crafted for
                your everyday wellness.

            </p>

        </div>

        {% if categories %}

        <div class="row g-4">

            {% for category in categories %}

            <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">

                <div class="category-card">

                    <a href="{{ category.href }}">

                        <div class="category-image">

                            {% if category.image %}

                                <img
                                    src="{{ category.image }}"
                                    alt="{{ category.name }}"
                                    loading="lazy">

                            {% else %}

                                <img
                                    src="image/catalog/kottal/category/category-placeholder.webp"
                                    alt="{{ category.name }}"
                                    loading="lazy">

                            {% endif %}

                        </div>

                        <div class="category-content">

                            <h3>

                                {{ category.name }}

                            </h3>

                            {% if category.product_count %}

                            <span class="product-count">

                                {{ category.product_count }} Products

                            </span>

                            {% endif %}

                            <span class="shop-link">

                                Explore Collection

                                <i class="fa-solid fa-arrow-right-long"></i>

                            </span>

                        </div>

                    </a>

                </div>

            </div>

            {% endfor %}

        </div>

        {% else %}

        <div class="row g-4">

            {% set demo = [
                'Hair Care',
                'Skin Care',
                'Wellness',
                'Herbal Oils',
                'Juices',
                'Tablets',
                'Powders',
                'Immunity'
            ] %}

            {% for item in demo %}

            <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">

                <div class="category-card demo">

                    <div class="category-image">

                        <img
                            src="catalog/view/theme/kottal/image/category-placeholder.webp"
                            alt="{{ item }}">

                    </div>

                    <div class="category-content">

                        <h3>

                            {{ item }}

                        </h3>

                        <span class="shop-link">

                            Explore Collection

                        </span>

                    </div>

                </div>

            </div>

            {% endfor %}

        </div>

        {% endif %}

    </div>

</section>