<template>
  <div class="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100">
    <!-- Navigation -->
    <nav class="bg-white shadow-lg sticky top-0 z-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-20">
          <div class="flex items-center">
            <router-link to="/" class="flex items-center">
              <img src="https://ksdisp.com/images/logo.jpeg" alt="NAD Health Logo" class="h-12 w-auto object-contain" />
            </router-link>
          </div>
          <div class="flex items-center space-x-8">
            <a href="#products" class="text-gray-600 hover:text-blue-600 transition-colors">產品系列</a>
            <a href="#about" class="text-gray-600 hover:text-blue-600 transition-colors">關於我們</a>
            <a href="#contact" class="text-gray-600 hover:text-blue-600 transition-colors">聯絡方式</a>
          </div>
        </div>
      </div>
    </nav>

    <!-- Banner Section -->
    <div class="relative">
      <img 
        src="https://ksdisp.com/images/banner1.jpeg" 
        alt="Banner" 
        class="w-full object-contain"
      />
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-white">
            <h1 class="text-5xl font-bold mb-6">優質保健品系列</h1>
            <p class="text-xl max-w-2xl opacity-90">
              專注於提供高品質的營養補充品，幫助您維持健康的生活方式
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Promotional Banner -->
    <div class="bg-yellow-50 border-y border-yellow-100">
      <div class="max-w-7xl mx-auto py-3 px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-center text-yellow-800">
          <span class="font-medium">限時優惠：購買任何產品即享免運費！</span>
        </div>
      </div>
    </div>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
      <!-- Products Section -->
      <section id="products" class="mb-20">
        <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">產品系列</h2>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div 
            v-for="product in products" 
            :key="product.id" 
            class="bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300"
          >
            <div class="flex flex-col md:flex-row">
              <div class="w-full md:w-1/3">
                <div class="aspect-square">
                  <img 
                    :src="product.image" 
                    :alt="product.name"
                    class="w-full h-full object-contain p-4"
                  />
                </div>
              </div>
              <div class="md:w-2/3 p-6">
                <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ product.name }}</h3>
                <p class="text-gray-600 mb-4">{{ product.description }}</p>
                
                <!-- 主要功效 -->
                <div class="mb-4">
                  <h4 class="text-sm font-semibold text-blue-800 mb-2">主要功效</h4>
                  <ul class="grid grid-cols-2 gap-2">
                    <li 
                      v-for="benefit in product.benefits.slice(0, 4)" 
                      :key="benefit"
                      class="flex items-center text-sm text-gray-600"
                    >
                      <svg class="h-4 w-4 text-blue-500 mr-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                      </svg>
                      <span>{{ benefit }}</span>
                    </li>
                  </ul>
                </div>

                <!-- 適用對象 -->
                <div class="mb-4">
                  <h4 class="text-sm font-semibold text-green-800 mb-2">適用對象</h4>
                  <p class="text-sm text-gray-600 line-clamp-2">{{ product.suitableFor }}</p>
                </div>

                <!-- 認證標章 -->
                <div class="mb-4">
                  <h4 class="text-sm font-semibold text-purple-800 mb-2">認證標章</h4>
                  <div class="flex gap-2">
                    <span 
                      v-for="cert in product.specifications.certification" 
                      :key="cert"
                      class="px-2 py-1 bg-purple-50 text-purple-700 rounded text-xs font-medium"
                    >
                      {{ cert }}
                    </span>
                  </div>
                </div>

                <!-- 規格 -->
                <div class="mb-4">
                  <h4 class="text-sm font-semibold text-gray-800 mb-2">規格</h4>
                  <p class="text-sm text-gray-600">{{ product.specifications.netWeight }}</p>
                </div>

                <div class="flex flex-wrap gap-4">
                  <router-link 
                    :to="{ name: 'product-detail', params: { id: product.id }}"
                    class="inline-block bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"
                  >
                    查看詳情
                  </router-link>
                  <a 
                    :href="product.buyLink"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="inline-block bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition-colors"
                  >
                    立即購買
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- About Section -->
      <section id="about" class="mb-20">
        <div class="bg-white rounded-2xl shadow-lg p-12">
          <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">關於我們</h2>
          <div class="max-w-4xl mx-auto space-y-8">
            <div class="text-lg text-gray-700 leading-relaxed space-y-6">
              <p>
                NAD Health 成立於2010年，是香港領先的保健品製造商之一。我們秉持「科學配方、優質原料、嚴格把關」的理念，
                致力於為消費者提供最高品質的營養補充品。
              </p>
              <p>
                我們的研發團隊由營養學專家、藥學博士及醫學顧問組成，持續研究創新配方，
                結合最新的營養科學研究成果，開發符合現代人需求的保健產品。
              </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
              <div class="bg-blue-50 p-6 rounded-xl">
                <h3 class="text-xl font-semibold text-blue-800 mb-4">品質保證</h3>
                <ul class="space-y-3 text-gray-700">
                  <li class="flex items-start">
                    <svg class="h-5 w-5 text-blue-600 mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    <span>符合GMP製造規範</span>
                  </li>
                  <li class="flex items-start">
                    <svg class="h-5 w-5 text-blue-600 mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    <span>原料溯源管理</span>
                  </li>
                  <li class="flex items-start">
                    <svg class="h-5 w-5 text-blue-600 mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    <span>多重品質檢驗</span>
                  </li>
                </ul>
              </div>

              <div class="bg-green-50 p-6 rounded-xl">
                <h3 class="text-xl font-semibold text-green-800 mb-4">研發理念</h3>
                <ul class="space-y-3 text-gray-700">
                  <li class="flex items-start">
                    <svg class="h-5 w-5 text-green-600 mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    <span>科學實證配方</span>
                  </li>
                  <li class="flex items-start">
                    <svg class="h-5 w-5 text-green-600 mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    <span>創新技術研發</span>
                  </li>
                  <li class="flex items-start">
                    <svg class="h-5 w-5 text-green-600 mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    <span>專業團隊把關</span>
                  </li>
                </ul>
              </div>

              <div class="bg-purple-50 p-6 rounded-xl">
                <h3 class="text-xl font-semibold text-purple-800 mb-4">服務承諾</h3>
                <ul class="space-y-3 text-gray-700">
                  <li class="flex items-start">
                    <svg class="h-5 w-5 text-purple-600 mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    <span>專業諮詢服務</span>
                  </li>
                  <li class="flex items-start">
                    <svg class="h-5 w-5 text-purple-600 mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    <span>品質保證承諾</span>
                  </li>
                  <li class="flex items-start">
                    <svg class="h-5 w-5 text-purple-600 mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    <span>快速配送服務</span>
                  </li>
                </ul>
              </div>
            </div>

            <div class="text-lg text-gray-700 leading-relaxed mt-12">
              <p>
                我們的使命是幫助每一位顧客實現更健康的生活。透過持續創新和品質保證，
                NAD Health 將繼續為您提供最優質、最安全的保健產品。
              </p>
            </div>
          </div>
        </div>
      </section>

      <!-- Contact Section -->
      <section id="contact" class="mb-20">
        <div class="bg-white rounded-2xl shadow-lg p-12">
          <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">聯絡我們</h2>
          <form @submit.prevent="handleSubmit" class="max-w-2xl mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
              <div>
                <label for="name" class="block text-sm font-medium text-gray-700 mb-2">姓名</label>
                <input
                  type="text"
                  id="name"
                  v-model="contactForm.name"
                  required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="請輸入您的姓名"
                >
              </div>
              <div>
                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">電子郵件</label>
                <input
                  type="email"
                  id="email"
                  v-model="contactForm.email"
                  required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="請輸入您的電子郵件"
                >
              </div>
            </div>
            <div class="mb-8">
              <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">主旨</label>
              <input
                type="text"
                id="subject"
                v-model="contactForm.subject"
                required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                placeholder="請輸入主旨"
              >
            </div>
            <div class="mb-8">
              <label for="message" class="block text-sm font-medium text-gray-700 mb-2">訊息內容</label>
              <textarea
                id="message"
                v-model="contactForm.message"
                required
                rows="6"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                placeholder="請輸入您的訊息"
              ></textarea>
            </div>
            <div class="text-center">
              <button
                type="submit"
                class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
              >
                送出訊息
                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
                </svg>
              </button>
            </div>
          </form>
        </div>
      </section>

      <!-- FAQ Section -->
      <section id="faq" class="mb-20">
        <div class="bg-white rounded-2xl shadow-lg p-12">
          <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">常見問題</h2>
          <div class="max-w-3xl mx-auto space-y-6">
            <div v-for="(faq, index) in faqs" :key="index" class="border-b border-gray-200 pb-6">
              <button
                @click="faq.isOpen = !faq.isOpen"
                class="w-full flex justify-between items-start text-left"
              >
                <span class="text-lg font-semibold text-gray-900">{{ faq.question }}</span>
                <svg
                  class="w-6 h-6 text-gray-500 transform transition-transform"
                  :class="{ 'rotate-180': faq.isOpen }"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
              </button>
              <div
                v-show="faq.isOpen"
                class="mt-4 text-gray-600"
              >
                {{ faq.answer }}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white">
      <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 class="text-xl font-semibold mb-4">聯絡資訊</h3>
            <div class="space-y-2">
              <p class="text-gray-400 flex items-center">
                <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                </svg>
                <span>852-66770670</span>
              </p>
              <p class="text-gray-400 flex items-start">
                <svg class="h-5 w-5 mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                <span>FLAT/RM 6, 6/F, W212, 212 TEXACO ROAD, TSUEN WAN, NT</span>
              </p>
            </div>
          </div>
          <div>
            <h3 class="text-xl font-semibold mb-4">快速連結</h3>
            <ul class="space-y-2">
              <li><a href="#products" class="text-gray-400 hover:text-white transition-colors">產品系列</a></li>
              <li><a href="#about" class="text-gray-400 hover:text-white transition-colors">關於我們</a></li>
              <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">聯絡方式</a></li>
            </ul>
          </div>
          <div>
            <h3 class="text-xl font-semibold mb-4">營業時間</h3>
            <p class="text-gray-400">週一至週五：9:00 - 18:00</p>
            <p class="text-gray-400">週六：10:00 - 16:00</p>
          </div>
        </div>
        <div class="border-t border-gray-700 mt-8 pt-8 text-center">
          <p class="text-gray-400">&copy; 2023 NAD Health. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { products } from '../data/products'

