@php
    $industryTabs = [
        ['id' => 'retail', 'label' => 'Retail'],
        ['id' => 'wholesale', 'label' => 'Wholesale Shops'],
        ['id' => 'service', 'label' => 'Service Business'],
        ['id' => 'hospitality', 'label' => 'Hospitality'],
    ];

    $industries = [
        ['icon' => 'shopping-bag', 'name' => 'Liquor stores', 'category' => 'retail'],
        ['icon' => 'sparkles', 'name' => 'Beauty & Cosmetics', 'category' => 'service'],
        ['icon' => 'file-text', 'name' => 'Stationery & Bookshops', 'category' => 'retail'],
        ['icon' => 'package', 'name' => 'Gift shops', 'category' => 'retail'],
        ['icon' => 'shirt', 'name' => 'Fashion & Clothing stores', 'category' => 'retail'],
        ['icon' => 'store', 'name' => 'Supermarkets', 'category' => 'retail'],
        ['icon' => 'pill', 'name' => 'Pharmacies', 'category' => 'service'],
        ['icon' => 'utensils', 'name' => 'Restaurants', 'category' => 'hospitality'],
        ['icon' => 'wrench', 'name' => 'Hardware stores', 'category' => 'service'],
        ['icon' => 'truck', 'name' => 'Distribution', 'category' => 'wholesale'],
    ];
@endphp

<section class="industries-section" id="workshops" aria-labelledby="industries-title">
    <div class="industries-shell">
        <div class="industries-content">
            <header class="industries-header reveal">
                <span class="industries-badge">Built for your world</span>
                <h2 class="industries-title" id="industries-title">
                    Perfect for businesses<br>just like yours
                </h2>
                <a href="{{ route('products') }}" class="btn-ghost industries-more-btn reveal" style="--reveal-delay: 80ms">
                    Learn more about unique features per industry
                </a>
            </header>

            <div class="industries-tabs reveal" role="tablist" aria-label="Industry categories">
                @foreach ($industryTabs as $tab)
                    <button
                        class="ind-tab{{ $loop->first ? ' active' : '' }}"
                        type="button"
                        role="tab"
                        aria-selected="{{ $loop->first ? 'true' : 'false' }}"
                        data-industry-tab="{{ $tab['id'] }}"
                    >{{ $tab['label'] }}</button>
                @endforeach
            </div>

            <div class="industries-showcase reveal" data-industries-showcase>
                @foreach ($industries as $industry)
                    <article
                        class="ind-card"
                        data-industry-category="{{ $industry['category'] }}"
                        @if ($industry['category'] !== 'retail') hidden @endif
                    >
                        <div class="ind-icon"><x-icon :name="$industry['icon']" /></div>
                        <h3 class="ind-name">{{ $industry['name'] }}</h3>
                    </article>
                @endforeach
            </div>

            <div class="industries-dots reveal" aria-hidden="true">
                @foreach ($industryTabs as $tab)
                    <span class="industries-dot{{ $loop->first ? ' is-active' : '' }}" data-industry-dot="{{ $tab['id'] }}"></span>
                @endforeach
            </div>
        </div>
    </div>

    <figure class="industries-visual reveal" style="--reveal-delay: 120ms">
        <span class="industries-visual-shadow" aria-hidden="true"></span>
        <img
            src="{{ asset('img/youth-smiling-faded.png') }}"
            alt="Smiling young African business owner in a green shirt and black apron"
            width="640"
            height="820"
            loading="lazy"
            decoding="async"
        >
    </figure>
</section>