@props(['contact', 'locale'])

<section id="contact" class="relative overflow-hidden py-12 md:py-20">
    <div aria-hidden="true" class="pointer-events-none absolute inset-0 opacity-70" style="background: radial-gradient(ellipse at bottom, oklch(0.32 0.06 235 / 0.7), transparent 70%);"></div>
    <div class="relative mx-auto grid max-w-7xl grid-cols-1 gap-12 px-6 lg:grid-cols-[0.95fr_1.05fr]">
        <div>
            <div class="reveal section-eyebrow">{{ lpick('Contact', 'Contact', 'Kontakt') }}</div>
            <h2 class="reveal display-title mt-4" data-delay="0.1">{!! $contact->tradEm('title') !!}</h2>
            <p class="reveal mt-6 max-w-md text-cream/70" data-delay="0.2">{{ $contact->trad('intro') }}</p>

            <div class="mt-10 space-y-3">
                <a href="mailto:{{ $contact->ctc_email }}" class="reveal glass gold-border group flex items-center gap-4 rounded-2xl p-4 transition-transform duration-300 hover:translate-x-1">
                    <div class="grid h-11 w-11 place-items-center rounded-xl border border-gold/25 bg-gold/5 text-gold transition-colors duration-500 group-hover:bg-gold/15">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                    </div>
                    <div><div class="text-[10px] uppercase tracking-[0.22em] text-cream/50">Email</div><div class="text-sm text-cream">{{ $contact->ctc_email }}</div></div>
                </a>
                <a href="{{ $contact->ctc_whatsapp_url }}" target="_blank" rel="noreferrer" class="reveal glass gold-border group flex items-center gap-4 rounded-2xl p-4 transition-transform duration-300 hover:translate-x-1" data-delay="0.08">
                    <div class="grid h-11 w-11 place-items-center rounded-xl border border-gold/25 bg-gold/5 text-gold transition-colors duration-500 group-hover:bg-gold/15">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
                    </div>
                    <div><div class="text-[10px] uppercase tracking-[0.22em] text-cream/50">WhatsApp</div><div class="text-sm text-cream">{{ $contact->ctc_whatsapp }}</div></div>
                </a>
                <div class="reveal glass gold-border group flex items-center gap-4 rounded-2xl p-4" data-delay="0.16">
                    <div class="grid h-11 w-11 place-items-center rounded-xl border border-gold/25 bg-gold/5 text-gold">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                    </div>
                    <div><div class="text-[10px] uppercase tracking-[0.22em] text-cream/50">{{ lpick('Localisation', 'Location', 'Standort') }}</div><div class="text-sm text-cream">{{ $contact->trad('localisation') }}</div></div>
                </div>
            </div>

            <div class="reveal glass-strong mt-8 rounded-2xl border border-gold/20 p-6" data-delay="0.3">
                <div class="font-serif text-lg text-cream">{{ $contact->trad('call_label') }}</div>
                <p class="mt-2 text-sm text-cream/65">{{ $contact->trad('call_texte') }}</p>
                <a href="https://calendly.com/catherine-obvious-way/30min" target="_blank" rel="noopener" class="mt-4 inline-flex btn-ghost-gold">{{ lpick('Réserver un appel', 'Book a call', 'Termin buchen') }}</a>
            </div>
        </div>

        <div class="reveal" data-delay="0.15">
            @if (session('contact_success'))
                <div class="glass-strong gold-border rounded-3xl p-8 text-center">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mx-auto mb-4 text-gold"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                    <p class="font-serif text-xl text-cream">{{ lpick('Message bien reçu — nous reviendrons vers vous dès que possible.', 'Thank you for your message. We will get back to you as soon as possible.', 'Vielen Dank für Ihre Nachricht. Wir melden uns so bald wie möglich bei Ihnen.') }}</p>
                </div>
            @else
                <form id="contact-form" method="POST" action="{{ route('contact.store', ['locale' => $locale]) }}" class="glass-strong gold-border relative overflow-hidden rounded-3xl p-8">
                    @csrf
                    {{-- Honeypot anti-spam (CDC §9.4) --}}
                    <input type="text" name="site_web" tabindex="-1" autocomplete="off" class="absolute -left-[9999px]" aria-hidden="true" />

                    <div class="mb-6 font-serif text-2xl text-cream">{{ lpick('Envoyer un message', 'Send a message', 'Nachricht senden') }}</div>

                    @if ($errors->any())
                        <div class="mb-4 rounded-xl border border-red-400/40 bg-red-400/10 p-4 text-sm text-red-200">
                            <ul class="list-inside list-disc space-y-1">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <div>
                            <label for="sub_prenom" class="mb-2 block text-[11px] uppercase tracking-[0.18em] text-cream/60">{{ lpick('Prénom *', 'First name *', 'Vorname *') }}</label>
                            <input id="sub_prenom" name="sub_prenom" type="text" required value="{{ old('sub_prenom') }}" placeholder="Marie" class="w-full rounded-xl border border-cream/10 bg-navy-deep/60 px-4 py-3 text-sm text-cream placeholder:text-cream/40 focus:border-gold focus:outline-none focus:ring-2 focus:ring-gold/30" />
                        </div>
                        <div>
                            <label for="sub_nom" class="mb-2 block text-[11px] uppercase tracking-[0.18em] text-cream/60">{{ lpick('Nom *', 'Last name *', 'Nachname *') }}</label>
                            <input id="sub_nom" name="sub_nom" type="text" required value="{{ old('sub_nom') }}" placeholder="Dupont" class="w-full rounded-xl border border-cream/10 bg-navy-deep/60 px-4 py-3 text-sm text-cream placeholder:text-cream/40 focus:border-gold focus:outline-none focus:ring-2 focus:ring-gold/30" />
                        </div>
                    </div>
                    <div class="mt-4">
                        <label for="sub_email" class="mb-2 block text-[11px] uppercase tracking-[0.18em] text-cream/60">Email *</label>
                        <input id="sub_email" name="sub_email" type="email" required value="{{ old('sub_email') }}" placeholder="marie@example.com" class="w-full rounded-xl border border-cream/10 bg-navy-deep/60 px-4 py-3 text-sm text-cream placeholder:text-cream/40 focus:border-gold focus:outline-none focus:ring-2 focus:ring-gold/30" />
                    </div>
                    <div class="mt-4">
                        <label for="sub_tel" class="mb-2 block text-[11px] uppercase tracking-[0.18em] text-cream/60">{{ lpick('Téléphone / WhatsApp', 'Phone / WhatsApp', 'Telefon / WhatsApp') }}</label>
                        <input id="sub_tel" name="sub_tel" type="tel" value="{{ old('sub_tel') }}" placeholder="+33 6 12 34 56 78" class="w-full rounded-xl border border-cream/10 bg-navy-deep/60 px-4 py-3 text-sm text-cream placeholder:text-cream/40 focus:border-gold focus:outline-none focus:ring-2 focus:ring-gold/30" />
                    </div>

                    <div class="mt-4">
                        <span class="mb-2 block text-[11px] uppercase tracking-[0.18em] text-cream/60">{{ lpick('Votre profil *', 'Your profile *', 'Ihr Profil *') }}</span>
                        <div class="grid grid-cols-2 gap-2">
                            @php
                                $profils = [
                                    lpick('Entrepreneur', 'Entrepreneur', 'Unternehmer'),
                                    lpick('Investisseur', 'Investor', 'Investor'),
                                    lpick("Dirigeant d'entreprise", 'Business owner', 'Geschäftsführer'),
                                    lpick('Institution / ONG', 'Institution / NGO', 'Institution / NGO'),
                                ];
                            @endphp
                            @foreach ($profils as $profil)
                                <label class="group flex cursor-pointer items-center gap-2 rounded-xl border border-cream/10 bg-navy-deep/60 px-3 py-2.5 text-xs text-cream/80 transition-colors has-[:checked]:border-gold has-[:checked]:bg-gold/10 has-[:checked]:text-gold hover:border-gold/40">
                                    <input type="radio" name="sub_profil" value="{{ $profil }}" class="accent-gold" @checked(old('sub_profil') === $profil) /> {{ $profil }}
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <div class="mt-4">
                        <label for="sub_projet" class="mb-2 block text-[11px] uppercase tracking-[0.18em] text-cream/60">{{ lpick('Votre projet *', 'Your project *', 'Ihr Projekt *') }}</label>
                        <textarea id="sub_projet" name="sub_projet" rows="4" required placeholder="{{ lpick('Décrivez brièvement votre projet ou votre question…', 'Briefly describe your project or question…', 'Beschreiben Sie kurz Ihr Projekt oder Ihre Frage…') }}" class="w-full rounded-xl border border-cream/10 bg-navy-deep/60 px-4 py-3 text-sm text-cream placeholder:text-cream/40 focus:border-gold focus:outline-none focus:ring-2 focus:ring-gold/30">{{ old('sub_projet') }}</textarea>
                    </div>

                    <button id="submit-btn" type="submit" class="shimmer btn-primary-gold group mt-6 w-full">
                        {{ lpick('Envoyer ma demande', 'Send my request', 'Anfrage senden') }}
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-500 group-hover:translate-x-0.5"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                    </button>
                    <p class="mt-3 text-center text-[11px] text-cream/50">{{ $contact->trad('rgpd') }}</p>
                </form>
            @endif
        </div>
    </div>
</section>