@extends('components.frontend.master')

@section('title', 'Contact Welely - Agence Digitale à Abidjan | Devis Gratuit & Consultation')

@section('meta')
    <meta name="description"
        content="Contactez Welely, agence digitale à Abidjan. Devis gratuit pour vos projets web, mobile et design. Consultation gratuite, accompagnement personnalisé. +225 27 22 50 30 40.">
    <meta name="keywords"
        content="contact agence digitale Abidjan, devis gratuit développement web, consultation digitale, agence web Côte d'Ivoire, demande de projet">
    <meta name="author" content="Welely">
    <meta name="robots" content="index, follow">

    <!-- Open Graph -->
    <meta property="og:title" content="Contact Welely - Agence Digitale à Abidjan | Devis Gratuit & Consultation">
    <meta property="og:description"
        content="Contactez Welely, agence digitale à Abidjan. Devis gratuit pour vos projets web, mobile et design. Consultation gratuite et accompagnement personnalisé.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:image" content="{{ asset('images/logo.png') }}">
    <meta property="og:site_name" content="Welely">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Contact Welely - Agence Digitale Abidjan">
    <meta name="twitter:description"
        content="Devis gratuit pour vos projets web, mobile et design. Consultation gratuite et accompagnement personnalisé.">
    <meta name="twitter:image" content="{{ asset('images/logo.png') }}">

    <!-- Schema.org -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "Welely",
        "url": "{{ url('/') }}",
        "logo": "{{ asset('images/logo.png') }}",
        "contactPoint": {
            "@type": "ContactPoint",
            "telephone": "+225-01-01-05-43-83",
            "contactType": "customer service",
            "areaServed": "CI",
            "availableLanguage": ["French", "English"]
        },
        "address": {
            "@type": "PostalAddress",
            "streetAddress": "12 Boulevard de la République",
            "addressLocality": "Plateau",
            "addressRegion": "Abidjan",
            "addressCountry": "CI"
        },
        "sameAs": [
            "https://wa.me/+2250101054383"
        ]
    }
    </script>
@endsection

