{% import "macros" as macros %}
{% set url = craft.app.request.url %}
{% set bannerImage = entry.bannerImage[0]|default({ url: ""}) %}

{% if url == "/" %}
	<header class="flex min-h-[75vh] flex-col items-stretch !bg-cover !bg-center !bg-no-repeat lg:min-h-screen" style="background:url({{bannerImage.url}});">
	<nav class="container flex items-center justify-between py-4 md:py-8">
		<!-- Logo -->
		<a href="{{ siteUrl }}" class="block shrink-0" aria-label="{{ siteName }} homepage">
				{% set logoPath = '@webroot' ~ assetManifest('/dist/images/logo.svg') %}
				{{ svg(logoPath)|attr({ class: 'object-contain h-10 xl:h-20' }) }}
		</a>
		<section class="invisible hidden lg:visible lg:flex lg:items-center lg:gap-12">
		<!-- Links -->
		<article class="flex items-center gap-12">
			{% for node in craft.entries.section("sitemap").level(1).all() %}
			<a href="{{ node.url }}" class="type-lg shrink-0 hover:text-pink"> {{ node.title }} </a>
			{% endfor %}
		</article>
		<!-- Social -->
		<article class="flex items-center gap-1">
		{% set socialMedia = [
				{
					label: "Facebook",
					url: "https://facebook.com/",
					value: globalBusinessDetails.facebookUsername
				},
				{
					label: "Instagram",
					url: "https://instagram.com/",
					value: globalBusinessDetails.instagramUsername
				},
				{
					label: "Twitter",
					url: "https://twitter.com/",
					value: globalBusinessDetails.twitterHandle
				},
				{
					label: "LinkedIn",
					url: "https://linkedin.com/company/",
					value: globalBusinessDetails.linkedinPage
				},
				{
					label: "YouTube",
					url: "https://youtube.com/channel/",
					value: globalBusinessDetails.youtubeChannel
				},
			] %}
			{% for item in socialMedia if item.value %}
				<li class="block w-1/5 px-2 mb-4 md:w-auto">
					<a href="{{ item.url ~ item.value }}" target="_blank" class="grid w-12 h-12 text-white rounded-full shrink-0 place-items-center bg-pink hover:bg-pink/90">
						<span class="sr-only">{{ item.label }}</span>
						{{ macros.icon("social/#{item.label|lower}","type-2xl") }}
					</a>
				</li>
			{% endfor %}
		</article>
		</section>
		<!-- Menu Button -->
		<button @click="menu = !menu" class="relative z-50 w-6 h-6 shrink-0 lg:invisible lg:hidden" :aria-label="menu ? 'close menu' : 'open menu'">
			<svg x-show="!menu" x-transition.opacity xmlns="http://www.w3.org/2000/svg" class="absolute inset-0 w-6 h-6 text-imperial" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
				<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16m-7 6h7" />
			</svg>
			<svg x-show="menu" x-transition.opacity xmlns="http://www.w3.org/2000/svg" :class="menu && 'opacity-100'"
								class="absolute inset-0 w-6 h-6 text-white opacity-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
			</svg>
		</button>
		<section x-show="menu" x-transition.opacity :class="menu && '-translate-x-full'"
							class="container fixed inset-y-0 z-40 flex flex-col items-stretch justify-between w-full h-full pt-24 pb-8 text-white left-full bg-imperial md:pb-12 lg:invisible lg:hidden">
			<!-- Links -->
			<article class="flex flex-col items-stretch gap-6 text-lg">
				{% for node in craft.entries.section("sitemap").level(1).all() %}
					<a href="{{ node.url }}"  @click="menu = false"  class="text-left shrink-0"> {{ node.title }} </a>
				{% endfor %}
			</article>
			<!-- Social -->
			<article class="flex items-center justify-start w-full gap-4">
				{% set socialMedia = [
					{
						label: "Facebook",
						url: "https://facebook.com/",
						value: globalBusinessDetails.facebookUsername
					},
					{
						label: "Instagram",
						url: "https://instagram.com/",
						value: globalBusinessDetails.instagramUsername
					},
					{
						label: "Twitter",
						url: "https://twitter.com/",
						value: globalBusinessDetails.twitterHandle
					},
					{
						label: "LinkedIn",
						url: "https://linkedin.com/company/",
						value: globalBusinessDetails.linkedinPage
					},
					{
						label: "YouTube",
						url: "https://youtube.com/channel/",
						value: globalBusinessDetails.youtubeChannel
					},
				] %}
				{% for item in socialMedia if item.value %}
					<a href="{{ item.url ~ item.value }}" target="_blank" class="grid w-12 h-12 bg-white rounded-full shrink-0 place-items-center hover:bg-white/9">
						<span class="sr-only">{{ item.label }}</span>
						{{ macros.icon("social/#{item.label|lower}","type-4xl text-imperial") }}
					</a>
				{% endfor %}
			</article>
		</section>
	</nav>
	<section data-aos="fade-right" class="container flex flex-col items-start justify-center flex-1 pt-12 pb-20">
		<h1 class="heading-0 max-w-3xl text-blue">{{entry.bannerTitle}} </h1>
		<p class="heading-3 text-imperial md:mt-4 xl:mt-8">Confidence starts with a brilliant smile.</p>
		<a href="{{entry.linkIt}}" class="pBtn tracking-widest mt-4 max-w-max md:mt-8 xl:mt-12">
			<span>{{entry.linkIt.text}}</span>
		</a>
	</section>
	</header>
{% else %} 
	<header class="relative flex flex-col items-stretch lg:pt-8 xl:min-h-[50vh]">
	<div class="absolute inset-0 z-10 w-full h-full overflow-hidden pointer-events-none lg:px-8 lg:pt-8 opacity-70 md:opacity-100">
		<img class="object-cover object-center w-full h-full lg:rounded-t-3xl" src="{{bannerImage.url}}" alt="" />
	</div>
	<!-- Image -->
	<nav class="container relative z-10 flex items-center justify-between py-4 md:py-8">
		<!-- Logo -->
			<a href="{{ siteUrl }}" class="block shrink-0" aria-label="{{ siteName }} homepage">
				{% set logoPath = '@webroot' ~ assetManifest('/dist/images/logo.svg') %}
				{{ svg(logoPath)|attr({ class: 'object-contain h-10 xl:h-20' }) }}
		</a>
		<section class="invisible hidden gap-6 lg:visible lg:flex lg:items-center xl:gap-12">
		<!-- Links -->
		<article class="flex items-center gap-2 text-base xl:text-lg">
			{% for node in craft.entries.section("sitemap").level(1).all() %}
			<a href="{{ node.url }}" class="px-4 py-2 transition-colors rounded-full shrink-0 hover:bg-pink hover:text-white {{ node.slug == craft.app.request.segments|first ? "bg-pink text-white px-4 py-2 rounded-full" }}"> {{ node.title }} </a>
			{% endfor %}
		</article>
		<!-- Social -->
		{% include "partials/socialIcons" %}
		</section>
		<!-- Menu Button -->
		<button @click="menu = !menu" class="relative z-50 w-6 h-6 shrink-0 lg:invisible lg:hidden" :aria-label="menu ? 'close menu' : 'open menu'">
			<svg x-show="!menu" x-transition.opacity xmlns="http://www.w3.org/2000/svg" class="absolute inset-0 w-6 h-6 text-imperial" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
				<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16m-7 6h7" />
			</svg>
			<svg x-show="menu" x-transition.opacity xmlns="http://www.w3.org/2000/svg" :class="menu && 'opacity-100'"
								class="absolute inset-0 w-6 h-6 text-white opacity-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
			</svg>
		</button>
		<section x-show="menu" x-transition.opacity :class="menu && '-translate-x-full'"
							class="container fixed inset-y-0 z-40 flex flex-col items-stretch justify-between w-full h-full pt-24 pb-8 text-white left-full bg-imperial md:pb-12 lg:invisible lg:hidden">
			<!-- Links -->
			<article class="flex flex-col items-stretch gap-6 text-lg">
				{% for node in craft.entries.section("sitemap").level(1).all() %}
					<a href="{{ node.url }}"  @click="menu = false"  class="text-left shrink-0"> {{ node.title }} </a>
				{% endfor %}
			</article>
			<!-- Social -->
			<article class="flex items-center justify-start w-full gap-4">
				{% set socialMedia = [
					{
						label: "Facebook",
						url: "https://facebook.com/",
						value: globalBusinessDetails.facebookUsername
					},
					{
						label: "Instagram",
						url: "https://instagram.com/",
						value: globalBusinessDetails.instagramUsername
					},
					{
						label: "Twitter",
						url: "https://twitter.com/",
						value: globalBusinessDetails.twitterHandle
					},
					{
						label: "LinkedIn",
						url: "https://linkedin.com/company/",
						value: globalBusinessDetails.linkedinPage
					},
					{
						label: "YouTube",
						url: "https://youtube.com/channel/",
						value: globalBusinessDetails.youtubeChannel
					},
				] %}
				{% for item in socialMedia if item.value %}
						<a href="{{ item.url ~ item.value }}" target="_blank" class="grid w-12 h-12 bg-white rounded-full shrink-0 place-items-center hover:bg-white/9">
							<span class="sr-only">{{ item.label }}</span>
							{{ macros.icon("social/#{item.label|lower}","type-4xl text-imperial") }}
						</a>
				{% endfor %}
			</article>
		</section>
	</nav>
	<section data-aos="fade-right" class="container relative z-10 flex flex-col items-stretch justify-center flex-1 py-16 md:pb-32 md:pt-16 xl:pt-24 xl:pb-40">
		<h1 class="heading-0 max-w-3xl text-blue"> {{entry.title}}</h1>
		<a href="/contact-us" class="mt-4 pBtn md:mt-8 xl:mt-12 max-w-max">
			<span>Book a no-obligation consultation</span>
		</a>
	</section>
	</header>
{% endif %}