@php
    $supportedBusinesses = [
        ['name' => 'LivingGoods', 'logo' => 'livinggoods.png'],
        ['name' => 'Matunda City Resort & Spa', 'logo' => 'matunda.png'],
        ['name' => 'SAMCHI TELECOM', 'wordmark' => 'SAMCHI', 'wordmark_sub' => 'TELECOM'],
        ['name' => 'Country Bistro', 'wordmark' => 'Country Bistro'],
        ['name' => 'TumaMart', 'logo' => 'tumamart.png'],
        ['name' => 'Telkom', 'logo' => 'telkom.png'],
        ['name' => 'ALLURE', 'logo' => 'allure.png'],
        ['name' => 'Quickmart', 'logo' => 'quickmart.png'],
        ['name' => 'New Italycor LTD', 'wordmark' => 'New Italycor', 'wordmark_sub' => 'LTD'],
        ['name' => 'Carrefour', 'logo' => 'carrefour.png'],
    ];
@endphp

<section class="businesses-section" id="businesses" aria-labelledby="businesses-title">
    <div class="businesses-shell">
        <header class="businesses-header reveal">
            <span class="businesses-badge">Businesses We Support</span>
            <h2 class="businesses-title" id="businesses-title">Powering Businesses Across Africa</h2>
        </header>

        <div class="businesses-grid reveal" style="--reveal-delay: 80ms">
            @foreach ($supportedBusinesses as $business)
                <div
                    class="businesses-logo-cell flag-tip"
                    data-tooltip="{{ $business['name'] }}"
                    aria-label="{{ $business['name'] }}"
                >
                    @if (! empty($business['logo']))
                        <img
                            src="{{ asset('img/businesses/' . $business['logo']) }}"
                            alt=""
                            width="160"
                            height="64"
                            loading="lazy"
                            decoding="async"
                        >
                    @else
                        <div class="businesses-wordmark">
                            <span class="businesses-wordmark-main">{{ $business['wordmark'] }}</span>
                            @if (! empty($business['wordmark_sub']))
                                <span class="businesses-wordmark-sub">{{ $business['wordmark_sub'] }}</span>
                            @endif
                        </div>
                    @endif
                </div>
            @endforeach
        </div>

        <p class="businesses-trust reveal" style="--reveal-delay: 140ms">Trusted by over 4,000 businesses across Africa</p>

        <div class="businesses-footer reveal" style="--reveal-delay: 180ms">
            <a href="#businesses" class="offerings-cta">See more Businesses We Support</a>
        </div>
    </div>
</section>