@extends('components.frontend.master')

@section('title', 'Welely - Agence Digitale à Abidjan | Développement Web, Mobile & Design')

@section('meta')
    <meta name="description"
        content="Welely, agence digitale à Abidjan spécialisée en développement web, applications mobiles et design graphique. Solutions sur mesure pour PME et entrepreneurs africains. Devis gratuit.">
    <meta name="keywords"
        content="agence digitale Abidjan, développement web Côte d'Ivoire, application mobile, design graphique, site web, e-commerce, transformation digitale">
    <meta name="author" content="Welely">
    <meta name="robots" content="index, follow">

    <!-- Open Graph -->
    <meta property="og:title" content="Welely - Agence Digitale à Abidjan | Développement Web, Mobile & Design">
    <meta property="og:description"
        content="Solutions digitales sur mesure pour PME et entrepreneurs africains. Développement web, applications mobiles, design graphique. Devis gratuit.">
    <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="Welely - Agence Digitale à Abidjan">
    <meta name="twitter:description"
        content="Solutions digitales sur mesure pour PME et entrepreneurs africains. Développement web, mobile, design graphique.">
    <meta name="twitter:image" content="{{ asset('images/logo.png') }}">

    <!-- Local Business -->
    <meta name="geo.region" content="CI">
    <meta name="geo.placename" content="Abidjan">
    <meta name="geo.position" content="5.3600;-4.0083">
    <meta name="ICBM" content="5.3600, -4.0083">
@endsection

