<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { CUSTOMER_SERVICE_URL, CUSTOMER_SERVICE_ENTRIES_VISIBLE } from '@/utils/customerService'

const { t } = useI18n()

const aboutLinks = computed(() => [
  { labelKey: 'footer.companyIntro', to: '/about' },
  { labelKey: 'footer.brand',     to: '/brand' },
  { labelKey: 'footer.community', to: '/community' },
])

const complianceLinks = computed(() => [
  { labelKey: 'footer.riskWarning', to: '/legal/risk' },
  { labelKey: 'footer.terms',       to: '/legal/terms' },
  { labelKey: 'footer.privacy',     to: '/legal/privacy' },
])

const productLinks = computed(() => [
  { labelKey: 'footer.futuresTrade', to: '/futures/BTC-USDT' },
  { labelKey: 'footer.spotTrade',    to: '/spot/BTC-USDT' },
  { labelKey: 'footer.losslessCopy', to: '/copy-trade?tab=lossless' },
])

const resourceLinks = computed(() => [
  { labelKey: 'footer.beginnerGuide', to: '/guide' },
  { labelKey: 'footer.helpCenter',    to: '/help' },
  { labelKey: 'footer.glossary',      to: '/legal/glossary' },
])

const socialLinks = [
  {
    name: 'X (Twitter)',
    href: 'https://x.com/ibit',
    svg: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>`,
  },
  {
    name: 'Telegram',
    href: 'https://t.me/ibitcn',
    svg: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.944 0A12 12 0 1 0 24 12 12 12 0 0 0 11.944 0zm5.921 7.406-2.063 9.723c-.148.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12L7.41 14.028l-2.96-.924c-.643-.204-.657-.643.136-.953l11.566-4.461c.537-.194 1.006.131.713.716z"/></svg>`,
  },
  {
    name: 'Facebook',
    href: '',
    svg: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.883v2.258h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/></svg>`,
  },
  {
    name: 'Instagram',
    href: '',
    svg: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>`,
  },
  {
    name: 'TikTok',
    href: 'https://www.tiktok.com/@ibit.com',
    svg: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.32 6.32 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.18 8.18 0 0 0 4.78 1.52V6.77a4.85 4.85 0 0 1-1.01-.08z"/></svg>`,
  },
]
</script>

<template>
  <footer class="footer">
    <div class="footer-inner page-container">

      <!-- 品牌列 -->
      <div class="col col-brand">
        <RouterLink to="/" class="footer-logo">
          <img src="@/assets/logo.png" alt="iBit" />
          <span>iBit</span>
        </RouterLink>
        <div class="social-grid">
          <template v-for="s in socialLinks" :key="s.name">
            <a
              v-if="s.href"
              :href="s.href"
              class="social-btn"
              :title="s.name"
              target="_blank"
              rel="noopener"
            >
              <!-- eslint-disable-next-line vue/no-v-html -->
              <span class="social-icon" v-html="s.svg" />
            </a>
            <span
              v-else
              class="social-btn is-disabled"
              :title="s.name"
              aria-disabled="true"
            >
              <!-- eslint-disable-next-line vue/no-v-html -->
              <span class="social-icon" v-html="s.svg" />
            </span>
          </template>
        </div>
      </div>

      <!-- 关于 -->
      <div class="col">
        <h4 class="col-title">{{ t('footer.aboutSection') }}</h4>
        <RouterLink v-for="link in aboutLinks" :key="link.labelKey" :to="link.to" class="footer-link">{{ t(link.labelKey) }}</RouterLink>
      </div>

      <!-- 合规性 -->
      <div class="col">
        <h4 class="col-title">{{ t('footer.compliance') }}</h4>
        <RouterLink
          v-for="link in complianceLinks"
          :key="link.labelKey"
          :to="link.to"
          class="footer-link"
        >{{ t(link.labelKey) }}</RouterLink>
      </div>

      <!-- 产品 -->
      <div class="col">
        <h4 class="col-title">{{ t('footer.products') }}</h4>
        <RouterLink
          v-for="link in productLinks"
          :key="link.labelKey"
          :to="link.to"
          class="footer-link"
        >{{ t(link.labelKey) }}</RouterLink>
      </div>

      <!-- 资源 -->
      <div class="col">
        <h4 class="col-title">{{ t('footer.resources') }}</h4>
        <RouterLink
          v-for="link in resourceLinks"
          :key="link.labelKey"
          :to="link.to"
          class="footer-link"
        >{{ t(link.labelKey) }}</RouterLink>
      </div>

    </div>

    <!-- 版权 -->
    <div class="copyright">
      Copyright © 2020–2030 iBit All rights reserved.
    </div>

    <!-- 客服入口（右下角悬浮） -->
    <a
      v-if="CUSTOMER_SERVICE_ENTRIES_VISIBLE"
      :href="CUSTOMER_SERVICE_URL || '#'"
      target="_blank"
      rel="noopener"
      class="cs-btn"
      :title="t('account.title')"
      :aria-label="t('account.title')"
    >
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
        <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
      </svg>
    </a>
  </footer>
</template>

<style scoped>
.footer {
  background: #0a0a0a;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 60px;
  position: relative;
}

.footer-inner {
  display: grid;
  grid-template-columns: 180px 140px 160px 150px 130px;
  gap: 32px;
  padding-bottom: 48px;
  align-items: start;
}

/* 品牌列 */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  text-decoration: none;
}
.footer-logo img { width: 28px; height: 28px; }

.social-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.5);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.social-btn:hover:not(.is-disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(240,185,11,0.06);
}
.social-btn.is-disabled {
  cursor: default;
  opacity: 0.45;
}
.social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
}
.social-icon :deep(svg) { width: 16px; height: 16px; }

/* 通用列 */
.col-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.col-title--sub {
  margin-top: 24px;
}

.footer-link {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 12px;
  transition: color 0.2s;
  text-decoration: none;
  line-height: 1.4;
}
.footer-link:hover { color: var(--color-primary); }

/* 版权 */
.copyright {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── 客服悬浮按钮 ── */
.cs-btn {
  position: fixed;
  right: 24px;
  bottom: 32px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 52px;
  height: 52px;
  background: var(--color-primary);
  color: #000;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(240,185,11,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  justify-content: center;
}
.cs-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(240,185,11,0.55);
}

/* ── 移动端 ── */
@media (max-width: 960px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    padding-bottom: 40px;
  }
  .col-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cs-btn {
    right: 16px;
    bottom: 24px;
    width: 48px;
    height: 48px;
  }
}
</style>
