<template>
  <div class="contact-page">
    <div class="contact-banner">
      <div class="mx-auto max-w-screen-xl px-4 py-16 text-center">
        <h1 class="banner-title">联系我们</h1>
        <p class="banner-desc">广西决策咨询中心期待与您交流合作</p>
      </div>
    </div>

    <div class="mx-auto max-w-screen-xl px-4 py-12">
      <a-row :gutter="[48, 48]">
        <!-- 左侧：联系信息 -->
        <a-col :md="8" :xs="24">
          <div class="contact-info">
            <h2 class="info-title">联系信息</h2>

            <div class="info-item">
              <div class="info-icon">📍</div>
              <div class="info-content">
                <div class="info-label">办公地址</div>
                <div class="info-value">广西·南宁·良庆区 五象大道401号 五象航洋城3号楼</div>
              </div>
            </div>

            <div class="info-item">
              <div class="info-icon">📞</div>
              <div class="info-content">
                <div class="info-label">联系电话</div>
                <div class="info-value">0771-5386339</div>
              </div>
            </div>

            <div class="info-item">
              <div class="info-icon">📧</div>
              <div class="info-content">
                <div class="info-label">电子邮箱</div>
                <div class="info-value">gxjzxzx@126.com</div>
              </div>
            </div>

            <div class="info-item">
              <div class="info-icon">⏰</div>
              <div class="info-content">
                <div class="info-label">服务时间</div>
                <div class="info-value">周一至周五 9:00-17:00</div>
              </div>
            </div>

            <div class="info-item">
              <div class="info-icon">📮</div>
              <div class="info-content">
                <div class="info-label">邮政编码</div>
                <div class="info-value">530200</div>
              </div>
            </div>

            <div class="info-divider"></div>

            <div class="social-section">
              <div class="social-title">关注我们</div>
              <div class="social-items">
                <a-tooltip title="微信公众号">
                  <div class="social-item">📱</div>
                </a-tooltip>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 右侧：咨询表单 -->
        <a-col :md="16" :xs="24">
          <div class="contact-form-panel">
            <h2 class="form-title">在线咨询</h2>
            <p class="form-desc">请填写您的咨询内容，我们将尽快与您联系</p>

            <a-form
              :model="form"
              :rules="rules"
              class="contact-form"
              layout="vertical"
            >
              <a-row :gutter="16">
                <a-col :md="12" :xs="24">
                  <a-form-item label="姓名" name="name">
                    <a-input v-model:value="form.name" placeholder="请输入您的姓名" size="large" />
                  </a-form-item>
                </a-col>
                <a-col :md="12" :xs="24">
                  <a-form-item label="联系电话" name="phone">
                    <a-input v-model:value="form.phone" placeholder="请输入联系电话" size="large" />
                  </a-form-item>
                </a-col>
              </a-row>

              <a-row :gutter="16">
                <a-col :md="12" :xs="24">
                  <a-form-item label="单位/组织" name="organization">
                    <a-input v-model:value="form.organization" placeholder="请输入单位或组织名称" size="large" />
                  </a-form-item>
                </a-col>
                <a-col :md="12" :xs="24">
                  <a-form-item label="咨询类型" name="type">
                    <a-select v-model:value="form.type" placeholder="请选择咨询类型" size="large">
                      <a-select-option value="consult">咨询服务</a-select-option>
                      <a-select-option value="expert">专家申请</a-select-option>
                      <a-select-option value="member">会员申请</a-select-option>
                      <a-select-option value="cooperation">商务合作</a-select-option>
                      <a-select-option value="other">其他</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>

              <a-form-item label="咨询内容" name="content">
                <a-textarea
                  v-model:value="form.content"
                  :maxlength="1000"
                  :rows="5"
                  placeholder="请详细描述您的咨询内容..."
                  show-count
                  size="large"
                />
              </a-form-item>

              <a-form-item>
                <a-space>
                  <a-button :loading="submitting" size="large" type="primary" @click="handleSubmit">
                    提交咨询
                  </a-button>
                  <a-button size="large" @click="handleReset">
                    重置
                  </a-button>
                </a-space>
              </a-form-item>
            </a-form>

            <div class="form-tip">
              💡 温馨提示：我们将在1-3个工作日内回复您的咨询，如有紧急事项请直接电话联系。
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue'

useHead({ title: '联系我们 - 广西决策咨询网' })

const submitting = ref(false)

const form = reactive({
  name: '',
  phone: '',
  organization: '',
  type: undefined as string | undefined,
  content: '',
})

const rules = {
  name: [{ required: true, message: '请输入您的姓名' }],
  phone: [{ required: true, message: '请输入联系电话' }],
  content: [{ required: true, message: '请输入咨询内容' }],
}

async function handleSubmit() {
  if (!form.name || !form.phone || !form.content) {
    message.warning('请填写必填项')
    return
  }
  submitting.value = true
  try {
    // TODO: 接入实际API提交咨询
    // await submitContact(form)
    await new Promise(resolve => setTimeout(resolve, 500))
    message.success('咨询已提交，我们会尽快与您联系！')
    handleReset()
  } catch (e: any) {
    message.error(e?.message || '提交失败')
  } finally {
    submitting.value = false
  }
}

function handleReset() {
  Object.assign(form, {
    name: '',
    phone: '',
    organization: '',
    type: undefined,
    content: '',
  })
}
</script>

<style scoped>
.contact-banner {
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  color: #fff;
}

.banner-title {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}

.banner-desc {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.contact-info {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  height: 100%;
}

.info-title {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 28px;
}

.info-item {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
  align-items: flex-start;
}

.info-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.info-content {
  flex: 1;
}

.info-label {
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 4px;
}

.info-value {
  font-size: 15px;
  color: #374151;
  line-height: 1.6;
}

.info-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 24px 0;
}

.social-section {}

.social-title {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
}

.social-items {
  display: flex;
  gap: 12px;
}

.social-item {
  width: 40px;
  height: 40px;
  background: #f3f4f6;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s;
}

.social-item:hover {
  background: #e5e7eb;
}

.contact-form-panel {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.form-title {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px;
}

.form-desc {
  font-size: 14px;
  color: #9ca3af;
  margin: 0 0 28px;
}

.contact-form {}

.form-tip {
  margin-top: 16px;
  padding: 14px 16px;
  background: #eff6ff;
  border-radius: 10px;
  font-size: 13px;
  color: #3b82f6;
  line-height: 1.6;
}
</style>
