<script setup>
import { ref } from 'vue'
import { ArrowRight, BadgeCheck, Check, CircleDollarSign, ClipboardCheck, Headphones, MessageCircle, Play, ShieldCheck, Star, Video } from 'lucide-vue-next'
import { caseStudies, faqs, pricingPlans, productFeatures, siteConfig } from '@/site.config'
import AnimatedContent from '@/components/vue-bits/AnimatedContent.vue'
import DecryptedText from '@/components/vue-bits/DecryptedText.vue'
import Magnet from '@/components/vue-bits/Magnet.vue'

const openFaq = ref(0)

const users = [
  '医疗集团信息化负责人',
  '医共体运营管理者',
  '慢病中心与专科门诊',
  '互联网医院项目团队'
]

const reviews = [
  {
    name: '林主任',
    role: '县域医共体信息中心',
    text: '上线后跨院区协作终于有了统一任务流，基层医生和总院专家都能在同一视图处理患者。'
  },
  {
    name: '周女士',
    role: '连锁诊所运营负责人',
    text: '随访、复诊和宣教不再分散在不同工具里，护士团队的工作量和服务质量都更可控。'
  },
  {
    name: '赵医生',
    role: '慢病中心负责人',
    text: '风险预警和患者画像帮助我们更早发现异常，医生不再只靠经验筛选重点患者。'
  }
]
</script>

