<template>
  <div class="wtd-page">
    <!-- ══════════════════════════════════════
         HERO BANNER
    ══════════════════════════════════════ -->
    <div class="wtd-hero">
      <!-- 背景装饰层 -->
      <div class="wtd-hero__grid"></div>
      <div class="wtd-hero__orb wtd-hero__orb--1"></div>
      <div class="wtd-hero__orb wtd-hero__orb--2"></div>
      <div class="wtd-hero__orb wtd-hero__orb--3"></div>

      <!-- 面包屑 -->
      <div class="container wtd-hero__breadcrumb-wrap">
        <Breadcrumb />
      </div>

      <!-- 底部波浪 Canvas -->
      <canvas ref="waveCanvasRef" class="wtd-hero__wave-canvas"></canvas>

      <!-- 主标题区 -->
      <div class="container wtd-hero__content">
          <div class="wtd-hero__badge">
            <span class="wtd-hero__badge-dot"></span>
            <span>{{ $t('workflowTrade.heroBadge') }}</span>
          </div>
          <h1 class="wtd-hero__title">{{ $t('workflowTrade.heroTitle') }}</h1>
          <p class="wtd-hero__subtitle">
            {{ $t('workflowTrade.heroDesc') }}
          </p>

          <!-- 统计数字装饰 -->
          <div class="wtd-hero__stats">
            <div class="wtd-hero__stat">
              <span class="wtd-hero__stat-num">12,847</span>
              <span class="wtd-hero__stat-label">{{ $t('workflowTrade.statPublished') }}</span>
            </div>
            <div class="wtd-hero__stat-divider"></div>
            <div class="wtd-hero__stat">
              <span class="wtd-hero__stat-num">9,632</span>
              <span class="wtd-hero__stat-label">{{ $t('workflowTrade.statSuccess') }}</span>
            </div>
            <div class="wtd-hero__stat-divider"></div>
            <div class="wtd-hero__stat">
              <span class="wtd-hero__stat-num">98.6%</span>
              <span class="wtd-hero__stat-label">{{ $t('workflowTrade.statRate') }}</span>
            </div>
          </div>
        </div>
    </div>

    <!-- ══════════════════════════════════════
         主体内容
    ══════════════════════════════════════ -->
    <div class="container wtd-body">
      <div class="wtd-layout">

        <!-- 左侧主要内容 -->
        <div class="wtd-main-col">
          
          <!-- 需求基本信息卡片 -->
          <div class="wtd-card">
            <div class="wtd-card__header">
              <div class="wtd-card__header-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
              </div>
              <div class="wtd-card__header-content">
                <div class="wtd-card__title">{{ ruleForm.title }}</div>
                <div class="wtd-card__meta">
                  <el-button type="primary" size="small" class="wtd-status-btn">{{ applyStatusInfo[ruleForm.applyStatus] }}</el-button>
                  <div class="wtd-card__price">￥{{ ruleForm.budgetMin }}-{{ ruleForm.budgetMax }}</div>
                </div>
              </div>
            </div>

            <div class="wtd-card__body">
              <!-- 分类标签 -->
              <div class="wtd-info-row">
                <div class="wtd-info-item">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
                  <span class="wtd-info-text">{{ ruleForm.categoryName1 }}-{{ ruleForm.categoryName2 }}-{{ ruleForm.categoryName3 }}</span>
                </div>
                <div class="wtd-info-item">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                  <span class="wtd-info-text">{{ $t('common.signUpDeadline') }}：{{ ruleForm.deadline }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 需求详情卡片 -->
          <div class="wtd-card mt20">
            <div class="wtd-card__section-header">
              <div class="wtd-card__section-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
              </div>
              <div class="wtd-card__section-title">{{ $t('workflowTradeAdd.background') }}</div>
            </div>
            <div class="wtd-card__body">
              <div class="wtd-text-content">{{ ruleForm.background }}</div>
            </div>
          </div>

          <div class="wtd-card mt20">
            <div class="wtd-card__section-header">
              <div class="wtd-card__section-icon wtd-card__section-icon--purple">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
              </div>
              <div class="wtd-card__section-title">{{ $t('workflowTradeAdd.requirements') }}</div>
            </div>
            <div class="wtd-card__body">
              <div class="wtd-text-content">{{ ruleForm.requirements }}</div>
            </div>
          </div>

          <!-- 联系方式卡片 -->
          <div class="wtd-card mt20">
            <div class="wtd-card__section-header">
              <div class="wtd-card__section-icon wtd-card__section-icon--green">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.18h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.73a16 16 0 0 0 6.29 6.29l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
              </div>
              <div class="wtd-card__section-title">{{ $t('workflowTradeAdd.contactInfo') }}</div>
            </div>
            <div class="wtd-card__body">
              <div class="wtd-contact-grid">
                <div class="wtd-contact-item">
                  <div class="wtd-contact-icon wtd-contact-icon--phone">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.18h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.73a16 16 0 0 0 6.29 6.29l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                  </div>
                  <div class="wtd-contact-info">
                    <div class="wtd-contact-label">{{ $t('workflowTradeAdd.phoneNumber') }}</div>
                    <div class="wtd-contact-value">{{ ruleForm.phone }}</div>
                  </div>
                </div>
                <div class="wtd-contact-item">
                  <div class="wtd-contact-icon wtd-contact-icon--wechat">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                  </div>
                  <div class="wtd-contact-info">
                    <div class="wtd-contact-label">{{ $t('workflowTradeAdd.wechat') }}</div>
                    <div class="wtd-contact-value">{{ ruleForm.wechat }}</div>
                  </div>
                </div>
                <div class="wtd-contact-item">
                  <div class="wtd-contact-icon wtd-contact-icon--email">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                  </div>
                  <div class="wtd-contact-info">
                    <div class="wtd-contact-label">{{ $t('workflowTradeAdd.email') }}</div>
                    <div class="wtd-contact-value">{{ ruleForm.email }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧侧边栏 -->
        <div class="wtd-sidebar">
          <div class="wtd-sidebar__sticky">
            
            <!-- 发布者信息卡片 -->
            <div class="wtd-sidebar-card">
              <div class="wtd-user-card">
                <el-avatar :size="80" :src="ruleForm.userAvatar || appStore.avatarDefault" />
                <div class="wtd-user-name">{{ ruleForm.nickName }}</div>
              </div>
              <div class="wtd-stats-grid">
                <div class="wtd-stat-item">
                  <div class="wtd-stat-value">{{ ruleForm.questCount }}</div>
                  <div class="wtd-stat-label">{{ $t('workflowTradeAdd.publishDemandNum') }}</div>
                </div>
                <div class="wtd-stat-divider"></div>
                <div class="wtd-stat-item">
                  <div class="wtd-stat-value">{{ ruleForm.publishCount }}</div>
                  <div class="wtd-stat-label">{{ $t('common.chuangjiangongzuoliu') }}</div>
                </div>
              </div>
            </div>

            <!-- 报名信息卡片 -->
            <div class="wtd-sidebar-card mt16">
              <div class="wtd-sidebar-card__header">
                <div class="wtd-sidebar-card__icon">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                </div>
                <div class="wtd-sidebar-card__title">{{ $t('common.registeredNum') }}</div>
              </div>
              <div class="wtd-sidebar-card__body">
                <div class="wtd-info-row wtd-info-row--sidebar">
                  <div class="wtd-info-item">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                    <span class="wtd-info-text">{{ $t('common.registeredNum') }}</span>
                  </div>
                  <div class="wtd-info-value">{{ ruleForm.questApplyCount }}人</div>
                </div>
                <div class="wtd-info-row wtd-info-row--sidebar">
                  <div class="wtd-info-item">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                    <span class="wtd-info-text">{{ $t('common.remainingTime') }}</span>
                  </div>
                  <div class="wtd-info-value wtd-info-value--highlight">
                    {{ formatDeadline(ruleForm.deadline).diffDays }}{{ t('common.day') }}
                    {{ formatDeadline(ruleForm.deadline).diffHours }}{{ t('common.hour') }}
                  </div>
                </div>
                <el-button 
                  type="primary" 
                  size="large" 
                  class="wtd-signup-btn"
                  v-if="ruleForm.applyStatus === '1'"
                  @click="submitSignUp({questId: ruleForm.questId, questUserId: ruleForm.questUserId}, t, getQuestDetailFn)"
                >
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
                  <span>{{ $t('common.zaixianbaoming') }}</span>
                </el-button>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { submitSignUp, formatDeadline } from '@/utils/util.js'
import { getQuestDetail } from '@/api/workflowTrade.js'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
import { useAppStore } from '@/pinia/appStore'
const appStore = useAppStore()

const waveCanvasRef = ref(null)

const applyStatusInfo = {
  '1': t('workflowTrade.demandStatusSignUping'),
  '2': t('workflowTrade.demandStatusEnded'),
}

const query = route.query
const questId = ref(query.questId || '')
const ruleForm = ref({
  title: '',
  categoryId1: '',
  categoryId2: '',
  categoryId3: '',
  background: '',
  requirements: '',
  budgetMin: '',
  budgetMax: '',
  deadline: '',
  phone: '',
  wechat: '',
  email: '',
})

onMounted(() => {
  getQuestDetailFn()
  nextTick(() => {
    initWaveCanvas()
  })
})

onUnmounted(() => {
  if (waveAnimId) cancelAnimationFrame(waveAnimId)
})

let waveAnimId = null
function initWaveCanvas() {
  const canvas = waveCanvasRef.value
  if (!canvas) return
  const ctx = canvas.getContext('2d')
  let W = 0, H = 0
  function resize() {
    W = canvas.width = canvas.offsetWidth
    H = canvas.height = canvas.offsetHeight
  }
  resize()
  window.addEventListener('resize', resize)

  const waves = [
    { amp: 40, freq: 0.004, speed: 0.0012, phase: 0,   color: 'rgba(99,102,241,0.28)' },
    { amp: 28, freq: 0.006, speed: 0.0025, phase: 2.1, color: 'rgba(167,139,250,0.22)' },
    { amp: 18, freq: 0.008, speed: 0.004,  phase: 4.3, color: 'rgba(255,255,255,1)' },
  ]

  function draw() {
    ctx.clearRect(0, 0, W, H)
    waves.forEach(w => {
      w.phase += w.speed
      ctx.beginPath()
      ctx.moveTo(0, H)
      for (let x = 0; x <= W; x += 2) {
        const y = H * 0.60 + Math.sin(x * w.freq + w.phase) * w.amp
        ctx.lineTo(x, y)
      }
      ctx.lineTo(W, H)
      ctx.closePath()
      ctx.fillStyle = w.color
      ctx.fill()
    })
    waveAnimId = requestAnimationFrame(draw)
  }
  draw()
}

const getQuestDetailFn = async () => {
  getQuestDetail({id: questId.value}).then(res => {
    if(res.code === 200){
      ruleForm.value = res.data || {}
    }
  })
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  min-width: auto;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════
   CSS 变量
══════════════════════════════════════ */
:root {
  --wtd-indigo: #4f46e5;
  --wtd-violet: #7c3aed;
  --wtd-purple: #a855f7;
  --wtd-pink: #ec4899;
}

/* ══════════════════════════════════════
   页面整体
══════════════════════════════════════ */
.wtd-page {
  min-height: calc(100vh - 60px);
  background: #f4f5ff;
  margin-bottom: 60px;
}

/* ══════════════════════════════════════
   HERO BANNER
══════════════════════════════════════ */
.wtd-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #312e81 0%, #4f46e5 25%, #7c3aed 55%, #a855f7 80%, #ec4899 100%);
  padding-bottom: 80px;
}

/* 网格背景 */
.wtd-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* 光晕球 */
.wtd-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.wtd-hero__orb--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(129,140,248,0.4), transparent 70%);
  top: -150px; right: 5%;
}
.wtd-hero__orb--2 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(240,171,252,0.35), transparent 70%);
  bottom: -100px; left: 3%;
}
.wtd-hero__orb--3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(251,207,232,0.3), transparent 70%);
  top: 30px; left: 40%;
}

