<template>
  <Teleport to="body">
    <div
      v-if="open"
      class="fixed inset-0 z-[120] flex items-center justify-center bg-[#25123f]/70 px-4 py-8 backdrop-blur-sm"
      @click.self="$emit('close')"
    >
      <div class="max-h-[88vh] w-full max-w-4xl overflow-hidden rounded-[34px] border border-violet-100 bg-white shadow-[0_34px_100px_rgba(38,18,63,0.35)]">
        <div class="flex items-start justify-between gap-4 border-b border-violet-100 bg-gradient-to-r from-[#f8f2ff] via-white to-[#fff1f8] px-7 py-6">
          <div>
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Footer Preview</p>
            <h3 class="mt-2 text-xl font-bold text-slate-900">{{ title }}</h3>
            <p v-if="url" class="mt-2 break-all text-sm text-slate-500">{{ url }}</p>
          </div>
          <button
            type="button"
            class="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-violet-100 text-violet-600 transition hover:bg-violet-200"
            aria-label="Preview schließen"
            @click="$emit('close')"
          >
            <X class="h-5 w-5" />
          </button>
        </div>
        <div class="max-h-[calc(88vh-140px)] overflow-y-auto bg-[radial-gradient(circle_at_top,#f7ecff_0%,#ffffff_48%,#f7f1ff_100%)] px-7 py-6 text-sm leading-7 text-slate-600">
          <div
            v-if="contentHtml"
            class="footer-preview-content rounded-[22px] border border-violet-50 bg-white/90 px-5 py-4 shadow-sm"
            v-html="contentHtml"
          />
          <p v-else class="rounded-[18px] border border-amber-100 bg-amber-50 px-4 py-3 font-semibold text-amber-800">
            Für diese Footer-Seite ist noch kein Inhalt hinterlegt.
          </p>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { X } from '@lucide/vue'

import { useBodyScrollLock } from '../../composables/useBodyScrollLock'

const props = defineProps<{
  open: boolean
  title: string
  url: string
  contentHtml: string
}>()

useBodyScrollLock(() => props.open)

defineEmits<{
  close: []
}>()
</script>

<style scoped>
.footer-preview-content :deep(p) {
  margin: 0 0 0.85rem;
}

.footer-preview-content :deep(p:last-child),
.footer-preview-content :deep(ul:last-child),
.footer-preview-content :deep(ol:last-child) {
  margin-bottom: 0;
}

.footer-preview-content :deep(ul),
.footer-preview-content :deep(ol) {
  margin: 0 0 0.85rem 1.25rem;
  padding-left: 1rem;
}

.footer-preview-content :deep(li) {
  margin: 0.2rem 0;
}
</style>
