<script lang="ts" setup>
/**
 * 联系我们页面
 * 基于玉犀科技官网的联系我们内容
 */

import { ref } from 'vue'

// 页面SEO配置
useSeoMeta({
  title: '联系我们 - 玉犀科技',
  description: '联系玉犀科技，获取专业的共享软件开发和物联网解决方案服务',
  keywords: '联系我们,玉犀科技,商务合作,技术支持,客户服务',
  robots: 'index, follow'
})

// 联系信息
const contactInfo = ref({
  company: '深圳市玉犀科技有限公司',
  address: '深圳市龙华新区1970文化创意产业园A栋206',
  phone: '18123752516',
  servicePhone: '0755-85225123',
  email: 'yuxi@yuxiit.com',
  website: 'https://www.yuxiit.com',
  workingHours: '周一至周五 9:00-18:00',
  icp: '粤ICP备14055703号-1'
})

// 联系表单数据
const contactForm = ref({
  name: '',
  company: '',
  phone: '',
  email: '',
  subject: '',
  message: ''
})

// 业务类型
const businessTypes = ref([
  { value: 'shared-solutions', label: '共享解决方案' },
  { value: 'industry-solutions', label: '行业解决方案' },
  { value: 'software-development', label: '软件应用开发' },
  { value: 'iot-solutions', label: '物联网解决方案' },
  { value: 'other', label: '其他业务' }
])

// 联系方式
const contactMethods = ref([
  {
    title: '客服电话',
    value: contactInfo.value.servicePhone,
    description: '工作日 9:00-18:00',
    icon: 'i-lucide-phone',
    color: 'bg-blue-100 text-blue-600'
  },
  {
    title: '商务合作',
    value: contactInfo.value.phone,
    description: '24小时在线',
    icon: 'i-lucide-handshake',
    color: 'bg-green-100 text-green-600'
  },
  {
    title: '技术支持',
    value: contactInfo.value.email,
    description: '技术问题咨询',
    icon: 'i-lucide-headphones',
    color: 'bg-purple-100 text-purple-600'
  },
  {
    title: '公司地址',
    value: contactInfo.value.address,
    description: '欢迎实地考察',
    icon: 'i-lucide-map-pin',
    color: 'bg-orange-100 text-orange-600'
  }
])

// 服务优势
const serviceAdvantages = ref([
  {
    title: '专业团队',
    description: '拥有丰富的项目经验和技术实力',
    icon: 'i-lucide-users'
  },
  {
    title: '快速响应',
    description: '24小时内响应客户需求',
    icon: 'i-lucide-zap'
  },
  {
    title: '定制服务',
    description: '根据客户需求提供定制化解决方案',
    icon: 'i-lucide-settings'
  },
  {
    title: '持续支持',
    description: '提供长期的技术支持和维护服务',
    icon: 'i-lucide-shield-check'
  }
])

// 提交联系表单
const submitContactForm = () => {
  if (!contactForm.value.name || !contactForm.value.phone || !contactForm.value.message) {
    alert('请填写必填字段')
    return
  }
  
  // 这里可以添加表单提交逻辑
  console.log('提交联系表单:', contactForm.value)
  alert('感谢您的咨询，我们会尽快与您联系！')
  
  // 重置表单
  contactForm.value = {
    name: '',
    company: '',
    phone: '',
    email: '',
    subject: '',
    message: ''
  }
}

