<template>
  <div class="t1__page">
    <!-- Hero Section -->
    <section class="t1__hero">
      <div class="t1__hero-img-wrap">
        <img :src="`/img/${globalConfig.goods_image}`" :alt="t('index_view.hero_title')" class="t1__hero-img" />
        <div class="t1__hero-overlay"></div>
        <div class="t1__hero-content">
          <span class="t1__hero-badge">{{ t('index_view.hero_badge') }}</span>
          <h1 class="t1__hero-title">{{ t('index_view.hero_title') }}</h1>
          <p class="t1__hero-subtitle">{{ t('index_view.hero_subtitle') }}</p>
        </div>
      </div>
    </section>

    <!-- Notification Bar -->
    <section class="t1__notif">
      <div class="t1__notif-icon">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor" />
        </svg>
      </div>
      <p class="t1__notif-text">{{ t('index_view.notif_text') }}</p>
    </section>

    <!-- Phone Form -->
    <section class="t1__form-section">
      <form class="t1__form" @submit.prevent="handleSubmit">
        <div class="t1__field" :class="{ 't1__field--error': showError }">
          <label class="t1__label" for="phone">{{ t('index_view.phone_label') }}</label>
          <div class="t1__input-box">
            <input
              id="phone"
              class="t1__input"
              type="tel"
              :placeholder="t('index_view.phone_placeholder')"
              :value="modelValue"
              @input="onInput"
              @blur="onBlur"
              autocomplete="tel"
            />
          </div>
          <p v-if="showError" class="t1__err">{{ t('index_view.phone_error') }}</p>
        </div>
        <button
          type="submit"
          class="t1__btn"
          :class="{ 't1__btn--active': isValid }"
          :disabled="!isValid"
        >
          <span class="t1__btn-content">
            {{ t('index_view.verify_btn') }}
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </span>
        </button>
      </form>
    </section>

    <div class="t1__separator"></div>

    <!-- Rewards Section -->
    <section class="t1__rewards">
      <div class="t1__rewards-header">
        <h3 class="t1__rewards-title">{{ t('index_view.rewards_title') }}</h3>
        <button class="t1__view-all" type="button"> {{ t('index_view.view_all') }} <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </button>
      </div>

      <!-- Featured Card -->
      <div class="t1__featured-card">
        <div class="t1__featured-dots">
          <div class="t1__dot t1__dot--1"></div>
          <div class="t1__dot t1__dot--2"></div>
          <div class="t1__dot t1__dot--3"></div>
        </div>
        <div class="t1__featured-body">
          <div class="t1__featured-text">
            <span class="t1__featured-badge">{{ t('index_view.featured_badge') }}</span>
            <h4 class="t1__featured-title">{{ t('index_view.featured_title') }}</h4>
            <p class="t1__featured-sub">{{ t('index_view.featured_sub') }}</p>
            <button class="t1__featured-link" type="button"> {{ t('index_view.learn_more') }} <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </button>
          </div>
          <div class="t1__featured-img-svg" aria-hidden="true">
            <svg viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg" width="90" height="90">
              <!-- Card body -->
              <rect x="8" y="22" width="74" height="50" rx="7" fill="#fff" opacity="0.95"/>
              <rect x="8" y="22" width="74" height="18" rx="7" fill="#e8f5f5" opacity="0.7"/>
              <!-- Ribbon vertical -->
              <rect x="42" y="22" width="6" height="50" fill="#e60000" opacity="0.18"/>
              <!-- Ribbon horizontal -->
              <rect x="8" y="44" width="74" height="5" fill="#e60000" opacity="0.18"/>
              <!-- Bow left loop -->
              <ellipse cx="38" cy="20" rx="8" ry="5" fill="#e60000" opacity="0.85" transform="rotate(-25 38 20)"/>
              <!-- Bow right loop -->
              <ellipse cx="52" cy="20" rx="8" ry="5" fill="#c40000" opacity="0.85" transform="rotate(25 52 20)"/>
              <!-- Bow center knot -->
              <ellipse cx="45" cy="21" rx="4" ry="3" fill="#e60000"/>
              <!-- Stars decoration -->
              <circle cx="24" cy="60" r="2" fill="#e60000" opacity="0.3"/>
              <circle cx="66" cy="34" r="1.5" fill="#e60000" opacity="0.25"/>
              <!-- Label -->
              <rect x="20" y="54" width="50" height="12" rx="4" fill="#e60000" opacity="0.12"/>
              <text x="45" y="64" text-anchor="middle" font-size="8" font-weight="700" fill="#c40000" font-family="Arial,sans-serif">GIFT CARD</text>
            </svg>
          </div>
        </div>
      </div>

      <!-- Small Cards Grid -->
      <div class="t1__small-grid">
        <div class="t1__small-card">
          <div class="t1__small-content">
            <div class="t1__small-icon t1__small-icon--wifi">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 9L2 10C5.5 6.5 10.5 6.5 14 10L15 9C10.5 4.5 4.5 4.5 1 9ZM5 13L6 14C7.5 12.5 9.5 12.5 11 14L12 13C9.5 10.5 6.5 10.5 5 13ZM9 17L12 20L15 17C13.5 15.5 10.5 15.5 9 17Z" fill="currentColor" />
              </svg>
            </div>
            <h4 class="t1__small-title">{{ t('index_view.card1_title') }}</h4>
            <p class="t1__small-sub">{{ t('index_view.card1_sub') }}</p>
            <button class="t1__small-link" type="button"> {{ t('index_view.learn_more') }} <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </button>
          </div>
        </div>
        <div class="t1__small-card">
          <div class="t1__small-content">
            <div class="t1__small-icon t1__small-icon--star">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor" />
              </svg>
            </div>
            <h4 class="t1__small-title">{{ t('index_view.card2_title') }}</h4>
            <p class="t1__small-sub">{{ t('index_view.card2_sub') }}</p>
            <button class="t1__small-link" type="button"> {{ t('index_view.learn_more') }} <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

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

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

