@php
    $kenyaBranches = [
        [
            'id' => 'nairobi-branch',
            'name' => 'Nairobi Branch',
            'address' => 'The Atrium Building, Chaka Road, 4th Floor, Suite 4.07',
            'email' => 'uza@uzapoint.com',
            'phone' => '+254 705 679 297',
            'phone_href' => 'tel:+254705679297',
        ],
        [
            'id' => 'mombasa-branch',
            'name' => 'Mombasa Branch',
            'address' => 'Mombasa, Kenya',
            'email' => 'ke@uzapoint.com',
            'phone' => '+254 704 502 414',
            'phone_href' => 'tel:+254704502414',
        ],
        [
            'id' => 'eldoret-branch',
            'name' => 'Eldoret Branch',
            'address' => 'Eldoret, Kenya',
            'email' => 'ke@uzapoint.com',
            'phone' => '+254 704 502 414',
            'phone_href' => 'tel:+254704502414',
        ],
    ];

    $regionalOffices = [
        ['country' => 'Kenya', 'city' => 'Nairobi', 'flag' => 'ke', 'email' => 'ke@uzapoint.com', 'phone' => '+254 704 502 414', 'phone_href' => 'tel:+254704502414'],
        ['country' => 'Tanzania', 'city' => 'Dar Es Salaam', 'flag' => 'tz', 'email' => 'tz@uzapoint.com', 'phone' => '+255 680 321 796', 'phone_href' => 'tel:+255680321796'],
        ['country' => 'Uganda', 'city' => 'Kampala', 'flag' => 'ug', 'email' => 'ke@uzapoint.com', 'phone' => '+254 704 502 414', 'phone_href' => 'tel:+254704502414'],
        ['country' => 'Rwanda', 'city' => 'Kigali', 'flag' => 'rw', 'email' => 'rw@uzapoint.com', 'phone' => '+250 793 945 285', 'phone_href' => 'tel:+250793945285'],
        ['country' => 'Zambia', 'city' => 'Lusaka', 'flag' => 'zm', 'email' => 'ke@uzapoint.com', 'phone' => '+254 704 502 414', 'phone_href' => 'tel:+254704502414'],
        ['country' => 'Nigeria', 'city' => 'Lagos', 'flag' => 'ng', 'email' => 'ke@uzapoint.com', 'phone' => '+254 704 502 414', 'phone_href' => 'tel:+254704502414'],
        ['country' => 'South Africa', 'city' => 'Johannesburg', 'flag' => 'za', 'email' => 'ke@uzapoint.com', 'phone' => '+254 704 502 414', 'phone_href' => 'tel:+254704502414'],
    ];
@endphp

<section class="contact-offices-section" aria-labelledby="contact-offices-title">
    <div class="contact-offices-shell">
        <header class="contact-section-header contact-section-header--left reveal">
            <span class="section-label">Our offices</span>
            <h2 class="section-title section-title-left" id="contact-offices-title">Come and say hi <span aria-hidden="true">👋</span></h2>
            <p class="contact-section-sub">We're located at stylish places just like you. Feel free to pass by and say hi, or reach out to the team nearest you.</p>
        </header>

        <div class="contact-branches-grid reveal" style="--reveal-delay: 80ms">
            @foreach ($kenyaBranches as $branch)
                <article class="contact-branch-card" id="{{ $branch['id'] }}">
                    <div class="contact-branch-icon" aria-hidden="true">
                        <x-icon name="building" />
                    </div>
                    <h3 class="contact-branch-name">{{ $branch['name'] }}</h3>
                    <p class="contact-branch-address">
                        <x-icon name="map-pin" />
                        <span>{{ $branch['address'] }}</span>
                    </p>
                    <a class="contact-branch-line" href="mailto:{{ $branch['email'] }}">
                        <x-icon name="mail" />
                        <span>{{ $branch['email'] }}</span>
                    </a>
                    <a class="contact-branch-line" href="{{ $branch['phone_href'] }}">
                        <x-icon name="phone" />
                        <span>{{ $branch['phone'] }}</span>
                    </a>
                </article>
            @endforeach
        </div>

    </div>
</section>

<section class="contact-presence-section" aria-labelledby="contact-presence-title">
    <div class="contact-presence-shell">
        <header class="contact-presence-header reveal">
            <span class="section-label">Pan-African reach</span>
            <h2 class="section-title" id="contact-presence-title">Where we <span class="teal-gradient-text">operate</span></h2>
            <p class="contact-presence-lead">Local teams and support across seven markets. Reach the desk closest to your business.</p>
        </header>

        <div class="contact-presence-grid">
            @foreach ($regionalOffices as $index => $office)
                <article class="contact-region-card reveal" style="--reveal-delay: {{ $index * 60 }}ms">
                    <div class="contact-region-flag" aria-hidden="true">
                        <img src="https://flagcdn.com/w80/{{ $office['flag'] }}.png" alt="" width="40" height="28" loading="lazy">
                    </div>

                    <div class="contact-region-body">
                        <span class="contact-region-country">{{ $office['country'] }}</span>
                        <h3 class="contact-region-city">{{ $office['city'] }}</h3>

                        <div class="contact-region-links">
                            <a class="contact-region-link" href="mailto:{{ $office['email'] }}">
                                <x-icon name="mail" />
                                <span>{{ $office['email'] }}</span>
                            </a>
                            <a class="contact-region-link" href="{{ $office['phone_href'] }}">
                                <x-icon name="phone" />
                                <span>{{ $office['phone'] }}</span>
                            </a>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>