@php
    $contactOptions = [
        [
            'icon' => 'users',
            'kicker' => 'Sales & demos',
            'title' => 'Talk to a member of our team',
            'copy' => 'Want to see Uzapoint in action or learn how it could grow your business? Our team of specialists are on hand to help.',
            'cta' => 'Give us a call',
            'href' => 'tel:+254704502414',
            'image' => 'https://images.unsplash.com/photo-1687422809654-579d81c29d32?w=640&q=80&auto=format&fit=crop',
            'image_alt' => 'African shop owner using her phone at a market stall',
        ],
        [
            'icon' => 'message-circle',
            'kicker' => 'Customer care',
            'title' => 'Need any help or support?',
            'copy' => 'Whether you have questions, encounter issues, or simply want to share feedback, our dedicated support team is here for you.',
            'cta' => 'Call support',
            'href' => 'tel:+254704502414',
            'image' => 'https://images.unsplash.com/photo-1687422808384-c896d0efd4ab?w=640&q=80&auto=format&fit=crop',
            'image_alt' => 'African business owner receiving customer support on mobile',
        ],
        [
            'icon' => 'phone',
            'kicker' => 'We call you',
            'title' => 'Request a call back from our team',
            'copy' => 'Want us to call you? We are happy to set up a conversation to discuss your needs. Fill out the form and we will get back to you asap.',
            'cta' => 'Request a call back',
            'href' => '#callback',
            'image' => 'https://images.unsplash.com/photo-1761370571806-886404629697?w=640&q=80&auto=format&fit=crop',
            'image_alt' => 'African retailer reviewing sales on a tablet at checkout',
        ],
    ];
@endphp

<section class="contact-options-section" aria-labelledby="contact-options-title">
    <div class="contact-options-shell">
        <header class="contact-section-header reveal">
            <span class="section-label">How can we help?</span>
            <h2 class="section-title" id="contact-options-title">Choose the path that fits <span class="teal-gradient-text">your need</span></h2>
            <p class="contact-section-sub">Speak with sales, reach support directly, or send us your details and we will call you back.</p>
        </header>

        <div class="contact-options-grid">
            @foreach ($contactOptions as $index => $option)
                <article class="contact-option-card reveal" style="--reveal-delay: {{ $index * 90 }}ms">
                    <div class="contact-option-visual">
                        <img src="{{ $option['image'] }}" alt="{{ $option['image_alt'] }}" loading="lazy" decoding="async">
                        <span class="contact-option-visual-bg" aria-hidden="true"></span>
                    </div>

                    <div class="contact-option-body">
                        <div class="contact-option-icon">
                            <x-icon :name="$option['icon']" />
                        </div>
                        <span class="contact-option-kicker">{{ $option['kicker'] }}</span>
                        <h3 class="contact-option-title">{{ $option['title'] }}</h3>
                        <p class="contact-option-copy">{{ $option['copy'] }}</p>
                        <a class="contact-option-cta" href="{{ $option['href'] }}">{{ $option['cta'] }}</a>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>