{#
    Stats Section Partial
    PRD: Feature 4 - Social Proof & Stats Section (lines 146-161)
    SDD: PRD Mapping (lines 309-325)

    Requirements:
    - 6 dynamic stats in grid (2x3 mobile, 6x1 desktop)
    - Stats from HomepageStatsService: stores_served, years_in_business, franchise_brands,
      dollar_value_processed, buys_processed, uptime_percent
    - data-stat-value for count-up animation
    - At least 6 franchise logos
    - data-posthog-section="stats"
#}
<section class="modern-section modern-stats" id="stats" data-posthog-section="stats">
    {# Decorative accent #}
    <div class="modern-stats__accent" aria-hidden="true"></div>

    <div class="modern-container">
        {# Section Header - Centered #}
        <header class="modern-stats__header">
            <span class="modern-stats__eyebrow">Trusted Partner</span>
            <h2 class="modern-stats__title">Trusted by Resale Leaders</h2>
            <p class="modern-stats__subtitle">
                Since 2015, we've helped hundreds of stores process millions in merchandise.
            </p>
        </header>

        {# Stats Grid - 6 columns desktop, 3x2 tablet, 2x3 mobile #}
        <div class="modern-stats__grid">
            <article class="modern-stats__item">
                <span
                    class="modern-stats__value"
                    data-stat-value="{{ stats.stores_served.value|default('127') }}"
                >{{ stats.stores_served.display|default('127+') }}</span>
                <span class="modern-stats__label">Stores</span>
            </article>
            <article class="modern-stats__item">
                <span
                    class="modern-stats__value"
                    data-stat-value="{{ stats.years_in_business.value|default('10') }}"
                >{{ stats.years_in_business.display|default('10+') }}</span>
                <span class="modern-stats__label">Years</span>
            </article>
            <article class="modern-stats__item">
                <span
                    class="modern-stats__value"
                    data-stat-value="{{ stats.franchise_brands.value|default('8') }}"
                >{{ stats.franchise_brands.display|default('8') }}</span>
                <span class="modern-stats__label">Brands</span>
            </article>
            <article class="modern-stats__item">
                <span
                    class="modern-stats__value"
                    data-stat-value="{{ stats.dollar_value_processed.value|default('847000000') }}"
                >{{ stats.dollar_value_processed.display|default('$847M+') }}</span>
                <span class="modern-stats__label">Processed</span>
            </article>
            <article class="modern-stats__item">
                <span
                    class="modern-stats__value"
                    data-stat-value="{{ stats.buys_processed.value|default('25600000') }}"
                >{{ stats.buys_processed.display|default('25.6M+') }}</span>
                <span class="modern-stats__label">Buys</span>
            </article>
            <article class="modern-stats__item">
                <span
                    class="modern-stats__value"
                    data-stat-value="{{ stats.uptime_percent.value|default('99.9') }}"
                >{{ stats.uptime_percent.display|default('99.9%') }}</span>
                <span class="modern-stats__label">Uptime</span>
            </article>
        </div>

        {# Logo Bar - Franchise brands #}
        <div class="modern-stats__logos">
            <p class="modern-stats__logos-label">Powering top franchise locations</p>
            <div class="modern-stats__logos-row">
                <div class="modern-stats__logo modern-stats__logo--invert">
                    <img
                        src="/images/front/logos/light/pias_small.png"
                        alt="Play It Again Sports"
                        loading="lazy"
                        width="120"
                        height="auto"
                    >
                </div>
                <div class="modern-stats__logo">
                    <img
                        src="/images/front/logos/dark/platos_closet_small.png"
                        alt="Plato's Closet"
                        loading="lazy"
                        width="120"
                        height="auto"
                    >
                </div>
                <div class="modern-stats__logo">
                    <img
                        src="/images/front/logos/dark/ouac_small.png"
                        alt="Once Upon a Child"
                        loading="lazy"
                        width="120"
                        height="auto"
                    >
                </div>
                <div class="modern-stats__logo">
                    <img
                        src="/images/front/logos/dark/style_encore_small.png"
                        alt="Style Encore"
                        loading="lazy"
                        width="120"
                        height="auto"
                    >
                </div>
            </div>
        </div>
    </div>
</section>