<script lang="ts">
  import { onMount } from "svelte";
  import SanierungsFahrplanDachTemplate from './SanierungsFahrplanDachTemplate.svelte';
  import SanierungsFahrplanWandTemplate from './SanierungsFahrplanWandTemplate.svelte';
  import SanierungsFahrplanHeizungTemplate from './SanierungsFahrplanHeizungTemplate.svelte';

  let showPopup = false;
  let popupContent = null;

  function openPopup(content) {
    popupContent = content;
    showPopup = true;
  }

  function closePopup() {
    showPopup = false;
    popupContent = null;
  }
</script>

<div class="beam">
  <img class="skalaBeam" src="/images/sanierungsfahrplan/skalaEnergieEffizienz.svg" alt="Skala Energieeffizienz"/>
</div>

<div class="wrapper">
    <!-- Wände -->
    <div class="card">
      <button class="hausIcon-button" on:click={() => openPopup(SanierungsFahrplanWandTemplate)}>
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconWaende.svg" alt="Hausiconwände"/>
      </button>
      <div class="card-subtitle">*inklusive Kellerwänden</div>
    </div>
    <!-- Dach -->
    <div class="card" id="card">
      <button class="hausIcon-button" on:click={() => openPopup(SanierungsFahrplanDachTemplate)}>
        <img
          class="hausIcon cursor-pointer"
          src="/images/sanierungsfahrplan/hausIconDach.svg"
          alt="Hausicondach"/>
      </button>
      <div class="card-subtitle">oberer Gebäudeabschluss</div>
    </div>
    <!-- Lüftung -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconLueftung.svg" alt="Hausiconlüftung"/>
      <div class="card-subtitle"></div>
    </div>
    <!-- Fenster -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconFenster.svg" alt="Hausiconfenster"/>
      <div class="card-subtitle">inklusive Dachfenster</div>
    </div>
    <!-- Ihr Haus heute -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconHaus.svg" alt="Hausicon"/>
      <div class="card-subtitle"></div>
    </div>
    <!-- Warmwasser -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconWarmwasser.svg" alt="Hausiconwarmwasser"/>
      <div class="card-subtitle"></div>
    </div>
    <!-- Boden -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconBoden.svg" alt="Hausiconboden"/>
      <div class="card-subtitle">unterer Gebäudeabschluss</div>
    </div>
    <!-- Heizung -->
    <div class="card">
      <button class="hausIcon-button" on:click={() => openPopup(SanierungsFahrplanHeizungTemplate)}>
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconHeizung.svg" alt="Hausiconheizung"/>
      </button>
      <div class="card-subtitle"></div>
    </div>
    <!-- Warmwasserverteilung -->
    <div class="card">
      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconWarmwasserVerteilung.svg" alt="Hausiconwarmwasserverteilung"/>
      <div class="card-subtitle">inkl. Speicherung und Übergabe</div>
    </div>
    <div class="card">
    </div>
  </div>

  {#if showPopup}
  <div class="popup-overlay">
    <div class="popup-content" on:keydown|stopPropagation on:keyup|stopPropagation on:keypress|stopPropagation>
      <button class="close-button" on:click={closePopup}>X</button>
      {#if popupContent === SanierungsFahrplanDachTemplate}
      <div class="popup-title">Dach</div>
      <SanierungsFahrplanDachTemplate {closePopup} />
    {/if}
    {#if popupContent === SanierungsFahrplanWandTemplate}
      <div class="popup-title">Wände</div>
      <SanierungsFahrplanWandTemplate {closePopup} />
    {/if}
    {#if popupContent === SanierungsFahrplanHeizungTemplate}
    <div class="popup-title">Heizung</div>
    <SanierungsFahrplanHeizungTemplate {closePopup} />
    {/if}
    </div>
  </div>
{/if}

<style lang="scss">

.beam {
  @apply items-center justify-center p-12 m-6;
}  
  
.skalaBeam {
  @apply w-full;}


.wrapper {
  @apply grid grid-cols-3 gap-12 items-center justify-center px-10 m-6 py-10;
}

.card {
  @apply bg-white flex flex-col items-center 
  justify-center text-center;
}

.card-subtitle {
  @apply w-full text-sm text-gray-600 h-5;
}

.hausIcon {
  @apply w-full;}


.popup-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center;
}

.popup-content {
  @apply w-1/2 bg-white p-4 rounded-lg shadow-lg relative;
}

.close-button {
  @apply absolute top-3 right-3 bg-secondary text-white rounded-full p-2 cursor-pointer;
}

.popup-title {
  @apply absolute top-6 left-8 text-3xl font-bold;
}

.hausIcon-button {
  @apply w-full bg-transparent border-none p-0 m-0 cursor-pointer;
}

</style>