@php
    $contactItems = [
        ['icon' => 'MapPinIcon', 'label' => 'Casablanca', 'sub' => '32 Rue des Eperviers'],
        ['icon' => 'EnvelopeIcon', 'label' => 'contact@atirao.ma', 'sub' => ''],
    ];
@endphp

<section id="contact" class="atirao-contact" aria-labelledby="atirao-contact-title" data-atirao-reveal-section>
    <div class="atirao-contact__grid-bg" aria-hidden="true"></div>
    <div class="atirao-contact__glow atirao-contact__glow--large" aria-hidden="true"></div>
    <div class="atirao-contact__glow atirao-contact__glow--small" aria-hidden="true"></div>

    <div class="atirao-container atirao-contact__layout">
        <div class="atirao-contact__details atirao-reveal" data-atirao-reveal>
            <div class="atirao-section-label atirao-section-label--red">
                <span></span>
                Demarrons ensemble
            </div>
            <h2 id="atirao-contact-title">
                Prendre<br>
                <span>rendez-vous.</span>
            </h2>
            <p>
                Discutons de votre stratégie digitale. Audit gratuit, analyse de votre positionnement et roadmap
                personnalisée, sans engagement.
            </p>

            <div class="atirao-contact__list" aria-label="Coordonnées">
                @foreach ($contactItems as $item)
                    <div>
                        <span><x-ui.icon :name="$item['icon']" :size="18" /></span>
                        <p>
                            <strong>{{ $item['label'] }}</strong>
                            @if ($item['sub'])
                                <small>{{ $item['sub'] }}</small>
                            @endif
                        </p>
                    </div>
                @endforeach
            </div>

            <div class="atirao-contact__trust">
                <span><x-ui.icon name="ShieldCheckIcon" :size="19" /></span>
                <p>
                    <strong>Échange confidentiel</strong>
                    <small>Vos informations restent strictement privées.</small>
                </p>
            </div>
        </div>

        <div class="atirao-contact__form atirao-reveal" data-atirao-reveal>
            <form data-atirao-contact-form data-submit-url="{{ route('contact.submit') }}" novalidate>
                @csrf
                <div class="atirao-contact__form-heading">
                    <div>
                        <span>Votre projet</span>
                        <h3>Parlez-nous de votre ambition.</h3>
                    </div>
                    <p><span aria-hidden="true"></span> 2 min</p>
                </div>

                <div class="atirao-contact__row">
                    <div class="atirao-field">
                        <input id="home-last-name" name="last_name" type="text" placeholder=" " autocomplete="family-name" required>
                        <label for="home-last-name">Nom</label>
                    </div>
                    <div class="atirao-field">
                        <input id="home-first-name" name="first_name" type="text" placeholder=" " autocomplete="given-name" required>
                        <label for="home-first-name">Prénom</label>
                    </div>
                </div>

                <div class="atirao-contact__row">
                    <div class="atirao-field">
                        <input id="home-email" name="email" type="email" placeholder=" " autocomplete="email" required>
                        <label for="home-email">Adresse e-mail</label>
                    </div>
                    <div class="atirao-field">
                        <input id="home-phone" name="phone" type="tel" placeholder=" " autocomplete="tel" required>
                        <label for="home-phone">Téléphone</label>
                    </div>
                </div>

                <div class="atirao-field">
                    <textarea id="home-message" name="message" rows="4" placeholder=" " required></textarea>
                    <label for="home-message">Votre message</label>
                </div>

                <div class="atirao-contact__error is-hidden" role="alert" data-atirao-contact-error></div>
                <div class="atirao-contact__success is-hidden" role="status" tabindex="-1" data-atirao-contact-success>
                    <div class="atirao-contact__success-icon">
                        <span><x-ui.icon name="CheckIcon" :size="28" /></span>
                    </div>
                    <div class="atirao-contact__success-copy">
                        <span>Demande envoyée</span>
                        <h3>Merci, c’est bien reçu.</h3>
                        <p>Notre équipe revient vers vous sous 24 h.</p>
                    </div>
                    <div class="atirao-contact__success-sparkles" aria-hidden="true">
                        <i></i><i></i><i></i><i></i><i></i>
                    </div>
                </div>

                <button class="atirao-button atirao-button--primary atirao-button--large" type="submit" data-atirao-contact-submit>
                    <span data-atirao-contact-submit-label>Demander un audit gratuit</span>
                    <x-ui.icon name="ArrowRightIcon" :size="17" />
                </button>
                <p class="atirao-contact__note">Réponse garantie sous 24 h - sans engagement</p>
            </form>
        </div>
    </div>
</section>