<template>
  <div class="empty-state">
    <p class="empty-state__message">No events yet.<br />Create your first one!</p>
    <RouterLink to="/create" class="empty-state__cta glow-border glow-border--animated">
      <span class="empty-state__cta-inner glass-inner">Create Event</span>
    </RouterLink>
  </div>
</template>

<script setup lang="ts">
import { RouterLink } from 'vue-router'
</script>

<style scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.empty-state__message {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-on-gradient);
  opacity: 0.9;
  text-align: center;
}

.empty-state__cta {
  max-width: 280px;
  width: 100%;
  border-radius: var(--radius-button);
  text-decoration: none;
  transition: transform 0.1s ease;
}

.empty-state__cta-inner {
  display: block;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: calc(var(--radius-button) - 2px);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-on-gradient);
  text-align: center;
}

.empty-state__cta:hover {
  transform: scale(1.02);
}

.empty-state__cta:active {
  transform: scale(0.98);
}

.empty-state__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
</style>
