@php
    $tabs = config('offerings.tabs');
    $offeringsCatalog = config('offerings.catalog');
    $offeringsNavTabs = [];

    foreach ($tabs as $index => $tab) {
        $offeringsNavTabs[] = [
            'label' => $tab['label'],
            'attrs' => [
                'role' => 'tab',
                'id' => 'offerings-tab-' . $tab['id'],
                'aria-controls' => 'offerings-panel-' . $tab['id'],
                'aria-selected' => $index === 0 ? 'true' : 'false',
                'data-offerings-tab' => $tab['id'],
            ],
        ];
    }
@endphp

<section class="offerings-section" id="products" aria-labelledby="products-title">
    <div class="offerings-shell">
        <header class="offerings-header reveal">
            <span class="snapshot-badge">Packages &amp; services</span>
            <h2 class="section-title section-title-left" id="products-title">
                Scroll through our <span class="teal-gradient-text">offerings</span>
            </h2>
            <p class="offerings-lead">Uzapoint gives growing businesses a single platform to manage operations, and make better decisions by bringing your business into one place.</p>
        </header>

        @include('partials.home.scrollable-tab-nav', [
            'tabs' => $offeringsNavTabs,
            'scrollId' => 'offerings-nav-scroll',
            'navLabel' => 'Offering categories',
            'wrapperClass' => 'offerings-tab-nav',
        ])

        <div class="offerings-panels reveal">
            @foreach ($tabs as $index => $tab)
                @include('partials.products.offering-panel', [
                    'tab' => $tab,
                    'catalog' => $offeringsCatalog[$tab['id']],
                    'isActive' => $index === 0,
                ])
            @endforeach
        </div>
    </div>
</section>