<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

<template>
  <div class="rwa-view page-container">
    <div class="rwa-content">
      <div class="rwa-icon">
        <img src="@/assets/logo.png" alt="iBit" class="logo-img" />
      </div>
      <h1 class="rwa-title">{{ t('nav.rwa') }}</h1>
      <p class="rwa-desc">{{ t('rwa.comingSoon') }}</p>
    </div>
  </div>
</template>

<style scoped>
.rwa-view {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rwa-content {
  text-align: center;
}

.rwa-icon {
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-img {
  width: 80px;
  height: 80px;
}

.rwa-title {
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.rwa-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}
</style>
