<template>
  <div class="t4-t7-root">
    <!-- ── Hero 区域 ── -->
    <div class="t4-t7-hero">
      <!-- 装饰星星 -->
      <span class="t4-t7-star t4-t7-star-tl">✦</span>
      <span class="t4-t7-star t4-t7-star-tr">★</span>
      <span class="t4-t7-star t4-t7-star-bl">|</span>


      <!-- 主标题 -->
      <h1 class="t4-t7-main-title" v-html="t('theme4.main_title')"></h1>

      <!-- 副标题 -->
      <p class="t4-t7-hero-sub">{{ t('theme4.hero_sub1') }}<br>{{ t('theme4.hero_sub2') }}</p>

      <!-- 三图标行 -->
      <div class="t4-t7-icons-row">
        <div class="t4-t7-icon-wrap t4-t7-icon-side">🎁</div>
        <div class="t4-t7-icon-wrap t4-t7-icon-center">
          <div class="t4-t7-icon-center-inner">💎</div>
        </div>
        <div class="t4-t7-icon-wrap t4-t7-icon-side">🎟️</div>
      </div>
    </div>

    <!-- ── 会员卡 ── -->
    <div class="t4-t7-section">
      <div class="t4-t7-member-card">
        <div class="t4-t7-member-header">
          <div>
            <div class="t4-t7-member-label">{{ t('theme4.membership_status') }}</div>
            <div class="t4-t7-member-title">{{ t('theme4.gold_privilege') }}</div>
          </div>
        </div>
        <div class="t4-t7-divider"></div>
        <div class="t4-t7-stats-grid">
          <div class="t4-t7-stat">
            <div class="t4-t7-stat-label">{{ t('theme4.point_rate') }}</div>
            <div class="t4-t7-stat-val t4-t7-red">x2.5</div>
          </div>
          <div class="t4-t7-stat">
            <div class="t4-t7-stat-label">{{ t('theme4.active_gifts') }}</div>
            <div class="t4-t7-stat-val t4-t7-orange">850+</div>
          </div>
          <div class="t4-t7-stat">
            <div class="t4-t7-stat-label">{{ t('theme4.global_users') }}</div>
            <div class="t4-t7-stat-val t4-t7-blue">12M</div>
          </div>
          <div class="t4-t7-stat">
            <div class="t4-t7-stat-label">{{ t('theme4.hot_events') }}</div>
            <div class="t4-t7-stat-val t4-t7-teal">24h</div>
          </div>
        </div>
      </div>
    </div>

    <!-- ── 表单区域 ── -->
    <div class="t4-t7-section t4-t7-form-section">
      <h2 class="t4-t7-form-title">{{ t('theme4.form_title') }}</h2>
      <p class="t4-t7-form-sub">{{ t('theme4.form_subtitle') }}</p>

      <input
        class="t4-t7-input"
        type="tel"
        inputmode="tel"
        :placeholder="t('theme4.phone_placeholder')"
        :value="modelValue"
        @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
      />

      <button class="t4-t7-submit-btn" @click="$emit('submit')">
        {{ t('theme4.check_btn') }} ✨
      </button>

      <div class="t4-t7-trust-row">
        <span>{{ t('theme4.secure') }}</span>
        <span>{{ t('theme4.fast') }}</span>
        <span>{{ t('theme4.global') }}</span>
      </div>
    </div>

    
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import type { ThemeColors } from '@/config/themes';

const { t } = useI18n();

interface Props {
  modelValue: string;
  colors: ThemeColors;
}

defineProps<Props>();

defineEmits<{
  (e: 'update:modelValue', value: string): void;
  (e: 'submit'): void;
}>();
</script>

<style scoped>
/* ── Root ── */
.t4-t7-root {
  background: #fef9ec;
  min-height: 100%;
  padding-bottom: 2rem;
  font-family: inherit;
}