.wtd-hero__breadcrumb-wrap {
  position: relative;
  z-index: 2;
  padding-top: 18px;
  :deep(.el-breadcrumb__inner),
  :deep(.el-breadcrumb__separator) { color: rgba(255,255,255,0.65) !important; }
  :deep(.el-breadcrumb__inner.is-link:hover) { color: #fff !important; }
  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) { color: #fff !important; font-weight: 600; }
}

.wtd-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 8px 20px 0;
}

.wtd-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px;
  padding: 6px 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
  margin-bottom: 18px;
}
.wtd-hero__badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #a5f3fc;
  box-shadow: 0 0 10px #a5f3fc;
  animation: wtd-pulse 2s ease-in-out infinite;
}
@keyframes wtd-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.wtd-hero__title {
  font-size: 40px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  margin-bottom: 12px;
  line-height: 1.15;
  text-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.wtd-hero__subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

.wtd-hero__stats {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 14px 28px;
  gap: 24px;
}
.wtd-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.wtd-hero__stat-num {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}
.wtd-hero__stat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}
.wtd-hero__stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.2);
}

/* ══════════════════════════════════════
   波浪 Canvas
══════════════════════════════════════ */
.wtd-hero__wave-canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 1;
}

/* ══════════════════════════════════════
   主体内容
══════════════════════════════════════ */
.wtd-body {
  padding-top: 32px;
  padding-bottom: 48px;
}

