@extends('front.layout.app')
@section('content')

	<section class="page-title">
		<div class="container">
			<h1>{{ $serviceArea->heading }}</h1>
		</div>
	</section>

	<main id="main">
		<section class="service-area-detail-section py-5">
			<div class="container">
				<div class="row g-4 g-xl-5">
					<div class="col-lg-8">
						<article class="service-area-detail-content" data-aos="fade-up" data-aos-duration="1200">
							@if(!empty($serviceArea->featured_img) && file_exists(storage_uploads('module/service-areas/' . $serviceArea->featured_img)))
							<div class="detailimg mb-4">
								<img src="{{ asset_uploads('module/service-areas/' . $serviceArea->featured_img) }}"
									title="{{ $serviceArea->featured_img_title }}" 
									alt="{{ $serviceArea->featured_img_alt }}">
							</div>
							@endif
							
							<h2>{{ $serviceArea->heading }}</h2>
							{!! adjustUrl($serviceArea->content) !!}
						</article>
					</div>

					<div class="col-lg-4">
						<aside class="service-detail-sidebar" data-aos="fade-left" data-aos-duration="1200">
							<div class="sidebar-widget">
								<h3>Service Areas</h3>
								<ul class="sidebar-links">
									@foreach ($allServiceAreas as $area)
									<li>
										<a href="{{ url('service-areas/' . basename($area->post_slug)) }}" 
										   class="{{ $area->id == $serviceArea->id ? 'active' : '' }}">
											{{ $area->heading }}
										</a>
									</li>
									@endforeach
								</ul>
							</div>

							<div class="service-side-card sidebar-widget">
								<h3>Our Services</h3>
								<p class="small text-muted mb-3">We offer professional painting services in {{ $serviceArea->heading }} and surrounding areas.</p>
								<div class="main-btn mt-3">
									<a href="{{ url('services') }}">VIEW ALL SERVICES <i class="fa-solid fa-arrow-right"></i></a>
								</div>
							</div> 

							<!--<div class="service-side-card sidebar-widget">-->
							<!--		<h3>Service Snapshot</h3>-->
							<!--		<ul class="side-bullets">-->
							<!--			<li><i class="fa-solid fa-clock"></i><span>Typical timeline:</span> 3–7 days</li>-->
							<!--			<li><i class="fa-solid fa-user-tie"></i><span>Team:</span> Skilled &amp; organized painters</li>-->
							<!--			<li><i class="fa-solid fa-shield"></i><span>Coverage:</span> Licensed &amp; insured</li>-->
							<!--			<li><i class="fa-solid fa-swatchbook"></i><span>Options:</span> Finish level guidance</li>-->
							<!--		</ul>-->
							<!--		<div class="main-btn mt-3">-->
							<!--			<a href="{{ route('contact') }}">REQUEST ESTIMATE <i class="fa-solid fa-arrow-right"></i></a>-->
							<!--		</div>-->
							<!--	</div>-->
						</aside>
					</div>
				</div>
			</div>
		</section>

		@if(count($featuredServices) > 0)
		<section class="related-services-section pb-5 mt-5">
			<div class="container">
				<div class="main_title mb-4 mb-lg-5" data-aos="fade-up" data-aos-duration="1200">
					<span class="subtitle">OUR SERVICES</span>
					<h2>Services We Offer in {{ $serviceArea->heading }}</h2>
				</div>

				<div class="row g-4">
					@foreach ($featuredServices as $index => $service)
					<div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-delay="{{ $index * 100 }}" data-aos-duration="1200">
						<article class="service-tile">
							<div class="service-tile-img">
								<img src="{{ asset_uploads('services/' . $service->featured_image) }}" 
									 alt="{{ $service->featured_image_alt ?? $service->title }}"
									 title="{{ $service->featured_image_title ?? $service->title }}">
								@if(!empty($service->image_icon))
								<span class="service-tile-icon"><i class="{{ $service->image_icon }}"></i></span>
								@else
								<span class="service-tile-icon"><i class="fa-solid fa-paint-roller"></i></span>
								@endif
							</div>
							<div class="service-tile-body">
								<h3>{{ $service->title }}</h3>
								@if(!empty($service->excerpt))
								<p>{{ $service->excerpt }}</p>
								@endif
								<a class="service-tile-btn" href="{{ url('services/' . $service->slug) }}">View Details <i class="fa-solid fa-arrow-right"></i></a>
							</div>
						</article>
					</div>
					@endforeach
				</div>
			</div>
		</section>
		@endif
	</main>

@endsection

@section('beforeHeadClose')
	<style>
		.service-area-detail-content {
			background: #fff;
			padding: 30px;
			border-radius: 10px;
			box-shadow: 0 2px 10px rgba(0,0,0,0.05);
		}
		
		.service-area-detail-content h2 {
			color: #ef5507;
			margin-bottom: 20px;
		}
		
		.service-area-detail-content img {
			width: 100%;
			border-radius: 10px;
		}
		
		.sidebar-links li a.active {
			background: #ef5507;
			color: #fff;
		}
		
		.service-side-card.bg-primary {
			background: #ef5507 !important;
		}
		
		.service-side-card .btn-light {
			background: #fff;
			color: #ef5507;
			padding: 12px 25px;
			border-radius: 25px;
			text-decoration: none;
			display: inline-block;
			font-weight: 600;
			transition: all 0.3s ease;
		}
		
		.service-side-card .btn-light:hover {
			background: #f8f9fa;
			transform: translateY(-2px);
		}
	</style>
@endsection