{{ header }}

<section class="shop-hero">

    <div class="container">

        <nav class="shop-breadcrumb">

            {% for breadcrumb in breadcrumbs %}

                {% if not loop.last %}

                    <a href="{{ breadcrumb.href }}">
                        {{ breadcrumb.text }}
                    </a>

                    <span>/</span>

                {% else %}

                    <span>{{ breadcrumb.text }}</span>

                {% endif %}

            {% endfor %}

        </nav>

        <div class="shop-hero-content">

            <h1>{{ heading_title }}</h1>

            <p>{{ description }}</p>

            <form action="{{ action }}" method="get" class="shop-search">

                <input
                    type="hidden"
                    name="route"
                    value="product/search">

                <input
                    type="text"
                    name="search"
                    value="{{ search }}"
                    placeholder="Search herbal products...">

                <button type="submit">

                    <i class="bi bi-search"></i>

                </button>

            </form>

        </div>

    </div>

</section>

<!-- Category Section -->
<section class="shop-categories">

    <div class="container">

        <h2 class="section-title">

            Browse Categories

        </h2>

       <div class="row g-4">

{% for category in categories %}

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

    <a href="{{ category.href }}" class="category-card">

        <div class="category-image">

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

        </div>

        <div class="category-content">

            <h3>{{ category.name }}</h3>

            <span class="category-count">

                {{ category.count }} Products

            </span>

            <span class="shop-link">

                Shop Now

                <i class="bi bi-arrow-right"></i>

            </span>

        </div>

    </a>

</div>

{% endfor %}

</div>

    </div>

</section>

{{ footer }}