/* ── Hero ── */
.t4-t7-hero {
  position: relative;
  background: linear-gradient(180deg, #fef3c7 0%, #fef9ec 100%);
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  overflow: hidden;
}

.t4-t7-star {
  position: absolute;
  color: #f59e0b;
  font-size: 16px;
  opacity: 0.7;
}
.t4-t7-star-tl { top: 1.2rem; left: 1rem; font-size: 12px; }
.t4-t7-star-tr { top: 1rem; right: 1.5rem; font-size: 18px; }
.t4-t7-star-bl { bottom: 2rem; left: 1.5rem; font-size: 24px; color: #fcd34d; opacity: 0.5; }

.t4-t7-festival-badge {
  display: inline-block;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  margin-bottom: 0.85rem;
}

.t4-t7-main-title {
  font-size: 42px;
  font-weight: 900;
  line-height: 1.05;
  color: #d97706;
  margin: 0 0 0.75rem;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #b45309;
}

.t4-t7-hero-sub {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
  line-height: 1.55;
  margin: 0 0 1.5rem;
  opacity: 0.85;
}

/* 三图标行 */
.t4-t7-icons-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
}

.t4-t7-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 26px;
}

.t4-t7-icon-side {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(251, 191, 36, 0.3);
  margin-bottom: 8px;
}

.t4-t7-icon-center {
  width: 76px;
  height: 76px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
  border-radius: 20px;
  font-size: 34px;
}

.t4-t7-icon-center-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ── Sections ── */
.t4-t7-section {
  padding: 0 1rem 1.25rem;
}

/* ── Member Card ── */
.t4-t7-member-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.35rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

.t4-t7-member-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.t4-t7-member-label {
  font-size: 10px;
  font-weight: 700;
  color: #999;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.t4-t7-member-title {
  font-size: 20px;
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: 0.5px;
}

.t4-t7-vip-pill {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
  color: #78350f;
  font-size: 12px;
  font-weight: 800;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.35);
}

.t4-t7-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 0 0 1rem;
}

.t4-t7-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.t4-t7-stat {
  background: #f9f9f9;
  border-radius: 14px;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.t4-t7-stat-label {
  font-size: 9px;
  font-weight: 700;
  color: #aaa;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.t4-t7-stat-val {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.t4-t7-red   { color: #dc2626; }
.t4-t7-orange { color: #f59e0b; }
.t4-t7-blue  { color: #2563eb; }
.t4-t7-teal  { color: #0d9488; }

/* ── Form Section ── */
.t4-t7-form-section {
  text-align: center;
  padding-top: 0.5rem;
}

.t4-t7-form-title {
  font-size: 24px;
  font-weight: 900;
  color: #1a1a1a;
  margin: 0 0 0.35rem;
}

.t4-t7-form-sub {
  font-size: 13px;
  color: #888;
  margin: 0 0 1.25rem;
}

.t4-t7-input {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1.5px solid #fcd34d;
  border-radius: 14px;
  font-size: 15px;
  background: #fffdf5;
  color: #b45309;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 0.85rem;
  text-align: center;
  transition: border-color 0.2s;
}

.t4-t7-input::placeholder {
  color: #d97706;
  opacity: 0.7;
}

.t4-t7-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2);
}

.t4-t7-submit-btn {
  width: 100%;
  padding: 1rem 1.25rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 18px rgba(217, 119, 6, 0.4);
  transition: all 0.25s ease;
  margin-bottom: 1rem;
}

.t4-t7-submit-btn:hover { transform: translateY(-1px); opacity: 0.95; }
.t4-t7-submit-btn:active { transform: translateY(0); opacity: 0.9; }

.t4-t7-trust-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-size: 11px;
  font-weight: 700;
  color: #bbb;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Notification ── */
.t4-t7-notif {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border-radius: 16px;
  padding: 0.9rem 1rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.t4-t7-notif-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fef3c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.t4-t7-notif-content {
  flex: 1;
}

.t4-t7-notif-tag {
  font-size: 9px;
  font-weight: 800;
  color: #f59e0b;
  letter-spacing: 1px;
  margin-bottom: 0.2rem;
}

.t4-t7-notif-text {
  font-size: 13px;
  color: #444;
  line-height: 1.4;
}

.t4-t7-highlight {
  color: #d97706;
  font-weight: 700;
}

.t4-t7-notif-arrow {
  font-size: 22px;
  color: #ccc;
  font-weight: 300;
  flex-shrink: 0;
}
</style>
