<template>
  <div class="flex flex-col items-center justify-center text-center py-16 px-4">
    <div class="mb-6">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-16 text-base-content/40">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
      </svg>
    </div>
    <h2 class="text-xl font-semibold mb-3">Главная страница пуста</h2>
    <p class="text-sm text-base-content/70 mb-2 max-w-md">
      На главной странице не сконфигурировано ни одного блока для отображения.
    </p>
    <p class="text-sm text-base-content/70 max-w-md">
      Перейдите в настройки модуля <span class="font-semibold">MegaPay</span> и добавьте блоки на главную страницу.
    </p>
    <div class="mt-6 p-4 bg-base-200 rounded-lg max-w-md">
      <div class="flex items-start gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-info shrink-0 mt-0.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
        </svg>
        <p class="text-xs text-base-content/60 text-left">
          Вы можете добавить слайдеры, категории, ленты товаров и другие блоки для создания красивой главной страницы.
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped lang="scss">

</style>