@php use Illuminate\Support\Str; @endphp

<section class="touch py-5" data-aos="fade-up">
    <div class="container text-center">
        <h2 class="main-title mb-4">Get In Touch With Us</h2>
        <div class="row g-4 pt-3">

            @php
                // Define icons you want to use for each contact (in order)
                $icons = [
                    'bi bi-geo-alt',     // Address
                    'bi bi-building',    // Office
                    'bi bi-building',   // Phone
                    'bi bi-building',    // Email
                ];
            @endphp

            @foreach($contacts as $contact)
                <div class="col-md-6 col-xl-3 col-lg-4">
                    <div class="contact-card p-4 border rounded shadow-sm h-100">

                        {{-- Icon --}}
                        <div class="contact-icon-wrapper  mb-3">
                            <i class="{{ $icons[$loop->index] ?? 'bi bi-info-circle' }} contact-icon"></i>
                        </div>

                        {{-- Contact Info --}}
                        <h3 class="fw-bold">{{ $contact->type }}</h3>

                        @if($contact->phone)
                            <p class="mb-1">{{ $contact->phone }}</p>
                        @endif

                        @if($contact->address)
                            <p class="mb-1">{{ $contact->address }}</p>
                        @endif

                        @if($contact->email)
                            <p class="mb-1">{{ $contact->email }}</p>
                        @endif

                        @if($contact->info_primary)
                            <p class="mb-1">{{ $contact->info_primary }}</p>
                        @endif

                        @if($contact->info_secondary)
                            <p class="mb-1">{{ $contact->info_secondary }}</p>
                        @endif
                    </div>
                </div>
            @endforeach

        </div>
    </div>
</section>