@extends('layout.front.master')

@section('title', __('Contacto'))
@section('description', config('site.contact.page_subtitle', __('Consúltenos sobre inversión inmobiliaria, propiedades llave en mano, reparaciones o soporte para administradores.')) . ' ' . config('site.contact.phone') . ' | ' . config('site.contact.email'))
@section('keywords', config('site.seo.keywords') . ', contacto, cotización, consulta')

{{-- Open Graph Meta Tags --}}
@section('og_title', __('Contacto'))
@section('og_description', config('site.contact.page_subtitle', config('site.description', '')))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', __('Contacto') . ' | ' . config('site.name'))
@section('twitter_description', config('site.contact.page_subtitle', config('site.description', '')))
@section('twitter_image', brand_twitter_image())

@php
	$pageTitle = __('Contacto');
	$breadcrumbItems = [
		['label' => __('Inicio'), 'url' => front_homepage_url()],
		['label' => $pageTitle, 'url' => null],
	];
@endphp

@section('content')

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

{{-- Page Header — shared partial --}}
@include('layout.front.partials.page-header-construction-2', [
	'pageTitle' => $pageTitle,
	'pageBreadcrumb' => $breadcrumbItems,
])

	<div class="container container-xl-custom pt-5">
		<div class="row">
			<div class="col">
				<p class="mb-1">{{ config('site.contact.page_badge', __('PÓNGASE EN CONTACTO')) }}</p>
				<h3 class="text-secondary font-weight-bold text-capitalize text-7 mb-3">{{ config('site.contact.page_title', __('¿Listo para su próxima inversión?')) }}</h3>
			</div>
		</div>
		<div class="row pb-4">
			<div class="col-lg-7 pb-5">

				<p>
					{{ config('site.contact.page_subtitle', __('Consúltenos sobre inversión inmobiliaria, propiedades llave en mano, reparaciones o soporte para administradores. Respondemos a la mayor brevedad.')) }}
				</p>

				<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>{{ __('¡Mensaje enviado!') }}</strong> {{ config('site.contact.success_message', __('Su consulta ha sido recibida correctamente.')) }}
					</div>

					<div class="contact-form-error alert alert-danger d-none mt-4">
						<strong>{{ __('Error.') }}</strong> {{ config('site.contact.error_message', __('No se pudo enviar el mensaje. Intente de nuevo o contáctenos por teléfono.')) }}
						<span class="mail-error-message text-1 d-block"></span>
					</div>
					<div class="row">
						<div class="form-group col">
							<input type="text" placeholder="{{ __('Nombre') }}" value="" data-msg-required="{{ __('Introduzca su nombre.') }}" maxlength="100" class="form-control bg-color-tertiary" name="name" id="name" required>
						</div>
					</div>
					<div class="row">
						<div class="form-group col">
							<input type="email" placeholder="{{ __('Correo electrónico') }}" value="" data-msg-required="{{ __('Introduzca su correo.') }}" data-msg-email="{{ __('Introduzca un correo válido.') }}" maxlength="100" class="form-control bg-color-tertiary" name="email" id="email" required>
						</div>
					</div>
					<div class="row">
						<div class="form-group col">
							<input type="text" placeholder="{{ __('Teléfono') }}" value="" data-msg-required="{{ __('Introduzca su teléfono.') }}" maxlength="100" class="form-control bg-color-tertiary" name="phone" id="phone" required>
						</div>
					</div>
					<div class="row">
						<div class="form-group col">
							<input type="text" placeholder="{{ __('Asunto') }}" value="" data-msg-required="{{ __('Introduzca el asunto.') }}" maxlength="100" class="form-control bg-color-tertiary" name="subject" id="subject" required>
						</div>
					</div>
					<div class="row">
						<div class="form-group col">
							<textarea maxlength="5000" placeholder="{{ __('Mensaje') }}" data-msg-required="{{ __('Introduzca su mensaje.') }}" rows="5" class="form-control bg-color-tertiary" name="message" id="message" required></textarea>
						</div>
					</div>
					<div class="row">
						<div class="form-group col">
							<input type="submit" value="{{ __('ENVIAR MENSAJE') }}" class="btn btn-outline btn-primary rounded-0 py-3 px-5 font-weight-semibold" data-loading-text="{{ __('Enviando...') }}">
						</div>
					</div>
				</form>

			</div>
			<div class="col-lg-5">
				<div class="custom-card-style-2 card-contact-us mb-5">
					<div class="m-4">
						<div class="row flex-column px-5 pt-3 pb-4">
							@php
								$addressLine1 = config('site.contact.address.line1');
								$addressLine2 = config('site.contact.address.line2');
								$addressCity = config('site.contact.address.city');
								$addressFull = $addressLine1 || $addressLine2 || $addressCity
									? trim(implode(', ', array_filter([$addressLine1, $addressLine2, $addressCity])))
									: (is_string(config('site.contact.address')) ? config('site.contact.address') : '');
								$contactPhone = config('site.contact.phone');
								$contactPhoneNumber = config('site.contact.phone_number', $contactPhone);
								$contactEmail = config('site.contact.email');
								$contactSchedule = config('site.contact.hours');
							@endphp
							<div class="row px-3 mb-3">
								<h3 class="text-secondary font-weight-bold text-capitalize my-3">{{ __('Datos de contacto') }}</h3>
								<p>{{ config('site.contact.card_subtitle', __('Estamos en la Costa del Sol. Escríbanos o llámenos para inversiones, reparaciones o consultas.')) }}</p>
							</div>
							@if($addressFull)
							<div class="row px-lg-3 pb-2 align-items-center">
								<div class="col-2 col-lg-1 px-1 text-center">
									<i class="fas fa-map-marker-alt text-8 text-secondary"></i>
								</div>
								<div class="col-10 col-lg-11">
									<h4 class="text-secondary font-weight-bold text-capitalize mb-0">{{ __('Dirección') }}</h4>
									<p class="mb-0">{{ $addressFull }}</p>
								</div>
							</div>
							<hr class="my-3 opacity-5">
							@endif
							@if($contactPhone)
							<div class="row px-lg-3 py-2 align-items-center">
								<div class="col-2 col-lg-1 px-1 text-center">
									<i class="fas fa-mobile-alt text-8 text-secondary"></i>
								</div>
								<div class="col-10 col-lg-11">
									<h4 class="text-secondary font-weight-bold text-capitalize mb-0">{{ __('Teléfono') }}</h4>
									<p class="mb-0"><a href="tel:{{ $contactPhoneNumber }}" class="text-color-default">{{ $contactPhone }}</a></p>
								</div>
							</div>
							<hr class="my-3 opacity-5">
							@endif
							@if($contactEmail)
							<div class="row px-lg-3 py-2 align-items-center">
								<div class="col-2 col-lg-1 px-1 text-center">
									<i class="far fa-envelope text-7 text-secondary"></i>
								</div>
								<div class="col-10 col-lg-11">
									<h4 class="text-secondary font-weight-bold text-capitalize mb-0">{{ __('Correo electrónico') }}</h4>
									<p class="mb-0"><a class="px-0 text-default" href="mailto:{{ $contactEmail }}">{{ $contactEmail }}</a></p>
								</div>
							</div>
							<hr class="my-3 opacity-5">
							@endif
							@if($contactSchedule)
							<div class="row px-lg-3 pt-2 align-items-center">
								<div class="col-2 col-lg-1 px-1 text-center">
									<i class="far fa-calendar-alt text-7 text-secondary"></i>
								</div>
								<div class="col-10 col-lg-11">
									<h4 class="text-secondary font-weight-bold text-capitalize mb-0">{{ __('Horario') }}</h4>
									<p class="mb-1">{{ $contactSchedule }}</p>
								</div>
							</div>
							@endif
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	{{-- Google Maps iframe (mismo patrón que demo-restaurant — sin API key) --}}
	@php
		$mapAddress = config('site.contact.address');
		if (is_array($mapAddress)) {
			$mapAddress = trim(
				($mapAddress['line1'] ?? '') .
				(isset($mapAddress['line2']) && $mapAddress['line2'] ? ' - ' . $mapAddress['line2'] : '') .
				(isset($mapAddress['zip']) && $mapAddress['zip'] ? ' - ' . $mapAddress['zip'] : '') .
				(isset($mapAddress['city']) && $mapAddress['city'] ? ' - ' . $mapAddress['city'] : '') .
				(isset($mapAddress['state']) && $mapAddress['state'] ? ', ' . $mapAddress['state'] : '') .
				(isset($mapAddress['country']) && $mapAddress['country'] ? ', ' . $mapAddress['country'] : '')
			);
		}
		$mapAddress = $mapAddress ?: config('site.name', 'Argentina');
		$mapEmbedUrl = 'https://www.google.com/maps?q=' . urlencode($mapAddress) . '&output=embed&zoom=15';
	@endphp
	<div class="position-relative appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="300">
		<iframe
			src="{{ $mapEmbedUrl }}"
			width="100%"
			height="500"
			style="border:0; display:block;"
			allowfullscreen=""
			loading="lazy"
			referrerpolicy="no-referrer-when-downgrade"
			title="{{ __('Ubicación de') }} {{ config('site.name') }}">
		</iframe>
	</div>

