<script>
    import { PRICES } from "#lib/constants";
    export let bullets;
    export let title;
    export let ref = "";
	import { Enums } from "#lib/client/prisma";
    
    bullets = [
        ["Prüfung durch Dipl.&nbsp;Ing.<br>Registrierung beim DiBt<br>rechtssicher nach&nbsp;GEG",true, true, true],
        ["Originalausweis als&nbsp;PDF per&nbsp;<span class='text-nowrap'>E-Mail</span><br>Originalausweis per&nbsp;Post (zubuchbar)",true, true, true],
        ["Bearbeitung innerhalb 24&nbsp;Stunden<br>Selbsteingabe",true, true, false],
        ["Same&nbsp;day&nbsp;service (zubuchbar)",true, true, false],
        ["Fotoupload",true, true, true],
        ["automatische Vorprüfung<br>Live&nbsp;Vorschau direkt bei&nbsp;Eingabe<br>Live&nbsp;Vorschauausweis vorab<br>Vorschauausweis per&nbsp;E-Mail<br>dynamische&nbsp;Eingabehilfe",true, true, false],
        ["Prüfanmerkungen per&nbsp;<span class='text-nowrap'>E-Mail</span>",true, true, false],
        ["persönlicher&nbsp;Support",false, true, true],
        ["telefonische&nbsp;Beratung<br>persönlicher&nbsp;Energieberater",false, true, true],
        ["Dokumentenupload (Pläne, Bauunterlagen)",false, false, true],
        ["Eingabe durch Dipl.&nbsp;Ing.",false, false, true],]
    
    
    </script>
    
    <h1>Produktübersicht: <span class="text-secondary">Bedarfsausweis Wohngebäude</span></h1>
    <h3>Bedarfsausweis Leistungen und Preise in der Übersicht:</h3>
    
    <hr>
    <br>
    
    <div id="ProduktUebersichtBedarfssausweisWohnen">
    
    <div class="w-full sm:w-[90%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
        
    <div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]"> 
        <div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>      
    </div>
    
    {#each bullets as [bullet,online,premium,offline]}
    <div class="bullet grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center">
        <div class="justify-self-start pl-2">{@html bullet}</div>
        <div class:check={online} class:check-no={!online}>{online ? "✔" : "⁃"}</div>
        <div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "⁃"}</div>
        <div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "⁃"}</div>
    </div>
    {/each}
    
    <div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[0px] justify-items-center items-center sm:text-[1.25rem]"> 
        <div class="price justify-self-start pl-2">Preis inkl. MwSt.</div>
        <div class="price"><b>{PRICES.BedarfsausweisWohnen[Enums.AusweisTyp.Standard]}&nbsp;€</b></div>
        <div class="price"><b>{PRICES.BedarfsausweisWohnen[Enums.AusweisTyp.Beratung]}&nbsp;€</b></div>
        <div class="price"><b>{PRICES.BedarfsausweisWohnen[Enums.AusweisTyp.Offline]}&nbsp;€</b></div>      
    </div>
    
    <div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[0px] justify-items-center items-center"> 
        <div class="justify-self-start pl-2"></div>
        <a href="{ref}/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"><button class="bestellbutton" type="button">sofort<br>bestellen</button></a>
        <a href="{ref}/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"><button class="bestellbutton" type="button">sofort<br>bestellen</button></a>
        <a href="{ref}/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"><button class="bestellbutton" type="button">sofort<br>bestellen</button></a> 
    </div>
    
    </div>
    
    
    
    </div>
    
    <style lang="postcss">
    
    .bestellbutton{@apply px-[2px] sm:px-4 mx-[2px] sm:mx-2 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap font-bold
        hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary;}
    
    
    
    
    .zeile{@apply text-[0.6rem] sm:text-[1rem] md:text-[1.5rem]}
    .bullet{@apply text-[0.75rem] sm:text-[1rem] md:text-[1.25rem]}
    .bullet:nth-child(even){@apply bg-blue-100/40}
    .bullet:nth-child(2){@apply !border-t-[6px]}
    .bullet:nth-child(12){@apply !border-b-[6px]}
    
    .check {
            @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-green-700;
        }
        .check-no {
            @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-black;
        }
    
    .price{@apply text-[1.25rem] sm:text-[2rem]}
    
    </style>