<template>
  <main class="product-page">
    <section class="product-hero section-pad">
      <div class="mx-auto grid max-w-7xl items-center gap-12 px-5 pt-24 md:grid-cols-[0.95fr_1.05fr] md:px-8">
        <AnimatedContent :distance="64" :duration="0.95" class-name="product-hero-copy">
          <div class="eyebrow">
            <BadgeCheck :size="16" aria-hidden="true" />
            企业级医疗 SaaS 产品
          </div>
          <h1 class="product-hero-title">
            <span>{{ siteConfig.brand.name }}</span>
            <span>云协同平台</span>
          </h1>
          <p class="product-hero-copytext">
            <DecryptedText
              text="一套连接患者、医生、机构和运营管理的智慧医疗工作台。"
              animate-on="view"
              reveal-direction="center"
              :speed="32"
              :max-iterations="10"
              encrypted-class-name="decrypted-ghost"
              class-name="decrypted-final"
            />
            <span> 让医疗组织拥有更稳定、更高效、更合规的数字化服务能力。</span>
          </p>
          <div class="mt-8 flex flex-col gap-3 sm:flex-row">
            <Magnet :padding="72" :magnet-strength="5.5">
              <a href="#contact" class="btn-primary">
                免费试用
                <ArrowRight :size="18" aria-hidden="true" />
              </a>
            </Magnet>
            <Magnet :padding="72" :magnet-strength="5.5">
              <a href="#demo" class="btn-secondary">查看演示视频</a>
            </Magnet>
          </div>
        </AnimatedContent>

        <AnimatedContent :distance="72" direction="horizontal" :reverse="true" :duration="0.95" class-name="product-snapshot-shell">
          <div class="product-snapshot">
            <div class="snapshot-header">
              <span>萧康云医工作台</span>
              <strong>实时运行</strong>
            </div>
            <div class="snapshot-main">
              <aside>
                <span v-for="item in ['患者画像', '协同任务', '风险预警', '运营分析']" :key="item">{{ item }}</span>
              </aside>
              <div class="snapshot-content">
                <div class="snapshot-alert">
                  <ShieldCheck :size="20" aria-hidden="true" />
                  <span>慢病高风险患者已自动分派给责任医生</span>
                </div>
                <div class="snapshot-cards">
                  <div>
                    <small>待处理随访</small>
                    <strong>246</strong>
                  </div>
                  <div>
                    <small>会诊申请</small>
                    <strong>38</strong>
                  </div>
                  <div>
                    <small>质控通过率</small>
                    <strong>97.8%</strong>
                  </div>
                </div>
                <div class="snapshot-bars" aria-hidden="true">
                  <span style="width: 76%"></span>
                  <span style="width: 92%"></span>
                  <span style="width: 58%"></span>
                </div>
              </div>
            </div>
          </div>
        </AnimatedContent>
      </div>
    </section>

    <section id="features" class="section-pad pt-8">
      <div class="mx-auto max-w-7xl px-5 md:px-8">
        <AnimatedContent :distance="48" :duration="0.9" class-name="section-heading">
          <span>功能说明</span>
          <h2>从诊疗协同到经营分析，覆盖医疗服务闭环。</h2>
        </AnimatedContent>

        <div class="mt-10 grid gap-5 md:grid-cols-2">
          <AnimatedContent v-for="(feature, index) in productFeatures" :key="feature.title" :delay="index * 0.08" :distance="52" class-name="feature-reveal">
            <article class="soft-card feature-row">
              <ClipboardCheck :size="26" aria-hidden="true" />
              <div>
                <h3>{{ feature.title }}</h3>
                <p>{{ feature.body }}</p>
              </div>
            </article>
          </AnimatedContent>
        </div>

        <AnimatedContent class-name="target-users mt-8" :distance="38" :duration="0.75">
          <span>目标用户</span>
          <div>
            <span v-for="user in users" :key="user">{{ user }}</span>
          </div>
        </AnimatedContent>
      </div>
    </section>

    <section id="demo" class="section-band">
      <div class="mx-auto grid max-w-7xl items-center gap-10 px-5 md:grid-cols-[1.08fr_0.92fr] md:px-8">
        <AnimatedContent :distance="62" :duration="1" class-name="demo-frame-shell">
          <div class="demo-frame">
            <video
              class="demo-video"
              controls
              :poster="siteConfig.hero.video.poster"
            >
              <source :src="siteConfig.hero.video.src" type="video/mp4">
            </video>
            <div class="demo-play" aria-hidden="true">
              <Play :size="28" fill="currentColor" />
            </div>
          </div>
        </AnimatedContent>

        <AnimatedContent :distance="56" direction="horizontal" :reverse="true" :duration="0.95" class-name="demo-copy-shell">
          <div>
            <div class="section-heading align-left">
              <span>演示视频</span>
              <h2>用 90 秒看清医生、护士和管理者如何协同。</h2>
            </div>
            <p class="mt-5 text-lg leading-8 text-muted">
              演示覆盖患者建档、风险预警、复诊任务、随访触达和运营看板。视频源可在配置文件中替换为企业真实素材。
            </p>
            <div class="mt-6 grid gap-3">
              <div class="check-line">
                <Video :size="18" aria-hidden="true" />
                支持产品界面录屏、品牌宣传片或客户案例视频
              </div>
              <div class="check-line">
                <Check :size="18" aria-hidden="true" />
                首页同样支持动效背景与视频背景两种配置
              </div>
            </div>
          </div>
        </AnimatedContent>
      </div>
    </section>

    <section class="section-pad">
      <div class="mx-auto max-w-7xl px-5 md:px-8">
        <AnimatedContent :distance="48" :duration="0.9" class-name="section-heading">
          <span>客户案例</span>
          <h2>已经在多机构协同、慢病管理和互联网医院场景中验证。</h2>
        </AnimatedContent>

        <div class="mt-10 grid gap-5 lg:grid-cols-3">
          <AnimatedContent v-for="(item, index) in caseStudies" :key="item.client" :delay="index * 0.08" :distance="52" class-name="case-reveal">
            <article class="case-card">
              <span>{{ item.client }}</span>
              <h3>{{ item.result }}</h3>
              <p>{{ item.quote }}</p>
            </article>
          </AnimatedContent>
        </div>
      </div>
    </section>

    <section id="pricing" class="section-band">
      <div class="mx-auto max-w-7xl px-5 md:px-8">
        <AnimatedContent :distance="48" :duration="0.9" class-name="section-heading">
          <span>定价计划</span>
          <h2>按机构规模和部署要求选择服务方案。</h2>
        </AnimatedContent>

        <div class="mt-10 grid gap-5 lg:grid-cols-3">
          <AnimatedContent v-for="(plan, index) in pricingPlans" :key="plan.name" :delay="index * 0.08" :distance="52" class-name="pricing-reveal">
            <article
              class="pricing-card"
              :class="{ 'pricing-featured': plan.highlighted }"
            >
              <div class="pricing-head">
                <span>{{ plan.name }}</span>
                <CircleDollarSign :size="24" aria-hidden="true" />
              </div>
              <div class="mt-5">
                <strong>{{ plan.price }}</strong>
                <small>{{ plan.unit }}</small>
              </div>
              <p>{{ plan.description }}</p>
              <ul>
                <li v-for="feature in plan.features" :key="feature">
                  <Check :size="17" aria-hidden="true" />
                  {{ feature }}
                </li>
              </ul>
              <a href="#contact" class="pricing-button">{{ plan.highlighted ? '预约方案顾问' : '开始咨询' }}</a>
            </article>
          </AnimatedContent>
        </div>
      </div>
    </section>

    <section class="section-pad">
      <div class="mx-auto max-w-7xl px-5 md:px-8">
        <AnimatedContent :distance="48" :duration="0.9" class-name="section-heading">
          <span>用户评论与社会证明</span>
          <h2>来自真实医疗场景的反馈。</h2>
        </AnimatedContent>

        <div class="mt-10 grid gap-5 md:grid-cols-3">
          <AnimatedContent v-for="(review, index) in reviews" :key="review.name" :delay="index * 0.08" :distance="52" class-name="review-reveal">
            <article class="review-card">
              <div class="stars" aria-label="五星评价">
                <Star v-for="star in 5" :key="star" :size="16" fill="currentColor" aria-hidden="true" />
              </div>
              <p>{{ review.text }}</p>
              <div>
                <strong>{{ review.name }}</strong>
                <span>{{ review.role }}</span>
              </div>
            </article>
          </AnimatedContent>
        </div>
      </div>
    </section>

    <section id="faq" class="section-band">
      <div class="mx-auto grid max-w-7xl gap-10 px-5 md:grid-cols-[0.85fr_1.15fr] md:px-8">
        <AnimatedContent :distance="48" :duration="0.9" class-name="section-heading align-left">
          <span>FAQ</span>
          <h2>常见问题</h2>
        </AnimatedContent>

        <AnimatedContent class-name="faq-list" :distance="54" direction="horizontal" :reverse="true" :duration="0.9">
          <button
            v-for="(item, index) in faqs"
            :key="item.q"
            type="button"
            class="faq-item"
            :aria-expanded="openFaq === index"
            @click="openFaq = openFaq === index ? -1 : index"
          >
            <span>{{ item.q }}</span>
            <p v-if="openFaq === index">{{ item.a }}</p>
          </button>
        </AnimatedContent>
      </div>
    </section>

    <section id="contact" class="section-pad">
      <div class="mx-auto grid max-w-7xl gap-8 px-5 md:grid-cols-[0.9fr_1.1fr] md:px-8">
        <AnimatedContent :distance="56" :duration="0.95" class-name="contact-panel">
          <Headphones :size="30" aria-hidden="true" />
          <h2>联系萧康云医</h2>
          <p>留下需求后，产品顾问会在 1 个工作日内联系你，也可以直接通过电话或邮件咨询。</p>
          <div class="contact-lines">
            <span>{{ siteConfig.contact.phone }}</span>
            <span>{{ siteConfig.contact.email }}</span>
            <span>{{ siteConfig.contact.address }}</span>
          </div>
        </AnimatedContent>

        <AnimatedContent :distance="56" direction="horizontal" :reverse="true" :duration="0.95" class-name="contact-form-shell">
          <form class="contact-form" aria-label="预约演示表单">
            <label>
              姓名
              <input type="text" placeholder="请输入姓名">
            </label>
            <label>
              机构名称
              <input type="text" placeholder="医院、集团或诊所名称">
            </label>
            <label>
              联系方式
              <input type="tel" placeholder="手机号或邮箱">
            </label>
            <label>
              关注场景
              <textarea rows="4" placeholder="例如医共体协同、慢病随访、互联网医院建设"></textarea>
            </label>
            <button type="button" class="btn-primary justify-center">
              提交预约
              <MessageCircle :size="18" aria-hidden="true" />
            </button>
          </form>
        </AnimatedContent>
      </div>
    </section>
  </main>
</template>
