@php
    use function Modules\Core\Settings\Helpers\setting;
@endphp

<div class="bg-[#edeff1]">
    @if($bannerImage)
    <section class="relative w-full" id="marcas-hero">
        <img
            src="{{ Storage::url($bannerImage) }}"
            alt="{{ $bannerTitle }}"
            width="100%"
            class="mx-auto hidden lg:block w-full"
        />
    
        <img
            src="{{ Storage::url($bannerMobileImage ?: $bannerImage) }}"
            alt="{{ $bannerTitle }}"
            width="100%"
            class="mx-auto block lg:hidden w-full"
        />
    </section>
    @endif
    <div class="py-9 text-center">
        <div class="h-4"></div>

        <div class="container px-4 lg:px-0">
            <div class="lg:grid lg:grid-cols-12">
                <div class="col-start-2 col-span-10">
                    <h1 class="text-3xl font-bold text-black mb-8 text-center">
                        {{ __('Datos de contacto') }}
                    </h1>
                </div>
            </div>

            <form wire:submit.prevent="store" class="grid grid-cols-1 lg:grid-cols-12 gap-x-8 gap-y-6">

                {{-- Left Column --}}
                <div class="lg:col-start-2 lg:col-span-5 flex flex-col gap-6">
                    <x-form.input label="{{ __('Nombre de contacto principal*') }}" error="contactMessage.name" required
                        wire:model="contactMessage.name" type="text"
                        placeholder="Ingresa el nombre del contacto principal" />

                    <x-form.input label="{{ __('Tu Correo electrónico*') }}" error="contactMessage.email" required
                        wire:model="contactMessage.email" type="email"
                        placeholder="Ingresa tu dirección de correo electrónico" />

                    <x-form.input label="{{ __('Número de teléfono') }}" error="contactMessage.phone"
                        wire:model="contactMessage.phone" required type="tel"
                        placeholder="Ingresa tu número de teléfono a 10 digitos" />

                    <x-form.text-area label="{{ __('Mensaje') }}" wire:model="contactMessage.message"
                        error="contactMessage.message" placeholder="Escribe tu mensaje" rows="5" />
                </div>

                {{-- Right Column --}}
                <div class="lg:col-span-5 flex flex-col gap-6">
                    <x-form.input label="{{ __('Ciudad y Estado') }}" error="contactMessage.city"
                        wire:model="contactMessage.city" required type="text"
                        placeholder="Ingresa tu ciudad y estado" />

                    <x-form.input label="{{ __('Asunto') }}" error="subject" wire:model="subject" type="text"
                        placeholder="Ingresa el asunto" />

                    <x-form.input label="{{ __('Horario de preferencia') }}" error="schedule" wire:model="schedule"
                        type="text" placeholder="" />

                    <div class="mt-auto">
                        <button type="submit" data-sitekey="{{ setting('site.captcha_public') }}"
                            data-callback='handle' data-action='submit' wire:loading.attr="disabled"
                            class="w-full lg:w-48 bg-black text-white font-bold py-3 uppercase hover:bg-gray-800 transition duration-300 rounded">
                            <span wire:loading>
                                <x-vaadin-spinner-third class="w-5 h-5 text-white animate-spin" />
                            </span>
                            <span wire:loading.remove>{{ __('ENVIAR') }}</span>
                        </button>
                    </div>
                </div>

            </form>
        </div>
        <div class="h-10 2xl:h-40"></div>
        
    </div>
    <section class="bg-[#edeff1] py-9">
        <div class="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 text-center md:grid-cols-3 md:gap-8">
    
            {{-- Correo --}}
            <div class="flex flex-col items-center justify-start">
                <div class="mb-3 flex h-9 items-center justify-center">
                    <x-local-correo class="h-8 w-8 fill-black" />
                </div>
    
                <h3 class="text-base font-extrabold uppercase tracking-wide text-black">
                    Nuestro correo
                </h3>
    
                <a
                    href="mailto:{{ setting('email.email') }}"
                    target="_blank"
                    class="block text-[15px] leading-tight text-black hover:underline"
                >
                    {{ setting('email.email') }}
                </a>
            </div>
    
            {{-- Teléfonos --}}
            <div class="flex flex-col items-center justify-start">
                <div class="mb-3 flex h-9 items-center justify-center">
                    <x-local-telefono class="h-9 w-9 fill-black" />
                </div>
    
                <h3 class="mb-2 text-base font-extrabold uppercase tracking-wide text-black">
                    ¡Hablemos!
                </h3>
    
                @if (count($phones) > 0 || count($whatsapps) > 0)
                    <div class="space-y-1 text-[15px] leading-tight text-black">
    
                        @foreach ($phones as $phone)
                            <p>
                                <a
                                    href="tel:{{ $phone['number'] }}"
                                    class="hover:underline"
                                >
                                    {{ $phone['text'] }}
                                </a>
                            </p>
                        @endforeach
    
                        @if (count($whatsapps) > 0)
                            <div class="pt-4">
                                @foreach ($whatsapps as $whatsapp)
                                    <p>
                                        <a
                                            href="https://wa.me/52{{ $whatsapp['number'] }}"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            class="hover:underline"
                                        >
                                            WA {{ $whatsapp['text'] }}
                                        </a>
                                    </p>
                                @endforeach
                            </div>
                        @endif
    
                    </div>
                @endif
            </div>
    
            {{-- Ubicación --}}
            <div class="flex flex-col items-center justify-start pb-2">
                <div class="mb-3 flex h-9 items-center justify-center">
                    <x-local-pasador-de-ubicacion class="h-9 w-9 fill-black" />
                </div>
    
                <h3 class="text-base font-extrabold uppercase tracking-wide text-black">
                    Ubicación
                </h3>
    
                <address class="max-w-sm not-italic text-[15px] leading-tight text-black">
                    Blvd. Manuel Avila Camacho #2999 Bis.<br>
                    Colonia: Las Rosas C.P. 54060<br>
                    México, Tlalnepantla de Baz
                </address>
            </div>
            
        </div>
    </section>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3760.107832439575!2d-99.21867422532371!3d19.53698353734011!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d21d39be32967b%3A0x223899236cf94c1d!2sSegurihigiene!5e0!3m2!1ses!2smx!4v1781245240480!5m2!1ses!2smx" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>


@push('scripts')
    @if (setting('site.captcha_private') && setting('site.captcha_public'))
        <script src="https://www.google.com/recaptcha/api.js?render={{ setting('site.captcha_public') }}"></script>
        <script>
            function handle(e) {
                grecaptcha.ready(function() {
                    grecaptcha.execute("{{ setting('site.captcha_public') }}", {
                            action: 'submit'
                        })
                        .then(function(token) {
                            @this.set('captcha', token);
                        });
                })
            }
        </script>
    @endif
@endpush