<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="635" v-frame-w="500" class="relative">
        <img src="~/assets/images/desktop/vertraege/kfz-versicherung/popups/smart-services-frame.png" />
        <button v-h:635="48" v-w:500="48" v-x:500="448" v-y:635="8" @click="smartServicesPopup = false">
          <Spot />
        </button>
      </div>
    </Popup>
  </NuxtLayout>
</template>

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