<template>
  <NuxtLayout :stickyHeaderOffset="0">
    <img v-h="1044" v-w="1210" src="~/assets/images/desktop/vertraege/kfz-versicherung/frame.png" />

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

    <button v-h="40" v-w="313" v-x="421" v-y="290" @click="smartServicesPopup = true">
      <Spot />
    </button>
    <Popup v-model="smartServicesPopup">
      <div v-frame-h="727" v-frame-w="500" class="relative">
        <img src="~/assets/images/desktop/vertraege/kfz-versicherung/popups/smart-services-frame.png" />
        <button v-h:727="48" v-w:500="48" v-x:500="448" v-y:727="8" @click="smartServicesPopup = false">
          <Spot />
        </button>
        <button
          v-h:727="84"
          v-w:500="468"
          v-x:500="16"
          v-y:727="335"
          @click="
            () => {
              smartServicesPopup = false
              invoicePopup = true
            }
          "
        >
          <Spot />
        </button>
      </div>
    </Popup>
    <InvoicePopup v-if="invoicePopup" v-model="invoicePopup" />
  </NuxtLayout>
</template>

<script lang="ts" setup>
const smartServicesPopup = ref(false)
const invoicePopup = ref(false)
</script>