.wtd-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
}

.wtd-main-col {
  min-width: 0;
}

.wtd-sidebar {
  min-width: 0;
}

.wtd-sidebar__sticky {
  position: sticky;
  top: 24px;
}

/* ══════════════════════════════════════
   卡片组件
══════════════════════════════════════ */
.wtd-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(79, 70, 229, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.wtd-card__header {
  padding: 24px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.03) 0%, rgba(124, 58, 237, 0.03) 100%);
  border-bottom: 1px solid rgba(79, 70, 229, 0.08);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.wtd-card__header-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.wtd-card__header-content {
  flex: 1;
  min-width: 0;
}

.wtd-card__title {
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
  line-height: 1.3;
}

.wtd-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.wtd-status-btn {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border: none;
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.wtd-card__price {
  font-size: 24px;
  font-weight: 800;
  color: #4f46e5;
  letter-spacing: -0.5px;
}

.wtd-card__body {
  padding: 24px;
}

.wtd-card__section-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(79, 70, 229, 0.08);
}

.wtd-card__section-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.wtd-card__section-icon--purple {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.wtd-card__section-icon--green {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.wtd-card__section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.wtd-text-content {
  padding: 20px 24px;
  color: #4b5563;
  line-height: 1.8;
  font-size: 15px;
}

/* ══════════════════════════════════════
   信息行
══════════════════════════════════════ */
.wtd-info-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  background: rgba(79, 70, 229, 0.02);
  border-radius: 12px;
  flex-wrap: wrap;
}

.wtd-info-row--sidebar {
  background: rgba(79, 70, 229, 0.03);
  padding: 12px 16px;
  justify-content: space-between;
}

.wtd-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 14px;
}

