@extends('layouts.app')

@php
     $seo =  array (
        'title' =>  App::getLocale() == 'en' ? 'Contact Inovation Travel | Talk to a Travel Advisor' : 'Contacto Inovation Travel | Habla con un Asesor de viaje',
        'description' =>  App::getLocale() == 'en' ? 'Do you have questions about your next vacation or membership? Contact us at Inovation Travel. Call our toll free number and receive personalized attention.' : '¿Tienes preguntas sobre tus próximas vacaciones o tu membresía? Contáctanos en Inovation Travel. Llama a nuestra lada sin costo y recibe atención personalizada.',
        'imagen' => asset('/storage/images/op/inovations-travel-opengraph.jpg'),
        'url' =>  App::getLocale() == 'en' ? 'https://inovationtravel.com/contact' : 'https://inovationtravel.com/es/contacto',
    );
@endphp

@push('css')
    @vite( 'resources/sass/website/pages/contact.scss')
@endpush


@section('content')

<div class="banner">
     <picture>
        <source media="(max-width: 640px)" srcset="{{ asset('storage/images/banner/background-blue.webp') }}">
        <source media="(max-width: 1001px)" srcset="{{ asset('storage/images/banner/background-blue.webp') }}">
        <source media="(max-width: 1600px)" srcset="{{ asset('storage/images/banner/background-blue.webp') }}">
        <img src="{{ asset('storage/images/banner/background-blue.webp') }}" alt="{{ __('retreats.title') }}">
    </picture>
    <div class="banner-text">
        <h1>{{ __('contact.title') }}</h1>
    </div>
</div>
<section class="contact">
    <div class="container">
        <div class="row d-flex justify-content-center align-items-center container-border {{-- border-shadow --}}">
            <div class="col-lg-3 col-md-12 p-4">
                <h2>{{ __('contact.bloq_1.title') }}</h2>
                <p class="mt-3">{{ __('contact.bloq_1.description') }}</p>      
            </div>
            <div class="col-lg-3 col-md-12 p-4">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" width="30px">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
                </svg>
                <h5> {{ __('contact.bloq_2.title') }} </h5>
                {!! __('contact.bloq_2.number_text') !!}
                @if(changeLanguage())  
                    <p class="mt-3">
                        <span>{!! __('footer.canada_phone.title') !!}</span>
                        <a href="tel:{!! __('footer.canada_phone.phone_link') !!}"> {!! __('footer.canada_phone.phone') !!}</a> 
                    </p>
                @else @endif
            </div>
            <div class="col-lg-4 col-md-12 p-4">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" width="32px">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
                </svg>
                <h5>{{ __('contact.bloq_3.title') }} </h5>
                <p>{{ __('contact.bloq_3.description') }} </p>
            </div>
        </div>
        <div class="row justify-content-center">
             <div class="col-lg-6 col-md-12 p-0 order-lg-2">
                 <div class="view-map">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7464.056815992135!2d-105.293718!3d20.709071000000005!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x842146bf10d30147%3A0xdf82ea6ceeacfbf2!2sPlaza%203.14!5e0!3m2!1ses-419!2sus!4v1752268906099!5m2!1ses-419!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
            <div class="col-lg-6 col-md-12 p-0 order-lg-1">
                @include('components.contact')
            </div>
        </div>
    </div>
</section>
@endsection