@extends('front.layout.app')
@section('content')
    @php $settingArr = settingArr(); @endphp
    @php echo cms_edit_page('cms',$about->id); @endphp

	<!-- Slider start -->
		<section class="page-title">
			<div class="container">
				<h1>About Us</h1>
			</div>
		</section>
		<!-- Slider end --> 

		<main id="main">
			<section class="about-intro-section py-5">
				<div class="container">
					<div class="row align-items-center g-4 g-lg-5">
						<div class="col-lg-6">
							<div class="about-intro-image" data-aos="fade-right" data-aos-duration="1200">
                                <img src="{{ asset_uploads('') . 'module/cms/' . $about->featured_img }}" class="img-fluid"
                                title="{{ $about->featured_img_title }}" alt="{{ $about->featured_img_alt }}">
					
							</div>
						</div>
						<div class="col-lg-6">
						 @php echo adjustUrl($about->content) @endphp
							<div class="main-btn mt-4" data-aos="fade-up" data-aos-delay="240" data-aos-duration="1200">
								<a href="{{ route('contact') }}">GET A FREE ESTIMATE <i class="fa-solid fa-arrow-right"></i></a>
							</div>
						</div>
					</div>
				</div>
			</section>

						 @php
	$scwidget_values = get_widgets(widget: 95);
	$af_data = $scwidget_values ? json_decode($scwidget_values->additional_field_data) : null;
	@endphp
			<section class="about-values-section py-5">
				<div class="container">
					<div class="main_title text-center mb-4 mb-lg-5" data-aos="fade-up" data-aos-duration="1200">
						<span class="subtitle">OUR VALUES</span>
						<h2>Why Clients Choose AZTEC PAINTING</h2>
					</div>
					<div class="row g-4">
					
						{!! $scwidget_values->content  !!}


					</div>
				</div>
			</section>
			 @php
	$scwidget_process = get_widgets(widget: 96);
	$af_data = $scwidget_process ? json_decode($scwidget_process->additional_field_data) : null;
	@endphp
			<section class="about-process-section py-5">
				<div class="container">
					<div class="row g-4 g-lg-5 align-items-center">
                        <div class="col-lg-6">
							<div class="main_title mb-3" data-aos="fade-up" data-aos-duration="1200">
								<span class="subtitle">OUR PROCESS</span>
								<h2>{{ $scwidget_process->heading  }}</h2>
							</div>
							<p class="about-text" data-aos="fade-up" data-aos-delay="120" data-aos-duration="1200">
								{{ $af_data->additional_field_1  }}
							</p>
							 
						</div>

						<div class="col-lg-6">
							<div class="process-list">
							
                {!! $scwidget_process->content !!} 

							</div>
						</div>
						
					</div>
				</div>
			</section>

			<section class="about-cta-section py-5">
				<div class="container">
					<div class="about-cta-box text-center" data-aos="fade-up" data-aos-duration="1200">
						<div class="main_title mb-3">
							<span class="subtitle">READY TO START?</span>
							<h2>Let’s Transform Your Space with Confidence</h2>
						</div>
						<p>Book your free estimate today and get expert recommendations tailored to your home or business.</p>
						<div class="main-btn mt-3">
							<a href="{{ route('contact') }}">BOOK YOUR FREE ESTIMATE <i class="fa-solid fa-arrow-right"></i></a>
						</div>
					</div>
				</div>
			</section>
		</main>
@endsection
@section('beforeBodyClose')
    <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="text-center row" id="videoContainer"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $("#videoModal").on('hidden.bs.modal', function(e) {
            $("#videoModal iframe").attr("src", '');
            $("#videoModal video").attr("src", '');
            $("#videoContainer").html('');
        });

        function showModuleVideoModal(video) {
            var htmlStr = `${video}`;
            $('#videoContainer').html(htmlStr);
            $('#videoModal').modal('show');
        }
    </script>
@endsection