@extends('layout.front.master')

@section('title', config('site.name') . ' | ' . __('Contacto'))
@section('description', config('site.seo.description') ?? __('Contactanos para consultas sobre nuestros planes de cobertura de sepelio. Estamos aquí para acompañarte.'))
@section('keywords', config('site.seo.keywords') ?? 'contacto, ayuda, whatsapp, cobertura sepelio, tucumán')

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name') . ' - ' . __('Contacto'))
@section('og_description', config('site.og.description') ?? __('Contactanos para consultas sobre nuestros planes de cobertura de sepelio. Estamos aquí para acompañarte.'))
@section('og_image', asset(config('site.assets.main_logo')))
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', config('site.name') . ' - ' . __('Contacto'))
@section('twitter_description', config('site.twitter.description') ?? __('Contactanos para consultas sobre nuestros planes de cobertura de sepelio.'))
@section('twitter_image', asset(config('site.assets.main_logo')))

@section('content')

<div role="main" class="main">

	{{-- Page Header --}}
	<section class="page-header page-header-modern section position-relative border-0 m-0" style="background-image: url({{ asset('cd-project/img/demos/insurance/backgrounds/background-3.jpg') }}); background-position: center; background-size: cover;">
		<div class="container position-relative pb-5 mb-5">
			<div class="page-header-svg-container">
				<svg class="d-none d-lg-block custom-svg-position-5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1686.88 1095.86" data-appear-animation-svg="true">
					<path class="appear-animation" data-appear-animation="customLines1anim" data-appear-animation-delay="100" data-appear-animation-duration="7s" fill="none" stroke="#d8d8d8" stroke-width="2px" stroke-miterlimit="10" d="M87.95,1.4c6.82,9.14,15.53,21.59,24.68,36.94c6.82,11.45,27.18,46.82,42.55,96.51
						c22.8,73.68,21.39,136.02,20.51,156c-3.11,70.56-22.16,122.51-36,159.32c-10.88,28.95-11.68,24.38-59.74,125.62
						c-43.46,91.53-49.66,109.7-52.85,119.49C6.6,758.14,2.98,804.59,2.16,829.14c-1.49,44.72,4.54,70.82,6.47,78.64
						c3.54,14.35,10.42,41.25,29.79,70.47c6.64,10.01,30.84,44.6,76.77,69.11c42.9,22.9,81.52,24.6,110.47,25.87
						c45.57,2.01,79.98-6.18,113.02-14.3c30.83-7.58,58.4-18.38,113.53-40c59.55-23.35,66.43-28.58,110.47-43.91
						c35.63-12.41,57.67-19.98,89.36-25.7c25.68-4.64,55.3-9.77,94.3-6.3c12.43,1.11,53.97,5.59,102.13,27.74
						c32.05,14.74,53.03,30.87,57.53,34.38c24.26,18.91,41.05,38.65,51.91,53.45"/>
					<path class="appear-animation" data-appear-animation="customLines1anim" data-appear-animation-delay="100" data-appear-animation-duration="7s" fill="none" stroke="#d8d8d8" stroke-width="2px" stroke-miterlimit="10" d="M119.44,34.42c8.99,12.85,20.33,30.49,31.66,52.43c26.28,50.9,36.35,93.84,39.15,106.55
						c3.12,14.2,10.77,52.5,9.53,102.81c-0.28,11.19-2.03,65.48-23.83,133.79c-9.82,30.78-21.07,54.56-43.57,102.13
						c-26.78,56.6-29.14,53.79-45.62,90.21c-19.84,43.85-42.56,94.07-48.68,161.02c-2.86,31.34-5.69,66.08,7.49,108.6
						c6.03,19.44,20.95,65.45,64,101.11c47.45,39.3,101.05,42.8,133.79,44.94c63.04,4.12,115.57-13.6,165.11-30.3
						c5.59-1.89,23.59-8.86,59.57-22.81c100.23-38.85,99.33-40.27,122.21-47.32c41.18-12.69,80.51-24.8,133.11-21.79
						c19.83,1.14,63.01,5.65,111.66,28.94c8.19,3.92,50.6,24.68,88.51,64.34c5.66,5.92,10.38,11.39,12.6,13.96
						c23.78,27.59,39.5,52.94,49.36,70.81"/>
					<path class="appear-animation" data-appear-animation="customLines1anim" data-appear-animation-delay="100" data-appear-animation-duration="7s" fill="none" stroke="#d8d8d8" stroke-width="2px" stroke-miterlimit="10" d="M149.4,68.12c6.57,8.86,14.9,20.95,23.49,35.91c4.29,7.48,19.67,34.89,32.17,73.53
						c6.72,20.77,21.93,69.22,20.6,133.28c-1.3,62.06-17.49,108.17-28.94,139.91c-10.84,30.08-24.93,58.75-53.11,116.09
						c-20.68,42.08-23.94,45.72-33.7,69.11c-12.01,28.77-26.1,63.09-33.02,108.6c-5.01,32.91-10.64,69.92,1.7,115.4
						c5.5,20.27,17.08,60.94,53.45,94.64c42.55,39.43,93.06,45.28,119.49,48.34c54.36,6.29,98.94-6.87,146.04-20.77
						c14.56-4.3,31.27-10.58,64.68-23.15c90.64-34.09,94.12-40.57,133.45-51.74c33.81-9.61,71.69-20.37,122.21-16.68
						c58.83,4.3,99.83,25.64,107.91,29.96c40.02,21.39,65.7,49.16,77.96,62.64c8.35,9.18,14.84,17.39,19.4,23.49"/>
					<path class="appear-animation" data-appear-animation="customLines1anim" data-appear-animation-delay="100" data-appear-animation-duration="7s" fill="none" stroke="#d8d8d8" stroke-width="2px" stroke-miterlimit="10" d="M179.69,101.14c6.75,9.74,13.52,20.4,20.09,32c22.79,40.27,33.1,74.23,35.4,82.04
						c5.33,18.08,15.6,58.21,14.64,110.3c-0.24,12.92-1.88,65.03-24.85,127.32c-3.1,8.42-7.74,18.89-17.02,39.83
						c-25.65,57.88-36.57,75.11-52.43,110.3c-18.12,40.19-31.28,69.39-39.83,110.64c-7.2,34.73-15.41,74.33-2.38,122.21
						c4.55,16.73,14.43,51.38,44.94,82.04c35.67,35.85,78.11,44.69,100.43,49.02c58.53,11.37,107.23-3.46,156.26-18.38
						c24.42-7.44,15.93-6.77,86.47-33.7c103.46-39.5,129.97-44.06,142.98-45.96c28.7-4.18,61.65-8.66,103.15,1.02
						c7.96,1.86,47.73,11.59,90.21,42.55c30.91,22.53,50.88,47.29,62.64,64.34"/>
					<path class="appear-animation" data-appear-animation="customLines1anim" data-appear-animation-delay="100" data-appear-animation-duration="7s" fill="none" stroke="#d8d8d8" stroke-width="2px" stroke-miterlimit="10" d="M208.89,133.57c7.42,9.37,15.01,20.15,22.21,32.43c21.75,37.04,29.38,69.66,33.96,89.87
						c4.69,20.73,13.92,63.26,7.4,117.96c-4.84,40.58-16.18,69.74-28.09,100.34c-11.91,30.61-15.38,31.76-42.38,89.11
						c-24.66,52.37-36.99,78.56-44.68,105.45c-8.49,29.66-18.6,66.37-13.28,113.36c2.65,23.35,6.06,53.41,27.06,84
						c28.75,41.87,70.98,56.35,86.81,61.53c35.79,11.71,65.37,8.99,93.19,6.13c15-1.54,44-5.54,139.91-42.38
						c72.26-27.76,81.46-35.35,120.77-43.91c27.26-5.94,54.69-11.68,91.15-8.17c55.63,5.36,93.81,28.56,102.38,33.96
						c36.12,22.73,57.57,50.99,66.38,62.81c3.86,5.17,6.88,9.63,8.94,12.77"/>
				</svg>
			</div>
			<div class="row text-center text-md-start py-2">
				<div class="col p-relative bottom-5">
					<ul class="breadcrumb d-block text-4 opacity-8 text-default mb-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="100">
						<li><a href="{{ route('front.homepage') }}" class="text-decoration-none text-default">{{ __('Inicio') }}</a></li>
						<li class="active">{{ __('Contacto') }}</li>
					</ul>
					<h1 class="font-weight-bold text-color-dark text-10 mt-1 mb-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">{{ __('Contacto') }}</h1>
				</div>
			</div>
		</div>
	</section>

	{{-- Contact Form and Information Section --}}
	<section class="section bg-transparent position-relative border-0 m-0 p-0">
		<div class="container custom-container-background custom-z-index-1 py-5">
			<div class="row position-relative z-index-1 pt-5-5">
				<div class="col">
					<form class="contact-form custom-form-style-1" action="{{ route('front.contact.store') }}" method="POST">
						@csrf
						<div class="contact-form-success alert alert-success d-none mt-4">
							<strong>{{ __('¡Éxito!') }}</strong> {{ __('Tu mensaje ha sido enviado correctamente. Te responderemos pronto.') }}
						</div>
						<div class="contact-form-error alert alert-danger d-none mt-4">
							<strong>{{ __('¡Error!') }}</strong> {{ __('Hubo un error al enviar tu mensaje. Por favor, intentá nuevamente o contactanos por WhatsApp.') }}
							<span class="mail-error-message text-1 d-block"></span>
						</div>
						<div class="row row-gutter-sm">
							<div class="form-group col-lg-6 mb-4">
								<input type="text" value="" data-msg-required="{{ __('Por favor ingresá tu nombre.') }}" maxlength="100" class="form-control" name="name" id="name" required placeholder="{{ __('Tu Nombre') }}">
							</div>
							<div class="form-group col-lg-6 mb-4">
								<input type="text" value="" data-msg-required="{{ __('Por favor ingresá tu número de teléfono.') }}" maxlength="100" class="form-control" name="phone" id="phone" required placeholder="{{ __('Número de Teléfono') }}">
							</div>
						</div>
						<div class="row row-gutter-sm">
							<div class="form-group col-lg-6 mb-4">
								<input type="email" value="" data-msg-required="{{ __('Por favor ingresá tu dirección de correo electrónico.') }}" data-msg-email="{{ __('Por favor ingresá una dirección de correo electrónico válida.') }}" maxlength="100" class="form-control" name="email" id="email" required placeholder="{{ __('Tu Email') }}">
							</div>
							<div class="form-group col-lg-6 mb-4">
								<input type="text" value="" data-msg-required="{{ __('Por favor ingresá el asunto.') }}" maxlength="100" class="form-control" name="subject" id="subject" required placeholder="{{ __('Asunto') }}">
							</div>
						</div>
						<div class="row">
							<div class="form-group col mb-4">
								<textarea maxlength="5000" data-msg-required="{{ __('Por favor ingresá tu mensaje.') }}" rows="10" class="form-control" name="message" id="message" required placeholder="{{ __('Tu Mensaje') }}"></textarea>
							</div>
						</div>
						<div class="row">
							<div class="form-group col mb-3">
								<button type="submit" class="btn btn-secondary btn-rounded border-0 font-weight-bold text-3 btn-px-5 py-3" data-loading-text="{{ __('Enviando...') }}">{{ __('ENVIAR MENSAJE') }}</button>
							</div>
						</div>
					</form>
					<hr class="my-5">
					<h2 class="text-color-dark font-weight-medium text-8 mt-5 mb-3">{{ __('Información de') }} <strong>{{ __('Contacto') }}</strong></h2>
					<p class="text-4 line-height-8 mb-4">{{ __('Estamos disponibles para acompañarte. Elegí el canal que prefieras.') }}</p>
					<div class="row py-4 mb-3">
						<div class="col-lg-6 pb-4 pb-lg-0">
							@if(config('site.social_media.whatsapp.active'))
								<div class="mb-4">
									<a href="{{ config('site.social_media.whatsapp.url') }}" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-rounded border-0 font-weight-bold text-3 px-5 py-3 mb-3">
										<i class="fab fa-whatsapp me-2"></i>{{ __('ESCRIBINOS POR WHATSAPP') }}
									</a>
									<p class="text-3-5 mb-0">{{ __('Canal rápido para consultas inmediatas.') }}</p>
								</div>
							@endif
							@if(config('site.contact.address'))
								<p class="text-4-5 pe-lg-2 text-dark font-weight-bold mb-3">{{ config('site.contact.address') }}</p>
							@endif
							<ul class="list list-unstyled">
								<li class="d-flex align-items-center mb-3">
									<i class="icons icon-envelope text-color-dark text-3 font-weight-bold position-relative top-1 me-3-5"></i>
									<a href="mailto:{{ config('site.contact.email') }}" class="d-inline-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-semibold text-4-5">{{ config('site.contact.email') }}</a>
								</li>
								<li class="d-flex align-items-center mb-3">
									<i class="icons icon-phone text-color-dark text-3 font-weight-bold position-relative top-1 me-3-5"></i>
									<a href="tel:{{ str_replace([' ', '-', '(', ')'], '', config('site.contact.phone')) }}" class="d-inline-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-semibold text-4-5">{{ config('site.contact.phone') }}</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	{{-- CTA Section --}}
	<section class="section section-height-3 bg-primary position-relative z-index-1 border-0 m-0">
		<div class="container">
			<div class="row align-items-center gy-5">
				<div class="col-xl-7 text-center text-xl-start appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="100">
					<h2 class="text-color-light font-weight-bold mb-1">{{ __('¿Buscás tranquilidad para tu familia?') }}</h2>
					<p class="text-color-light font-weight-semibold opacity-8 text-4 mb-0">{{ __('Plan de cobertura 100% digital. Simple, directo y efectivo.') }}</p>
				</div>
				<div class="col-xl-5 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="100">
					<div class="d-flex flex-column flex-sm-row align-items-center justify-content-center justify-content-xl-end">
						<a href="{{ route('front.homepage') }}" class="btn btn-light btn-rounded font-weight-bold border-0 text-color-dark text-3 px-5 btn-py-3">{{ __('COMENZAR AHORA') }}</a>
					</div>
				</div>
			</div>
		</div>
	</section>

