<template>
  <div class="t3-wrap">
    <!-- sparkle deco -->
    <span class="t3-sp t3-sp1">✦</span>
    <span class="t3-sp t3-sp2">✦</span>

    <!-- ── Hero ── -->
    <div class="t3-hero">
      <div class="t3-badge">{{ t('theme3.hero_badge') }}</div>
      <h1 class="t3-title">{{ t('theme3.title') }}</h1>
      <p class="t3-sub">{{ t('theme3.subtitle') }}</p>
    </div>

    <!-- ── Stats band ── -->
    <div class="t3-stats-band">
      <div class="t3-stat">
        <div class="t3-stat-ic">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" stroke="#f5c842" stroke-width="1.6" fill="none" stroke-linejoin="round"/>
            <circle cx="7" cy="7" r="1.5" fill="#f5c842"/>
          </svg>
        </div>
        <div class="t3-sv">2x</div>
        <div class="t3-sl">{{ t('theme3.stat_points') }}</div>
      </div>
      <div class="t3-stat">
        <div class="t3-stat-ic">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <rect x="3" y="10" width="18" height="11" rx="1.5" stroke="#f5c842" stroke-width="1.6" fill="none"/>
            <path d="M3 10h18V14H3z" stroke="#f5c842" stroke-width="1.6" fill="none"/>
            <path d="M12 10V21" stroke="#f5c842" stroke-width="1.6"/>
            <path d="M8 10C8 10 5.5 10 5.5 7.5C5.5 5.5 7.5 4 9.5 6C10.5 7 12 9 12 10" stroke="#f5c842" stroke-width="1.4" stroke-linecap="round" fill="none"/>
            <path d="M16 10C16 10 18.5 10 18.5 7.5C18.5 5.5 16.5 4 14.5 6C13.5 7 12 9 12 10" stroke="#f5c842" stroke-width="1.4" stroke-linecap="round" fill="none"/>
          </svg>
        </div>
        <div class="t3-sv">500+</div>
        <div class="t3-sl">{{ t('theme3.stat_prizes') }}</div>
      </div>
      <div class="t3-stat">
        <div class="t3-stat-ic">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <circle cx="9" cy="7" r="3" stroke="#f5c842" stroke-width="1.6" fill="none"/>
            <path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke="#f5c842" stroke-width="1.6" stroke-linecap="round" fill="none"/>
            <circle cx="17" cy="8" r="2.5" stroke="#f5c842" stroke-width="1.4" fill="none"/>
            <path d="M21 20c0-2.8-1.8-5-4-5" stroke="#f5c842" stroke-width="1.4" stroke-linecap="round" fill="none"/>
          </svg>
        </div>
        <div class="t3-sv">5M+</div>
        <div class="t3-sl">{{ t('theme3.stat_members') }}</div>
      </div>
      <div class="t3-stat">
        <div class="t3-stat-ic">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="9" stroke="#f5c842" stroke-width="1.6" fill="none"/>
            <path d="M12 3c-3 4-3 14 0 18M12 3c3 4 3 14 0 18" stroke="#f5c842" stroke-width="1.4" fill="none"/>
            <path d="M3 12h18" stroke="#f5c842" stroke-width="1.4"/>
            <path d="M4.5 8.5h15M4.5 15.5h15" stroke="#f5c842" stroke-width="1.1" opacity="0.7"/>
          </svg>
        </div>
        <div class="t3-sv">195+</div>
        <div class="t3-sl">{{ t('theme3.stat_countries') }}</div>
      </div>
    </div>

    <!-- ── Form ── -->
    <div class="t3-form">
      <div class="t3-cb-card">
        <div class="t3-cb-ic">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M21 18V19C21 20.1 20.1 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.89 3 5 3H19C20.1 3 21 3.9 21 5V6H12C10.89 6 10 6.9 10 8V16C10 17.1 10.89 18 12 18H21ZM12 16H22V8H12V16ZM16 13.5C15.17 13.5 14.5 12.83 14.5 12C14.5 11.17 15.17 10.5 16 10.5C16.83 10.5 17.5 11.17 17.5 12C17.5 12.83 16.83 13.5 16 13.5Z" fill="white"/>
          </svg>
        </div>
        <div>
          <div class="t3-cb-title">{{ t('theme3.check_balance') }}</div>
          <div class="t3-cb-sub">{{ t('theme3.check_balance_sub') }}</div>
        </div>
      </div>

      <div class="t3-lbl">{{ t('theme3.account_identifier') }}</div>

      <div class="t3-field">
        <svg class="t3-field-ic" width="16" height="16" viewBox="0 0 24 24" fill="none">
          <rect x="5" y="2" width="14" height="20" rx="3" stroke="#aaa" stroke-width="1.6" fill="none"/>
          <path d="M9 6h6" stroke="#aaa" stroke-width="1.4" stroke-linecap="round"/>
          <circle cx="12" cy="17" r="1" fill="#aaa"/>
        </svg>
        <input
          class="t3-inp"
          type="tel"
          :placeholder="t('theme3.phone_placeholder')"
          :value="modelValue"
          @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
        />
      </div>

      <button class="t3-btn" @click="$emit('submit')">{{ t('theme3.check_btn') }}</button>

      <div class="t3-links">
        <span class="t3-lk">{{ t('theme3.gift_card') }}</span>
        <span class="t3-sep">|</span>
        <span class="t3-lk t3-lk-on">{{ t('theme3.all_rewards') }}</span>
      </div>
      <!-- <div class="t3-footer">{{ t('theme3.redeemable') }}</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>