const props = defineProps<Props>();

const { t } = useI18n();

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
  (e: 'submit'): void;
}>();

const touched = ref(false);
const showError = ref(false);

const isValid = computed(() => {
  return props.modelValue && props.modelValue.trim().length >= 6;
});

const onInput = (event: Event) => {
  touched.value = true;
  const value = (event.target as HTMLInputElement).value;
  emit('update:modelValue', value);
  if (value.trim().length >= 6) {
    showError.value = false;
  } else if (touched.value && value.length > 0) {
    showError.value = true;
  } else {
    showError.value = false;
  }
};

const onBlur = () => {
  if (touched.value && (!props.modelValue || props.modelValue.trim().length < 6)) {
    showError.value = true;
  }
};

const handleSubmit = () => {
  if (!isValid.value) {
    showError.value = true;
    return;
  }
  emit('submit');
};
</script>

<style scoped>
/* Page */
.t1__page { background: #f5f5f5; min-height: 100vh; font-family: Arial, sans-serif; }

/* Hero */
.t1__hero { width: 100%; }
.t1__hero-img-wrap { position: relative; width: 100%; height: 220px; overflow: hidden; }
.t1__hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.t1__hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.55) 100%); }
.t1__hero-content { position: absolute; bottom: 20px; left: 18px; right: 18px; }
.t1__hero-badge { display: inline-block; background: var(--global-primary-color, #e60000); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; margin-bottom: 8px; }
.t1__hero-title { color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 4px; line-height: 1.2; }
.t1__hero-subtitle { color: rgba(255,255,255,0.88); font-size: 13px; margin: 0; }

/* Notification Bar */
.t1__notif { display: flex; align-items: center; gap: 10px; background: var(--global-primary-color, #e60000); color: #fff; padding: 12px 16px; }
.t1__notif-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(255,255,255,0.2); border-radius: 50%; }
.t1__notif-text { font-size: 13px; margin: 0; line-height: 1.4; }

/* Form Section */
.t1__form-section { background: #fff; padding: 20px 16px 24px; }
.t1__form { display: flex; flex-direction: column; gap: 16px; }
.t1__field { display: flex; flex-direction: column; gap: 6px; }
.t1__label { font-size: 14px; font-weight: 600; color: #222; }
.t1__input-box { border: 1.5px solid #d0d0d0; border-radius: 8px; padding: 0 12px; display: flex; align-items: center; background: #fff; transition: border-color 0.2s; }
.t1__input-box:focus-within { border-color: var(--global-primary-color, #e60000); box-shadow: 0 0 0 2px rgba(230,0,0,0.1); }
.t1__field--error .t1__input-box { border-color: #e53935; box-shadow: 0 0 0 2px rgba(229,57,53,0.12); }
.t1__input { width: 100%; border: none; outline: none; padding: 13px 0; font-size: 15px; color: #222; background: transparent; }
.t1__input::placeholder { color: #aaa; font-size: 14px; }
.t1__err { color: #e53935; font-size: 12px; margin: 0; padding-left: 2px; }

/* Button */
.t1__btn { width: 100%; border: none; border-radius: 30px; padding: 14px; background: var(--global-primary-color, #e60000); color: #fff; font-size: 16px; font-weight: 600; cursor: not-allowed; opacity: 0.5; transition: opacity 0.25s; }
.t1__btn--active { opacity: 1; cursor: pointer; }
.t1__btn--active:active { opacity: 0.85; }
.t1__btn-content { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Separator */
.t1__separator { height: 8px; background: #f0f0f0; }

/* Rewards */
.t1__rewards { background: #f5f5f5; padding: 20px 16px 24px; }
.t1__rewards-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.t1__rewards-title { font-size: 17px; font-weight: 700; color: #111; margin: 0; }
.t1__view-all { background: none; border: none; color: var(--global-primary-color, #e60000); font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 3px; padding: 0; }

/* Featured Card */
.t1__featured-card { background: linear-gradient(135deg, #1a4a5a 0%, #0d7070 60%, #0a5a6e 100%); border-radius: 14px; overflow: hidden; margin-bottom: 14px; position: relative; min-height: 150px; }
.t1__featured-dots { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.t1__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.t1__dot--1 { background: rgba(255,255,255,0.5); }
.t1__featured-body { display: flex; align-items: flex-end; justify-content: space-between; padding: 36px 16px 18px; }
.t1__featured-text { flex: 1; }
.t1__featured-badge { display: inline-block; background: var(--global-primary-color, #e60000); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; margin-bottom: 8px; }
.t1__featured-title { color: #fff; font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.t1__featured-sub { color: rgba(255,255,255,0.75); font-size: 13px; margin: 0 0 12px; }
.t1__featured-link { background: none; border: none; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.t1__featured-img-svg { width: 90px; height: 90px; flex-shrink: 0; margin-left: 12px; border-radius: 10px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; padding: 4px; box-sizing: border-box; }

/* Small Cards */
.t1__small-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.t1__small-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.t1__small-content { padding: 16px; }
.t1__small-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.t1__small-icon--wifi { background: #fff0f0; color: var(--global-primary-color, #e60000); }
.t1__small-icon--star { background: #fff0f0; color: var(--global-primary-color, #e60000); }
.t1__small-title { font-size: 14px; font-weight: 700; color: #111; margin: 0 0 3px; }
.t1__small-sub { font-size: 12px; color: #666; margin: 0 0 12px; }
.t1__small-link { background: none; border: none; color: var(--global-primary-color, #e60000); font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 3px; padding: 0; }
</style>

