@php
	$hero_bg = setting('hero_bg') ?: './assets/img/photos/bg16.webp';
@endphp
<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-300 bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.3)]" data-image-src="{{ $hero_bg }}" style="background-image: url('{{ $hero_bg }}');">
	<div class="container pt-28 pb-36 xl:pt-32 lg:pt-32 md:pt-32 xl:pb-28 lg:pb-28 md:pb-28 !text-center">
	<div class="flex flex-wrap mx-[-15px]">
		<div class="lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="slideInDown" data-group="page-title" data-disabled="true">
		<h1 class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] font-semibold !leading-[1.15] !text-white !mb-4 md:!px-20 lg:!px-0 xl:!px-0" data-cue="slideInDown" data-group="page-title" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 0ms; animation-direction: normal; animation-fill-mode: both;">
			{!! t('Hayatı <span class="hero-underline yellow">kolaylaştıran</span> çözümler sunuyoruz') !!}
		</h1>
		<p class="lead !text-[1.2rem] !text-white !leading-[1.5] font-medium !mb-7 md:mx-[4rem] lg:mx-[2.5rem] xl:mx-[2.5rem]" data-cue="slideInDown" data-group="page-title" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 300ms; animation-direction: normal; animation-fill-mode: both;">{{ t('Hayatı kolaylaştıran uygulamaları insan odaklı, akılcı ve sade bir biçimde gerçekleştirmek için var gücümüzle çalışıyoruz.') }}</p>
		<div data-cue="slideInDown" data-group="page-title" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 600ms; animation-direction: normal; animation-fill-mode: both;">
			@php $social_media = json_decode(setting('social_links'), true) ?? []; @endphp
			<nav class="nav social social-white justify-center !text-center" aria-label="{{ t('Sosyal medya') }}">
				@if(!empty($social_media['Twitter']))
					<a class="!text-white hover:!text-[#5daed5] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $social_media['Twitter'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Twitter') }}"><i class="uil uil-twitter before:content-['\ed59']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
				@endif
			
				@if(!empty($social_media['Instagram']))
					<a class="!text-white hover:!text-[#c13584] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $social_media['Instagram'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Instagram') }}"><i class="uil uil-instagram before:content-['\eb9c']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
				@endif
				@if(!empty($social_media['Youtube']))
					<a class="!text-white hover:!text-[#ff0000] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $social_media['Youtube'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('YouTube') }}"><i class="uil uil-youtube before:content-['\edb5']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
				@endif
				@if(!empty($social_media['Github']))
					<a class="!text-white hover:!text-[#2dba4e] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $social_media['Github'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('GitHub') }}"><i class="uil uil-github before:content-['\eb40']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
				@endif
				@if(!empty($social_media['Linkedin']))
					<a class="!text-white hover:!text-[#0077b5] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $social_media['Linkedin'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('LinkedIn') }}"><i class="uil uil-linkedin before:content-['\ebd5']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
				@endif
				@php 
					$google_play = $social_media['googleplay'] ?? $social_media['google_play'] ?? $social_media['GooglePlay'] ?? $social_media['Googleplay'] ?? '';
					$apple_store = $social_media['applestore'] ?? $social_media['apple_store'] ?? $social_media['AppleStore'] ?? $social_media['Applestore'] ?? $social_media['apple'] ?? $social_media['Apple'] ?? '';
					$microsoft_store = $social_media['microsoftstore'] ?? $social_media['microsoft_store'] ?? $social_media['MicrosoftStore'] ?? $social_media['Microsoftstore'] ?? 'https://apps.microsoft.com/search/publisher?name=Truncgil+Teknoloji&hl=tr-TR&gl=TR';
				@endphp
				@if(!empty($google_play))
					<a class="!text-white hover:!text-[#34A853] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $google_play }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Google Play') }}"><i class="uil uil-google-play before:content-['\eb4f']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
				@endif
				@if(!empty($apple_store))
					<a class="!text-white hover:!text-[#A2AAAD] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $apple_store }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('App Store') }}"><i class="uil uil-apple before:content-['\e938']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
				@endif
				@if(!empty($microsoft_store))
					<a class="!text-white hover:!text-[#00A4EF] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $microsoft_store }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Microsoft Store') }}"><i class="uil uil-microsoft before:content-['\ec03']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
				@endif
			</nav>
		</div>
		</div>
		<!-- /column -->
	</div>
	<!-- /.row -->
	</div>
	<!-- /.container -->
	<div class="overflow-hidden">
	<div class="divider !text-[#fefefe] mx-[-0.5rem]">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60">
		<path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z"></path>
		</svg>
	</div>
	</div>
</section>

<style>
.hero-underline {
	position: relative;
	z-index: 2;
	display: inline-block;
}
.hero-underline::after {
	content: "";
	position: absolute;
	z-index: -1;
	display: block;
	background-repeat: no-repeat;
	background-position: bottom center;
	bottom: -0.15em;
	width: 110%;
	height: 0.35em;
	left: 50%;
	transform: translateX(-50%) !important;
}

@media (max-width: 767.98px) {
  .image-wrapper {
    background-image: none !important;
    position: relative !important;
  }
  .image-wrapper::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background-image: linear-gradient(rgba(30, 34, 40, 0.45), rgba(30, 34, 40, 0.45)), url('{{ $hero_bg }}') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: -1 !important;
  }
  .image-wrapper .divider {
    display: none !important;
  }
}
</style>