<template>
  <NuxtLayout>
    <img v-h="1381" v-w="1210" src="~/assets/images/desktop/uebersicht/frame.png" />

    <template #stickyHeader>
      <img v-h="64" v-w="1210" src="~/assets/images/desktop/uebersicht/sticky-header.png" />
    </template>

    <!-- Support -->

    <button v-h="118" v-w="345.89" v-x="74" v-y="155" @click="popup1 = true">
      <Spot />
    </button>
    <Popup v-model="popup1">
      <div v-frame-h="700" v-frame-w="500" class="relative">
        <img src="~/assets/images/desktop/uebersicht/popups/kundensupport-1-frame.png" />
        <button v-h:700="48" v-w:500="48" v-x:500="436" v-y:700="16" @click="popup1 = false">
          <Spot />
        </button>
      </div>
    </Popup>

    <button v-h="118" v-w="345.89" v-x="788.88" v-y="155" @click="popup3 = true">
      <Spot />
    </button>
    <Popup v-model="popup3">
      <div v-frame-h="700" v-frame-w="500" class="relative">
        <img src="~/assets/images/desktop/uebersicht/popups/kundensupport-3-frame.png" />
        <button v-h:700="48" v-w:500="48" v-x:500="436" v-y:700="16" @click="popup3 = false">
          <Spot />
        </button>
        <button v-h:700="64" v-w:500="468" v-x:500="16" v-y:700="362" @click="popup3_1 = true">
          <Spot>
            <img src="~/assets/images/desktop/uebersicht/popups/kundensupport-3-1-button-hover.png" />
          </Spot>
        </button>
        <Popup v-model="popup3_1">
          <div v-frame-h="368" v-frame-w="393" class="relative">
            <img src="~/assets/images/desktop/uebersicht/popups/kundensupport-3-1-frame.png" />
            <button v-h:368="24" v-w:393="24" v-x:393="356" v-y:368="27" @click="popup3_1 = false">
              <Spot />
            </button>
          </div>
        </Popup>
      </div>
    </Popup>

    <!-- Services -->

    <Hover v-h="74" v-w="258.5" v-x="71" v-y="345">
      <img src="~/assets/images/desktop/uebersicht/button-schaden-melden.png" />
      <img src="~/assets/images/desktop/uebersicht/button-schaden-melden-hover.png" />
    </Hover>

    <button v-h="74" v-w="258.5" v-x="340.5" v-y="345" @click="invoicePopup = true">
      <img src="~/assets/images/desktop/uebersicht/button-rechnung-einreichen.png" />
      <Spot>
        <img src="~/assets/images/desktop/uebersicht/button-rechnung-einreichen-hover.png" />
      </Spot>
    </button>
    <InvoicePopup v-if="invoicePopup" v-model="invoicePopup" />

    <Hover v-h="74" v-w="258.5" v-x="610" v-y="345">
      <img src="~/assets/images/desktop/uebersicht/button-bankverbindung-aendern.png" />
      <img src="~/assets/images/desktop/uebersicht/button-bankverbindung-aendern-hover.png" />
    </Hover>

    <Hover v-h="74" v-w="258.5" v-x="879.5" v-y="345">
      <img src="~/assets/images/desktop/uebersicht/button-persoenliche-daten-aendern.png" />
      <img src="~/assets/images/desktop/uebersicht/button-persoenliche-daten-aendern-hover.png" />
    </Hover>

    <!-- Contracts -->

    <ContractButtonBausparvertrag v-x="69" v-y="531" />
    <ContractButtonTopTagesgeld v-x="69" v-y="684" />
    <ContractButtonHaftpflichtversicherung v-x="69" v-y="832" />
    <ContractButtonKfzVersicherung v-x="69" v-y="985" />
    <ContractButtonKrankenversicherung v-x="69" v-y="1138" />
    <ContractButtonAuslandreiseKrankenversicherung v-x="69" v-y="1232" />
  </NuxtLayout>
</template>

<script lang="ts" setup>
const popup1 = ref(false)
const popup3 = ref(false)
const popup3_1 = ref(false)
const invoicePopup = ref(false)
</script>
