---
import { validateAccessTokenServer } from "#server/lib/validateAccessToken";
import SidebarWidgetLogin from "./SidebarWidgetLogin.svelte";
import SidebarWidgetProfile from "./SidebarWidgetProfile.svelte"

const loggedin = await validateAccessTokenServer(Astro)
---

<div class="flex flex-col gap-4">
	{ !loggedin ? 
		<SidebarWidgetLogin client:load></SidebarWidgetLogin> : <SidebarWidgetProfile></SidebarWidgetProfile>}

	<div class="infoCard">
		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
			Rufen Sie uns an<br /> Wir sind gerne für Sie da
		</h2>
		<hr style="margin-bottom:15px;" />
		<div class="flex-row justify-between">
			<div class="flex-column align-left">
				<p>Telefonische Beratung unter</p>
				<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
					<a href="tel:+4940209339850">040 / 209 339 850</a>
				</h2>
			</div>
			<img
				src="/images/right-sidebar/telefon-1.png"
				style="width:70px; height: 73px;"
				alt="Telefon - Rufen sie uns an."
			/>
		</div>
	</div>

	<div class="infoCard">
		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
			Bitte bewerten Sie uns!
		</h2>
		<hr style="margin-bottom:15px;" />
		<div
			class="review-widget_net"
			data-uuid="d908c994-f1f2-4ab6-bad1-b2d3538086e7"
			data-template="7"
			data-filter=""
			data-lang="de"
			data-theme="light"
		>
			<a href="https://www.review-widget.net/" target="_blank" rel="noopener"
				><img
					src="https://grwapi.net/assets/spinner/spin.svg"
					title="Google Review Widget"
					alt="Review Widget"
				/></a>
		</div><script async src="https://grwapi.net/widget.min.js"></script>
		<hr />
	</div>

	<div class="infoCard">
		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
			Verbrauchsausweis für Wohngebäude
		</h2>
		<hr style="margin-bottom:15px;" />
		<div class="flex-column align-center">
			<img
				src="/images/right-sidebar/wohnhaus-1.png"
				alt="Verbrauchsausweis ab 45€ für Wohngebäude."
			/>
			<a
				href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
				class="large-button">Jetzt Verbrauchsausweis erstellen</a
			>
		</div>
	</div>

	<div class="infoCard">
		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
			Welche Häuser benötigen einen Energieausweis?
		</h2>
		<hr style="margin-bottom:15px;" />
		<ul>
			<li>Wohngebäude &gt; 50m² mit dauerhaftem Aufenthalt<hr /></li>
			<li>Nichtwohngebäude &gt; 50m² mit dauerhaftem Aufenthalt<hr /></li>
			<li>Beheizte Gebäude &gt; 50m²<hr /></li>
			<li>Neubauten<hr /></li>
			<li>Anbauten &gt; 50 m²<hr /></li>
			<li>Sanierung mit Austausch der Heizungsanlage</li>
		</ul>
		<hr />
	</div>
	<div class="infoCard">
		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
			Bedarfsausweis für Wohngebäude
		</h2>
		<hr style="margin-bottom:15px;" />
		<div class="flex-column align-center">
			<img
				src="/images/right-sidebar/wohnhaus-ba-1.png"
				alt="Bedarfsausweis ab 75€ für Wohngebäude"
			/>
			<a
				href="/energieausweis-erstellen/bedarfsausweis-erstellen"
				class="large-button">Jetzt Bedarfsausweis erstellen</a
			>
		</div>
	</div>
	<div class="infoCard">
		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
			Welcher Energieausweis ist der richtige?
		</h2>
		<hr style="margin-bottom:15px;" />
		<ul>
			<li>
				Verbrauchsausweis bei Vermietung, Verkauf und Aushang (Baujahr nach 1977
				bzw. saniert).<hr />
			</li>
			<li>
				Bedarfsausweis bei Neubau, Sanierung, Erweiterung und
				Fördermittelantrag.
			</li>
		</ul>
		<hr />
	</div>
	<div class="infoCard">
		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
			Verbrauchsausweis für Gewerbe
		</h2>
		<hr style="margin-bottom:15px;" />
		<div class="flex-column align-center">
			<img
				src="/images/right-sidebar/gewerbe-1.png"
				alt="Verbrauchsausweis Gewerbe für 65€"
			/>
			<a
				href="/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen"
				class="large-button">Jetzt Verbrauchsausweis erstellen</a
			>
		</div>
	</div>
</div>


<style>
	.infoCard {
		@apply bg-base-200 rounded-lg border border-base-300 p-4 shadow-md;
	}
</style>