<script setup>
import { useLocale } from '../composables/useLocale.js'
import Tag from './ui/Tag.vue'
import { heroMeta } from '../config.js'

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

<template>
  <section class="hero">
    <div class="container">
      <div class="hero__eyebrow">
        <Tag>{{ t(heroMeta.courseKey) }}</Tag>
      </div>
      <h1 class="hero__title">{{ t('mobileGame.hero.title') }}</h1>
      <p class="hero__desc">{{ t('mobileGame.hero.desc') }}</p>
      <div class="hero__meta">
        <div v-for="item in heroMeta.items" :key="item.labelKey" class="hero__meta-item">
          <span class="hero__meta-label">{{ t(item.labelKey) }}</span>
          <span>{{ t(item.valueKey) }}</span>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.hero {
  padding: var(--space-2xl) 0 var(--space-xl);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.hero__eyebrow {
  margin-bottom: var(--space-md);
}
.hero__title {
  font-size: 2.3rem;
  margin-bottom: var(--space-md);
}
.hero__desc {
  max-width: 720px;
  font-size: 1.02rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.92rem;
  color: var(--text-primary);
}
.hero__meta-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
</style>
