<template>
  <div class="rsvp-bar">
    <div class="rsvp-bar__inner">
      <!-- Status state: already RSVPed -->
      <div v-if="hasRsvp" class="rsvp-bar__status">
        <span class="rsvp-bar__check" aria-hidden="true">✓</span>
        <span class="rsvp-bar__text">You're attending!</span>
      </div>

      <!-- CTA state: no RSVP yet -->
      <div v-else class="rsvp-bar__cta glow-border glow-border--animated">
        <button class="rsvp-bar__cta-inner glass-inner" type="button" @click="$emit('open')">
          I'm attending
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  hasRsvp?: boolean
}>()

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

<style scoped>
.rsvp-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 50;
  padding: var(--spacing-md) var(--content-padding);
  padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
}

.rsvp-bar__inner {
  width: 100%;
  max-width: var(--content-max-width);
}

.rsvp-bar__cta {
  width: 100%;
  border-radius: var(--radius-button);
  transition: transform 0.1s ease;
}

.rsvp-bar__cta:hover {
  transform: scale(1.02);
}

.rsvp-bar__cta:active {
  transform: scale(0.98);
}

.rsvp-bar__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;
  border: none;
  cursor: pointer;
}

.rsvp-bar__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
  border: 1px solid var(--color-glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-card);
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: var(--shadow-card);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-on-gradient);
}

.rsvp-bar__check {
  color: #4caf50;
  font-size: 1.1rem;
  font-weight: 700;
}

.rsvp-bar__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