@section('content')
    <section class="hero">
        <div class="container hero-content">
            <span class="hero-badge">Agence digitale · Abidjan, Côte d'Ivoire</span>
            <h1 class="hero-title">
                La fin du<br>
                <span class="hero-highlight">business invisible.</span>
            </h1>
            <p class="hero-subtitle">
                Welely transforme les entrepreneurs et PME africains en acteurs
                digitaux visibles, crédibles et performants. Du site web au branding,
                de la stratégie à la production visuelle.
            </p>
            <div class="hero-ctas">
                <a href="https://wa.me/+2250101054383?text=Bonjour%20Welely,%20j'aimerais%20échanger%20avec%20vous%20au%20sujet%20d'un%20projet%20digital%20(pour%20mon%20site,%20application%20ou%20identité%20visuelle).%20Pourriez-vous%20me%20donner%20plus%20d'informations%20sur%20vos%20services%20et%20votre%20accompagnement%20?"
                    class="btn btn-tertiary">💬 Discuter de mon projet</a>
                <a href="#packages" class="btn-secondary-hero">Voir nos offres ↓</a>
            </div>
            <p class="hero-reassurance">Réponse sous 2h · Sans engagement · 100% gratuit</p>
            <div class="hero-stats">
                <div class="hero-stat">
                    <span class="stat-num">+10<span class="stat-unit">ans</span></span>
                    <span class="stat-label">d'expérience</span>
                </div>
                <div class="hero-stat">
                    <span class="stat-num">100<span class="stat-unit">%</span></span>
                    <span class="stat-label">sur mesure</span>
                </div>
                <div class="hero-stat">
                    <span class="stat-num">360<span class="stat-unit">°</span></span>
                    <span class="stat-label">digital & créatif</span>
                </div>
            </div>
        </div>
        <div class="hero-wave" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60" preserveAspectRatio="none">
                <path fill="#ffffff" d="M0,20 C360,60 1080,0 1440,40 L1440,60 L0,60 Z" />
            </svg>
        </div>
    </section>

    {{-- Barre Social Proof --}}
    <section class="pain-banner">
        <div class="pain-banner__inner">
            <h2 class="pain-banner__title">Votre business mérite d'être vu.</h2>
            <p class="pain-banner__sub">
                Des milliers d'entrepreneurs africains travaillent dur mais restent
                invisibles en ligne. Welely est né pour changer ça.
            </p>
            <div class="pain-banner__tags">
                <span class="pain-tag"><span class="pain-x">✗</span> Pas de site professionnel</span>
                <span class="pain-tag"><span class="pain-x">✗</span> Aucune stratégie digitale</span>
                <span class="pain-tag"><span class="pain-x">✗</span> Image de marque inexistante</span>
                <span class="pain-tag"><span class="pain-x">✗</span> Clients difficiles à trouver</span>
            </div>
        </div>
    </section>

    <section id="packages" class="packages-section">
        <div class="section-header">
            <span class="section-label">Nos offres</span>
            <h2 class="pkg-heading">Choisissez votre niveau<br>de transformation.</h2>
            <p class="section-subtitle">
                Trois packages pensés pour démarrer, accélérer ou transformer
                votre présence digitale.
            </p>
        </div>

        <div class="packages-grid">

            {{-- LAUNCH --}}
            <div class="pkg-card">
                <span class="pkg-badge">Lancement</span>
                <h3 class="pkg-name">Welely Launch</h3>
                <p class="pkg-desc">Pour les entrepreneurs qui démarrent et veulent une présence professionnelle dès le
                    premier jour.</p>
                <ul class="pkg-features">
                    <li>Logo + charte graphique complète</li>
                    <li>Site vitrine (5 pages)</li>
                    <li>Réseaux sociaux configurés</li>
                    <li>Formulaire de contact</li>
                    <li>Formation prise en main</li>
                </ul>
                <a href="https://wa.me/+2250101054383?text={{ urlencode("Bonjour Welely 👋\n\nJe suis intéressé(e) par le package *Welely Launch* (Logo + site vitrine + réseaux sociaux).\n\nPourriez-vous me donner plus d'informations et établir un devis gratuit ?\n\nMerci !") }}" class="pkg-cta" target="_blank" rel="noopener noreferrer">Démarrer →</a>
                <p class="pkg-reassurance">Devis gratuit · Sans engagement</p>
            </div>

            {{-- SCALE (featured) --}}
            <div class="pkg-card pkg-card--featured">
                <span class="pkg-badge pkg-badge--featured">Le plus populaire</span>
                <h3 class="pkg-name">Welely Scale</h3>
                <p class="pkg-desc">Pour les PME existantes qui veulent accélérer leur croissance digitale.</p>
                <ul class="pkg-features">
                    <li>Tout ce qui est inclus dans Launch</li>
                    <li>Site e-commerce ou application</li>
                    <li>Stratégie de contenu 3 mois</li>
                    <li>Couverture photo & vidéo</li>
                    <li>Suivi de performance mensuel</li>
                </ul>
                <a href="https://wa.me/+2250101054383?text={{ urlencode("Bonjour Welely 👋\n\nJe suis intéressé(e) par le package *Welely Scale* (E-commerce / application + stratégie de contenu + photo & vidéo).\n\nPourriez-vous me donner plus d'informations et établir un devis gratuit ?\n\nMerci !") }}" class="pkg-cta pkg-cta--featured" target="_blank" rel="noopener noreferrer">Accélérer →</a>
                <p class="pkg-reassurance pkg-reassurance--featured">Devis gratuit · Sans engagement</p>
            </div>

            {{-- TRANSFORM --}}
            <div class="pkg-card">
                <span class="pkg-badge pkg-badge--amber">Entreprise</span>
                <h3 class="pkg-name">Welely Transform</h3>
                <p class="pkg-desc">Pour les entreprises structurées qui veulent une transformation digitale complète.</p>
                <ul class="pkg-features">
                    <li>Tout ce qui est inclus dans Scale</li>
                    <li>Consulting stratégique personnalisé</li>
                    <li>Automatisation & intégration CRM</li>
                    <li>Suivi mensuel dédié</li>
                    <li>Roadmap digitale sur 12 mois</li>
                </ul>
                <a href="https://wa.me/+2250101054383?text={{ urlencode("Bonjour Welely 👋\n\nJe suis intéressé(e) par le package *Welely Transform* (Transformation digitale complète + consulting + CRM + roadmap 12 mois).\n\nPourriez-vous me donner plus d'informations et établir un devis gratuit ?\n\nMerci !") }}" class="pkg-cta" target="_blank" rel="noopener noreferrer">Transformer →</a>
                <p class="pkg-reassurance">Devis gratuit · Sans engagement</p>
            </div>

        </div>
    </section>

    <section class="services">
        <div class="container">
            <div class="section-title">
                <h2>Nos Services</h2>
                <p>Des solutions digitales complètes et adaptées à vos besoins spécifiques.</p>
            </div>
            <div class="services-grid">
                <div class="service-card scroll-animate animate-on-load">
                    <div class="service-img">
                        <img src="{{ asset('images/developpement-web.jpg') }}" alt="Développement Web">
                    </div>
                    <div class="service-content">
                        <h3>Développement Web</h3>
                        <p>Sites vitrine, e-commerce et plateformes sur mesure, conçus avec des technologies modernes,
                            sécurisées et évolutives.</p>
                        <a href="{{ route('services') }}" class="btn btn-secondary">En savoir plus</a>
                    </div>
                </div>
                <div class="service-card scroll-animate animate-on-load">
                    <div class="service-img">
                        <img src="{{ asset('images/developpement-mobile.jpg') }}" alt="Applications Mobiles">
                    </div>
                    <div class="service-content">
                        <h3>Applications Mobiles</h3>
                        <p>Applications natives ou hybrides, ergonomiques et performantes, adaptées aux réalités du marché
                            africain.</p>
                        <a href="{{ route('services') }}" class="btn btn-secondary">En savoir plus</a>
                    </div>
                </div>
                <div class="service-card scroll-animate animate-on-load">
                    <div class="service-img">
                        <img src="{{ asset('images/graphique-design.jpg') }}" alt="Design & Branding">
                    </div>
                    <div class="service-content">
                        <h3>Design & Branding</h3>
                        <p>Logos, chartes graphiques, UI/UX et supports de communication qui reflètent l'essence de votre
                            marque.</p>
                        <a href="{{ route('services') }}" class="btn btn-secondary">En savoir plus</a>
                    </div>
                </div>
                <div class="service-card scroll-animate animate-on-load">
                    <div class="service-img">
                        <img src="{{ asset('images/photographie-videographie.jpg') }}" alt="Photo & Vidéo">
                    </div>
                    <div class="service-content">
                        <h3>Photo & Vidéo</h3>
                        <p>Productions visuelles professionnelles : photos corporate, vidéos promotionnelles et couvertures
                            d'événements.</p>
                        <a href="{{ route('services') }}" class="btn btn-secondary">En savoir plus</a>
                    </div>
                </div>
                <div class="service-card scroll-animate animate-on-load">
                    <div class="service-img">
                        <img src="{{ asset('images/consulting-strategie.jpg') }}" alt="Consulting & Stratégie">
                    </div>
                    <div class="service-content">
                        <h3>Consulting & Stratégie</h3>
                        <p>Accompagnement personnalisé en stratégie digitale, structuration de projets et positionnement de
                            marque.</p>
                        <a href="{{ route('services') }}" class="btn btn-secondary">En savoir plus</a>
                    </div>
                </div>
                <div class="service-card scroll-animate animate-on-load">
                    <div class="service-img">
                        <img src="{{ asset('images/automatisation.jpg') }}" alt="Automatisation">
                    </div>
                    <div class="service-content">
                        <h3>Automatisation</h3>
                        <p>Intégration d'outils numériques et automatisation de processus pour gagner du temps et scaler
                            votre activité.
                        </p>
                        <a href="{{ route('services') }}" class="btn btn-secondary">En savoir plus</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about">
        <div class="container">
            <div class="about-content">
                <div class="about-text scroll-animate animate-on-load">
                    <h2>Qui sommes-nous?</h2>
                    <p>Welely est née d'un profond désir d'être utile aux autres, en offrant des solutions digitales
                        personnalisées qui répondent réellement aux besoins professionnels de nos clients.</p>
                    <p>Notre objectif est de permettre à chaque entrepreneur, petite entreprise ou projet individuel
                        d'atteindre ses objectifs, de satisfaire ses clients, et de se démarquer grâce à des outils
                        performants, modernes et adaptés.</p>
                    <a href="{{ route('about') }}" class="btn btn-secondary">Découvrir notre histoire</a>
                </div>
                <div class="about-img scroll-animate animate-on-load">
                    <img src="{{ asset('images/qui-sommes-nous.png') }}" alt="À propos de Welely">
                </div>
            </div>
        </div>
    </section>

    <section class="portfolio">
        <div class="container">
            <div class="section-title">
                <h2>Notre Portfolio</h2>
                <p>Découvrez nos réalisations récentes et comment nous avons aidé nos clients à se développer.</p>
            </div>

            @if($featuredProjects->isNotEmpty())
                <div class="portfolio-grid">
                    @foreach($featuredProjects as $project)
                        @php
                            $projectCategories = is_array($project->categories) && count($project->categories)
                                ? $project->categories
                                : [$project->project_type];
                            $techStack = is_array($project->tech_stack) ? array_slice($project->tech_stack, 0, 3) : [];
                            $descriptionShort = $project->subtitle ?: Str::limit($project->description, 100);
                        @endphp
                        <article class="pf-card scroll-animate animate-on-load {{ $project->is_featured ? 'pf-card--featured' : '' }}">
                            <div class="pf-card__visual">
                                @if($project->featured_image)
                                    <img src="{{ asset('storage/' . $project->featured_image) }}"
                                         alt="{{ $project->title }}"
                                         class="pf-card__img" loading="lazy">
                                @else
                                    <div class="pf-card__placeholder"></div>
                                @endif
                                <div class="pf-card__badges">
                                    <span class="pf-badge pf-badge--type">{{ $project->project_type }}</span>
                                </div>
                                @if($project->project_year)
                                    <span class="pf-card__year">{{ $project->project_year }}</span>
                                @endif
                            </div>
                            <div class="pf-card__body">
                                <div class="pf-card__cats">
                                    @foreach(array_slice($projectCategories, 0, 2) as $cat)
                                        <span class="pf-cat">{{ $cat }}</span>
                                    @endforeach
                                </div>
                                <h3 class="pf-card__title">{{ $project->title }}</h3>
                                @if($descriptionShort)
                                    <p class="pf-card__desc">{{ $descriptionShort }}</p>
                                @endif
                                @if($project->stat_1_value)
                                    <div class="pf-card__stats">
                                        <div class="pf-stat">
                                            <span class="pf-stat__value">{{ $project->stat_1_value }}</span>
                                            <span class="pf-stat__label">{{ $project->stat_1_label }}</span>
                                        </div>
                                        @if($project->stat_2_value)
                                            <div class="pf-stat">
                                                <span class="pf-stat__value">{{ $project->stat_2_value }}</span>
                                                <span class="pf-stat__label">{{ $project->stat_2_label }}</span>
                                            </div>
                                        @endif
                                    </div>
                                @endif
                                <div class="pf-card__footer">
                                    @if(!empty($techStack))
                                        <div class="pf-techs">
                                            @foreach($techStack as $tech)
                                                <span class="pf-tech">{{ $tech }}</span>
                                            @endforeach
                                        </div>
                                    @endif
                                    <a href="{{ route('project.detail', $project->slug) }}" class="pf-card__cta">
                                        Voir le projet
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                                    </a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                <div class="portfolio-cta-link">
                    <a href="{{ route('portfolio') }}" class="btn btn-outline-primary">
                        Voir tous nos projets
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </a>
                </div>
            @endif
        </div>
    </section>

    <section class="social-proof-bar" aria-label="Ils nous font confiance">
        <div class="container">
            <div class="section-title">
                <h2>Ils nous font confiance</h2>
                <p>Des entrepreneurs, PME et ONG qui ont choisi Welely pour leur transformation digitale.</p>
            </div>
        </div>
        @if ($trustedCompanies->isNotEmpty())
            <div class="social-proof-track" aria-hidden="true">
                <div class="social-proof-logos">
                    {{-- Set 1 --}}
                    @foreach ($trustedCompanies as $company)
                        <span class="sp-logo">
                            @if ($company->logo_path)
                                <img src="{{ Storage::url($company->logo_path) }}" alt="{{ $company->name }}"
                                    class="sp-logo-img">
                            @else
                                <span class="sp-logo-icon"
                                    style="background: linear-gradient(135deg, {{ $company->color_from }}, {{ $company->color_to }})">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                                        stroke="white" stroke-width="2.5" stroke-linecap="round"
                                        stroke-linejoin="round">
                                        @include('partials.frontend.sp-icon', ['icon' => $company->icon])
                                    </svg>
                                </span>
                            @endif
                            <span class="sp-logo-name">{{ $company->name }}</span>
                        </span>
                    @endforeach
                    {{-- Set 2 : duplicate pour le défilement infini --}}
                    @foreach ($trustedCompanies as $company)
                        <span class="sp-logo">
                            @if ($company->logo_path)
                                <img src="{{ Storage::url($company->logo_path) }}" alt="{{ $company->name }}"
                                    class="sp-logo-img">
                            @else
                                <span class="sp-logo-icon"
                                    style="background: linear-gradient(135deg, {{ $company->color_from }}, {{ $company->color_to }})">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                                        stroke="white" stroke-width="2.5" stroke-linecap="round"
                                        stroke-linejoin="round">
                                        @include('partials.frontend.sp-icon', ['icon' => $company->icon])
                                    </svg>
                                </span>
                            @endif
                            <span class="sp-logo-name">{{ $company->name }}</span>
                        </span>
                    @endforeach
                </div>
            </div>
        @endif
        {{-- Bloc vide supprimé --}}
    </section>

    <section class="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>Témoignages Clients</h2>
                <p>Ce que disent nos clients à propos de nos services et de notre approche personnalisée.</p>
            </div>
            <div class="testimonial-container">
                <div class="testimonial scroll-animate animate-on-load">
                    <div class="testimonial-text">
                        Welely a su comprendre nos besoins et nous proposer des solutions parfaitement adaptées à notre
                        activité. Notre site e-commerce a transformé notre façon de faire des affaires et nous a permis
                        d'atteindre une clientèle internationale.
                    </div>
                    <div class="client-info">
                        <div class="client-img">
                            <img src="{{ asset('images/profil.png') }}" alt="Client">
                        </div>
                        <h4 class="client-name">Konan Kouamé</h4>
                        <p class="client-position">Fondateur, Cacao Délices</p>
                    </div>
                </div>
                <div class="testimonial scroll-animate animate-on-load">
                    <div class="testimonial-text">
                        De la création du logo au lancement du site, l'équipe a été professionnelle, réactive et
                        vraiment à l'écoute. Le résultat dépasse mes attentes.
                    </div>
                    <div class="client-info">
                        <div class="client-img">
                            <img src="{{ asset('images/profil.png') }}" alt="Client">
                        </div>
                        <h4 class="client-name">Aïcha Bamba</h4>
                        <p class="client-position">Directrice · AfriBio Cosmetics</p>
                    </div>
                </div>
                <div class="testimonial scroll-animate animate-on-load">
                    <div class="testimonial-text">
                        Grâce à Welely, nous avons une application mobile fonctionnelle et notre présence digitale est
                        enfin à la hauteur de notre ambition.
                    </div>
                    <div class="client-info">
                        <div class="client-img">
                            <img src="{{ asset('images/profil.png') }}" alt="Client">
                        </div>
                        <h4 class="client-name">David Touré</h4>
                        <p class="client-position">CEO · LogiTrack CI</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="process-section">
        <div class="section-header" style="text-align:center; max-width:100%;">
            <span class="section-label">Comment on travaille</span>
            <h2 class="pkg-heading">Simple, rapide, efficace.</h2>
        </div>
        <div class="process-steps">
            <div class="process-step">
                <div class="step-num">01</div>
                <h3 class="step-title">Échange & Découverte</h3>
                <p class="step-desc">On écoute votre projet, vos objectifs et vos contraintes lors d'un premier appel
                    gratuit.</p>
            </div>
            <div class="process-step">
                <div class="step-num">02</div>
                <h3 class="step-title">Proposition sur mesure</h3>
                <p class="step-desc">On vous soumet une offre claire, détaillée et adaptée à votre réalité.</p>
            </div>
            <div class="process-step">
                <div class="step-num">03</div>
                <h3 class="step-title">Création & Livraison</h3>
                <p class="step-desc">Notre équipe conçoit votre solution avec des points d'avancement réguliers.</p>
            </div>
            <div class="process-step">
                <div class="step-num">04</div>
                <h3 class="step-title">Suivi & Croissance</h3>
                <p class="step-desc">On reste à vos côtés après la livraison pour mesurer et amplifier les résultats.</p>
            </div>
        </div>
    </section>

    <div class="wave-divider wave-divider--to-primary" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60" preserveAspectRatio="none">
            <path fill="#1e3a8a" d="M0,40 C360,0 1080,60 1440,20 L1440,60 L0,60 Z" />
        </svg>
    </div>

    <section class="contact">
        <div class="container">
            <div class="contact-grid">
                <div class="contact-info scroll-animate animate-on-load">
                    <h2>Contactez-nous</h2>
                    <p>Vous avez un projet digital en tête ? Discutons-en ensemble et voyons comment Welely peut vous
                        aider à le concrétiser.</p>
                    <div class="contact-details">
                        <div class="contact-item">
                            <i>📱</i>
                            <span>+225 01 01 05 43 83</span>
                        </div>
                        <div class="contact-item">
                            <i>✉️</i>
                            <span>contact@welely.com</span>
                        </div>
                        <div class="contact-item">
                            <i>📍</i>
                            <span>Abidjan, Côte d'Ivoire</span>
                        </div>
                    </div>
                </div>
                <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_home">Votre nom complet</label>
                        <input type="text" name="hp_fullname" id="hp_fullname_home" tabindex="-1" autocomplete="nope" placeholder="John Doe">
                        <label for="hp_company_home">Votre entreprise</label>
                        <input type="text" name="hp_company" id="hp_company_home" tabindex="-1" autocomplete="nope" placeholder="Acme Corp">
                        <label for="hp_url_home">Site web</label>
                        <input type="url" name="hp_url" id="hp_url_home" 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="recaptchaResponseHome">
                    @endif

                    @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
                    <input type="text" placeholder="Votre nom" name="name" id="name" required
                        value="{{ old('name') }}" class="{{ $errors->has('name') ? 'error' : '' }}"
                        aria-required="true" aria-invalid="{{ $errors->has('name') ? 'true' : 'false' }}"
                        aria-describedby="{{ $errors->has('name') ? 'name-error' : '' }}">
                    <input type="email" placeholder="Votre email" name="email" id="email" required
                        value="{{ old('email') }}" class="{{ $errors->has('email') ? 'error' : '' }}"
                        aria-required="true" aria-invalid="{{ $errors->has('email') ? 'true' : 'false' }}"
                        aria-describedby="{{ $errors->has('email') ? 'email-error' : '' }}">
                    <select name="subject" id="subject" required class="{{ $errors->has('subject') ? 'error' : '' }}"
                        aria-required="true" aria-invalid="{{ $errors->has('subject') ? 'true' : 'false' }}"
                        aria-describedby="{{ $errors->has('subject') ? 'subject-error' : '' }}">
                        <option value="" disabled {{ old('subject') ? '' : 'selected' }}>Objet du 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>
                    <textarea rows="5" placeholder="Votre message" name="message" id="message" required
                        class="{{ $errors->has('message') ? 'error' : '' }}" aria-required="true"
                        aria-invalid="{{ $errors->has('message') ? 'true' : 'false' }}"
                        aria-describedby="{{ $errors->has('message') ? 'message-error' : '' }}">{{ old('message') }}</textarea>
                    @error('name')
                        <p class="error" id="name-error" role="alert">{{ $message }}</p>
                    @enderror
                    @error('email')
                        <p class="error" id="email-error" role="alert">{{ $message }}</p>
                    @enderror
                    @error('subject')
                        <p class="error" id="subject-error" role="alert">{{ $message }}</p>
                    @enderror
                    @error('message')
                        <p class="error" id="message-error" role="alert">{{ $message }}</p>
                    @enderror
                    <button type="submit" class="btn btn-secondary" {{ $errors->any() ? 'disabled' : '' }}
                        aria-label="Envoyer le formulaire de contact">
                        Envoyer
                    </button>
                </form>
            </div>
        </div>
    </section>
@endsection