<script setup>
import { announcement } from "~/data/navigation";

defineEmits(["close"]);
</script>

<template>
  <div class="fixed inset-x-0 top-0 z-[1000] h-[59px] bg-[url('/images/top-pop-bg.jpg')] bg-cover bg-center text-white max-sm:h-11">
    <div class="mx-auto flex h-full max-w-[1440px] items-center justify-center gap-4 px-[5%] text-sm max-sm:gap-2 max-sm:text-xs">
      <span class="hidden text-center sm:block">
        {{ announcement.text }}
      </span>
      <NuxtLink
        :to="announcement.ctaHref"
        class="inline-flex h-9 items-center gap-2 rounded-full bg-white px-5 text-sm font-medium text-gm-green transition-all duration-300 hover:scale-95 hover:bg-gm-green hover:text-white max-sm:h-7 max-sm:px-4 max-sm:text-xs"
      >
        {{ announcement.ctaLabel }}
        <span aria-hidden="true">→</span>
      </NuxtLink>
    </div>

    <button
      type="button"
      class="absolute right-4 top-1/2 flex -translate-y-1/2 items-center gap-1 text-sm text-white/80 transition hover:text-white"
      aria-label="关闭公告"
      @click="$emit('close')"
    >
      <span class="hidden sm:inline">关闭</span>
      <span aria-hidden="true">×</span>
    </button>
  </div>
</template>
