---
import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
const { tabHover1 } = Astro.props;
const { tabHover2 } = Astro.props;
const { tabHover3 } = Astro.props;
const { tabHover4 } = Astro.props;
const { tabHover5 } = Astro.props;
const { tabHover6 } = Astro.props;
const { tabHover7 } = Astro.props;


const { params, url } = Astro;
const partner = params.partner;

const url1 = new URL(Astro.request.url);

const urlPath = url1.pathname; 
const isVA = urlPath.includes("verbrauchsausweis-wohngebaeude");
const isVAG = urlPath.includes("verbrauchsausweis-gewerbe");
const isBA = urlPath.includes("bedarfsausweis-wohngebaeude");
const isBAG = urlPath.includes("bedarfsausweis-gewerbe-anfragen");
const isGGW = urlPath.includes("geg-nachweis-wohnen-anfragen");
const isGGG = urlPath.includes("geg-nachweis-gewerbe-anfragen");
const isWEA = urlPath.includes("welcher-ausweis");

const isWelt = urlPath.includes("immowelt");
const isNET = urlPath.includes("immonet");

---

<header id="header" class="w-full bg-white h-[81px] sm:pl-8">

	<div class="grid grid-cols-[min-content_1fr] items-center">
		

	<div class="w-[150px] h-[80px]">
	<div class="w-full h-full grid grid-col-1 justify-items-center items-center">
	<img class={isNET ? "w-[149px]" : isWelt ? "w-[109px]" : "w-[109px]"} src={`/images/partner/${partner}/${partner}.svg`} alt={partner} />
	</div>	
	</div>

<div>

<ul class="navlist">
<li><a href={`/${partner}/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/`}><button class={tabHover1}>Verbrauchsausweis</button></a></li>
<li><a href={`/${partner}/energieausweis-erstellen/verbrauchsausweis-gewerbe/`}><button class={tabHover2}>Verbrauchsausweis Gewerbe</button></a></li>
<li><a href={`/${partner}/energieausweis-erstellen/bedarfsausweis-wohngebaeude/`}><button class={tabHover3}>Bedarfsausweis</button></a></li>
<li><a href={`/${partner}/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/`}><button class={tabHover4}>Bedarfsausweis Gewerbe</button></a></li>
<li><a href={`/${partner}/angebot-anfragen/geg-nachweis-wohnen-anfragen/`}><button class={tabHover5}>GEG Nachweis Wohngebäude</button></a></li>
<li><a href={`/${partner}/angebot-anfragen/geg-nachweis-gewerbe-anfragen/`}><button class={tabHover6}>GEG Nachweis Gewerbe</button></a></li>
<li><a href={`/${partner}/welcher-ausweis/${partner}`}><button class={tabHover7}>Welcher Ausweis</button></a></li>
</ul>

</div>

</div>



</header>

<div id="titel" class="block w-full 2xl:h-[270px] lg:h-[148px] bg-cover px-24 py-20" 
style={`background-image: url('/images/partner/${partner}/hero-energieausweis.jpg'); 
background-repeat:no-repeat; background-position:right;`}>


	{isVA ? <div>Hier komfortabel und einfach online den <b>Verbrauchsausweis Wohngebäude</b> bestellen</div> : ""}
	{isVAG ? <div>Hier komfortabel und einfach online den <b>Verbrauchsausweis Gewerbe</b> bestellen</div> : ""}
	{isBA ? <div>Hier komfortabel und einfach online den <b>Bedarfsausweis Wohngebäude</b> bestellen</div> : ""}
	{isBAG ? <div>Hier komfortabel und einfach online den <b>Bedarfsausweis Gewerbe</b> anfragen</div> : ""}
	{isGGW ? <div>Hier komfortabel und einfach online den <b>GEG Nachweis Wohngebäude</b> anfragen</div> : ""}
	{isGGG ? <div>Hier komfortabel und einfach online den <b>GEG Nachweis Gewerbe</b> anfragen</div> : ""}
	{isWEA ? <div>Hier komfortabel und einfach online den richtigen Ausweis finden</div> : ""}
	

</div>

<style lang="postcss">

@font-face {
    font-family: "immo Sans";
    src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
    src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
         url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
}

#titel{
	font-family: "immo Sans";
	font-weight:400;
	
	div{@apply w-fit bg-white/75 py-6 px-16 rounded-lg ring-2 ring-black/15 text-[1.45rem];box-shadow:8px 8px 16px rgba(0,0,0,0.5);}
}

	.header-button {
		@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
	}

	.navlist {
	@apply flex flex-wrap flex-col sm:flex-row pl-[1.75rem] sm:pl-[1.75rem];
}
.navlist li {
	@apply pr-0 sm:pr-[6px] pb-1 sm:pb-0;
}
	.navlist li button{@apply text-[0.75rem] md:text-[1rem]  text-[#646464] sm:p-2 text-left
		hover:rounded-[1rem] hover:bg-[rgba(50,50,50,0.1)];
		font-family: "immo Sans";
		font-weight:400;}

	.glow{@apply rounded-[1rem] bg-[rgba(50,50,50,0.1)];}

</style>