<template>
  <!-- 移动端首页 -->
  <div class="home-mobile">
    <!-- 背景装饰色块 -->
    <div class="home-mobile__orb home-mobile__orb--top"></div>
    <div class="home-mobile__orb home-mobile__orb--hero"></div>

    <!-- 顶部 Logo -->
    <header class="home-mobile__header">
      <img src="@/assets/images/logo.png" alt="Offer派" class="home-mobile__logo" />
    </header>

    <!-- Hero 区域 -->
    <section class="home-mobile__hero">
      <p class="home-mobile__eyebrow">大学生AI求职平台</p>
      <h1 class="home-mobile__headline">一站式求职辅助</h1>
      <p class="home-mobile__subtitle">
        与"大海捞针"式求职说再见。<br/>
        Offer派用AI技术为你精准匹配岗位、自动投递、量身定制简历，<br/>
        让每一步都更快更准。
      </p>
    </section>

    <!-- 指令卡片 -->
    <section class="home-mobile__command-card">
      <p class="home-mobile__command-title">Offer 派工作模式</p>
      <p class="home-mobile__command-sub">网投正在进行中...</p>
      <div class="home-mobile__progress">
        <div class="home-mobile__progress-rail">
          <div class="home-mobile__progress-fill"></div>
        </div>
      </div>
      <p class="home-mobile__command-chips">网投成功 32 · 投递中 5 · 已完成 82%</p>
    </section>

    <!-- 数据统计卡片 -->
    <section class="home-mobile__stats-card">
      <div class="home-mobile__stat">
        <span class="home-mobile__stat-num">40万+</span>
        <span class="home-mobile__stat-label">岗位总数</span>
      </div>
      <div class="home-mobile__stat">
        <span class="home-mobile__stat-num">{{ dailyJobCount }}</span>
        <span class="home-mobile__stat-label">今日更新</span>
      </div>
      <div class="home-mobile__stat">
        <span class="home-mobile__stat-num">82%</span>
        <span class="home-mobile__stat-label">节省时间</span>
      </div>
    </section>

    <!-- 功能介绍区 -->
    <section class="home-mobile__functions">
      <h2 class="home-mobile__section-title">Offer派能帮你做什么</h2>
      <p class="home-mobile__section-sub">AI驱动的一站式求职解决方案</p>

      <!-- 功能卡片列表 -->
      <div class="home-mobile__feature-list">
        <div class="home-mobile__feature-card" v-for="(feat, i) in features" :key="i">
          <div class="home-mobile__feature-icon" :style="{ background: feat.iconBg }">
            <span>{{ feat.icon }}</span>
          </div>
          <div class="home-mobile__feature-text">
            <h3>{{ feat.title }}</h3>
            <p>{{ feat.desc }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 每天都有新机会 -->
    <section class="home-mobile__jobs-section">
      <h2 class="home-mobile__section-title">每天都有新机会</h2>
      <p class="home-mobile__section-sub">实时汇集海量优质校招职位</p>

      <div class="home-mobile__job-chips">
        <div class="home-mobile__job-chip home-mobile__job-chip--dark">
          <span class="home-mobile__job-chip-company">字节跳动 · 15分钟前</span>
          <span class="home-mobile__job-chip-role">高级产品经理</span>
        </div>
        <div class="home-mobile__job-chip-row">
          <div class="home-mobile__job-chip home-mobile__job-chip--light">
            <span class="home-mobile__job-chip-company">腾讯</span>
            <span class="home-mobile__job-chip-role">后端开发工程师</span>
          </div>
          <div class="home-mobile__job-chip home-mobile__job-chip--light">
            <span class="home-mobile__job-chip-company">阿里巴巴</span>
            <span class="home-mobile__job-chip-role">产品经理</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 万千毕业生的信赖之选 -->
    <section class="home-mobile__proof">
      <h2 class="home-mobile__section-title">万千毕业生的信赖之选</h2>
      <div class="home-mobile__quote-card">
        <p class="home-mobile__quote-text">
          "真没想到校招居然可以这么轻松高效！一周就收到了3个面试邀约。"
        </p>
        <div class="home-mobile__quote-author">
          <div class="home-mobile__quote-avatar"><img class="w45 h45 " src="@/assets/images/home/student-avatar-0.png" alt=""></div>
          <div class="home-mobile__quote-info">
            <span class="home-mobile__quote-name">李同学</span>
            <span class="home-mobile__quote-school">西安交通大学</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 常见问题 -->
    <section class="home-mobile__faq">
      <h2 class="home-mobile__section-title">常见问题</h2>
      <div class="home-mobile__faq-list">
        <div
          v-for="(faq, i) in faqs"
          :key="i"
          class="home-mobile__faq-item"
          :class="{ 'home-mobile__faq-item--open': faqOpen === i }"
        >
          <div class="home-mobile__faq-header" @click="faqOpen = faqOpen === i ? -1 : i">
            <span>{{ faq.q }}</span>
            <span class="home-mobile__faq-icon">{{ faqOpen === i ? '×' : '+' }}</span>
          </div>
          <div v-show="faqOpen === i" class="home-mobile__faq-answer">
            <p>{{ faq.a }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部 CTA -->
    <section class="home-mobile__bottom-cta">
      <h2>准备开始投递？</h2>
      <p>自动网申、简历生成和岗位投递需要在 PC 官网完成。<br/>手机端可先了解功能，正式操作请用电脑访问官网。</p>
      <span class="home-mobile__bottom-footer">Offer派 · 大学生AI求职首选平台</span>
    </section>

    <!-- 固定底部按钮 -->
    <div class="home-mobile__fixed-bar">
      <span class="home-mobile__pc-hint">完整产品请前往电脑端</span>
      <button class="home-mobile__cta-btn" @click="showDialog = true">免费使用</button>
    </div>

    <!-- 弹窗：引导去电脑端 -->
    <div v-if="showDialog" class="home-mobile__overlay" @click.self="showDialog = false">
      <div class="home-mobile__dialog">
        <div class="home-mobile__dialog-handle"></div>
        <button class="home-mobile__dialog-close" @click="showDialog = false">×</button>
        <h3>请在电脑端使用 Offer派</h3>
        <p class="home-mobile__dialog-desc">
          自动网申、简历生成和岗位投递需要在 PC 官网完成。<br/>
          手机端可先了解功能，正式操作请用电脑访问官网。
        </p>
        <div class="home-mobile__dialog-url">
          PC 官网：www.offerpai.com.cn
        </div>
        <p class="home-mobile__dialog-qr-title">保存二维码，扫码加入求职交流群</p>
        <div class="home-mobile__dialog-qr">
          <img src="https://offerpie.oss-cn-guangzhou.aliyuncs.com/images/mobile-qcCode.png" alt="二维码" class="home-mobile__dialog-qr-img" />
        </div>
        <p class="home-mobile__dialog-qr-hint">长按保存二维码获取更多求职资料，公开课</p>
        <button class="home-mobile__dialog-btn" @click="showDialog = false">知道了</button>
      </div>
    </div>

    <!-- 保存成功提示 -->
    <div v-if="showSaveToast" class="home-mobile__toast">长按图片即可保存到相册</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { getDailyJobCount } from '@/utils/dailyJobCount'

// ==================== 移动端缩放重置 ====================
/**
 * 确保 HomeMobile 页面不受全局 transform scale 缩放影响
 * 部分浏览器中 remAdapt 插件的 recalc 在路由切换后未及时重新执行，
 * 导致 body 上仍残留 PC 端 scale 样式，这里在组件挂载时主动重置
 */
function resetMobileScale() {
  const docEl = document.documentElement
  const body = document.body
  const clientWidth = docEl.clientWidth || window.innerWidth
  // 移动端首页 1rem = 视口宽度 / 3.90（设计稿 390px）
  const mobileFontSize = clientWidth / 3.90
  docEl.style.fontSize = mobileFontSize + 'px'
  // 清除 scale 缩放相关样式
  body.style.width = ''
  body.style.height = ''
  body.style.minHeight = ''
  body.style.overflowY = ''
  body.style.transform = ''
  body.style.transformOrigin = ''
  docEl.style.height = ''
  docEl.style.overflow = ''
  docEl.style.setProperty('--app-height', '100vh')
  docEl.style.setProperty('--chat-width', '100%')
}

/** 窗口 resize 时重新执行重置 */
function onResize() {
  resetMobileScale()
}

onMounted(() => {
  resetMobileScale()
  window.addEventListener('resize', onResize)
  window.addEventListener('orientationchange', onResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', onResize)
  window.removeEventListener('orientationchange', onResize)
})

// 声明友盟统计 _czc 对象
const _czc: any[] = (window as any)._czc || [];
(window as any)._czc = _czc;
// 绑定 siteid，请用您的 siteid 替换下方 "XXXXXXXX" 部分
_czc.push(["_setAccount", "1281490571"]);

/** 今日更新岗位数量 */
const dailyJobCount = getDailyJobCount()

/** 弹窗显示状态 */
const showDialog = ref(false)

/** 当前展开的 FAQ 索引 */
const faqOpen = ref(-1)

/** 提示 toast 显示状态 */
const showSaveToast = ref(false)

/** 功能卡片数据 */
const features = [
  { icon: '🎯', iconBg: '#4FC2C9', title: '个性化岗位匹配', desc: '基于简历精准推荐最合适的岗位' },
  { icon: '⚡', iconBg: '#12383A', title: '一键自动网申', desc: '投递一键搞定，覆盖各大网申系统' },
  { icon: '📄', iconBg: '#42A8B3', title: '岗位定制简历', desc: '根据每个岗位智能优化简历内容' },
  { icon: '🤝', iconBg: '#80D8C8', title: '名企内推人脉直通', desc: '实时获取名企最新内推信息' },
  { icon: '🤖', iconBg: '#2A8186', title: '24h AI求职助手', desc: '随时提供求职指导和面试技巧' },
]

/** 常见问题数据 — 与PC端保持一致 */
const faqs = [
  { q: '平台免费使用吗？', a: 'Offer派为所有用户免费开放3天会员权益，帮你省心省力找工作。3天后，依然可以免费使用各项功能，但有使用次数限制。如果你需要不受限制地使用所有功能，更快更高效地获得Offer，建议您升级为付费会员，让求职效率翻倍。' },
  { q: '我的信息会被分享吗？', a: 'Offer派高度重视你的隐私安全。未经你明确同意，我们绝不会将你的个人信息提供给任何第三方。你的所有数据仅用于在平台内为你提供AI智能岗位匹配、简历优化等个性化求职服务。' },
  { q: '平台的岗位来源是什么？', a: 'Offer派的岗位来自上万家企业的官方招聘网站，同时聚合了各大主流平台的最新职位——你不需要在多个网站之间来回切换，就能一站式搜罗全网高质量的工作机会。' },
  { q: '平台与其他求职平台有什么不同？', a: '不同于BOSS直聘等传统平台的"手动式"求职，Offer派如同一位经验丰富的职业导师，通过AI能力搭建智能工具，自动处理简历优化、岗位匹配、申请投递等环节，大幅度提升你的求职效率。' },
]
</script>
