@extends('layouts.app')

@php
     $seo =  array (
        'title' =>  App::getLocale() == 'en' ? 'Discover Nayarit\'s Paradise Destinations | Inovation Travel' : 'Descubre los Destinos Paradisíacos de Nayarit | Inovation Travel',
        'description' =>  App::getLocale() == 'en' ? 'Explore the beautiful beaches of the Riviera Nayarit, the golf courses of Nuevo Vallarta and the surfing charm of Punta de Mita, your next tropical adventure awaits with Inovation Travel!' : 'Explora las hermosas playas de la Riviera Nayarit, los campos de golf de Nuevo Vallarta y el encanto surfista de Punta de Mita, ¡tu próxima aventura tropical te espera con Inovation Travel!',
        'imagen' => asset('/storage/images/op/inovations-travel-opengraph.jpg'),
        'url' =>  App::getLocale() == 'en' ? 'https://inovationtravel.com/destinations/' : 'https://inovationtravel.com/es/destinos/',
    );
@endphp

@push('css')
    @vite('resources/sass/website/pages/destination.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>{{ __('destination.title') }}</h1>
    </div>
</div>

<section>
    <div class="destination">
        <div class="container">
            <div class="row justify-content-center pb-5">
                <div class="col-lg-5 col-md-12 border-shadow order-lg-2">
                    <div class="box-destination mb-2 ">
                        <h3>{!! __('destination.location.1.title') !!}</h3>
                        <p class="align-vertical ">{!! __('destination.location.1.description') !!}</p>
                    </div>
                </div>
                  <div class="col-lg-5 col-md-12 text-center img-destino">
                    <img src="{{ asset('storage/images/riviera-nayarit-destination.jpg') }}" alt="{!! __('destination.location.1.title') !!}" width="100%" style="height: 100%; object-fit: cover;">
                </div>
            </div>
            <div class="row justify-content-center pb-5">
                <div class="col-lg-5 col-md-12 border-shadow">
                     <div class="box-destination">
                        <h3>{!! __('destination.location.2.title') !!}</h3>
                        <p class="mt-3"> {!! __('destination.location.2.description') !!}</p>
                        {{-- <div class="mt-4">
                          <a target="_blank" href="{{ App::getLocale() == 'en' ? 'https://www.rivieranayarit.com/destinations/nuevo-vallarta/' : 'https://www.rivieranayarit.com.mx/nuestros-pueblos/nuevo-vallarta/' }}" class="btn_destination">{{ __('destination.location.btn_destination') }}</a>
                        </div> --}}
                    </div>
                </div>
                <div class="col-lg-5 col-md-12 text-center img-destino order-lg-1">
                    <img src="{{ asset('storage/images/nuevo-vallarta-destination.jpg') }}" alt="{!! __('destination.location.2.title') !!}" width="100%" style="height: 100%; object-fit: cover;">
                </div>
            </div>
            <div class="row d-flex justify-content-center pb-5">
                <div class="col-lg-5 col-md-12 border-shadow order-lg-2">
                    <div class="box-destination">
                        <h3>{!! __('destination.location.3.title') !!}</h3>
                        <p class="img-destino"> {!! __('destination.location.3.description') !!}</p>
                        {{-- <div class="mt-4">
                          <a target="_blank" href="{{ App::getLocale() == 'en' ? 'https://www.rivieranayarit.com/destinations/punta-de-mita/' : 'https://www.rivieranayarit.com.mx/nuestros-pueblos/punta-de-mita/' }}" class="btn_destination">{{ __('destination.location.btn_destination') }}</a>
                        </div> --}}
                    </div>
                </div>
                <div class="col-lg-5 col-md-12 text-center img-destino order-lg-1">
                    <img src="{{ asset('storage/images/punta-de-mita-destination.jpg') }}" alt="{!! __('destination.location.3.title') !!}" width="100%" style="height: 100%; object-fit: cover;">
                </div>
            </div>
        </div>
    </div>
</section>

@endsection