</div>

@endsection

{{-- Google Maps Script - Comentado hasta que se necesite mostrar el mapa --}}
{{--
@push('scripts')
<script>
	// Google Maps
	(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
		({key: "{{ config('site.google_maps_api_key', 'YOUR_API_KEY') }}", v: "weekly"});
	async function initMap() {
		const { Map, InfoWindow } = await google.maps.importLibrary("maps");
		const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
		const map = new Map(document.getElementById("googlemaps"), {
			zoom: 14,
			center: { lat: {{ config('site.contact.latitude', -37.817240) }}, lng: {{ config('site.contact.longitude', 144.955820) }} },
			mapId: "{{ config('site.google_maps_map_id', 'YOUR_MAP_API_ID') }}",
		});
		const markers = [
			{
				position: { lat: {{ config('site.contact.latitude', -37.817240) }}, lng: {{ config('site.contact.longitude', 144.955820) }} },
				title: "{{ config('site.name') }}<br>{{ config('site.contact.address') ?? 'Office 1' }}<br>{{ __('Teléfono') }}: {{ config('site.contact.phone') }}",
			}
		];
		const infoWindow = new InfoWindow();
		markers.forEach(({ position, title }, i) => {
			const pin = new PinElement({
				background: "#e36159",
				borderColor: "#e36159",
				glyphColor: "#FFF",
			});
			const marker = new AdvancedMarkerElement({
				position,
				map,
				title: `${title}`,
				content: pin.element,
			});
			marker.addListener("click", ({ domEvent, latLng }) => {
				const { target } = domEvent;
				infoWindow.close();
				infoWindow.setContent(marker.title);
				infoWindow.open(marker.map, marker);
			});
		});
	}
	initMap();
</script>
@endpush
--}}