@extends('layout.front.master')

@section('title', config('site.about.page_title', config('site.about.main_title', __('Nuestra empresa'))))
@section('description', config('site.seo.description', config('site.description', '')))
@section('keywords', config('site.seo.keywords', ''))

@section('og_title', config('site.about.page_title', config('site.about.main_title', __('Nuestra empresa'))))
@section('og_description', config('site.about.main_subtitle', config('site.description', '')))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

@php
	$pageTitle = config('site.about.page_title', config('site.about.main_title', __('Nuestra empresa')));
	$breadcrumbItems = [
		['label' => __('Inicio'), 'url' => front_homepage_url()],
		['label' => $pageTitle, 'url' => null],
	];
@endphp

@section('content')

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

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

	{{-- INTRO TEXT --}}
	<div class="container container-xl-custom pt-4">
		<div class="row">
			<div class="col">
				<p class="text-4">{{ config('site.about.main_subtitle', '') }}</p>
				@if(config('site.about.description_1', config('site.about.secondary_text')))
				<p>{{ config('site.about.description_1', config('site.about.secondary_text')) }}</p>
				@endif
			</div>
		</div>

		{{-- SERVICES — featured-boxes-style-7 (layout BewPro) --}}
		@if(is_module_active('services') && isset($services) && $services->count() > 0)
		<div class="row mt-3">
			<div class="col">
				<div class="featured-boxes featured-boxes-style-7">
					@php
						$chunks = $services->chunk(3);
					@endphp
					@foreach($chunks as $chunkIndex => $chunk)
					<div class="row {{ $chunkIndex > 0 ? 'justify-content-center mt-0' : '' }}">
						@foreach($chunk as $service)
						<div class="col-lg-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 150 * ($loop->index + 1) }}">
							<div class="featured-box custom-featured-box featured-box-primary featured-box-effect-7">
								<div class="box-content d-flex text-start align-items-center">
									@php
										$iconValue = $service->icon ?? 'fas fa-building';
										$isIconPath = $iconValue && (str_contains($iconValue, '/') || preg_match('/\.(svg|png|jpg|jpeg|webp)$/i', $iconValue));
									@endphp
									@if ($isIconPath)
										<img src="{{ filter_var($iconValue, FILTER_VALIDATE_URL) ? $iconValue : asset($iconValue) }}"
										     alt="{{ $service->title }}"
										     class="icon-featured ms-0 me-3"
										     style="width: 48px; height: 48px; object-fit: contain;">
									@else
										<i class="icon-featured {{ $iconValue }} text-8 text-secondary ms-0 me-3"></i>
									@endif
									<div>
										<h4 class="font-weight-bold text-5 text-secondary my-2">{{ $service->title }}</h4>
										<p class="mb-2">{{ Str::limit(strip_tags($service->description), 150) }}</p>
										<p class="text-2 font-weight-semibold mb-0">
											<a href="{{ route('frontend.services.detail', $service->slug) }}" class="link-hover-style-1 text-primary">{{ __('SABER MÁS') }} +</a>
										</p>
									</div>
								</div>
							</div>
						</div>
						@endforeach
					</div>
					@endforeach
				</div>
			</div>
		</div>
		@endif
	</div>

	{{-- GALLERY BAND --}}
	@if(isset($aboutGalleryImages) && $aboutGalleryImages->count() >= 3)
	<section class="section bg-primary border-0 my-5">
		<div class="container container-xl-custom">
			<div class="row row-gutter-sm my-4 py-2 lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
				@foreach($aboutGalleryImages->take(3) as $imgIndex => $galleryImg)
				<div class="col-md-4 {{ $imgIndex < 2 ? 'pb-4 pb-md-0' : '' }}">
					@php $imgUrl = filter_var($galleryImg->img, FILTER_VALIDATE_URL) ? $galleryImg->img : asset($galleryImg->img); @endphp
					<a href="{{ $imgUrl }}" class="appear-animation" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="{{ 100 + ($imgIndex * 200) }}">
						<img src="{{ $imgUrl }}" class="img-fluid" alt="{{ config('site.name') }}">
					</a>
				</div>
				@endforeach
			</div>
		</div>
	</section>
	@endif

	{{-- DESCRIPTION + COUNTERS --}}
	<div class="container container-xl-custom pt-3">
		@if(config('site.about.description_2', config('site.about.tertiary_text')))
		<div class="row">
			<div class="col">
				<p>{{ config('site.about.description_2', config('site.about.tertiary_text')) }}</p>
			</div>
		</div>
		@endif

		@php
			$counters = config('site.about.counters', []);
			if (is_string($counters)) { $counters = json_decode($counters, true) ?? []; }
		@endphp
		@if(!empty($counters))
		<div class="row counters counters-md text-secondary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="100">
			@foreach($counters as $counter)
			<div class="col-6 col-lg-{{ intval(12 / count($counters)) }} 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 class="row"><div class="col"><hr class="my-5"></div></div>

		{{-- TEAM --}}
		@if(isset($aboutTeam) && $aboutTeam->count() > 0)
		<div class="row">
			<div class="col">
				<p class="mb-1">{{ config('site.about.team_badge', __('NUESTRO EQUIPO')) }}</p>
				<h3 class="text-secondary font-weight-bold text-capitalize text-7 mb-5">{{ config('site.about.team_title', __('Equipo') . ' ' . config('site.name')) }}</h3>
			</div>
		</div>
		<div class="row">
			@foreach($aboutTeam as $member)
			<div class="col-md-6 col-lg-3 text-center pb-5 pb-lg-0 px-md-5 d-flex flex-column align-items-center appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 100 + ($loop->index * 100) }}">
				<div class="rounded-circle overflow-hidden mb-3" style="width: 110px; height: 110px;">
					@php
						$memberImg = $member->image
							? (filter_var($member->image, FILTER_VALIDATE_URL) ? $member->image : asset($member->image))
							: asset('cd-project/img/default-team-member.png');
					@endphp
					<img src="{{ $memberImg }}" class="img-fluid w-100 h-100" style="object-fit: cover;" alt="{{ $member->name }}">
				</div>
				<h4 class="text-color-secondary mb-1 text-4 font-weight-bold">{{ $member->name }}</h4>
				<p class="text-3 mb-0">{{ $member->position ?? '' }}</p>
			</div>
			@endforeach
		</div>
		<div class="row"><div class="col"><hr class="my-5"></div></div>
		@endif

		{{-- TESTIMONIALS --}}
		@if(isset($testimonials) && $testimonials->count() > 0)
		<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="col pb-5">
				<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">{{ $t->position ?? '' }}{{ $t->company ? ' - ' . $t->company : '' }}</span></p>
							</div>
						</div>
					</div>
					@endforeach
				</div>
			</div>
		</div>
		@endif
	</div>

	{{-- PROJECTS PREVIEW --}}
	@if(isset($aboutProjects) && $aboutProjects->count() > 0)
	<section class="section border-0 m-0" style="background-color: var(--primary);">
		<div class="container container-xl-custom">
			<div class="row justify-content-center mb-4">
				<div class="col-lg-8 text-center appear-animation" data-appear-animation="fadeInUpShorter">
					<span class="text-primary font-weight-bold text-2 text-uppercase ls-1">{{ config('site.modules.projects.page_header.title', __('Portfolio')) }}</span>
					<h3 class="text-color-light font-weight-bold text-7 mt-2">{{ config('site.welcome.projects_heading', __('Proyectos destacados')) }}</h3>
				</div>
			</div>
			<div class="row g-4">
				@foreach($aboutProjects as $project)
				<div class="col-md-6 col-lg-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 100 + ($loop->index * 100) }}">
					<a href="{{ route('frontend.projects.show', $project->slug) }}" class="text-decoration-none">
						<div class="card border-0 overflow-hidden h-100" style="background-color: var(--secondary); border-radius: var(--border-radius2x, 8px);">
							@php
								$projImg = $project->image
									? (filter_var($project->image, FILTER_VALIDATE_URL) ? $project->image : asset($project->image))
									: asset('cd-project/img/demos/construction-2/projects/project-1.jpg');
							@endphp
							<img src="{{ $projImg }}" class="card-img-top" alt="{{ $project->title }}" style="height: 180px; object-fit: cover;">
							<div class="card-body p-3">
								<h5 class="text-color-light font-weight-bold text-4 mb-1">{{ $project->title }}</h5>
								<p class="text-color-light opacity-7 text-2 mb-0">{{ Str::limit(strip_tags($project->description), 60) }}</p>
							</div>
						</div>
					</a>
				</div>
				@endforeach
			</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.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.about.cta_label', config('site.welcome.cta_label', __('SOLICITAR COTIZACIÓN'))) }}</a>
		</div>
	</div>
</section>

@endsection