<template>
  <!-- 首页Tab内容 - 从Home.vue抽取的主体内容 -->
  <div class="home-content">
    <!-- Hero 主视觉区 -->
    <section class="home-hero">
      <!-- 底层背景色块 -->
      <div class="home-hero__orb home-hero__orb--top"></div>
      <div class="home-hero__orb home-hero__orb--bottom"></div>
      <div class="home-hero__inner">
        <div class="home-hero__left">
          <h1 class="home-hero__title">Offer派，<br/><span class="dib"></span>收offer就是快！</h1>
          <p class="home-hero__desc">智能匹配职位、自动填写申请、量身定制简历、推荐内部人脉——<br/>不到1分钟，统统搞定！</p>
          <button class="home-hero__cta" @click="router.push('/jobs')">免费体验</button>
        </div>
        <!-- 右侧视频展示区 -->
        <div class="home-hero__right">
          <div>
            <img class="w706 h452" src="@/assets/images/home/home-top.gif" alt="">
          </div>
        </div>
      </div>
    </section>

    <!-- Stats Section -->
    <section class="home-stats">
      <div class="home-stats__inner">
        <div class="home-stats__header">
          <h2 class="fs38">让每一次求职努力<br/>都成为看得见的成果</h2>
          <div class="home-stats__divider"></div>
        </div>
        <div class="home-stats__cards">
          <article class="stat-card">
            <div class="stat-card__num">第一</div>
            <p class="stat-card__label">84.5%大学生求职首选</p>
          </article>
          <article class="stat-card">
            <div class="stat-card__num">10倍</div>
            <p class="stat-card__label">面试邀约率提升</p>
          </article>
          <article class="stat-card">
            <div class="stat-card__num">82%</div>
            <p class="stat-card__label">节约82%校招求职时间</p>
          </article>
        </div>
      </div>
    </section>

    <!-- Jobs Showcase Section -->
    <section class="home-jobs-showcase">
      <div class="home-jobs-showcase__orb home-jobs-showcase__orb--top"></div>
      <div class="home-jobs-showcase__orb home-jobs-showcase__orb--bottom"></div>
      <div class="home-jobs-showcase__inner">
        <h2 class="fs38">海量优质校招岗位，尽在Offer派！</h2>
        <p class="home-jobs-showcase__sub">实时汇集海量超10000+名校校招职位</p>
        <div class="home-jobs-showcase__box prl25">
          <div class="home-jobs-showcase__stats">
            <div class="showcase-stat">
              <div class="showcase-stat__num"><span><span class="accent">40</span><span class="accent">万</span></span><span class="fs32">+</span></div>
              <div class="showcase-stat__label">岗位总数</div>
            </div>
            <div class="showcase-stat">
              <div class="showcase-stat__num"><span class="accent">{{ dailyJobCount }}</span><span class="">个</span></div>
              <div class="showcase-stat__label">今日更新</div>
            </div>
          </div>
          <div class="home-jobs-showcase__scroll">
            <div class="ticker-track">
              <div class="job-ticker" v-for="(job, i) in tickerJobs" :key="'a' + i">
                <span class="job-ticker__company">{{ job.company }}·{{ job.time }}</span>
                <span class="job-ticker__title">{{ job.title }}</span>
              </div>
              <div class="job-ticker" v-for="(job, i) in tickerJobs" :key="'b' + i">
                <span class="job-ticker__company">{{ job.company }}·{{ job.time }}</span>
                <span class="job-ticker__title">{{ job.title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Feature 1: 个性化岗位匹配 -->
    <section class="home-feature">
      <div class="home-feature__inner">
        <div class="home-feature__text">
          <h2>个性化智能<br/>岗位匹配</h2>
          <p>第一时间发现真正适合你的岗位，精准匹配你的真<br/>实技能，杜绝虚假信息。</p>
          <button class="home-feature__btn" @click="router.push('/jobs')">
            <svg width="12" height="12" viewBox="0 0 14 23" fill="none"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/><circle cx="10" cy="10" r="4" stroke="currentColor" stroke-width="2"/><circle cx="10" cy="10" r="1.5" fill="currentColor"/></svg>
            <span>立即匹配</span>
          </button>
        </div>
        <div class="home-feature__visual home-feature__visual--match">
          <div class="feature-match-card">
            <div class="feature-match-card__header">
              <div class="feature-match-card__avatar"><img class="wp100 hp100" src="@/assets/images/home/alex-avatar.png" alt=""></div>
              <div class="feature-match-card__info">
                <h4>求职者 Alex</h4>
                <div class="feature-match-card__tags">
                  <span>React</span><span>Tailwind</span>
                </div>
              </div>
              <div class="feature-match-card__score">98%</div>
            </div>
            <div class="feature-match-card__bars">
              <div class="bar bar--full"></div>
              <div class="bar bar--3q"></div>
            </div>
            <div class="feature-match-card__result">为您匹配了 5 个高星职位</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Feature 2: 一键自动网申 -->
    <section class="home-feature home-feature--reverse">
      <div class="home-feature__inner">
        <div class="home-feature__text">
          <h2>校招一键<br/>自动网申</h2>
          <p>每日向数百岗位一键投递，覆盖各大企业网申系<br/>统。告别重复填写，节省 82% 校招求职时间。</p>
          <button class="home-feature__btn" @click="router.push('/jobs')">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 20 21" fill="none"><path d="M3.33331 11.6667C3.17561 11.6673 3.021 11.623 2.88743 11.5392C2.75387 11.4554 2.64683 11.3354 2.57876 11.1931C2.51069 11.0509 2.48438 10.8922 2.50289 10.7356C2.52139 10.579 2.58396 10.4309 2.68331 10.3084L10.9333 1.80839C10.9952 1.73696 11.0795 1.68868 11.1725 1.6715C11.2654 1.65431 11.3614 1.66923 11.4447 1.71381C11.5281 1.75838 11.5938 1.82997 11.6311 1.91681C11.6684 2.00365 11.675 2.10059 11.65 2.19172L10.05 7.20839C10.0028 7.33466 9.98695 7.47049 10.0038 7.60423C10.0206 7.73797 10.0697 7.86562 10.1467 7.97624C10.2237 8.08686 10.3265 8.17715 10.446 8.23936C10.5656 8.30156 10.6985 8.33383 10.8333 8.33339L16.6666 8.33339C16.8243 8.33285 16.9789 8.37707 17.1125 8.46091C17.2461 8.54474 17.3531 8.66476 17.4212 8.80701C17.4893 8.94926 17.5156 9.1079 17.4971 9.26451C17.4785 9.42111 17.416 9.56926 17.3166 9.69172L9.06664 18.1917C9.00476 18.2632 8.92042 18.3114 8.82749 18.3286C8.73455 18.3458 8.63854 18.3309 8.5552 18.2863C8.47186 18.2417 8.40615 18.1701 8.36886 18.0833C8.33157 17.9965 8.32491 17.8995 8.34997 17.8L9.94997 12.7917C9.99715 12.6655 10.013 12.5296 9.99615 12.3959C9.9793 12.2621 9.93026 12.1345 9.85323 12.0239C9.77621 11.9132 9.6735 11.823 9.55391 11.7608C9.43433 11.6985 9.30144 11.6663 9.16664 11.6667L3.33331 11.6667Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path></svg>
            <span>开启自动网申</span>
          </button>
        </div>
        <div class="home-feature__visual home-feature__visual--apply">
          <div class="feature-apply-card">
            <div class="feature-apply-card__header">
              <span class="feature-apply-card__status">正在执行投递程序...</span>
              <div class="feature-apply-card__dots">
                <span class="dot dot--red"></span>
                <span class="dot dot--yellow"></span>
                <span class="dot dot--green"></span>
              </div>
            </div>
            <div class="feature-apply-card__list">
              <div class="apply-item">
                <div class="apply-item__icon"><img class="wp100 hp100" src="@/assets/images/home/right-icon-01.png" alt=""></div>
                <div class="apply-item__info">
                  <p class="apply-item__title">腾讯科技 - 校招投递成功</p>
                  <p class="apply-item__sub">耗时 0.8s · 自动识别填写完毕</p>
                </div>
              </div>
              <div class="apply-item apply-item--active">
                <div class="apply-item__icon apply-item__icon--pulse"><img class="wp100 hp100" src="@/assets/images/home/load-icon-01.png" alt=""></div>
                <div class="apply-item__info">
                  <p class="apply-item__title">京东校招 - 自动填写中...</p>
                  <p class="apply-item__sub">进度 65%</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Feature 3: 岗位定制简历 -->
    <section class="home-feature">
      <div class="home-feature__inner">
        <div class="home-feature__text">
          <h2>岗位定制简历</h2>
          <p>10秒内生成针对特定岗位优化的专业简历，通过<br/>ATS系统，突出你的核心优势。</p>
          <button class="home-feature__btn" @click="router.push('/jobs')">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 20 22" fill="none"><path stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" d="M10.5492 18.3334L15 18.3334C15.442 18.3334 15.8659 18.1578 16.1785 17.8453C16.4911 17.5327 16.6667 17.1088 16.6667 16.6668L16.6667 6.66675C16.6673 6.40268 16.6157 6.14109 16.5147 5.89708C16.4137 5.65307 16.2654 5.43148 16.0783 5.24509L13.0883 2.25509C12.9019 2.06802 12.6803 1.91972 12.4363 1.81874C12.1923 1.71776 11.9307 1.66611 11.6667 1.66675L4.99999 1.66675C4.55797 1.66675 4.13404 1.84235 3.82148 2.15491C3.50892 2.46747 3.33333 2.89139 3.33333 3.33342L3.33333 11.1168"></path><path stroke="rgba(82, 202, 209, 1)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" d="M11.6667 1.66675L11.6667 5.83341C11.6667 6.05443 11.7545 6.26639 11.9107 6.42267C12.067 6.57895 12.279 6.66675 12.5 6.66675L16.6667 6.66675"></path><path d="M8.64834 10.5184C8.98019 10.1869 9.43015 10.0007 9.89922 10.001C10.3683 10.0012 10.8181 10.1878 11.1496 10.5196C11.4811 10.8515 11.6672 11.3014 11.667 11.7705C11.6668 12.2396 11.4802 12.6894 11.1483 13.0209L6.96667 17.1975C6.76865 17.3957 6.52389 17.5407 6.255 17.6192L3.86584 18.3167C3.79413 18.3376 3.71812 18.3389 3.64576 18.3203C3.5734 18.3018 3.50736 18.2642 3.45454 18.2113C3.40173 18.1585 3.36408 18.0925 3.34554 18.0201C3.327 17.9478 3.32826 17.8718 3.34917 17.8L4.04584 15.4092C4.12448 15.1406 4.2695 14.8962 4.4675 14.6984L8.64834 10.5184Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path></svg>
            <span>优化我的简历</span>
          </button>
        </div>
        <div class="home-feature__visual home-feature__visual--resume">
          <div class="feature-resume-card">
            <div class="feature-resume-card__doc--border">
              <div class="feature-resume-card__doc">
                <div class="doc-header">
                  <div class="doc-avatar"></div>
                  <div class="doc-lines">
                    <div class="doc-line doc-line--half"></div>
                    <div class="doc-line doc-line--third"></div>
                  </div>
                </div>
                <div class="doc-bars">
                  <div class="doc-bar doc-bar--1"></div>
                  <div class="doc-bar doc-bar--2"></div>
                  <div class="doc-bar doc-bar--3"></div>
                </div>
              </div>
            </div>
            <div class="feature-resume-card__badge">
              <img class="w15 h15" src="@/assets/images/home/blue-shield-icon-01.png" alt="">
              <span>ATS OPTIMIZED</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Feature 4: 内推人脉 -->
    <section class="home-feature home-feature--reverse">
      <div class="home-feature__inner">
        <div class="home-feature__text">
          <h2>名企内推<br/>人脉直通</h2>
          <p>实时获取名企最新内推信息，自动填写网申内推<br/>码，简历更快到达HR。</p>
          <button class="home-feature__btn" @click="router.push('/jobs')">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 20 20" fill="none"><path d="M9.16667 5C11.7011 5.06529 14.1783 4.23959 16.1667 2.66667C16.2905 2.57381 16.4377 2.51727 16.5918 2.50337C16.746 2.48947 16.9009 2.51877 17.0393 2.58798C17.1778 2.65719 17.2942 2.76358 17.3755 2.89522C17.4569 3.02687 17.5 3.17857 17.5 3.33333L17.5 13.3333C17.5 13.4881 17.4569 13.6398 17.3755 13.7714C17.2942 13.9031 17.1778 14.0095 17.0393 14.0787C16.9009 14.1479 16.746 14.1772 16.5918 14.1633C16.4377 14.1494 16.2905 14.0929 16.1667 14C14.1783 12.4271 11.7011 11.6014 9.16667 11.6667L4.16667 11.6667C3.72464 11.6667 3.30072 11.4911 2.98816 11.1785C2.67559 10.866 2.5 10.442 2.5 10L2.5 6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.1756 3.72464 5 4.16667 5L9.16667 5Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path><path stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" d="M5 11.6665C5 13.8302 5.70178 15.9355 7 17.6665C7.26522 18.0201 7.66005 18.2539 8.09763 18.3164C8.53522 18.3789 8.97971 18.2651 9.33333 17.9998C9.68695 17.7346 9.92074 17.3398 9.98325 16.9022C10.0458 16.4646 9.93188 16.0201 9.66667 15.6665C8.80119 14.5125 8.33333 13.109 8.33333 11.6665"></path><path stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" d="M6.66669 5L6.66669 11.6667"></path></svg>
            <span>立即投递</span>
          </button>
        </div>
        <div class="home-feature__visual home-feature__visual--referral">
          <div class="referral-grid">
            <div class="referral-card" v-for="(ref, i) in referralCards" :key="i" :class="{ 'referral-card--offset': i % 2 === 1 }">
              <div class="referral-card__icon" :style="{ background: ref.color }">{{ ref.letter }}</div>
              <p class="referral-card__company">{{ ref.company }}</p>
              <p class="referral-card__role">{{ ref.role }}</p>
              <span class="referral-card__code">内推码: {{ ref.code }}</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Feature 5: AI求职助手 -->
    <section class="home-feature">
      <div class="home-feature__inner">
        <div class="home-feature__text">
          <h2>24h全天候<br/>AI求职助手</h2>
          <p>随时提供求职指导，从岗位筛选到面试技巧，你的专属职业规划顾问。</p>
          <button class="home-feature__btn" @click="router.push('/jobs')">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 20 20" fill="none"><path d="M18.3333 14.1667C18.3333 14.6087 18.1577 15.0326 17.8452 15.3452C17.5326 15.6577 17.1087 15.8333 16.6667 15.8333L5.69 15.8333C5.24801 15.8334 4.82416 16.0091 4.51167 16.3217L2.67667 18.1567C2.59393 18.2394 2.48851 18.2957 2.37375 18.3186C2.25898 18.3414 2.14003 18.3297 2.03193 18.2849C1.92382 18.2401 1.83142 18.1643 1.76641 18.067C1.7014 17.9697 1.66669 17.8553 1.66667 17.7383L1.66667 4.16667C1.66667 3.72464 1.84227 3.30072 2.15483 2.98816C2.46739 2.67559 2.89131 2.5 3.33334 2.5L16.6667 2.5C17.1087 2.5 17.5326 2.67559 17.8452 2.98816C18.1577 3.30072 18.3333 3.72464 18.3333 4.16667L18.3333 14.1667Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path></svg>
            <span>立即咨询</span>
          </button>
        </div>
        <div class="home-feature__visual home-feature__visual--ai">
          <div class="feature-ai-chat">
            <div class="ai-bubble ai-bubble--bot">👋 哈喽！我是你的 AI 职业导师。正在为你分析即将到来的面试流程。</div>
            <div class="ai-bubble ai-bubble--user">能帮我模拟一下明天的腾讯面试吗？</div>
            <div class="ai-bubble ai-bubble--bot">
              <p class="ai-bubble__title">准备就绪！面试官画像已生成：</p>
              <div class="ai-bubble__tags">
                <span>项目深度与工程化能力</span>
                <span>计算机网络与操作系统</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 用户评价区 Testimonials Section -->
    <section class="home-testimonials">
      <div class="home-testimonials__orb home-testimonials__orb--left"></div>
      <div class="home-testimonials__orb home-testimonials__orb--right"></div>
      <div class="home-testimonials__container">
        <div class="home-testimonials__header">
          <h2>万千毕业生的信赖之选</h2>
          <p>真实求职反馈，见证每一次从迷茫到上岸</p>
        </div>
        <div class="home-testimonials__cards">
          <div class="testimonial-card" v-for="(t, i) in testimonials" :key="i">
            <p class="testimonial-card__text">{{ t.text }}</p>
            <div class="dflex aliite-e">
              <div class="testimonial-card__author">
                <img class="testimonial-card__avatar" :src="t.avatar" alt="用户头像" />
                <div class="testimonial-card__info">
                  <p class="testimonial-card__name">{{ t.name }}</p>
                  <p class="testimonial-card__school">{{ t.school }}</p>
                </div>
              </div>
              <img class="w48 h48" src="@/assets/images/home/blue-icon-768.png" alt="">
            </div>
          </div>
        </div>
        <!-- 创始人引言卡片 -->
        <div class="home-testimonials__founder">
          <svg class="home-testimonials__founder-decor" width="455" height="455" viewBox="0 0 455 455" fill="none">
            <circle cx="227.5" cy="227.5" r="189.5" stroke="#fff" stroke-width="20" opacity="0.08"/>
            <path d="M240 190 L318 224 Q328 227.5 318 231 L240 265 Q227.5 270 215 265 L137 231 Q127 227.5 137 224 L215 190 Q227.5 185 240 190 Z" stroke="#fff" stroke-width="20" fill="none" opacity="0.08" transform="rotate(-45 227.5 227.5)"/>
          </svg>
          <div class="home-testimonials__founder-content">
            <img class="home-testimonials__founder-img" :src="avatarImg" alt="创始人头像" />
            <div class="home-testimonials__founder-text">
              <blockquote>"很多大学生还在用传统方式找工作，海投、反复改简历，效率很低。Offer派利用AI技术让专业和岗位<span class="fw600">深度匹配</span>关联，配合<span class="fw600">自动化投递</span>，让校招求职流程更丝滑，更精准，节省了80%的繁琐过程，拿到更多Offer。"</blockquote>
              <cite>
                <span class="cite-name">{{ founderQuotes[founderIndex].name }}</span>
                <span class="cite-role">{{ founderQuotes[founderIndex].role }}</span>
              </cite>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- FAQ Section -->
    <section class="home-faq">
      <div class="home-faq__inner">
        <div class="home-faq__header">
          <h2>常见问题</h2>
          <p>关于平台使用、隐私安全与岗位来源</p>
        </div>
        <div class="home-faq__list">
          <div
            v-for="(faq, i) in faqs"
            :key="i"
            class="faq-item"
            :class="{ 'faq-item--open': faqOpen === i }"
          >
            <div class="faq-item__header" @click="faqOpen === i ? null : (faqOpen = i)">
              <span class="faq-item__question">{{ faq.q }}</span>
              <div class="faq-item__icon" @click.stop="faqOpen = faqOpen === i ? -1 : i">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <template v-if="faqOpen === i">
                    <line x1="7" y1="7" x2="17" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    <line x1="17" y1="7" x2="7" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </template>
                  <template v-else>
                    <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </template>
                </svg>
              </div>
            </div>
            <div class="faq-item__answer" v-show="faqOpen === i">
              <template v-if="i === faqs.length - 1">
                <div class="faq-item__feedback">
                  <textarea
                    v-model="faqFeedbackText"
                    class="faq-item__textarea"
                    placeholder="请输入你的问题"
                    rows="4"
                  ></textarea>
                  <button class="faq-item__submit" @click.stop="submitFaqFeedback">提交</button>
                </div>
              </template>
              <template v-else>
                <p>{{ faq.a }}</p>
              </template>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Job Search Section -->
    <section class="home-job-search">
      <div class="home-job-search__inner">
        <h3>一键找到最适合你的工作</h3>
        <div class="home-job-search__filters">
          <IndustrySelector
            :industryIds="homeIndustryIds"
            :level="2"
            :maxSelect="3"
            :allowParentSelect="false"
            :allowParentSelectClick="true"
            :triggerStyle="filterTriggerStyle"
            :displayStyle="filterDisplayStyle"
            @update:industryIds="onHomeIndustryChange"
          />
          <RegionSelector
            :regionCodes="homeRegionCodes"
            :level="2"
            :maxSelect="3"
            :triggerStyle="filterTriggerStyle"
            :displayStyle="filterDisplayStyle"
            @update:regionCodes="onHomeRegionChange"
          />
          <JobCategorySelector
            :categoryIds="homeCategoryIds"
            :level="3"
            :maxSelect="3"
            :allowParentSelect="false"
            :allowParentSelectClick="true"
            :triggerStyle="filterTriggerStyle"
            :displayStyle="filterDisplayStyle"
            @update:categoryIds="onHomeCategoryChange"
          />
          <button class="filter-btn" @click="goSearchJobs">立即匹配</button>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import avatarImg from '@/assets/images/home/avatar-temporary.png'
import studentAvatar0 from '@/assets/images/home/student-avatar-0.png'
import studentAvatar1 from '@/assets/images/home/student-avatar-1.png'
import studentAvatar2 from '@/assets/images/home/student-avatar-2.png'
import IndustrySelector from '@/components/tools/IndustrySelector.vue'
import RegionSelector from '@/components/tools/RegionSelector.vue'
import JobCategorySelector from '@/components/tools/JobCategorySelector.vue'
import { getDailyJobCount } from '@/utils/dailyJobCount'

/** 路由实例 */
const router = useRouter()
/** Vuex 状态管理实例 */
const store = useStore()

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

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

/** 创始人引言当前索引 */
const founderIndex = ref(0)

/** 创始人引言数据 */
const founderQuotes = [
  { text: '"很多大学生还在用传统方式找工作，海投、反复改简历，效率很低。Offer派利用AI技术让专业和岗位深度匹配关联，配合自动化投递，让校招求职流程更丝滑，更精准，节省了80%的繁琐过程，拿到更多Offer。"', name: 'TK', role: 'Offer派创始人' },
]

/** 岗位滚动展示数据 */
const tickerJobs = [
  { company: '字节跳动', time: '15分钟前', title: '高级前端开发工程师' },
  { company: '腾讯', time: '30分钟前', title: '后端开发工程师' },
  { company: '阿里巴巴', time: '1小时前', title: '产品经理' },
  { company: '华为', time: '2小时前', title: '算法工程师' },
  { company: '京东', time: '3小时前', title: '运营管培生' },
]

/** 内推人脉卡片数据 */
const referralCards = [
  { letter: 'b', company: '字节跳动', role: '前端工程师', code: 'r7u9xx', color: '#2563eb' },
  { letter: 'a', company: '阿里巴巴', role: '运营管培生', code: 'alicc2', color: '#ea580c' },
  { letter: 't', company: '腾讯', role: '后端开发工程师', code: 'tx9901', color: '#111827' },
  { letter: 'h', company: '华为', role: '通用软件研究员', code: 'hwl92', color: '#dc2626' },
]

/** 用户评价数据 */
const testimonials = [
  { text: '"Offer派求职体验特别好！岗位信息丰富、质量高，AI岗位匹配也很精准，求职助手给的面试建议很专业，一周就拿到了offer！"', name: '李同学', school: '西安交通大学', avatar: studentAvatar0 },
  { text: '"界面设计简洁友好，用起来很舒适。AI助手帮我理清了方向，让迷茫的我建立了自信，还能帮我优化简历，真的很nice~"', name: '王同学', school: '北京大学', avatar: studentAvatar1 },
  { text: '"满分！特别是网申自动填写，不仅可以一键填写，还能快速定制简历内容，完美匹配岗位要求，毕设求职两不误，真心推荐。"', name: '张同学', school: '中国人民大学', avatar: studentAvatar2 },
]

/** 用户反馈输入内容 */
const faqFeedbackText = ref('')

/** 提交用户反馈 */
function submitFaqFeedback() {
  if (!faqFeedbackText.value.trim()) return
  faqFeedbackText.value = ''
  faqOpen.value = -1
}

/** 常见问题列表 */
const faqs = [
  { q: '这个平台与其他求职平台有什么不同?', a: '不同于BOSS直聘等传统平台的"手动式"求职，Offer派如同一位经验丰富的职业导师，通过AI能力搭建智能工具，自动处理简历优化、岗位匹配、申请投递等环节，大幅度提升你的求职效率。' },
  { q: '平台如何保障我的个人信息安全?', a: 'Offer派高度重视你的隐私安全。未经你明确同意，我们绝不会将你的个人信息提供给任何第三方。你的所有数据仅用于在平台内为你提供AI智能岗位匹配、简历优化等个性化求职服务。' },
  { q: '平台可以免费使用吗?', a: 'Offer派为所有用户免费开放3天会员权益，帮你省心省力找工作。3天后，依然可以免费使用各项功能，但有使用次数限制。' },
  { q: '平台的岗位来源是什么?', a: 'Offer派的岗位来自上万家企业的官方招聘网站，同时聚合了各大主流平台的最新职位——你不需要在多个网站之间来回切换，就能一站式搜罗全网高质量的工作机会。此外，我们会持续筛查每一则新发布的职位，及时剔除虚假信息，帮你避"坑"，为你提供真实靠谱的岗位信息。' },
  { q: '还有其他问题?', a: '' },
]

// ==================== 底部筛选区 ====================

/** 首页选中的行业 ID 数组 */
const homeIndustryIds = computed<number[]>(() => store.state.jobIntention.industryIds || [])
/** 首页选中的地区编码数组 */
const homeRegionCodes = computed<string[]>(() => store.state.jobIntention.regionCodes || [])
/** 首页选中的岗位 ID 数组 */
const homeCategoryIds = computed<number[]>(() => store.state.jobIntention.categoryIds || [])

/** 选择器触发按钮样式 */
const filterTriggerStyle = {
  width: '2.80rem',
  'max-width': 'none',
  height: '0.56rem',
  'border-radius': '0.16rem',
  border: '1px solid #e5e7eb',
  padding: '0 0.2rem',
  background: '#F3F4F5',
  'justify-content': 'space-between',
}

/** 选择器显示文字样式 */
const filterDisplayStyle = {
  'font-size': '0.16rem',
  'line-height': '0.16rem',
  color: 'rgba(0, 0, 0, 0.45)',
  'max-width': '1.8rem',
}

/** 行业选择变更回调 */
function onHomeIndustryChange(ids: number[]) {
  store.dispatch('saveJobIntention', { ...store.state.jobIntention, industryIds: ids })
}

/** 地区选择变更回调 */
function onHomeRegionChange(codes: string[]) {
  store.dispatch('saveJobIntention', { ...store.state.jobIntention, regionCodes: codes })
}

/** 岗位选择变更回调 */
function onHomeCategoryChange(ids: number[]) {
  store.dispatch('saveJobIntention', { ...store.state.jobIntention, categoryIds: ids })
}

/** 点击搜索职位 */
function goSearchJobs() {
  router.push('/jobs')
}
</script>