// 复制联系信息
const copyContactInfo = (text: string, type: string) => {
  navigator.clipboard.writeText(text).then(() => {
    alert(`${type}已复制到剪贴板`)
  }).catch(() => {
    alert('复制失败，请手动复制')
  })
}
</script>

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 页面头部 -->
    <section class="bg-gradient-to-br from-blue-600 to-indigo-700 text-white py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl md:text-6xl font-bold mb-6">联系我们</h1>
        <p class="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto">
          专业团队为您提供优质的共享软件开发和物联网解决方案服务
        </p>
      </div>
    </section>

    <!-- 联系方式 -->
    <section class="py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">联系方式</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            多种联系方式，为您提供便捷的沟通渠道
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="method in contactMethods"
            :key="method.title"
            class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow text-center group"
          >
            <div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform"
                 :class="method.color">
              <UIcon :name="method.icon" class="w-8 h-8" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ method.title }}</h3>
            <p class="text-lg font-medium text-gray-700 mb-2">{{ method.value }}</p>
            <p class="text-gray-500 text-sm mb-4">{{ method.description }}</p>
            <button
              @click="copyContactInfo(method.value, method.title)"
              class="text-blue-600 hover:text-blue-700 text-sm font-medium"
            >
              复制信息
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系表单 -->
    <section class="py-20 bg-white">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold text-gray-900 mb-4">在线咨询</h2>
          <p class="text-xl text-gray-600">
            填写以下信息，我们会尽快与您联系
          </p>
        </div>

        <form @submit.prevent="submitContactForm" class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-gray-700 font-medium mb-2">姓名 *</label>
              <input
                type="text"
                v-model="contactForm.name"
                required
                placeholder="请输入您的姓名"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-gray-700 font-medium mb-2">公司名称</label>
              <input
                type="text"
                v-model="contactForm.company"
                placeholder="请输入公司名称"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-gray-700 font-medium mb-2">联系电话 *</label>
              <input
                type="tel"
                v-model="contactForm.phone"
                required
                placeholder="请输入联系电话"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-gray-700 font-medium mb-2">邮箱地址</label>
              <input
                type="email"
                v-model="contactForm.email"
                placeholder="请输入邮箱地址"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
          </div>

          <div>
            <label class="block text-gray-700 font-medium mb-2">业务类型</label>
            <select
              v-model="contactForm.subject"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
              <option value="">请选择业务类型</option>
              <option
                v-for="type in businessTypes"
                :key="type.value"
                :value="type.value"
              >
                {{ type.label }}
              </option>
            </select>
          </div>

          <div>
            <label class="block text-gray-700 font-medium mb-2">详细需求 *</label>
            <textarea
              v-model="contactForm.message"
              required
              rows="6"
              placeholder="请详细描述您的需求..."
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
            ></textarea>
          </div>

          <div class="text-center">
            <button
              type="submit"
              class="px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors"
            >
              提交咨询
            </button>
          </div>
        </form>
      </div>
    </section>

    <!-- 服务优势 -->
    <section class="py-20 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">服务优势</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            专业的服务团队，为您提供优质的技术支持
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="advantage in serviceAdvantages"
            :key="advantage.title"
            class="text-center group"
          >
            <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors">
              <UIcon :name="advantage.icon" class="w-10 h-10 text-blue-600" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ advantage.title }}</h3>
            <p class="text-gray-600">{{ advantage.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 地图位置 -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold text-gray-900 mb-4">公司位置</h2>
          <p class="text-xl text-gray-600">
            欢迎您到公司实地考察，了解我们的技术实力
          </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <h3 class="text-2xl font-bold text-gray-900 mb-4">{{ contactInfo.company }}</h3>
            <div class="space-y-4">
              <div class="flex items-start space-x-3">
                <UIcon name="i-lucide-map-pin" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
                <div>
                  <p class="font-medium text-gray-900">公司地址</p>
                  <p class="text-gray-600">{{ contactInfo.address }}</p>
                </div>
              </div>
              <div class="flex items-start space-x-3">
                <UIcon name="i-lucide-clock" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
                <div>
                  <p class="font-medium text-gray-900">工作时间</p>
                  <p class="text-gray-600">{{ contactInfo.workingHours }}</p>
                </div>
              </div>
              <div class="flex items-start space-x-3">
                <UIcon name="i-lucide-phone" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
                <div>
                  <p class="font-medium text-gray-900">联系电话</p>
                  <p class="text-gray-600">{{ contactInfo.phone }}</p>
                </div>
              </div>
              <div class="flex items-start space-x-3">
                <UIcon name="i-lucide-mail" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
                <div>
                  <p class="font-medium text-gray-900">邮箱地址</p>
                  <p class="text-gray-600">{{ contactInfo.email }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-200 rounded-xl h-96 flex items-center justify-center">
            <div class="text-center text-gray-500">
              <UIcon name="i-lucide-map" class="w-16 h-16 mx-auto mb-4" />
              <p>地图位置</p>
              <p class="text-sm">{{ contactInfo.address }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 快速联系 -->
    <section class="py-20 bg-blue-600 text-white">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold mb-6">快速联系</h2>
        <p class="text-xl text-blue-100 mb-8">
          多种联系方式，选择最适合您的沟通方式
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <a 
            :href="`tel:${contactInfo.phone}`"
            class="inline-flex items-center px-8 py-4 bg-white hover:bg-gray-100 text-blue-600 font-semibold rounded-lg transition-colors"
          >
            <UIcon name="i-lucide-phone" class="w-5 h-5 mr-2" />
            电话咨询
          </a>
          <a 
            :href="`mailto:${contactInfo.email}`"
            class="inline-flex items-center px-8 py-4 bg-blue-500 hover:bg-blue-400 text-white font-semibold rounded-lg transition-colors"
          >
            <UIcon name="i-lucide-mail" class="w-5 h-5 mr-2" />
            邮件咨询
          </a>
          <NuxtLink 
            to="/yuxi/about"
            class="inline-flex items-center px-8 py-4 bg-transparent hover:bg-white/10 text-white font-semibold rounded-lg border border-white transition-colors"
          >
            <UIcon name="i-lucide-info" class="w-5 h-5 mr-2" />
            了解更多
          </NuxtLink>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
/* 自定义样式 */
.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}
</style>

