<template>
  <div class="home-container min-h-screen bg-gradient-to-b from-blue-50 to-white">
    <!-- Header Section -->
    <header class="bg-white shadow-md">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
        <div class="flex items-center">
          <!-- Company Logo -->
          <svg class="h-10 w-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
          </svg>
          <h1 class="ml-3 text-2xl font-bold text-gray-900">医疗智能科技</h1>
        </div>
        <nav class="hidden md:flex space-x-8">
          <a href="#solutions" class="text-gray-700 hover:text-blue-600 font-medium">解决方案</a>
          <a href="#products" class="text-gray-700 hover:text-blue-600 font-medium">产品服务</a>
          <a href="#about" class="text-gray-700 hover:text-blue-600 font-medium">关于我们</a>
          <router-link to="/login" class="text-gray-700 hover:text-blue-600 font-medium">登录</router-link>
        </nav>
        <button class="md:hidden">
          <svg class="h-6 w-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </header>

    <!-- Hero Section -->
    <section class="py-12 md:py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
        <div>
          <h2 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">
            医疗行业的<span class="text-blue-600">智能化</span>解决方案
          </h2>
          <p class="mt-6 text-lg text-gray-700 leading-relaxed">
            我们提供先进的医疗信息技术解决方案，帮助医疗机构提高效率、降低成本、改善患者体验。通过人工智能和大数据分析，我们的系统能够提供精准的诊断支持和个性化的治疗方案。
          </p>
          <div class="mt-8 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
            <router-link to="/login" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
              开始使用
            </router-link>
            <a href="#solutions" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
              了解更多
            </a>
          </div>
        </div>
        <div class="hidden md:block">
          <img src="https://source.unsplash.com/random/600x400/?medical,technology" alt="Medical Technology" class="rounded-lg shadow-xl">
        </div>
      </div>
    </section>

    <!-- Solutions Section -->
    <section id="solutions" class="py-12 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
          <h2 class="text-3xl font-bold text-gray-900">我们的解决方案</h2>
          <p class="mt-4 text-lg text-gray-700 max-w-3xl mx-auto">
            针对医疗行业的各种需求，我们提供全面的信息技术解决方案
          </p>
        </div>

        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white mb-4">
              <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
              </svg>
            </div>
            <h3 class="text-xl font-medium text-gray-900 mb-2">电子病历系统</h3>
            <p class="text-gray-700">
              全面的电子病历管理系统，支持患者信息的安全存储、快速检索和智能分析，提高医疗记录的准确性和可访问性。
            </p>
          </div>

          <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white mb-4">
              <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
              </svg>
            </div>
            <h3 class="text-xl font-medium text-gray-900 mb-2">医疗数据分析</h3>
            <p class="text-gray-700">
              利用人工智能和机器学习技术，对医疗数据进行深度分析，帮助医生做出更准确的诊断和治疗决策。
            </p>
          </div>

          <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white mb-4">
              <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
              </svg>
            </div>
            <h3 class="text-xl font-medium text-gray-900 mb-2">远程医疗平台</h3>
            <p class="text-gray-700">
              安全、稳定的远程医疗平台，支持视频问诊、在线咨询和远程监护，让患者随时随地获得专业医疗服务。
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Products Section -->
    <section id="products" class="py-12">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
          <h2 class="text-3xl font-bold text-gray-900">产品服务</h2>
          <p class="mt-4 text-lg text-gray-700 max-w-3xl mx-auto">
            我们提供多种医疗IT产品和服务，满足不同规模医疗机构的需求
          </p>
        </div>

        <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
          <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6">
              <h3 class="text-xl font-medium text-gray-900 mb-2">智能医疗助手</h3>
              <p class="text-gray-700 mb-4">
                基于人工智能的医疗助手系统，能够理解自然语言，回答医疗问题，提供诊断建议，协助医生进行临床决策。
              </p>
              <router-link to="/chatbot" class="text-blue-600 hover:text-blue-800 font-medium">
                了解更多 →
              </router-link>
            </div>
          </div>

          <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6">
              <h3 class="text-xl font-medium text-gray-900 mb-2">医院管理系统</h3>
              <p class="text-gray-700 mb-4">
                全面的医院管理系统，包括患者管理、预约挂号、药品管理、财务管理等模块，提高医院运营效率。
              </p>
              <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">
                了解更多 →
              </a>
            </div>
          </div>

          <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6">
              <h3 class="text-xl font-medium text-gray-900 mb-2">医学影像分析</h3>
              <p class="text-gray-700 mb-4">
                利用深度学习技术，对X光、CT、MRI等医学影像进行智能分析，辅助医生快速准确地发现病变。
              </p>
              <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">
                了解更多 →
              </a>
            </div>
          </div>

          <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6">
              <h3 class="text-xl font-medium text-gray-900 mb-2">医疗物联网平台</h3>
              <p class="text-gray-700 mb-4">
                连接各种医疗设备和传感器，实时监测患者生命体征，自动记录健康数据，提供智能预警。
              </p>
              <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">
                了解更多 →
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-12 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
          <h2 class="text-3xl font-bold text-gray-900">关于我们</h2>
          <p class="mt-4 text-lg text-gray-700 max-w-3xl mx-auto">
            我们是一家专注于医疗信息技术的创新企业，致力于通过技术提升医疗服务质量
          </p>
        </div>

        <div class="mt-12 bg-white rounded-lg shadow-md p-8">
          <p class="text-gray-700 mb-4">
            医疗智能科技成立于2020年，是一家专注于医疗信息技术的高科技企业。我们的团队由医疗专家、软件工程师和数据科学家组成，拥有丰富的行业经验和技术实力。
          </p>
          <p class="text-gray-700 mb-4">
            我们的使命是通过创新的技术解决方案，提高医疗服务的效率和质量，让更多人获得更好的医疗服务。我们相信，技术的进步将为医疗行业带来革命性的变化，而我们正在这场变革中扮演着重要的角色。
          </p>
          <p class="text-gray-700">
            目前，我们的产品和服务已经在全国多家医院和医疗机构得到应用，帮助他们提高了工作效率，改善了患者体验，取得了显著的成效。
          </p>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="py-12 bg-blue-600">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold text-white">准备好开始使用我们的服务了吗？</h2>
        <p class="mt-4 text-lg text-blue-100 max-w-3xl mx-auto">
          立即登录体验我们的智能医疗助手，或联系我们了解更多产品和服务
        </p>
        <div class="mt-8 flex justify-center">
          <router-link to="/login" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50">
            立即登录
          </router-link>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h3 class="text-lg font-medium mb-4">医疗智能科技</h3>
            <p class="text-gray-400">
              提供先进的医疗信息技术解决方案
            </p>
          </div>
          <div>
            <h3 class="text-lg font-medium mb-4">解决方案</h3>
            <ul class="space-y-2 text-gray-400">
              <li><a href="#" class="hover:text-white">电子病历系统</a></li>
              <li><a href="#" class="hover:text-white">医疗数据分析</a></li>
              <li><a href="#" class="hover:text-white">远程医疗平台</a></li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-medium mb-4">产品服务</h3>
            <ul class="space-y-2 text-gray-400">
              <li><a href="#" class="hover:text-white">智能医疗助手</a></li>
              <li><a href="#" class="hover:text-white">医院管理系统</a></li>
              <li><a href="#" class="hover:text-white">医学影像分析</a></li>
              <li><a href="#" class="hover:text-white">医疗物联网平台</a></li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-medium mb-4">联系我们</h3>
            <ul class="space-y-2 text-gray-400">
              <li>地址：北京市海淀区中关村</li>
              <li>电话：010-12345678</li>
              <li>邮箱：contact@medtech.com</li>
            </ul>
          </div>
        </div>
        <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
          <p>© 2025 医疗智能科技 版权所有</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
// No additional script needed for this static page
</script>

<style scoped>
/* Any additional styles can be added here */
</style>
