@php
    $stats = config('impact.stats');
    $moreHref = $moreHref ?? route('impact');
@endphp

<section class="impact-section" id="impact" aria-labelledby="impact-title">
    <div class="impact-inner">
        <div class="impact-header reveal">
            <div class="section-label">By the numbers</div>
            <h2 class="section-title" id="impact-title">Built with SMEs, proven across markets</h2>
            <p class="impact-intro">
                Behind every number is a shop, team, reseller, partner, and business owner using Uzapoint to work better
                every day.
            </p>
        </div>

        <div class="impact-grid">
            @foreach ($stats as $i => $stat)
                <article class="impact-card reveal" style="--reveal-delay: {{ ($i % 4) * 70 }}ms"
                    data-count="{{ $stat['value'] }}" data-suffix="{{ $stat['suffix'] }}"
                    data-prefix="{{ $stat['prefix'] }}"
                    aria-label="{{ $stat['prefix'] }}{{ number_format($stat['value']) }}{{ $stat['suffix'] }} {{ $stat['label'] }}">
                    <div class="impact-card-fill" aria-hidden="true"></div>

                    <div class="impact-card-content">
                        <div class="impact-icon" aria-hidden="true">
                            <x-icon :name="$stat['icon']" />
                        </div>

                        <div class="impact-copy">
                            <div class="impact-num" aria-hidden="true">
                                <span class="impact-num-prefix">{{ $stat['prefix'] }}</span><span
                                    class="impact-num-value" data-target="{{ $stat['value'] }}">0</span><span
                                    class="impact-num-suffix">{{ $stat['suffix'] }}</span>
                            </div>

                            <div class="impact-label">{{ $stat['label'] }}</div>

                            <div class="impact-card-writeup">
                                Real progress made visible across the businesses, people, and markets Uzapoint supports.
                            </div>
                        </div>
                    </div>

                    <div class="impact-card-art" aria-hidden="true">
                        @include('partials.impact.stat-art', ['type' => $stat['image_type']])
                    </div>
                </article>
            @endforeach
        </div>

        <div class="impact-note reveal" style="--reveal-delay: 180ms">
            <span></span>
            <p>Measured across our growing SME, outlet, partner, and reseller ecosystem.</p>
        </div>
    </div>
    <div class="impact-more-wrap">
        <a href="{{ $moreHref }}" class="btn-ghost impact-more-btn" aria-label="See more about Uzapoint impact">See more</a>
    </div>
</section>

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const impactNote = document.querySelector('.impact-note');
            const moreWrap = document.querySelector('.impact-more-wrap');

            if (!impactNote || !moreWrap) return;

            const observer = new IntersectionObserver(
                ([entry]) => {
                    moreWrap.classList.toggle('is-visible', entry.isIntersecting);
                }, {
                    threshold: 0.55
                }
            );

            observer.observe(impactNote);
        });
    </script>
@endpush