.t3-wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #ff7b30 0%, #e8381a 52%, #c8200e 100%);
}

/* sparkles */
.t3-sp {
  position: absolute;
  color: rgba(255,255,255,0.5);
  pointer-events: none;
  font-size: 14px;
  line-height: 1;
  z-index: 0;
}
.t3-sp1 { top: 1.4rem; left: 1.1rem; }
.t3-sp2 { top: 3.4rem; right: 2rem; font-size: 9px; }

/* ── hero ── */
.t3-hero {
  padding: 2.5rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.t3-badge {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.42rem 1.4rem;
  border-radius: 20px;
  margin-bottom: 1.2rem;
  border: 1.5px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
}

.t3-title {
  font-size: 40px;
  font-weight: 900;
  color: #fff;
  line-height: 1.08;
  margin: 0 0 0.85rem;
  letter-spacing: -0.5px;
}

.t3-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.55;
  margin: 0 0 1.6rem;
  max-width: 255px;
}

.t3-cat-btn {
  background: #fff;
  color: #b33800;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.78rem 2.2rem;
  border-radius: 32px;
  border: none;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  transition: opacity .2s;
}
.t3-cat-btn:hover { opacity: .9; }

/* ── stats band ── */
.t3-stats-band {
  background: rgba(0,0,0,0.22);
  display: flex;
  justify-content: space-around;
  padding: 1.05rem 0.5rem 2.7rem;
  position: relative;
  z-index: 1;
}

.t3-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.t3-stat-ic {
  width: 54px;
  height: 54px;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(255,255,255,0.08);
}

.t3-sv {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.t3-sl {
  font-size: 10px;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  margin-top: 1px;
}

/* ── form ── */
.t3-form {
  flex: 1;
  background: #fff;
  border-radius: 26px 26px 0 0;
  padding: 1.5rem 1.2rem 2rem;
  position: relative;
  z-index: 1;
  margin-top: -1.55rem;
}

.t3-cb-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #fff8f3;
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.4rem;
  border: 1px solid rgba(220,90,20,0.12);
  box-shadow: 0 3px 14px rgba(249,115,22,0.1);
}

.t3-cb-ic {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #f97316, #e0520c);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.t3-cb-title {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  line-height: 1.2;
}
.t3-cb-sub {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.t3-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #aaa;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  padding-left: 2px;
}

.t3-field {
  position: relative;
  margin-bottom: 1.1rem;
}

.t3-inp {
  width: 100%;
  padding: 0.95rem 1rem 0.95rem 2.8rem;
  border: 1.5px solid #ebebeb;
  border-radius: 14px;
  font-size: 15px;
  color: #333;
  background: #f7f7f7;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s, background .2s;
}
.t3-inp::placeholder { color: #c0c0c0; }
.t3-inp:focus { border-color: #f97316; background: #fff; }

.t3-field-ic {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.t3-btn {
  width: 100%;
  padding: 1.05rem;
  background: linear-gradient(90deg, #f97316 0%, #e0520c 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  border: none;
  border-radius: 52px;
  cursor: pointer;
  margin-bottom: 1.2rem;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 20px rgba(224,82,12,0.38);
  transition: opacity .2s, transform .15s;
}
.t3-btn:hover { opacity: .93; }
.t3-btn:active { transform: scale(.98); }

.t3-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}
.t3-lk {
  font-size: 11px;
  font-weight: 700;
  color: #c0c0c0;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
}
.t3-lk-on { color: #f97316; }
.t3-sep { color: #ddd; }

.t3-footer {
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: #ccc;
  letter-spacing: 1px;
  text-transform: uppercase;
}
</style>

