{{-- Contact "Nous contacter" info + form --}}
<x-atoms.section-wrapper id="contact-form-section">
    <div class="w-full lg:flex">
        {{-- Left: Info text --}}
        <div class="text-left mb-12 lg:w-1/2">
            <h2 class="text-4xl font-medium text-foreground mb-4">
                {{ __('contact.sections.contact.title') }}
            </h2>
            <p class="text-muted-foreground max-w-xl">
                {{ __('contact.sections.contact.description_1') }}
                <br />
                {{ __('contact.sections.contact.description_2') }}
            </p>
            <div class="mt-8 mb-4 text-foreground flex flex-col gap-2">
                <span>{{ __('contact.sections.contact.email_label') }}</span>
                <a href="mailto:contact@wasoria.fr" class="underline text-primary hover:text-primary/80 duration-300 ease-in-out">contact@wasoria.fr</a>
            </div>
        </div>

        {{-- Right: Contact form --}}
        <div class="mx-auto w-full lg:w-1/2">
            {{-- Success flash message --}}
            @if(session('success'))
            <div class="p-4 rounded-md bg-green-50 text-green-800 border border-green-200 mb-6">
                {{ session('success') }}
            </div>
            {{-- GA4 conversion event — Story 7.3: Track contact form submission.
                 Fires client-side on success card render. Gated by window.gtag
                 (only exists if consent accepted + GA4 initialized via Story 7.2).
                 No PII sent — only form_type identifier. --}}
            <script>
                if (window.gtag) {
                    window.gtag('event', 'form_submission', {
                        form_type: 'contact'
                    });
                }
            </script>
            @endif

            {{-- Error flash message --}}
            @if(session('error'))
            <div class="p-4 rounded-md bg-red-50 text-red-800 border border-red-200 mb-6">
                {{ session('error') }}
            </div>
            @endif

            <form method="POST" action="{{ localized_route('contact.store') }}" class="space-y-6">
                @csrf

                {{-- Name + Surname (2-col) --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <x-atoms.form-input
                        name="name"
                        :label="__('contact.form.labels.name')"
                        :placeholder="__('contact.form.placeholders.name')"
                        :required="true" />
                    <x-atoms.form-input
                        name="first_name"
                        :label="__('contact.form.labels.first_name')"
                        :placeholder="__('contact.form.placeholders.first_name')"
                        :required="true" />
                </div>

                {{-- Email --}}
                <x-atoms.form-input
                    name="email"
                    type="email"
                    :label="__('contact.form.labels.email')"
                    :placeholder="__('contact.form.placeholders.email')"
                    :required="true" />

                {{-- Phone + Company (2-col) --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <x-atoms.form-input
                        name="phone"
                        type="tel"
                        :label="__('contact.form.labels.phone')"
                        :placeholder="__('contact.form.placeholders.phone')" />
                    <x-atoms.form-input
                        name="company"
                        :label="__('contact.form.labels.company')"
                        :placeholder="__('contact.form.placeholders.company')" />
                </div>

                {{-- Position --}}
                <x-atoms.form-input
                    name="position"
                    :label="__('contact.form.labels.position')"
                    :placeholder="__('contact.form.placeholders.position')" />

                {{-- Subject --}}
                <x-atoms.form-input
                    name="subject"
                    :label="__('contact.form.labels.subject')"
                    :placeholder="__('contact.form.placeholders.subject')"
                    :required="true" />

                {{-- Message --}}
                <x-atoms.form-textarea
                    name="message"
                    :label="__('contact.form.labels.message')"
                    :placeholder="__('contact.form.placeholders.message')"
                    :required="true" />

                {{-- GDPR consent --}}
                <x-atoms.form-checkbox name="gdpr_consent" :required="true">
                    {{ __('contact.form.gdpr_disclaimer') }}
                </x-atoms.form-checkbox>

                {{-- Submit button --}}
                <button type="submit" class="w-fit mt-10 flex items-center gap-2 h-9 px-4 py-2 rounded-full bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-all cursor-pointer">
                    <span>{{ __('contact.form.submit') }}</span>
                    {{-- Send icon (Lucide) --}}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" />
                        <path d="m21.854 2.147-10.94 10.939" />
                    </svg>
                </button>
            </form>
        </div>
    </div>
</x-atoms.section-wrapper>