</div>
<section class="bg-color-primary">
	<div class="container container-xl-custom py-5">
		<div class="row text-center text-light justify-content-center">
			<div class="col-lg-8">
				<p class="text-3 opacity-7 mb-1 text-uppercase font-weight-bold">{{ config('site.contact.cta_badge', __('NUESTRO COMPROMISO')) }}</p>
				<h2 class="font-weight-bold text-light mb-4">{{ config('site.contact.cta_title', __('Respuesta garantizada en menos de 24 horas')) }}</h2>
				<p class="text-4 opacity-8 mb-5">{{ config('site.contact.cta_subtitle', __('Cada consulta la atiende un asesor especializado. Sin formularios genéricos, sin esperas. Cuéntenos su situación y le presentamos un plan concreto.')) }}</p>
				<div class="d-flex gap-3 justify-content-center flex-wrap">
					<a href="{{ route('frontend.services.index') }}" class="btn btn-outline btn-light rounded-0 text-hover-dark custom-btn-white text-3 font-weight-semibold px-5 py-3">{{ __('VER SERVICIOS') }}</a>
					@if(is_module_active('projects'))
					<a href="{{ route('frontend.projects.index') }}" class="btn btn-secondary rounded-0 text-3 font-weight-semibold px-5 py-3">{{ __('VER PROYECTOS') }}</a>
					@endif
				</div>
			</div>
		</div>
	</div>
</section>

@endsection