@section('content')
    <section class="contact-header">
        <div class="container">
            <nav class="breadcrumb-nav" aria-label="Fil d'Ariane">
                <a href="{{ route('home') }}">Accueil</a>
                <span aria-hidden="true"> / </span>
                <span aria-current="page">Contact</span>
            </nav>
            <h1 data-text="Contactez-Nous">Contactez-Nous</h1>
            <p>Discutons ensemble de votre projet et comment nous pouvons vous aider</p>
        </div>
    </section>

    <section class="contact-main">
        <div class="container">
            <div class="contact-cards">
                <div class="contact-card scroll-animate animate-on-load">
                    <div class="contact-icon">📍</div>
                    <h3>Adresse</h3>
                    <p>Marcory, Abidjan<br>Côte d'Ivoire</p>
                </div>
                <div class="contact-card scroll-animate animate-on-load">
                    <div class="contact-icon">📞</div>
                    <h3>Téléphone</h3>
                    <p>+225 01 01 05 43 83<br>+225 01 01 05 43 83</p>
                </div>
                <div class="contact-card scroll-animate animate-on-load">
                    <div class="contact-icon">✉️</div>
                    <h3>Email</h3>
                    <p>contact@welely.com<br>support@welely.com</p>
                </div>
            </div>

            <div class="contact-form-container">
                <h2 class="scroll-animate animate-on-load" style="margin-bottom: 30px; color: var(--color-primary);">
                    Envoyez-nous un message</h2>
                @if (session('success'))
                    <div class="alert alert-success" role="alert" aria-live="polite"
                        style="margin-bottom: 20px; background-color: #059669; color: white; border: 1px solid #059669; padding: 15px; border-radius: 8px;">
                        {{ session('success') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger" role="alert" aria-live="assertive" style="margin-bottom: 20px;">
                        <ul style="margin: 0; padding-left: 20px;">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form class="contact-form" method="POST" action="{{ route('contact.send') }}" id="contactForm"
                    aria-label="Formulaire de contact" novalidate>
                    @csrf
                    {{-- Token pour vérification du timing --}}
                    @php
                        $formToken = \Illuminate\Support\Str::random(32);
                        \Illuminate\Support\Facades\Cache::put('form_token:' . $formToken, time(), 3600);
                    @endphp
                    <input type="hidden" name="_form_token" value="{{ $formToken }}">

                    {{-- Honeypot - champs invisibles pour piéger les bots --}}
                    <div class="hp-wrap" aria-hidden="true">
                        <label for="hp_fullname">Votre nom complet</label>
                        <input type="text" name="hp_fullname" id="hp_fullname"
                               tabindex="-1" autocomplete="nope"
                               placeholder="John Doe">

                        <label for="hp_company">Votre entreprise</label>
                        <input type="text" name="hp_company" id="hp_company"
                               tabindex="-1" autocomplete="nope"
                               placeholder="Acme Corp">

                        <label for="hp_url">Site web</label>
                        <input type="url" name="hp_url" id="hp_url"
                               tabindex="-1" autocomplete="nope"
                               placeholder="https://example.com">
                    </div>

                    {{-- reCAPTCHA v3 token --}}
                    @if (config('services.recaptcha.site_key'))
                        <input type="hidden" name="g-recaptcha-response" id="recaptchaResponse">
                    @endif

                    <div class="form-row">
                        <div class="form-group">
                            <label for="name">Nom</label>
                            <input type="text" id="name" name="name" placeholder="Votre nom *"
                                value="{{ old('name') }}" required aria-required="true"
                                aria-invalid="{{ $errors->has('name') ? 'true' : 'false' }}"
                                aria-describedby="{{ $errors->has('name') ? 'name-error' : '' }}">
                            @error('name')
                                <span class="error-message" id="name-error" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" name="email" placeholder="Votre email *"
                                value="{{ old('email') }}" required aria-required="true"
                                aria-invalid="{{ $errors->has('email') ? 'true' : 'false' }}"
                                aria-describedby="{{ $errors->has('email') ? 'email-error' : '' }}">
                            @error('email')
                                <span class="error-message" id="email-error" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="phone">Téléphone</label>
                            <input type="tel" id="phone" name="phone" placeholder="Votre téléphone"
                                value="{{ old('phone') }}"
                                aria-invalid="{{ $errors->has('phone') ? 'true' : 'false' }}"
                                aria-describedby="{{ $errors->has('phone') ? 'phone-error' : '' }}">
                            @error('phone')
                                <span class="error-message" id="phone-error" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="subject">Objet</label>
                            <select id="subject" name="subject" required aria-required="true"
                                aria-invalid="{{ $errors->has('subject') ? 'true' : 'false' }}"
                                aria-describedby="{{ $errors->has('subject') ? 'subject-error' : '' }}">
                                <option value="" disabled {{ old('subject') ? '' : 'selected' }}>Objet de votre
                                    message *</option>
                                <option value="audit" {{ old('subject') == 'audit' ? 'selected' : '' }}>Demande un audit
                                </option>
                                <option value="devis" {{ old('subject') == 'devis' ? 'selected' : '' }}>Demande de devis
                                </option>
                                <option value="info" {{ old('subject') == 'info' ? 'selected' : '' }}>Renseignements
                                </option>
                                <option value="partenariat" {{ old('subject') == 'partenariat' ? 'selected' : '' }}>
                                    Proposition de partenariat</option>
                                <option value="autre" {{ old('subject') == 'autre' ? 'selected' : '' }}>Autre</option>
                            </select>
                            @error('subject')
                                <span class="error-message" id="subject-error" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea id="message" name="message" class="form-group" rows="6" placeholder="Votre message *" required
                            aria-required="true" aria-invalid="{{ $errors->has('message') ? 'true' : 'false' }}"
                            aria-describedby="{{ $errors->has('message') ? 'message-error' : '' }}">{{ old('message') }}</textarea>
                        @error('message')
                            <span class="error-message" id="message-error" role="alert">{{ $message }}</span>
                        @enderror
                    </div>

                    <button type="submit" class="btn btn-secondary btn-full" id="submitBtn"
                        aria-label="Envoyer le formulaire de contact">
                        <span class="btn-text">Envoyer le message</span>
                        <span class="btn-loading" style="display: none;">
                            <svg class="spinner" width="20" height="20" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M12 18V22" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M4.93 4.93L7.76 7.76" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M16.24 16.24L19.07 19.07" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M2 12H6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M18 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M4.93 19.07L7.76 16.24" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M16.24 7.76L19.07 4.93" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            Envoi en cours...
                        </span>
                    </button>
                    <p class="form-reassurance">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        Vos données sont confidentielles · Réponse sous 24h
                    </p>
                </form>
            </div>
        </div>

        <div class="map">
            <!-- Ici on placerait normalement une carte Google Maps -->
            {{-- <img src="/api/placeholder/1200/400" alt="Carte de localisation"> --}}
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4438.3489831575525!2d-3.9830429003548318!3d5.295760586428412!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfc1ee9ef0f06397%3A0x9923a48ebd9e7d45!2sMarcory%2C%20Abidjan!5e1!3m2!1sfr!2sci!4v1751555180740!5m2!1sfr!2sci"
                style="border:0;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </section>
@endsection

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

@endsection
@section('scripts')
    {{-- reCAPTCHA v3 --}}
    @if (config('services.recaptcha.site_key'))
        <script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}"></script>
    @endif
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        const countries = {
            'Côte d\'Ivoire': ['Abidjan', 'Bouaké', 'Yamoussoukro', 'San Pedro', 'Daloa', 'Korhogo', 'Man', 'Gagnoa',
                'Soubré', 'Agboville', 'Divo', 'Anyama', 'Abengourou', 'Bondoukou', 'Séguéla', 'Odienné',
                'Ferkessédougou', 'Issia', 'Sinfra', 'Sassandra'
            ],
            'France': ['Paris', 'Marseille', 'Lyon', 'Toulouse', 'Nice', 'Nantes', 'Strasbourg', 'Montpellier',
                'Bordeaux', 'Lille'
            ],
            'Sénégal': ['Dakar', 'Thiès', 'Kaolack', 'Saint-Louis', 'Ziguinchor', 'Diourbel', 'Louga', 'Tambacounda',
                'Kolda', 'Fatick'
            ],
            'Mali': ['Bamako', 'Sikasso', 'Kayes', 'Koutiala', 'Ségou', 'Mopti', 'Gao', 'Kati', 'Kolokani', 'San'],
            'Burkina Faso': ['Ouagadougou', 'Bobo-Dioulasso', 'Koudougou', 'Banfora', 'Ouahigouya', 'Pouytenga',
                'Dédougou', 'Tenkodogo', 'Houndé', 'Kaya'
            ],
            'Cameroun': ['Douala', 'Yaoundé', 'Garoua', 'Bamenda', 'Maroua', 'Bafoussam', 'Ngaoundéré', 'Bertoua',
                'Loum', 'Kumba'
            ],
            // ... tu peux ajouter d'autres pays ici ...
        };
        $(document).ready(function() {
            $('#country').select2({
                placeholder: 'Votre pays',
                allowClear: true,
                width: '100%'
            });
            $('#city').select2({
                placeholder: 'Votre ville',
                allowClear: true,
                width: '100%'
            });
            $('#country').on('change', function() {
                const country = $(this).val();
                const $city = $('#city');
                $city.empty();
                if (country && countries[country]) {
                    countries[country].forEach(function(city) {
                        $city.append(new Option(city, city));
                    });
                }
                $city.val(null).trigger('change');
            });

            // Gestion de l'animation de chargement et reCAPTCHA
            $('#contactForm').on('submit', function(e) {
                const $submitBtn = $('#submitBtn');
                const $btnText = $submitBtn.find('.btn-text');
                const $btnLoading = $submitBtn.find('.btn-loading');

                // Si reCAPTCHA est configuré, obtenir le token avant soumission
                @if (config('services.recaptcha.site_key'))
                    e.preventDefault();
                    grecaptcha.ready(function() {
                        grecaptcha.execute('{{ config('services.recaptcha.site_key') }}', {
                            action: 'contact'
                        }).then(function(token) {
                            document.getElementById('recaptchaResponse').value = token;
                            // Désactiver le bouton et afficher l'animation
                            $submitBtn.prop('disabled', true);
                            $btnText.hide();
                            $btnLoading.show();
                            // Soumettre le formulaire
                            document.getElementById('contactForm').submit();
                        });
                    });
                @else
                    // Désactiver le bouton et afficher l'animation
                    $submitBtn.prop('disabled', true);
                    $btnText.hide();
                    $btnLoading.show();
                @endif
            });
        });
    </script>
@endsection