<section class="hero flex">
    <div class="searchbar-div">
        <form action="/searchresults" method="get" class="searchbar-container">
            <input type="text" name="search" id="search-main">
            <button type="submit" class="boxicon-submit" id="main-seach-button">
                <span class="material-symbols-rounded">
                    search
                </span>
            </button>
        </form>
    </div>
    <div class="stats">
        <h2 id="stat-title">Site Statistics</h2>
        <div class="stats-row">
            <!-- Total Bags -->
            <div class="stat-items">
                <p>
                    <%= data.totalBags %>
                </p>
                <h2>Total Bags</h2>
            </div>
            <!-- Total Categories -->
            <div class="stat-items">
                <p>
                    <%= data.totalCategories %>
                </p>
                <h2>Total Categories</h2>
            </div>
            <!-- Total Subcategories -->
            <div class="stat-items">
                <p>
                    <%= data.totalSubcategories %>
                </p>
                <h2>Total Subcategories</h2>
            </div>
        </div>
        <%- include('bagCount') %>
    </div>
</section>