@php
    $panelId = $tab['id'];
    $panelLabel = $tab['label'];
    $isActive = $isActive ?? true;
    $isStandalone = $isStandalone ?? false;
    $categorySlug = $categorySlug ?? null;
    $shopProducts = [];

    if ($panelId === 'hardware' && ! empty($catalog['shop_products'])) {
        $shopProducts = array_map(static function (array $product): array {
            $product['image'] = str_starts_with($product['image'], 'http')
                ? $product['image']
                : asset($product['image']);

            return $product;
        }, $catalog['shop_products']);
    }
@endphp

<div
    class="offerings-panel{{ $isActive ? ' is-active is-visible is-entering' : '' }}"
    id="{{ $panelId }}"
    @unless ($isStandalone)
        role="tabpanel"
        aria-labelledby="offerings-tab-{{ $panelId }}"
        data-offerings-panel="{{ $panelId }}"
    @endunless
    @if (! $isActive && ! $isStandalone) hidden @endif
>
    <div class="offerings-showcase offerings-stagger">
        <div class="offerings-card">
            <div class="offerings-layout">
                <div class="offerings-main">
                    <p class="offerings-panel-label offerings-stagger">{{ $catalog['main_title'] }}</p>

                    <article class="package-featured package-card--{{ $catalog['featured']['variant'] }} offerings-stagger">
                        <div class="package-featured-head">
                            <div class="package-emblem package-emblem--md package-emblem--{{ $catalog['featured']['variant'] }}" aria-hidden="true">
                                @include('partials.home.offerings-icon', ['icon' => $catalog['featured']['variant']])
                            </div>
                            <div class="package-featured-copy">
                                <p class="package-tier">{{ $catalog['featured']['tier'] }}</p>
                                @if (! empty($catalog['featured']['subtitle']))
                                    <p class="package-subtitle">{{ $catalog['featured']['subtitle'] }}</p>
                                @endif
                            </div>
                        </div>

                        <ul class="package-perks-list" aria-label="Package highlights">
                            @foreach ($catalog['featured']['perks'] as $perk)
                                <li>
                                    <span class="package-perk-icon" aria-hidden="true">
                                        @include('partials.home.offerings-icon', ['icon' => $perk['icon']])
                                    </span>
                                    <span>{{ $perk['label'] }}</span>
                                </li>
                            @endforeach
                        </ul>

                        <div class="offerings-chip-row offerings-chip-row--{{ $catalog['featured']['variant'] }}" aria-label="Ideal industries">
                            @foreach (array_map('trim', explode(',', $catalog['featured']['tags'])) as $tag)
                                <span class="offerings-chip">{{ $tag }}</span>
                            @endforeach
                        </div>
                    </article>

                    @if ($panelId === 'hardware' && ! empty($shopProducts))
                        @include('partials.home.hardware-shop', ['products' => $shopProducts])
                    @else
                        <label class="offerings-search offerings-stagger">
                            <span class="offerings-search-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
                            </span>
                            <input
                                type="search"
                                class="offerings-search-input"
                                placeholder="Search for any feature your business needs..."
                                aria-label="Search {{ strtolower($panelLabel) }} features"
                                data-offerings-search
                            >
                        </label>

                        <h4 class="offerings-features-label offerings-stagger">Features included</h4>

                        <ul class="offerings-features" data-offerings-features>
                            @foreach ($catalog['features'] as $featureIndex => $feature)
                                <li
                                    class="offerings-feature offerings-stagger"
                                    style="--reveal-delay: {{ min($featureIndex * 40, 240) }}ms"
                                    title="{{ $feature['desc'] }}"
                                    data-feature-title="{{ strtolower($feature['title']) }}"
                                    data-feature-tag="{{ strtolower($feature['tag']) }}"
                                    data-feature-desc="{{ strtolower($feature['desc']) }}"
                                >
                                    <span class="offerings-feature-icon" aria-hidden="true">
                                        @include('partials.home.offerings-icon', ['icon' => $feature['icon']])
                                    </span>
                                    <div class="offerings-feature-copy">
                                        <span class="offerings-feature-title">{{ $feature['title'] }}</span>
                                        <span class="offerings-feature-tag offerings-feature-tag--{{ $feature['tag_variant'] }}">{{ $feature['tag'] }}</span>
                                    </div>
                                </li>
                            @endforeach
                        </ul>

                        <p class="offerings-empty" data-offerings-empty hidden>No features match your search. Try another keyword.</p>
                    @endif

                    <div class="offerings-actions offerings-stagger">
                        @if ($categorySlug)
                            <a class="offerings-cta offerings-cta--ghost" href="{{ route('products.category', $categorySlug) }}">Explore {{ $panelLabel }}</a>
                        @endif
                        <a class="offerings-cta" href="{{ route('contact') }}#callback">Get a Quote</a>
                    </div>
                </div>

                <aside class="offerings-compare">
                    <h3 class="offerings-compare-title offerings-stagger">Compare with other packages</h3>

                    @foreach ($catalog['compare'] as $compareIndex => $package)
                        <article
                            class="package-compare package-card--{{ $package['variant'] }} offerings-stagger"
                            style="--reveal-delay: {{ $compareIndex * 70 }}ms"
                        >
                            <div class="package-compare-head">
                                <div class="package-emblem package-emblem--md package-emblem--{{ $package['variant'] }}" aria-hidden="true">
                                    @include('partials.home.offerings-icon', ['icon' => $package['variant']])
                                </div>
                                <div class="package-compare-copy">
                                    <p class="package-tier">{{ $package['name'] }}</p>
                                    <p class="package-summary">{{ $package['desc'] }}</p>
                                </div>
                            </div>

                            <div class="offerings-chip-row offerings-chip-row--{{ $package['variant'] }}" aria-label="Ideal industries">
                                @foreach (array_map('trim', explode(',', $package['tags'])) as $tag)
                                    <span class="offerings-chip">{{ $tag }}</span>
                                @endforeach
                            </div>

                            <a class="package-more" href="{{ route('contact') }}#callback">View more about this package</a>
                        </article>
                    @endforeach
                </aside>
            </div>
        </div>
    </div>
</div>