const contactForm = ref({
  name: '',
  email: '',
  subject: '',
  message: ''
})

const handleSubmit = () => {
  const mailtoLink = `mailto:hkchat@gmail.com?subject=${encodeURIComponent(contactForm.value.subject)}&body=${encodeURIComponent(
    `姓名: ${contactForm.value.name}\n` +
    `電子郵件: ${contactForm.value.email}\n\n` +
    `${contactForm.value.message}`
  )}`

  window.location.href = mailtoLink

  contactForm.value = {
    name: '',
    email: '',
    subject: '',
    message: ''
  }
}

const faqs = ref([
  {
    question: '如何選擇適合自己的保健品？',
    answer: '建議您先了解自己的健康需求，可以諮詢醫師或營養師。您也可以參考我們網站上的產品說明，或直接聯繫我們的客服團隊，我們會根據您的情況提供專業建議。',
    isOpen: false
  },
  {
    question: '產品有副作用嗎？',
    answer: '我們的產品都經過嚴格的品質控管和安全測試。但每個人的體質不同，建議先從建議劑量開始使用，如有特殊疾病或正在服用藥物，請先諮詢醫師。',
    isOpen: false
  },
  {
    question: '產品運送需要多久時間？',
    answer: '香港地區一般在下單後1-2個工作天內送達。如遇特殊情況，我們會主動通知您。',
    isOpen: false
  },
  {
    question: '產品有保固或退換貨服務嗎？',
    answer: '我們提供7天鑑賞期，如收到商品後有任何問題，請保持商品完整性並聯繫客服處理。但基於食品安全考量，除商品本身瑕疵外，拆封後恕不接受退換。',
    isOpen: false
  },
  {
    question: '如何得知最新的產品資訊和優惠？',
    answer: '您可以追蹤我們的社群媒體，或訂閱電子報，我們會定期發送最新產品資訊和優惠活動。您也可以在我們的網站首頁查看最新消息。',
    isOpen: false
  }
])
</script>