@extends('frontend::layouts.master')

@section('content')
    @php
        $contact = $data['page_init']['contact'] ?? [];
        $setting = $data['page_init']['setting'] ?? [];
        $recaptcha = $setting['recapcha'] ?? [];
        $recaptchaSiteKey = $recaptcha['site_key'] ?? '';
        $social = $contact['social'] ?? [];
        $contactHeroImage = !empty($contact['image']) ? check_file($contact['image']) : null;
        $mapsSearchUrl = !empty(trim($contact['office'] ?? '')) ? 'https://www.google.com/maps/search/?api=1&query=' . rawurlencode(preg_replace('/\s+/', ' ', trim($contact['office']))) : 'https://www.google.com/maps';
        $showMoreInformationButton = trim($contact['button_link'] ?? '') !== '';
        $moreInformationUrl = $showMoreInformationButton ? trim($contact['button_link']) : '';
        $moreInformationIsExternal = $showMoreInformationButton && (str_starts_with($moreInformationUrl, 'http://') || str_starts_with($moreInformationUrl, 'https://'));
        $heroButtonUrl = trim((string) ($contact['link'] ?? ''));
        $showHeroButton = $heroButtonUrl !== '';
        $heroButtonOpenInNewTab = $showHeroButton && (str_starts_with($heroButtonUrl, 'http://') || str_starts_with($heroButtonUrl, 'https://'));
    @endphp

    <x-frontend::page-hero title="{{ $contact['name'] ?? __('field.contact.page_hero_title') }}" :image="$contactHeroImage" :showButton="$showHeroButton" buttonLabel="{{ __('field.view_all') }}" buttonUrl="{{ $heroButtonUrl }}" :buttonOpenInNewTab="$heroButtonOpenInNewTab">
        @if (!empty($contact['desc']))
            <p>{!! _html($contact['desc']) !!}</p>
        @endif
    </x-frontend::page-hero>

    <section class="py-12 lg:py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black via-slate-900 to-black">
        <div class="max-w-6xl mx-auto space-y-8 lg:space-y-10">

            <!-- Top: Google Map (embed from CMS, or fallback) -->
            @if (!empty(trim($contact['gmap'] ?? '')))
                <div class="relative overflow-hidden rounded-3xl border border-white/10 shadow-[0_18px_45px_rgba(0,0,0,0.7)]">
                    <div class="aspect-[16/9] sm:aspect-[16/6] md:aspect-[16/5] [&_iframe]:w-full [&_iframe]:h-full [&_iframe]:min-h-[240px] sm:[&_iframe]:min-h-[320px] md:[&_iframe]:min-h-[400px]">
                        {!! $contact['gmap'] !!}
                    </div>
                </div>
            @endif

            <!-- Middle: contact info + social -->
            <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1.2fr),minmax(0,1fr)] gap-6 lg:gap-8">
                <!-- Contact info -->
                <div class="space-y-4 text-sm sm:text-base">
                    <div>
                        <p class="uppercase tracking-[0.2em] text-[11px] sm:text-xs text-le-primary/80">{{ __('field.contact.title') }}</p>
                    </div>
                    @if (!empty($contact['email']))
                        <div>
                            <p class="text-slate-300 font-semibold tracking-wide uppercase text-xs sm:text-sm mb-1">{{ __('field.email') }} :</p>
                            <a href="mailto:{{ $contact['email'] }}" class="text-white/90 hover:text-violet-300 transition-colors break-all">
                                {{ $contact['email'] }}
                            </a>
                        </div>
                    @endif
                    @if (!empty($contact['tel']))
                        <div>
                            <p class="text-slate-300 font-semibold tracking-wide uppercase text-xs sm:text-sm mb-1">{{ __('field.tel') }} :</p>
                            <a href="tel:{{ preg_replace('/\s+/', '', $contact['tel']) }}" class="text-white/90 hover:text-violet-300 transition-colors">
                                {{ $contact['tel'] }}
                            </a>
                        </div>
                    @endif
                    @if (!empty(trim($contact['office'] ?? '')))
                        <div>
                            <p class="text-slate-300 font-semibold tracking-wide uppercase text-xs sm:text-sm mb-1">
                                @if (!empty(trim($contact['name'] ?? '')))
                                    {{ trim($contact['name']) }} —
                                @endif
                                {{ __('field.contact.office_heading') }}
                            </p>
                            <p class="text-white/90 leading-relaxed whitespace-pre-line">{{ trim($contact['office']) }}</p>
                        </div>
                    @endif
                </div>
                <!-- Social + actions -->
                <div class="rounded-3xl bg-gradient-to-br from-slate-900/90 via-slate-950/90 to-slate-900/90 border border-white/10 px-6 py-6 sm:px-7 sm:py-7 flex flex-col justify-between gap-6">
                    @if (!empty($social))
                        <div class="space-y-4 text-sm sm:text-base">
                            <div>
                                <p class="uppercase tracking-[0.2em] text-[11px] sm:text-xs text-le-primary/80">{{ __('field.contact.social_heading') }}</p>
                            </div>
                            <div class="space-y-3">
                                @if (!empty($social['facebook']['url']))
                                    <a href="{{ $social['facebook']['url'] }}" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between gap-3 hover:bg-white/5 rounded-xl px-2 py-1 transition-colors">
                                        <div class="flex items-center gap-3">
                                            <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-le-primary text-white text-lg">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16" aria-hidden="true">
                                                    <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
                                                </svg>
                                            </span>
                                            <span class="text-xs sm:text-sm text-slate-100 font-medium">Facebook</span>
                                        </div>
                                    </a>
                                @endif
                                @if (!empty($social['line']['url']))
                                    <a href="{{ $social['line']['url'] }}" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between gap-3 hover:bg-white/5 rounded-xl px-2 py-1 transition-colors">
                                        <div class="flex items-center gap-3">
                                            <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-le-primary text-white text-lg">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-line" viewBox="0 0 16 16">
                                                    <path
                                                        d="M8 0c4.411 0 8 2.912 8 6.492 0 1.433-.555 2.723-1.715 3.994-1.678 1.932-5.431 4.285-6.285 4.645-.83.35-.734-.197-.696-.413l.003-.018.114-.685c.027-.204.055-.521-.026-.723-.09-.223-.444-.339-.704-.395C2.846 12.39 0 9.701 0 6.492 0 2.912 3.59 0 8 0M5.022 7.686H3.497V4.918a.156.156 0 0 0-.155-.156H2.78a.156.156 0 0 0-.156.156v3.486c0 .041.017.08.044.107v.001l.002.002.002.002a.15.15 0 0 0 .108.043h2.242c.086 0 .155-.07.155-.156v-.56a.156.156 0 0 0-.155-.157m.791-2.924a.156.156 0 0 0-.156.156v3.486c0 .086.07.155.156.155h.562c.086 0 .155-.07.155-.155V4.918a.156.156 0 0 0-.155-.156zm3.863 0a.156.156 0 0 0-.156.156v2.07L7.923 4.832l-.013-.015v-.001l-.01-.01-.003-.003-.011-.009h-.001L7.88 4.79l-.003-.002-.005-.003-.008-.005h-.002l-.003-.002-.01-.004-.004-.002-.01-.003h-.002l-.003-.001-.009-.002h-.006l-.003-.001h-.004l-.002-.001h-.574a.156.156 0 0 0-.156.155v3.486c0 .086.07.155.156.155h.56c.087 0 .157-.07.157-.155v-2.07l1.6 2.16a.2.2 0 0 0 .039.038l.001.001.01.006.004.002.008.004.007.003.005.002.01.003h.003a.2.2 0 0 0 .04.006h.56c.087 0 .157-.07.157-.155V4.918a.156.156 0 0 0-.156-.156zm3.815.717v-.56a.156.156 0 0 0-.155-.157h-2.242a.16.16 0 0 0-.108.044h-.001l-.001.002-.002.003a.16.16 0 0 0-.044.107v3.486c0 .041.017.08.044.107l.002.003.002.002a.16.16 0 0 0 .108.043h2.242c.086 0 .155-.07.155-.156v-.56a.156.156 0 0 0-.155-.157H11.81v-.589h1.525c.086 0 .155-.07.155-.156v-.56a.156.156 0 0 0-.155-.157H11.81v-.589h1.525c.086 0 .155-.07.155-.156Z" />
                                                </svg>
                                            </span>
                                            <span class="text-xs sm:text-sm text-slate-100 font-medium">Line</span>
                                        </div>
                                    </a>
                                @endif
                                @if (!empty($social['twitter']['url']))
                                    <a href="{{ $social['twitter']['url'] }}" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between gap-3 hover:bg-white/5 rounded-xl px-2 py-1 transition-colors">
                                        <div class="flex items-center gap-3">
                                            <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-le-primary text-white text-lg">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" viewBox="0 0 1200 1227" fill="currentColor" aria-hidden="true">
                                                    <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
                                                </svg>
                                            </span>
                                            <span class="text-xs sm:text-sm text-slate-100 font-medium">X (Twitter)</span>
                                        </div>
                                    </a>
                                @endif
                                @if (!empty($social['tiktok']['url']))
                                    <a href="{{ $social['tiktok']['url'] }}" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between gap-3 hover:bg-white/5 rounded-xl px-2 py-1 transition-colors">
                                        <div class="flex items-center gap-3">
                                            <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-le-primary text-white text-lg">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" fill="currentColor" class="bi bi-tiktok" viewBox="0 0 16 16" aria-hidden="true">
                                                    <path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3z" />
                                                </svg>
                                            </span>
                                            <span class="text-xs sm:text-sm text-slate-100 font-medium">TikTok</span>
                                        </div>
                                    </a>
                                @endif
                                @if (!empty($social['instagram']['url']))
                                    <a href="{{ $social['instagram']['url'] }}" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between gap-3 hover:bg-white/5 rounded-xl px-2 py-1 transition-colors">
                                        <div class="flex items-center gap-3">
                                            <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-le-primary text-white text-lg">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16" aria-hidden="true">
                                                    <path
                                                        d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
                                                </svg>
                                            </span>
                                            <span class="text-xs sm:text-sm text-slate-100 font-medium">Instagram</span>
                                        </div>
                                    </a>
                                @endif
                                @if (!empty($social['youtube']['url']))
                                    <a href="{{ $social['youtube']['url'] }}" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between gap-3 hover:bg-white/5 rounded-xl px-2 py-1 transition-colors">
                                        <div class="flex items-center gap-3">
                                            <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-le-primary text-white text-lg">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
                                                    <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
                                                </svg>
                                            </span>
                                            <span class="text-xs sm:text-sm text-slate-100 font-medium">Youtube</span>
                                        </div>
                                    </a>
                                @endif
                                @if (!empty($social['linkedin']['url']))
                                    <a href="{{ $social['linkedin']['url'] }}" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between gap-3 hover:bg-white/5 rounded-xl px-2 py-1 transition-colors">
                                        <div class="flex items-center gap-3">
                                            <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-le-primary text-white text-lg">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="0.85em" height="0.85em" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16" aria-hidden="true">
                                                    <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.48c.03.678 0 7.225 0 7.225h2.48z" />
                                                </svg>
                                            </span>
                                            <span class="text-xs sm:text-sm text-slate-100 font-medium">LinkedIn</span>
                                        </div>
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endif

                    @if (! empty($contact['gmap']) || $showMoreInformationButton)
                        <div class="flex flex-wrap gap-3 pt-1">
                            @if (! empty($contact['gmap']))
                                <a href="{{ $mapsSearchUrl }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center px-4 py-2 rounded-full text-xs sm:text-sm font-semibold text-white bg-le-primary hover:bg-le-primary/90 transition-all shadow-lg shadow-black/40">
                                    {{ __('field.gmap') }}
                                </a>
                            @endif
                            @if ($showMoreInformationButton)
                                <a href="{{ $moreInformationUrl }}" @if ($moreInformationIsExternal) target="_blank" rel="noopener noreferrer" @endif class="inline-flex items-center justify-center px-4 py-2 rounded-full text-xs sm:text-sm font-semibold text-le-primary border border-le-primary hover:bg-le-primary hover:text-white transition-colors">
                                    {{ __('field.contact.more_information') }}
                                </a>
                            @endif
                        </div>
                    @endif
                </div>
            </div>

            <!-- Bottom: form -->
            <div class="rounded-3xl bg-gradient-to-br from-slate-700/70 via-slate-900/90 to-slate-950 border border-white/10 shadow-[0_22px_55px_rgba(0,0,0,0.85)] px-5 py-7 sm:px-7 sm:py-8 md:px-9 md:py-10">
                <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,0.8fr),minmax(0,1.2fr)] gap-6 md:gap-8 lg:gap-10 items-start">
                    <!-- Left heading -->
                    <div class="space-y-3 sm:space-y-4">
                        <p class="uppercase tracking-[0.25em] text-[11px] sm:text-xs text-violet-300/80">{{ __('field.contact.form_title') }}</p>
                        <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold leading-tight text-white">
                            {{ __('field.contact.form_heading_line_1') }}<br class="hidden sm:block">
                            {{ __('field.contact.form_heading_line_2') }}<br class="hidden sm:block">
                            {{ __('field.contact.form_heading_line_3') }}
                        </h2>
                    </div>

                    <!-- Form -->
                    <form id="contact-form" action="{{ route('api.contact.send') }}" method="POST" class="space-y-4 sm:space-y-5">
                        @csrf
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div class="space-y-1.5">
                                <label class="block text-xs font-semibold text-slate-200 uppercase tracking-wide">
                                    {{ __('field.full_name') }}<span class="text-violet-300">*</span>
                                </label>
                                <input type="text" name="name" class="w-full rounded-full border border-white/15 bg-white/5 px-4 py-2.5 text-sm text-white placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-500/70 focus:border-transparent" placeholder="{{ __('field.contact.placeholder_full_name') }}" required>
                            </div>
                            <div class="space-y-1.5">
                                <label class="block text-xs font-semibold text-slate-200 uppercase tracking-wide">
                                    {{ __('field.contact.phone_number') }}<span class="text-violet-300">*</span>
                                </label>
                                <input type="tel" name="phone" class="w-full rounded-full border border-white/15 bg-white/5 px-4 py-2.5 text-sm text-white placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-500/70 focus:border-transparent" placeholder="{{ __('field.contact.placeholder_phone') }}" required>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div class="space-y-1.5">
                                <label class="block text-xs font-semibold text-slate-200 uppercase tracking-wide">
                                    {{ __('field.contact.email_label') }}<span class="text-violet-300">*</span>
                                </label>
                                <input type="email" name="email" class="w-full rounded-full border border-white/15 bg-white/5 px-4 py-2.5 text-sm text-white placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-500/70 focus:border-transparent" placeholder="{{ __('field.contact.placeholder_email') }}" required>
                            </div>
                            <div class="space-y-1.5">
                                <label class="block text-xs font-semibold text-slate-200 uppercase tracking-wide">
                                    {{ __('field.subject') }}<span class="text-violet-300">*</span>
                                </label>
                                <input type="text" name="subject" class="w-full rounded-full border border-white/15 bg-white/5 px-4 py-2.5 text-sm text-white placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-500/70 focus:border-transparent" placeholder="{{ __('field.contact.placeholder_subject') }}" required>
                            </div>
                        </div>
                        <div class="space-y-1.5">
                            <label class="block text-xs font-semibold text-slate-200 uppercase tracking-wide">
                                {{ __('field.contact.message_label') }}<span class="text-violet-300">*</span>
                            </label>
                            <textarea name="message" rows="4" class="w-full rounded-2xl border border-white/15 bg-white/5 px-4 py-3 text-sm text-white placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-500/70 focus:border-transparent resize-none" placeholder="{{ __('field.contact.placeholder_message') }}" required></textarea>
                        </div>

                        @if (!empty($recaptchaSiteKey))
                            <div class="flex flex-col sm:flex-row sm:items-center gap-3">
                                <div class="flex-1">
                                    <div class="g-recaptcha" data-sitekey="{{ $recaptchaSiteKey }}"></div>
                                </div>
                            </div>
                        @endif

                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-1">
                            <label class="inline-flex items-start gap-2 text-[11px] sm:text-xs text-slate-300 cursor-pointer">
                                <input type="checkbox" name="accept_terms" class="mt-0.5 h-3.5 w-3.5 rounded border border-white/30 bg-transparent" required>
                                <span>
                                    {{ __('field.contact.accept_policy') }} <a href="{{ $data['page_init']['policy']['url'] ?? '#' }}" class="underline decoration-violet-400 underline-offset-2 hover:text-violet-200">{{ $data['page_init']['policy']['name'] ?? '#' }}</a>
                                </span>
                            </label>
                        </div>

                        <button id="contact-form-submit" type="submit" class="inline-flex items-center justify-center px-8 py-2.5 rounded-full text-sm font-semibold text-white bg-le-primary hover:bg-le-primary/90 transition-all shadow-lg shadow-black/40 whitespace-nowrap">
                            {{ __('field.contact.submit') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @if (!empty($recaptchaSiteKey))
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    @endif
    <script>
        (() => {
            const form = document.getElementById('contact-form');
            if (!form) return;

            const submitButton = document.getElementById('contact-form-submit');
            const acceptTermsInput = form.querySelector('input[name="accept_terms"]');
            const hasRecaptcha = form.querySelector('.g-recaptcha') !== null;
            const failMessage = @json(__('field.contact.form_submit_failed'));
            const policyRequiredMessage = @json(__('contact::lang.field.accept_placeholder'));
            const recaptchaRequiredMessage = @json(__('contact::lang.field.recaptcha_required'));
            const successTitle = @json(__('contact::lang.alert.success'));
            const errorTitle = @json(__('noti.title_error'));
            const validationTitle = @json(__('noti.title_validate'));
            const fieldValidationMessages = {
                name: @json(__('field.contact.validation_full_name_required')),
                phone: @json(__('field.contact.validation_phone_required')),
                email: @json(__('field.contact.validation_email_required')),
                subject: @json(__('field.contact.validation_subject_required')),
                message: @json(__('field.contact.validation_message_required')),
                emailInvalid: @json(__('field.contact.validation_email_invalid')),
            };

            const showNoti = (message, title = errorTitle, icon = 'error') => {
                if (window.Swal && typeof window.Swal.fire === 'function') {
                    window.Swal.fire({
                        icon,
                        title,
                        text: message || failMessage,
                        confirmButtonColor: '#7c3aed'
                    });
                    return;
                }
                window.alert(`${title}: ${message || failMessage}`);
            };

            form.addEventListener('submit', async (event) => {
                event.preventDefault();
                if (submitButton) submitButton.disabled = true;

                try {
                    if (!form.checkValidity()) {
                        const invalidField = form.querySelector(':invalid');
                        let message = failMessage;
                        const fieldName = invalidField?.getAttribute('name') || '';
                        if (invalidField?.validity?.typeMismatch && fieldName === 'email') {
                            message = fieldValidationMessages.emailInvalid;
                        } else if (fieldName && fieldValidationMessages[fieldName]) {
                            message = fieldValidationMessages[fieldName];
                        }
                        showNoti(message, validationTitle, 'warning');
                        invalidField?.focus();
                        return;
                    }

                    if (acceptTermsInput && !acceptTermsInput.checked) {
                        showNoti(policyRequiredMessage, validationTitle, 'warning');
                        acceptTermsInput.focus();
                        return;
                    }

                    if (hasRecaptcha && window.grecaptcha && !window.grecaptcha.getResponse()) {
                        showNoti(recaptchaRequiredMessage, validationTitle, 'warning');
                        return;
                    }

                    const formData = new FormData(form);
                    const response = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                        },
                        body: formData,
                    });

                    const result = await response.json().catch(() => ({}));
                    const message = result.desc || result.msg || result.message || failMessage;
                    const title = result.title || '';

                    if (!response.ok) {
                        throw new Error(`${title ? `${title}: ` : ''}${message}`);
                    }

                    form.reset();
                    if (window.grecaptcha) {
                        window.grecaptcha.reset();
                    }
                    const successMessage = result.msg || result.desc || successTitle;
                    showNoti(successMessage, successTitle, 'success');
                } catch (error) {
                    showNoti(error.message || failMessage, errorTitle, 'error');
                } finally {
                    if (submitButton) submitButton.disabled = false;
                }
            });
        })();
    </script>
@endpush