@extends('layout.front.master')

@section('title', config('site.name') . ' | ' . __('About Us'))
@section('description', config('site.about.meta_description', __('Learn more about') . ' ' . config('site.name') . '. ' . __('We are committed to protecting what matters most to you.')))
@section('keywords', config('site.about.meta_keywords', 'about us, our story, insurance, company'))

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name') . ' - ' . __('About Us'))
@section('og_description', config('site.about.meta_description', __('Learn more about') . ' ' . config('site.name') . '. ' . __('We are committed to protecting what matters most to you.')))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', config('site.name') . ' - ' . __('About Us'))
@section('twitter_description', config('site.about.meta_description', __('Learn more about') . ' ' . config('site.name') . '.'))
@section('twitter_image', brand_twitter_image())

@section('content')

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

	@include('layout.front.partials.page-header-insurance', [
		'pageTitle' => __('About Us'),
		'pageBreadcrumb' => [
			['label' => __('Home'), 'url' => front_homepage_url()],
			['label' => __('About Us'), 'url' => null],
		],
	])

	{{-- Who We Are Section --}}
	<section class="section bg-transparent position-relative border-0 m-0 p-0">
		<div class="container custom-container-background custom-z-index-1 py-5">
			<div class="row position-relative z-index-1 pt-5-5">
				<div class="col">
					<h2 class="text-color-dark font-weight-medium text-8 mb-4-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="100">{{ config('site.about.who_title_1', __('Who We')) }} <strong>{{ config('site.about.who_title_2', __('Are')) }}</strong></h2>
					<p class="text-4-5 line-height-8 mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">{{ config('site.about.intro_paragraph_1', __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec velit magna, consectetur at suscipit eu, dapibus vel odio. Mauris ac nulla at ligula interdum ullamcorper. Nunc mattis eros nec eros dictum, nec molestie metus auctor. Nulla placerat nunc velit, a dictum lectus finibus quis. Nunc leo mauris, cursus vel tempor eu, tempus sed turpis.')) }}</p>
					<p class="mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="300">{{ config('site.about.intro_paragraph_2', __('Donec velit magna, consectetur at suscipit eu, dapibus vel odio. Mauris ac nulla at ligula interdum ullamcorper. Nunc mattis eros nec eros dictum, nec molestie metus auctor. Nulla placerat nunc velit, a dictum lectus finibus quis. Nunc leo mauris, cursus vel tempor eu, tempus sed turpis.')) }}</p>
					<figure class="custom-testimonial-style-1 mt-4 pt-2 mb-5-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">
						<blockquote class="ps-5-5 mb-0">
							<p class="text-4-5 line-height-7 mb-3">{{ config('site.about.quote_text', __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec velit magna, consectetur at suscipit eu, dapibus vel odio. Mauris ac nulla at ligula interdum ullamcorper.')) }}</p>
						</blockquote>
						<figcaption class="font-weight-bold text-color-dark positive-ls-2 ps-5-5 mb-3">{{ config('site.about.quote_author', __('JOHN DOE - CEO & FOUNDER')) }}</figcaption>
						@if(config('site.about.signature_image'))
							<img src="{{ asset(config('site.about.signature_image')) }}" class="img-fluid ps-5-5" alt="{{ config('site.about.quote_author', __('CEO and Founder')) }}" />
						@endif
					</figure>
					@php
						$kpiData = [
							'years_experience' => config('site.about.kpi_years', 35),
							'happy_customers' => config('site.about.kpi_customers', 4000),
							'agencies' => config('site.about.kpi_agencies', 100),
							'offices' => config('site.about.kpi_offices', 50),
						];
					@endphp
					<div class="row counters text-dark ps-lg-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="500">
						<div class="col-md-3 mb-5-5">
							<div class="counter text-center text-sm-start">
								<strong class="text-color-primary text-13 line-height-5" data-to="{{ $kpiData['years_experience'] }}" data-append="+" data-plugin-options="{'speed': 5000}">0</strong>
								<label class="font-weight-semibold text-5">{{ config('site.about.kpi_years_label', __('Business Year')) }}</label>
							</div>
						</div>
						<div class="col-md-3 mb-5-5">
							<div class="counter text-center text-sm-start">
								<strong class="text-color-primary text-13 line-height-5" data-to="{{ $kpiData['happy_customers'] }}" data-append="+" data-plugin-options="{'speed': 5000}">0</strong>
								<label class="font-weight-semibold text-5">{{ config('site.about.kpi_customers_label', __('Happy Customers')) }}</label>
							</div>
						</div>
						<div class="col-md-3 mb-4 mb-sm-0">
							<div class="counter text-center text-sm-start">
								<strong class="text-color-primary text-13 line-height-5" data-to="{{ $kpiData['agencies'] }}" data-append="+" data-plugin-options="{'speed': 5000}">0</strong>
								<label class="font-weight-semibold text-5">{{ config('site.about.kpi_agencies_label', __('Insurance Agencies')) }}</label>
							</div>
						</div>
						<div class="col-md-3">
							<div class="counter text-center text-sm-start">
								<strong class="text-color-primary text-13 line-height-5" data-to="{{ $kpiData['offices'] }}" data-append="+" data-plugin-options="{'speed': 5000}">0</strong>
								<label class="font-weight-semibold text-5">{{ config('site.about.kpi_offices_label', __('Insurance Offices')) }}</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	{{-- Our Story / History Timeline Tabs --}}
	<section class="section section-height-3 border-0 m-0">
		<div class="container">
			<div class="row">
				<div class="col">
					<h2 class="text-color-dark font-weight-medium text-8 mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="100">{{ config('site.about.story_title_1', __('Our')) }} <strong>{{ config('site.about.story_title_2', __('Story')) }}</strong></h2>
				</div>
			</div>
			@php
				$historyTabs = config('site.about.history_tabs', [
					['year' => '2000', 'title' => __('Company Foundation'), 'text' => __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia.'), 'detail' => __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.'), 'image' => 'cd-project/img/demos/insurance/generic/generic-1.jpg'],
					['year' => '2002', 'title' => __('Company Fact'), 'text' => __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia.'), 'detail' => __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo.'), 'image' => null],
					['year' => '2006', 'title' => __('Company Fact'), 'text' => __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia.'), 'detail' => __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo.'), 'image' => 'cd-project/img/demos/insurance/generic/generic-2.jpg'],
					['year' => '2012', 'title' => __('Company Fact'), 'text' => __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia.'), 'detail' => __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo.'), 'image' => null],
					['year' => '2020', 'title' => __('Company Fact'), 'text' => __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.'), 'detail' => null, 'image' => null],
				]);
			@endphp
			<div class="row">
				<div class="col-lg-3">
					<div class="tabs tabs-vertical tabs-right tabs-navigation tabs-navigation-simple">
						<ul class="nav nav-tabs col-sm-3">
							@foreach($historyTabs as $index => $tab)
								<li class="nav-item">
									<a class="nav-link {{ $index === 0 ? 'active' : '' }}" href="#tabsNavigationVertSimple{{ $index + 1 }}" data-bs-toggle="tab"><strong class="text-8 d-block text-end py-2 pe-4">{{ $tab['year'] }}</strong></a>
								</li>
							@endforeach
						</ul>
					</div>
				</div>
				<div class="col-lg-9">
					@foreach($historyTabs as $index => $tab)
						<div class="tab-pane tab-pane-navigation {{ $index === 0 ? 'active' : '' }}" id="tabsNavigationVertSimple{{ $index + 1 }}">
							<h4>{{ $tab['title'] }}</h4>
							<p>{{ $tab['text'] }}</p>
							@if(!empty($tab['image']))
								<img class="float-start img-fluid rounded-circle me-4 mb-4" width="200" src="{{ asset($tab['image']) }}" alt="{{ $tab['title'] }}">
							@endif
							@if(!empty($tab['detail']))
								<p>{{ $tab['detail'] }}</p>
							@endif
						</div>
					@endforeach
				</div>
			</div>
		</div>
	</section>

	{{-- Team Section --}}
	@if(is_module_active('team'))
	<section class="section section-height-3 border-0 m-0 bg-color-grey-scale-1">
		<div class="container">
			<div class="row">
				<div class="col text-center">
					<h2 class="text-color-dark font-weight-medium text-8 mb-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="100">{{ config('site.about.team_title_1', __('Our')) }} <strong>{{ config('site.about.team_title_2', __('Team')) }}</strong></h2>
				</div>
			</div>
			<div class="row justify-content-center gy-5">
				@forelse($teamMembers ?? collect() as $index => $member)
					<div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="{{ 100 + ($index * 100) }}">
						<div class="card border-0 border-radius-0 box-shadow-1 text-center">
							<div class="card-body p-4 py-5">
								@if($member->photo)
									<img src="{{ asset($member->photo) }}" alt="{{ $member->name }}" class="img-fluid rounded-circle mb-3" width="150" height="150" />
								@else
									<div class="rounded-circle bg-color-grey-scale-2 d-inline-flex align-items-center justify-content-center mb-3" style="width: 150px; height: 150px;">
										<i class="icons icon-user text-color-dark text-10"></i>
									</div>
								@endif
								<h4 class="text-color-dark font-weight-bold text-5 mb-1">{{ $member->name }}</h4>
								@if($member->position)
									<p class="text-color-primary font-weight-semibold text-3 mb-3">{{ $member->position }}</p>
								@endif
								@if($member->description)
									<p class="text-3-5 mb-0">{{ Str::limit($member->description, 120) }}</p>
								@endif
							</div>
						</div>
					</div>
				@empty
				@endforelse
			</div>
		</div>
	</section>
	@endif

	{{-- FAQs Section --}}
	<section class="section bg-transparent position-relative border-0 m-0 p-0">
		<div class="container pt-5 pb-5-5 mt-4">
			<div class="row gy-5 mb-5">
				<div class="col">
					@php
						$hasFaqs = is_module_active('faqs') && isset($faqs) && $faqs->count() > 0;
						$faqItems = $hasFaqs ? $faqs->take(5) : [];
					@endphp
					<div class="accordion custom-accordion-style-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="100" id="accordion1">
						@if($hasFaqs)
							@foreach($faqItems as $index => $faq)
								<div class="card card-default">
									<div class="card-header" id="collapse{{ $index + 1 }}Heading">
										<h4 class="card-title m-0">
											<a class="accordion-toggle text-color-dark font-weight-semibold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse{{ $index + 1 }}" aria-expanded="false" aria-controls="collapse{{ $index + 1 }}">
												{{ $index + 1 }} - {{ $faq->question }}
											</a>
										</h4>
									</div>
									<div id="collapse{{ $index + 1 }}" class="collapse" aria-labelledby="collapse{{ $index + 1 }}Heading" data-bs-parent="#accordion1">
										<div class="card-body">
											<p class="mb-0">{{ $faq->answer }}</p>
										</div>
									</div>
								</div>
							@endforeach
						@else
							@php
								$defaultFaqs = [
									['id' => 'One', 'q' => __('Why Choose') . ' ' . config('site.name') . '?', 'a' => __('Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.')],
									['id' => 'Two', 'q' => __('Cras a elit sit amet leo accumsan?'), 'a' => __('Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.')],
									['id' => 'Three', 'q' => __('Hel officitur felis ultricis nan?'), 'a' => __('Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.')],
									['id' => 'Four', 'q' => __('Wuspaisse hendreirit vehicula leo?'), 'a' => __('Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.')],
									['id' => 'Five', 'q' => __('Lintegers aliquet ullamcorper dollor, quis sollic tudin?'), 'a' => __('Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.')],
								];
							@endphp
							@foreach($defaultFaqs as $index => $faq)
								<div class="card card-default">
									<div class="card-header" id="collapse{{ $index + 1 }}Heading{{ $faq['id'] }}">
										<h4 class="card-title m-0">
											<a class="accordion-toggle text-color-dark font-weight-semibold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse{{ $index + 1 }}{{ $faq['id'] }}" aria-expanded="false" aria-controls="collapse{{ $index + 1 }}{{ $faq['id'] }}">
												{{ $index + 1 }} - {{ $faq['q'] }}
											</a>
										</h4>
									</div>
									<div id="collapse{{ $index + 1 }}{{ $faq['id'] }}" class="collapse" aria-labelledby="collapse{{ $index + 1 }}Heading{{ $faq['id'] }}" data-bs-parent="#accordion1">
										<div class="card-body">
											<p class="mb-0">{{ $faq['a'] }}</p>
										</div>
									</div>
								</div>
							@endforeach
						@endif
						<a href="{{ route('front.contact') }}" class="btn btn-secondary btn-rounded border-0 font-weight-bold text-3 btn-px-5 py-3 mt-5-5">{{ __('CONTACT US') }}</a>
					</div>
				</div>
			</div>
			{{-- Company Logos Section --}}
			@if(isset($companyLogos) && count($companyLogos) > 0)
				<div class="row">
					<div class="col">
						<hr>
					</div>
				</div>
				<div class="row align-items-center text-center py-5 my-2 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
					@foreach($companyLogos as $index => $logo)
						@php
							$logoSrc = filter_var($logo->image_path, FILTER_VALIDATE_URL) ? $logo->image_path : asset($logo->image_path);
						@endphp
						<div class="col-sm-4 col-xl-2 {{ $index < 3 ? 'mb-5 mb-xl-0' : ($index < 5 ? 'mb-5 mb-lg-0' : '') }}">
							<img src="{{ $logoSrc }}" alt="{{ $logo->name ?? __('Partner Logo') }}" class="img-fluid" style="max-width: 140px;" />
						</div>
					@endforeach
				</div>
			@endif
		</div>
	</section>

	{{-- CTA Section --}}
	<section class="section section-height-3 bg-primary position-relative z-index-1 border-0 m-0">
		<div class="container">
			<div class="row align-items-center gy-5">
				<div class="col-xl-7 text-center text-xl-start appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="100">
					<h3 class="text-color-light font-weight-medium text-4 mb-1">{{ config('site.about.cta_label', __('LOOKING FOR AFFORDABLE INSURANCE?')) }}</h3>
					<h2 class="text-color-light font-weight-bold mb-1">{{ config('site.about.cta_title', __('Get Insurance Online and Save Up To 20%!')) }}</h2>
					<p class="text-color-light font-weight-semibold opacity-8 text-4 mb-0">{{ config('site.about.cta_subtitle', __('Surprisingly great rates, get started right now.')) }}</p>
				</div>
				<div class="col-xl-5 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="100">
					<div class="d-flex flex-column flex-sm-row align-items-center justify-content-center justify-content-xl-end">
						<div class="d-inline-flex align-items-center mb-4 mb-sm-0">
							<i class="icons icon-phone text-7 text-color-light position-relative bottom-2"></i>
							<div class="ps-2">
								<span class="d-block text-2 font-weight-medium text-color-light line-height-1">{{ __('CALL US NOW') }}</span>
								<strong class="text-4"><a href="tel:{{ str_replace([' ', '-', '(', ')'], '', config('site.contact.phone')) }}" class="text-color-light text-decoration-none">{{ config('site.contact.phone', '800-123-4567') }}</a></strong>
							</div>
						</div>
						<div class="custom-divider px-3 me-3 ms-5-5 d-none d-sm-block"></div>
						<a href="{{ route('front.contact') }}" class="btn btn-light btn-rounded font-weight-bold border-0 text-color-dark text-3 px-5 btn-py-3">{{ __('GET STARTED') }}</a>
					</div>
				</div>
			</div>
		</div>
	</section>

</div>

@endsection