<template>
  <NuxtLayout name="mobile">
    <img v-hm="1726" v-wm="393" src="~/assets/images/mobile/uebersicht/frame.png" />

    <template #stickyHeader>
      <img v-hm="64" v-wm="393" src="~/assets/images/mobile/uebersicht/sticky-header.png" />
    </template>

    <!-- Support -->

    <div
      v-hm="114"
      v-wm="393"
      v-xm="0"
      v-ym="170"
      class="support"
      :style="{
        padding: `0 ${(17 / frameWidthMobile) * 100}%`,
        gap: `${(8 / frameWidthMobile) * 100}%`,
      }"
    >
      <button @click="popup1 = true" class="support-card">
        <img src="~/assets/images/mobile/uebersicht/support/card-1.png" />
        <Spot />
      </button>
      <PopupMobile v-model="popup1">
        <div v-hme="746" v-wm="393" class="relative">
          <img src="~/assets/images/mobile/uebersicht/popups/kundensupport-1-frame.png" />
          <button v-h:746="48" v-w:393="48" v-x:393="341" v-y:746="8" @click="popup1 = false">
            <Spot />
          </button>
          <button v-h:746="64" v-w:393="361" v-x:393="16" v-y:746="472" @click="popup1_1 = true">
            <Spot />
          </button>
          <PopupMobile v-model="popup1_1">
            <div v-hme="783" v-wm="393" class="relative">
              <img src="~/assets/images/mobile/uebersicht/popups/kundensupport-1-1-frame.png" />
              <button v-h:783="48" v-w:393="48" v-x:393="341" v-y:783="8" @click="popup1_1 = false">
                <Spot />
              </button>
            </div>
          </PopupMobile>
        </div>
      </PopupMobile>

      <img src="~/assets/images/mobile/uebersicht/support/card-2.png" class="support-card" />

      <button @click="popup3 = true" class="support-card">
        <img src="~/assets/images/mobile/uebersicht/support/card-3.png" />
        <Spot />
      </button>
      <PopupMobile v-model="popup3">
        <div v-hme="843" v-wm="393" class="relative">
          <img src="~/assets/images/mobile/uebersicht/popups/kundensupport-3-frame.png" />
          <button v-h:843="48" v-w:393="48" v-x:393="341" v-y:843="8" @click="popup3 = false">
            <Spot />
          </button>
          <button v-h:843="64" v-w:393="361" v-x:393="16" v-y:843="475" @click="popup3_sheet = true">
            <Spot />
          </button>
          <Sheet v-model="popup3_sheet">
            <div class="relative">
              <img src="~/assets/images/mobile/uebersicht/popups/kundensupport-3-sheet.png" />
              <button v-h:385="24" v-w:393="24" v-x:393="352" v-y:385="24" @click="popup3_sheet = false">
                <Spot />
              </button>
              <button
                v-h:385="64"
                v-w:393="343"
                v-x:393="25"
                v-y:385="196"
                @click="
                  () => {
                    popup3_sheet = false
                    popup3_1 = true
                  }
                "
              >
                <Spot />
              </button>
            </div>
          </Sheet>
          <PopupMobile v-model="popup3_1">
            <div v-hme="803" v-wm="393" class="relative">
              <img src="~/assets/images/mobile/uebersicht/popups/kundensupport-3-1-frame.png" />
              <button v-h:843="48" v-w:393="48" v-x:393="341" v-y:843="8" @click="popup3_1 = false">
                <Spot />
              </button>
            </div>
          </PopupMobile>
        </div>
      </PopupMobile>
    </div>

    <!-- Services -->

    <NuxtLink v-hm="32" v-wm="86" v-xm="296" v-ym="320" to="/mobile/services">
      <Spot />
    </NuxtLink>

    <button v-hm="74" v-wm="174.23" v-xm="202" v-ym="364" @click="invoicePopup = true">
      <Spot />
    </button>
    <InvoicePopupMobile v-if="invoicePopup" v-model="invoicePopup" />

    <!-- Contracts -->

    <ContractButtonBausparvertragMobile v-xm="16" v-ym="622.05" />
    <ContractButtonTopTagesgeldMobile v-xm="16" v-ym="807.05" />
    <ContractButtonKfzVersicherungMobile v-xm="16" v-ym="1177.79" />
  </NuxtLayout>
</template>

<script lang="ts" setup>
const hideMenu = useHideMenu()
const popup1 = ref(false)
const popup1_1 = ref(false)
const popup3 = ref(false)
const popup3_sheet = ref(false)
const popup3_1 = ref(false)
const invoicePopup = ref(false)

watch(popup1, (value) => {
  hideMenu.value = value
})

watch(popup3, (value) => {
  hideMenu.value = value
  if (!value) {
    popup3_sheet.value = false
    popup3_1.value = false
  }
})
</script>

<style scoped>
.support {
  position: absolute;
  display: flex;
  overflow-x: auto;
}

.support-card {
  position: relative;
  width: auto;
  height: 100%;
}

.support-card > img {
  position: relative;
  width: auto;
  height: 100%;
}
</style>
