@php
    $snapshot_tabs = [
        [
            'id' => 'selling',
            'label' => 'Selling (Point-of-sale)',
            'image' => asset('img/uzapoint-screenshot.png'),
            'caption' => 'Save time, manage your stock better!'
        ],
        [
            'id' => 'barcode',
            'label' => 'Barcode & Shelf Label Management',
            'image' => asset('img/uzapoint-screenshot.png'),
            'caption' => 'Generate barcodes and print professional labels in seconds.'
        ],
        [
            'id' => 'invoicing',
            'label' => 'Quotation & Invoicing',
            'image' => asset('img/uzapoint-screenshot.png'),
            'caption' => 'Send smart professional invoices and track client payments easily.'
        ],
        [
            'id' => 'receipting',
            'label' => 'Receipting',
            'image' => asset('img/uzapoint-screenshot.png'),
            'caption' => 'Issue instant e-receipts and SMS receipts directly to customer phones.'
        ],
        [
            'id' => 'payments',
            'label' => 'Payments Integration',
            'image' => asset('img/uzapoint-screenshot.png'),
            'caption' => 'Accept mobile money, cards, and bank payments seamlessly.'
        ],
        [
            'id' => 'store',
            'label' => 'Online Store',
            'image' => asset('img/uzapoint-screenshot.png'),
            'caption' => 'Launch your e-commerce storefront with automated inventory sync.'
        ],
        [
            'id' => 'stock',
            'label' => 'Stock Levels',
            'image' => asset('img/uzapoint-screenshot.png'),
            'caption' => 'Real-time stock alerts and automated supplier orders.'
        ],
    ];
@endphp

<section class="snapshot-section" aria-labelledby="snapshot-title">
    <div class="snapshot-header reveal">
        <span class="snapshot-badge">A snapshot of our software</span>
        <h2 class="section-title" id="snapshot-title">Run Your Business <span class="teal-gradient-text">Smarter</span></h2>
    </div>

    @php
        $snapshotNavTabs = array_map(static fn (array $tab): array => [
            'label' => $tab['label'],
            'attrs' => [
                'data-id' => $tab['id'],
                'data-caption' => $tab['caption'],
                'data-image' => $tab['image'],
            ],
        ], $snapshot_tabs);
    @endphp

    @include('partials.home.scrollable-tab-nav', [
        'tabs' => $snapshotNavTabs,
        'scrollId' => 'snapshot-nav-scroll',
    ])

    <!-- Showcase Card -->
    <div class="snapshot-showcase-wrapper reveal">
        <div class="snapshot-card">
            <div class="snapshot-frame">
                <img class="snapshot-image" id="snapshot-img-display" src="{{ $snapshot_tabs[0]['image'] }}" alt="Uzapoint Software - Selling (Point-of-sale)">
            </div>
            <div class="snapshot-caption-container">
                <p class="snapshot-caption" id="snapshot-caption-display">{{ $snapshot_tabs[0]['caption'] }}</p>
            </div>
        </div>
    </div>

    <!-- CTA -->
    <div class="snapshot-cta reveal">
        <a class="snapshot-cta-btn" href="{{ route('products') }}">Learn more about our features</a>
    </div>
</section>