<script>
	import { PRICES } from "#lib/constants";
	import { Enums } from "#lib/client/prisma";
</script>

<div class="mt-6 mb-6 m-auto w-[99%] relative">

<div id="produktvergleich">

    <div class="saeule">
        <div class="blue-top flex flex-row ">
            <div><img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/></div>
            <div class="name">Verbrauchsausweis<br>Gewerbe</div> 
        </div>   
        <div class="white box">
            <div class="variante">einfach</div>
            <div class="services"><div>Einfache Berechnungsmethode anhand von 3 Jahresverbräuchen der Heizung und des Gebäudestroms.</div><div class="check">✔</div></div>
			<div class="services"><div>Zulässig bei Vermietung und Verkauf.</div><div class="check">✔</div></div>
			<div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet.</div><div class="check-no">✘</div></div>
			<div class="services"><div>Wird nicht immer bei den Banken für die Finanzierungsunterlagen akzeptiert.</div><div class="check-no">✘</div></div>
        </div>

        <div class="orange">
            <div class="price">
                ab <b> {PRICES.VerbrauchsausweisGewerbe[Enums.AusweisTyp.Standard]} </b>€ inkl. 19% MwSt.
            </div>

        </div>

        <div class="blue-bottom">
            <div class="cta"><a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/" class="text-white">jetzt online erstellen</a></div> 
        </div>

        <div class="blue-bottom">
            <div class="cta"><a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/produkt-uebersicht" class="text-white">zur Produktübersicht</a></div> 
        </div>
    </div>

    <div class="saeule">
        <div class="blue-top flex flex-row ">
            <div><img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/></div>
            <div class="name">Bedarfsausweis<br>Gewerbe</div> 
        </div>  

        <div class="white box">
            <div class="variante">fundiert</div>
            <div class="services"><div>Mehrzonenmodell nach DIN 18599 mit Erfassung der Gebäudegeometrie, UWerte der Außenbauteile sowie dem
                Wirkungsgrad der eingebauten Anlagentechnik.</div><div class="check">✔</div></div>
			<div class="services"><div>Zulässig bei Vermietung, Verkauf, Modernisierung und Neubau.</div><div class="check">✔</div></div>
			<div class="services"><div>Kann als Grundlage für Sanierungsvarianten sowie weitere Maßnahmen (z.B. iSFP) herangezogen werden.</div><div class="check">✔</div></div>
			<div class="services"><div>Fundierte vergleichbare Berechnung die bei den Banken für die Finanzierungsunterlagen immer akzeptiert wird.</div><div class="check">✔</div></div>
        </div>

        <div class="orange">
            <div class="price">
                <b>ab {PRICES.BedarfsausweisGewerbe[Enums.AusweisTyp.Standard]} €</b> inkl. 19% MwSt.
            </div>

        </div>

        <div class="blue-bottom">
            <div class="cta"><a href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/" class="text-white">jetzt online anfragen</a></div> 
        </div>

        <div class="blue-bottom">
            <div class="cta"><a href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/produkt-uebersicht" class="text-white">zur Produktübersicht</a></div> 
        </div>

    </div>


</div>

</div>

<style lang="scss">



#produktvergleich{@apply 
    grid grid-cols-[1fr] gap-y-1 gap-x-3
    lg:grid-cols-2
    xl:grid-cols-2;


.saeule{@apply grid grid-rows-subgrid row-span-10 mb-8;
img{@apply justify-self-center mb-1 w-[75%] }


.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4 shadow-saeule ring-secondary ring-1}
.name{@apply w-full}
.name{font-size: clamp(15px, 3vh, 18px)}

.white{@apply text-center text-black p-4 grid grid-rows-subgrid row-span-6 shadow-saeule}

.variante{@apply w-fit text-black justify-self-end mr-4}
.variante{font-size: clamp(15px, 4vh, 24px)}

.services{@apply text-base py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
.services:not(:last-child){@apply border-b-[1px] border-gray-400}
.check{@apply self-center font-bold text-green-700}
.check-no{@apply self-center font-bold text-red-700}



.orange{@apply bg-primary text-white text-center rounded-md p-1 relative shadow-saeule ring-primary ring-1}
.price{font-size: clamp(15px, 3vh, 28px)}
.blue-bottom, .check, .check-no{font-size: clamp(15px, 3vh, 24px)}



.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-md p-1 shadow-saeule ring-secondary ring-1}
}

}


</style>