<template>
  <div>
    <!-- 页面标题 -->
    <HeroBanner 
      title="联系我们" 
      subtitle="随时欢迎您的咨询，我们将为您提供专业的云服务解决方案"
    />

    <!-- 联系方式 -->
    <section class="section">
      <div class="container">
        <div class="grid md:grid-cols-3 gap-8 mb-16">
          <div v-for="(contact, index) in contactMethods" :key="index" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
            <div class="w-20 h-20 bg-gradient-to-br from-secondary/20 to-secondary/10 rounded-full flex items-center justify-center mx-auto mb-6">
              <i :class="['text-secondary text-3xl', contact.icon]"></i>
            </div>
            <h3 class="text-2xl font-semibold mb-4 text-center">{{ contact.title }}</h3>
            <p class="text-gray-600 mb-2 text-center">{{ contact.subtitle }}</p>
            <p class="text-2xl font-semibold text-secondary text-center">{{ contact.content }}</p>
            <div v-if="contact.type === 'wechat'" class="w-32 h-32 bg-gradient-to-br from-secondary/20 to-secondary/10 rounded-lg mx-auto flex items-center justify-center mt-4">
              <i class="fas fa-qrcode text-6xl text-secondary"></i>
            </div>
          </div>
        </div>

        <div class="grid md:grid-cols-2 gap-12">
          <!-- 联系表单 -->
          <div class="bg-white p-8 rounded-lg shadow-lg">
            <h2 class="text-3xl font-bold mb-8 text-center">在线咨询</h2>
            <form @submit.prevent="submitForm" class="space-y-6">
              <div class="grid md:grid-cols-2 gap-6">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2" for="name">
                    姓名 <span class="text-red-500">*</span>
                  </label>
                  <input 
                    type="text" 
                    id="name" 
                    v-model="form.name" 
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent transition-colors duration-300"
                  >
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2" for="company">
                    公司名称 <span class="text-red-500">*</span>
                  </label>
                  <input 
                    type="text" 
                    id="company" 
                    v-model="form.company" 
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent transition-colors duration-300"
                  >
                </div>
              </div>
              <div class="grid md:grid-cols-2 gap-6">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2" for="email">
                    邮箱 <span class="text-red-500">*</span>
                  </label>
                  <input 
                    type="email" 
                    id="email" 
                    v-model="form.email" 
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent transition-colors duration-300"
                  >
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2" for="phone">
                    电话 <span class="text-red-500">*</span>
                  </label>
                  <input 
                    type="tel" 
                    id="phone" 
                    v-model="form.phone" 
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent transition-colors duration-300"
                  >
                </div>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2" for="service">
                  咨询服务 <span class="text-red-500">*</span>
                </label>
                <select 
                  id="service" 
                  v-model="form.service" 
                  required
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent transition-colors duration-300"
                >
                  <option value="">请选择咨询服务</option>
                  <option v-for="(service, index) in services" :key="index" :value="service.value">
                    {{ service.label }}
                  </option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2" for="message">
                  咨询内容 <span class="text-red-500">*</span>
                </label>
                <textarea 
                  id="message" 
                  v-model="form.message" 
                  rows="4" 
                  required
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent transition-colors duration-300"
                ></textarea>
              </div>
              <button 
                type="submit"
                :disabled="submitting"
                :class="['w-full py-4 px-6 rounded-lg text-white text-lg font-semibold', 
                  submitting ? 'bg-gray-400' : 'bg-secondary hover:bg-secondary/90 transition-colors duration-300']"
              >
                <span v-if="submitting">
                  <i class="fas fa-spinner fa-spin mr-2"></i>提交中...
                </span>
                <span v-else>提交咨询</span>
              </button>
            </form>
          </div>

          <!-- 公司地址 -->
          <div>
            <div class="bg-white p-8 rounded-lg shadow-lg mb-8">
              <h2 class="text-3xl font-bold mb-8 text-center">公司地址</h2>
              <div class="space-y-6">
                <div v-for="(info, index) in companyInfo" :key="index" class="flex items-start">
                  <div class="w-12 h-12 bg-gradient-to-br from-secondary/20 to-secondary/10 rounded-full flex items-center justify-center mr-4">
                    <i :class="['text-secondary text-xl', info.icon]"></i>
                  </div>
                  <div>
                    <h4 class="text-xl font-semibold mb-2">{{ info.title }}</h4>
                    <p class="text-gray-600">{{ info.content }}</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- 地图 -->
            <div class="w-full h-96 rounded-lg shadow-lg overflow-hidden bg-gray-200 flex items-center justify-center">
              <i class="fas fa-map-marked-alt text-6xl text-gray-400"></i>
              <span class="ml-4 text-gray-500">地图加载位置</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 常见问题 -->
    <section class="section bg-gray-50">
      <div class="container">
        <h2 class="text-4xl font-bold text-center mb-6">常见问题</h2>
        <p class="text-xl text-center text-gray-600 mb-12">解答您最关心的问题</p>
        <div class="grid md:grid-cols-2 gap-8">
          <div v-for="(faq, index) in faqs" :key="index" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
            <h3 class="text-2xl font-semibold mb-4">{{ faq.question }}</h3>
            <p class="text-gray-600 leading-relaxed">{{ faq.answer }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 通知组件 -->
    <NotificationToast 
      :message="notification.message" 
      :type="notification.type" 
      @close="notification.message = ''" 
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

// 联系方式数据
const contactMethods = [
  {
    icon: 'fas fa-phone',
    title: '电话咨询',
    subtitle: '周一至周日 9:00-21:00',
    content: '400-123-4567',
    type: 'phone'
  },
  {
    icon: 'fas fa-envelope',
    title: '邮件咨询',
    subtitle: '7*24小时邮件支持',
    content: 'contact@example.com',
    type: 'email'
  },
  {
    icon: 'fab fa-weixin',
    title: '微信咨询',
    subtitle: '扫描下方二维码',
    content: '',
    type: 'wechat'
  }
];

// 公司信息
const companyInfo = [
  {
    icon: 'fas fa-map-marker-alt',
    title: '北京总部',
    content: '北京市朝阳区某某大厦10层'
  },
  {
    icon: 'fas fa-subway',
    title: '交通方式',
    content: '地铁6号线某某站A出口步行5分钟'
  },
  {
    icon: 'far fa-clock',
    title: '办公时间',
    content: '周一至周五: 9:00-18:00'
  }
];

// 服务选项
const services = [
  { value: 'cloud', label: '云服务咨询' },
  { value: 'migration', label: '上云迁移' },
  { value: 'solution', label: '解决方案咨询' },
  { value: 'price', label: '价格咨询' },
  { value: 'other', label: '其他' }
];

// 常见问题
const faqs = [
  {
    question: '如何开始使用AWS云服务？',
    answer: '您可以通过我们的咨询服务，获取专业的AWS云服务解决方案建议。我们的团队将根据您的具体需求，为您提供最适合的云服务方案。'
  },
  {
    question: '如何获取技术支持？',
    answer: '我们提供7*24小时技术支持服务，您可以通过电话、邮件或在线咨询等方式联系我们的技术支持团队。'
  },
  {
    question: '如何计算使用成本？',
    answer: '我们提供详细的成本评估服务，可以根据您的具体使用场景和需求，为您提供准确的成本预估和优化建议。'
  },
  {
    question: '如何申请试用服务？',
    answer: '您可以通过在线咨询或直接联系我们的销售团队，申请AWS云服务的试用。我们将为您提供专业的试用方案和技术支持。'
  }
];

// 表单数据
const form = reactive({
  name: '',
  company: '',
  email: '',
  phone: '',
  service: '',
  message: ''
});

const submitting = ref(false);
const notification = reactive({
  message: '',
  type: 'success'
});

// 提交表单方法
const submitForm = async () => {
  submitting.value = true;
  
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 1500));
    
    // 显示成功消息
    notification.message = '提交成功！我们会尽快与您联系。';
    notification.type = 'success';
    
    // 重置表单
    Object.keys(form).forEach(key => {
      form[key as keyof typeof form] = '';
    });
  } catch (error) {
    // 显示错误消息
    notification.message = '抱歉，提交失败，请稍后重试。';
    notification.type = 'error';
  } finally {
    submitting.value = false;
  }
};
</script> 