@extends('layout.front.master')

@section('title', config('site.tagline', config('site.name')))
@section('description', config('site.seo.description') ?? config('site.description', ''))
@section('keywords', config('site.seo.keywords') ?? '')

@section('og_title', config('site.name'))
@section('og_description', config('site.og.description') ?? config('site.description', ''))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

@section('twitter_title', config('site.name'))
@section('twitter_description', config('site.twitter.description') ?? config('site.description', ''))
@section('twitter_image', brand_twitter_image())

@section('content')

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

	{{-- ==========================================
	     HERO — Carousel de slides (from DB)
	     ========================================== --}}
	@if(isset($carouselImages) && $carouselImages->count() > 0)
	<div id="slider" class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover show-dots-xs nav-style-diamond custom-nav-with-transparency nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'autoplayTimeout': 9000}" data-dynamic-height="['650px','650px','650px','550px','500px']" style="height: 650px;">
		<div class="owl-stage-outer">
			<div class="owl-stage">
				@foreach($carouselImages as $slide)
				<div class="owl-item position-relative" style="background-image: url({{ $slide->image_path }}); background-size: cover; background-position: center; height: 650px;">
					<div class="position-absolute top-0 left-0 w-100 h-100" style="background: rgba(0,0,0,0.3); z-index: 1;"></div>
					<div class="container h-100 position-relative" style="z-index: 2;">
						<div class="row align-items-center h-100">
							<div class="col text-center">
								<p class="text-4 text-color-primary font-weight-light mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 800, 'minWindowWidth': 0}">{{ $slide->subtitle ?? config('site.name') }}</p>
								<h1 class="text-color-light font-weight-extra-bold text-12 mt-3 mb-4 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="300" data-plugin-options="{'minWindowWidth': 0}">{{ $slide->title ?? config('site.tagline') }}</h1>
								<a href="{{ route('front.contact') }}" class="btn btn-primary btn-outline font-weight-bold btn-py-3 px-5 mt-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">{{ config('site.welcome.cta_label', __('SOLICITAR INFORMACIÓN')) }}</a>
							</div>
						</div>
					</div>
				</div>
				@endforeach
			</div>
		</div>
	</div>
	@else
	{{-- Fallback slide --}}
	<div id="slider" class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover show-dots-xs nav-style-diamond custom-nav-with-transparency nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'autoplayTimeout': 9000}" data-dynamic-height="['650px','650px','650px','550px','500px']" style="height: 650px;">
		<div class="owl-stage-outer">
			<div class="owl-stage">
				<div class="owl-item position-relative" style="background-image: url({{ asset('cd-project/img/demos/construction-2/slides/slide-1.jpg') }}); background-size: cover; background-position: center; height: 650px;">
					<div class="position-absolute top-0 left-0 w-100 h-100" style="background: rgba(0,0,0,0.3); z-index: 1;"></div>
					<div class="container h-100 position-relative" style="z-index: 2;">
						<div class="row align-items-center h-100">
							<div class="col text-center">
								<p class="text-4 text-color-primary font-weight-light mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 800, 'minWindowWidth': 0}">{{ config('site.name') }}</p>
								<h1 class="text-color-light font-weight-extra-bold text-12 mt-3 mb-4 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="300" data-plugin-options="{'minWindowWidth': 0}">{{ config('site.tagline', __('CADA PROPIEDAD, UNA OPORTUNIDAD')) }}</h1>
								<a href="{{ route('front.contact') }}" class="btn btn-primary btn-outline font-weight-bold btn-py-3 px-5 mt-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">{{ config('site.welcome.cta_label', __('SOLICITAR INFORMACIÓN')) }}</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	@endif

	{{-- ==========================================
	     SERVICES PREVIEW — 3 cards bajo el carousel
	     ========================================== --}}
	@if(is_module_active('services') && isset($services) && $services->count() > 0)
	<section class="section custom-angled section-angled bg-tertiary border-top-0 pt-4 pt-lg-5 pb-0 pb-lg-5 mb-5 mb-lg-0">
		<div class="section-angled-layer-bottom bg-light d-none d-lg-block"></div>
		<div class="section-angled-content mb-0 mb-lg-5 pb-lg-5 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
			<div class="container container-xl-custom pb-5">
				<div class="row pb-lg-5">
					@foreach($services->take(3) as $index => $service)
					<div class="col-lg-4 position-relative py-2 {{ $index === 0 ? 'active' : '' }}" data-carousel-navigate data-carousel-navigate-id="#slider" data-carousel-navigate-to="{{ $index + 1 }}">
						<div class="mt-{{ $index === 0 ? '5' : 'lg-5' }} mb-lg-5">
							<h4 class="text-color-secondary font-weight-bold text-5">{{ $service->title }}</h4>
							<p class="mb-2">{{ Str::limit(strip_tags($service->description), 150) }}</p>
							<p class="font-weight-bold mb-lg-3">
								<a href="{{ route('frontend.services.detail', $service->slug) }}" class="link-hover-style-1 text-color-primary">{{ __('SABER MÁS') }}+</a>
							</p>
						</div>
					</div>
					@endforeach
				</div>
			</div>
		</div>
	</section>
	@endif

	{{-- ==========================================
	     SERVICES CAROUSEL — Cards con SVG icons
	     ========================================== --}}
	@if(is_module_active('services') && isset($services) && $services->count() > 0)
	<section class="section bg-light border-0 p-0 m-0" id="services">
		<div class="container container-xl-custom">
			<div class="row">
				<div class="col">
					<p class="mb-1">{{ config('site.welcome.services_badge', __('QUÉ HACEMOS')) }}</p>
					<h3 class="text-secondary font-weight-bold text-capitalize text-7 mb-2">{{ config('site.welcome.services_heading', __('Nuestras líneas de negocio')) }}</h3>
				</div>
			</div>
			<div class="row">
				<div class="owl-carousel owl-theme custom-dots mt-3 mb-0" data-plugin-options="{'responsive': {'0': {'items': 1}, '476': {'items': 1}, '768': {'items': 2}, '992': {'items': 3}, '1200': {'items': 4}}, 'margin': 18, 'loop': false, 'nav': false, 'dots': true}">
					@foreach($services as $index => $service)
					<div>
						<div class="card custom-card border-radius-0">
							<div class="card-body text-center py-3">
								<div class="feature-box-icon d-flex justify-content-center w-auto my-2 py-4">
									@if($service->icon && str_ends_with($service->icon, '.svg'))
										<img class="icon-animated" width="80" height="80" src="{{ asset($service->icon) }}" alt="{{ $service->title }}" data-icon data-plugin-options="{'color': '#220c3c', 'animated': true, 'delay': {{ $index * 200 }}, 'strokeBased': true}" />
									@elseif($service->icon)
										<i class="{{ $service->icon }} text-8 text-secondary"></i>
									@elseif($service->image)
										<img class="icon-animated" width="80" height="80" src="{{ filter_var($service->image, FILTER_VALIDATE_URL) ? $service->image : asset($service->image) }}" alt="{{ $service->title }}" style="object-fit: cover; border-radius: 50%;" />
									@else
										<i class="fas fa-cog text-8 text-secondary"></i>
									@endif
								</div>
								<h4 class="card-title mb-3 text-5 text-secondary font-weight-bold">{{ $service->title }}</h4>
								<p class="card-text">{{ Str::limit(strip_tags($service->description), 120) }}</p>
								<p class="font-weight-bold mb-0 pb-4">
									<a href="{{ route('frontend.services.detail', $service->slug) }}" class="link-hover-style-1 text-color-primary">{{ __('SABER MÁS') }}+</a>
								</p>
							</div>
						</div>
					</div>
					@endforeach
				</div>
			</div>
		</div>
	</section>
	@endif

	{{-- ==========================================
	     ABOUT INLINE — Quiénes somos + counters inline
	     ========================================== --}}
	<section class="section custom-angled section-angled bg-tertiary border-top-0 pb-0 pb-lg-5 mb-5 mb-lg-0">
		<div class="section-angled-layer-top bg-light"></div>
		<div class="section-angled-layer-bottom bg-light d-none d-lg-block"></div>
		<div class="section-angled-content mb-0 mb-lg-5">
			<div class="container py-5 container-xl-custom custom-container">
				<div class="row align-items-center justify-content-center pt-5 pb-lg-5">
					<div class="col-md-8 col-xl-6 mb-md-5 mb-xl-4">
						<div class="position-relative pb-lg-5 mb-lg-5">
							<img src="{{ asset('cd-project/img/demos/construction-2/about-us/about-us-1.jpg') }}" class="img-fluid custom-img border-radius-0 max-w-90 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="600ms" alt="{{ config('site.name') }}">
							<img src="{{ asset('cd-project/img/demos/construction-2/about-us/about-us-2.jpg') }}" class="img-fluid custom-img border-radius-0 position-absolute custom-img-about appear-animation" data-appear-animation="expandIn" data-appear-animation-delay="600ms" alt="{{ config('site.name') }}">
						</div>
					</div>
					<div class="col-xl-6 mt-lg-5 mt-xl-0 pb-lg-5 mb-lg-5">
						<div class="ps-md-4 mt-5">
							<div class="row">
								<div class="col">
									<p class="mb-1">{{ config('site.about.badge', __('QUIÉNES SOMOS')) }}</p>
									<h3 class="text-secondary font-weight-bold text-capitalize text-7 mb-2">{{ config('site.welcome.about_heading', config('site.about.main_title', config('site.name'))) }}</h3>
								</div>
							</div>
							<div class="row">
								<div class="col">
									<p class="text-4 pt-2 mb-4">{{ config('site.about.main_subtitle', '') }}</p>
									@if(config('site.about.secondary_text'))
									<p class="mb-3">{{ config('site.about.secondary_text') }}</p>
									@endif
									<p class="font-weight-bold mb-3">
										<a href="{{ route('front.about') }}" class="link-hover-style-1 text-color-primary">{{ __('SABER MÁS') }}+</a>
									</p>
									{{-- Counters INLINE (como en el live) --}}
									@php
										$counters = config('site.about.counters', []);
										if (is_string($counters)) { $counters = json_decode($counters, true) ?? []; }
									@endphp
									@if(!empty($counters))
									<div class="row mb-4 counters counters-sm text-secondary">
										@foreach($counters as $counter)
										<div class="col-6 col-lg-3 mb-4 mb-lg-0 mt-4">
											<div class="counter">
												<strong data-to="{{ $counter['value'] ?? 0 }}" data-append="{{ $counter['append'] ?? '' }}">{{ $counter['value'] ?? 0 }}{{ $counter['append'] ?? '' }}</strong>
												<label class="text-2 pt-1">{{ $counter['label'] ?? '' }}</label>
											</div>
										</div>
										@endforeach
									</div>
									@endif
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	{{-- ==========================================
	     PROJECTS — Portfolio dinámico
	     ========================================== --}}
	@if(is_module_active('projects') && isset($featuredProjects) && $featuredProjects->count() > 0)
	<section class="section bg-light border-0 py-0 my-2">
		<div class="container container-xl-custom">
			<div class="row">
				<div class="col">
					<p class="mb-1 text-uppercase">{{ config('site.welcome.projects_badge', __('PROYECTOS DESTACADOS')) }}</p>
					<h3 class="text-secondary font-weight-bold text-capitalize text-7 mb-2">{{ config('site.welcome.projects_heading', __('Proyectos Destacados')) }}</h3>
				</div>
			</div>

			<div class="row row-gutter-sm mt-4">
				@foreach($featuredProjects as $index => $project)
				@php
					$projImg = $project->image
						? (filter_var($project->image, FILTER_VALIDATE_URL) ? $project->image : asset($project->image))
						: asset('cd-project/img/demos/construction-2/portfolio/portfolio-' . (($index % 4) + 1) . '.jpg');
				@endphp
				<div class="col-sm-6 col-lg-4 mb-3">
					<div class="portfolio-item pb-1">
						<a href="{{ route('frontend.projects.show', $project->slug) }}">
							<span class="thumb-info thumb-info-no-borders thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom border-radius-0">
								<span class="thumb-info-wrapper">
									<img src="{{ $projImg }}" class="img-fluid" alt="{{ $project->title }}">
								</span>
								<span class="thumb-info-title">
									<span class="thumb-info-inner">{{ $project->title }}</span>
									@if($project->categories && $project->categories->count() > 0)
										<span class="thumb-info-type">{{ $project->categories->first()->name }}</span>
									@endif
								</span>
							</span>
						</a>
					</div>
				</div>
				@endforeach
			</div>

			<div class="row">
				<div class="col text-center pb-4">
					<a href="{{ route('frontend.projects.index') }}" class="btn btn-primary btn-outline custom-btn font-weight-extra-bold mt-3 px-5 py-3 border-width-4">{{ __('VER PROYECTOS') }}+</a>
				</div>
			</div>
		</div>
	</section>
	@endif

	{{-- ==========================================
	     PARA NO RESIDENTES — Sección split (texto + imagen)
	     ========================================== --}}
	<section class="container-fluid mb-5 mb-lg-0">
		<div class="row">
			<div class="col-lg-6 px-0">
				<section class="section custom-angled section-angled bg-secondary border-top-0">
					<div class="section-angled-layer-top bg-light"></div>
					<div class="section-angled-layer-bottom bg-light d-none d-lg-block"></div>
					<div class="section-angled-content">
						<div class="container container-xl-custom">
							<div class="row justify-content-lg-end py-3">
								<div class="col-lg-10 custom-col pt-5 pb-lg-5 mt-5 mb-lg-5 px-3 px-lg-1 pe-lg-3">
									<div class="col px-0">
										<p class="mb-1 text-uppercase text-light opacity-7">{{ config('site.welcome.split_badge', __('PARA NO RESIDENTES')) }}</p>
										<h3 class="text-light font-weight-bold text-capitalize text-7 mb-2">{{ config('site.welcome.split_heading', __('Inversores extranjeros')) }}</h3>
									</div>
									<div class="row pe-3">
										<div class="col">
											<p class="text-4 text-light opacity-8 pt-2 mb-4">{{ config('site.welcome.split_text', __('Facilitamos su entrada al mercado español: asesoramiento fiscal, apertura de cuentas bancarias y gestión de hipotecas para no residentes.')) }}</p>
											@if(config('site.welcome.split_text_2'))
											<p class="text-light opacity-8">{{ config('site.welcome.split_text_2') }}</p>
											@endif
											<p class="mb-2 font-weight-bold">
												<a href="{{ route('front.contact') }}" class="link-hover-style-1 text-color-primary">{{ config('site.welcome.cta_label', __('SOLICITAR COTIZACIÓN')) }}+</a>
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
			<div class="col-lg-6 px-0 d-none d-lg-flex">
				@php
					$splitImg = asset('cd-project/img/demos/construction-2/services/services-1.jpg');
					if (is_module_active('gallery') && isset($galleryImages) && $galleryImages->count() > 0) {
						$firstGallery = $galleryImages->first();
						$splitImg = filter_var($firstGallery->img, FILTER_VALIDATE_URL) ? $firstGallery->img : asset($firstGallery->img);
					}
				@endphp
				<section class="section section-angled custom-angled section-angled-reverse section-center bg-secondary border-top-0 flex-grow-1 lazyload" data-bg-src="{{ $splitImg }}">
					<div class="section-angled-layer-top bg-light d-none d-lg-block"></div>
					<div class="section-angled-layer-bottom bg-light"></div>
					<div class="section-angled-content"></div>
				</section>
			</div>
		</div>
	</section>

	{{-- ==========================================
	     TESTIMONIALS — Opiniones de clientes (testimonials module)
	     ========================================== --}}
	@if(isset($testimonials) && $testimonials->count() > 0)
	<section class="section section-height-3 bg-light border-0 pt-3 pt-lg-0 pb-4">
		<div class="container container-xl-custom appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
			<div class="row">
				<div class="col">
					<p class="mb-1">{{ config('site.about.testimonials_badge', __('LO QUE DICEN')) }}</p>
					<h3 class="text-secondary font-weight-bold text-capitalize text-7 mb-2">{{ config('site.about.testimonials_title', __('Opiniones de clientes')) }}</h3>
				</div>
			</div>
			<div class="row">
				<div class="owl-carousel owl-theme custom-dots mt-3 mb-0" data-plugin-options="{'responsive': {'0': {'items': 1}, '476': {'items': 1}, '768': {'items': 2}, '992': {'items': 2}, '1200': {'items': 2}}, 'margin': 18, 'loop': true, 'nav': false, 'dots': true}">
					@foreach($testimonials as $t)
					<div>
						<div class="testimonial testimonial-style-4 custom-testimonial py-4 px-3">
							<blockquote class="px-3 ms-4">
								<p class="mb-0 font-weight-normal">{{ $t->description }}</p>
							</blockquote>
							<div class="testimonial-arrow-down"></div>
							<div class="testimonial-author pb-3 mt-1 ms-5">
								<div class="testimonial-author-thumbnail">
									<img src="{{ $t->image ?: asset('demo1/media/avatars/300-1.jpg') }}" class="img-fluid rounded-circle" alt="{{ $t->name }}">
								</div>
								<p><strong class="font-weight-extra-bold">{{ $t->name }}</strong><span class="text-1">{{ strtoupper($t->position ?? '') }}{{ $t->company ? ' - ' . strtoupper($t->company) : '' }}</span></p>
							</div>
						</div>
					</div>
					@endforeach
				</div>
			</div>
		</div>
	</section>
	@endif

</div>

{{-- CTA FINAL --}}
<section class="bg-color-primary">
	<div class="container container-xl-custom text-center align-items-center justify-content-center py-4">
		<div class="d-inline-flex align-items-center mx-auto flex-wrap flex-lg-nowrap justify-content-center">
			<h2 class="text-light font-weight-bold my-0 px-4 mb-3 mb-lg-0">{{ config('site.welcome.cta_title', config('site.about.cta_title', __('¿Listo para su próxima inversión?'))) }}</h2>
			<a href="{{ route('front.contact') }}" class="btn btn-outline btn-light rounded-0 text-hover-dark custom-btn-white text-3 font-weight-bold mt-4 mb-2 my-md-0 px-5 ms-2 py-3">{{ config('site.welcome.cta_label', __('SOLICITAR COTIZACIÓN')) }}</a>
		</div>
	</div>
</section>

@endsection