.wtd-info-text {
  color: #4b5563;
}

.wtd-info-value {
  font-weight: 600;
  color: #1f2937;
  font-size: 15px;
}

.wtd-info-value--highlight {
  color: #4f46e5;
  font-weight: 700;
}

/* ══════════════════════════════════════
   联系方式网格
══════════════════════════════════════ */
.wtd-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px 24px;
}

.wtd-contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: rgba(79, 70, 229, 0.03);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.wtd-contact-item:hover {
  background: rgba(79, 70, 229, 0.06);
  transform: translateY(-2px);
}

.wtd-contact-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.wtd-contact-icon--phone {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

.wtd-contact-icon--wechat {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.wtd-contact-icon--email {
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
}

.wtd-contact-info {
  text-align: center;
}

.wtd-contact-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.wtd-contact-value {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  word-break: break-all;
}

/* ══════════════════════════════════════
   侧边栏卡片
══════════════════════════════════════ */
.wtd-sidebar-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(79, 70, 229, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.wtd-user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  text-align: center;
}

.wtd-user-name {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.wtd-stats-grid {
  display: flex;
  align-items: center;
  padding: 20px;
  border-top: 1px solid rgba(79, 70, 229, 0.08);
}

.wtd-stat-item {
  flex: 1;
  text-align: center;
}

.wtd-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: #4f46e5;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.wtd-stat-label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.wtd-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(79, 70, 229, 0.15);
}

.wtd-sidebar-card__header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(79, 70, 229, 0.08);
}

.wtd-sidebar-card__icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.wtd-sidebar-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.wtd-sidebar-card__body {
  padding: 20px;
}

.wtd-signup-btn {
  width: 100%;
  margin-top: 16px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border: none;
  border-radius: 12px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.wtd-signup-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.3);
}

/* ══════════════════════════════════════
   响应式布局
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .wtd-layout {
    grid-template-columns: 1fr;
  }
  
  .wtd-sidebar {
    order: -1;
  }
  
  .wtd-contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .wtd-hero__title {
    font-size: 28px;
  }
  
  .wtd-hero__stats {
    flex-direction: column;
    gap: 16px;
  }
  
  .wtd-hero__stat-divider {
    width: 32px;
    height: 1px;
  }
  
  .wtd-card__header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .wtd-card__meta {
    width: 100%;
  }
  
  .wtd-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .wtd-stats-grid {
    flex-direction: column;
    gap: 16px;
  }
  
  .wtd-stat-divider {
    width: 100%;
    height: 1px;
  }
}

/* ══════════════════════════════════════
   工具类
══════════════════════════════════════ */
.mt20 {
  margin-top: 20px;
}

.mt16 {
  margin-top: 16px;
}
</style>