<template>
  <!-- 关于我们Tab内容 -->
  <div class="home-about">

    <!-- Hero 区域 -->
    <section class="home-about__hero">
      <div class="home-about__hero-inner">
        <p class="home-about__hero-kicker">投简历神器 · 一键自动简申 · 求职助力提升</p>
        <h1 class="home-about__hero-title">让每一次求职选择<br/>都更有方向</h1>
        <p class="home-about__hero-subtitle">以AI提效效率，以专业经验支持判断，帮助年轻人看见机会、理解选择，更有准备地走向下一步</p>
        <button class="home-about__hero-btn" @click="router.push('/jobs')">了解Offer派</button>
      </div>
      <!-- 底部居中渐变色块 -->
      <div class="home-about__hero-orb"></div>
    </section>

    <!-- 产品介绍区域 -->
    <section class="home-about__intro">
      <div class="home-about__intro-inner">
        <!-- 左侧产品图片占位 -->
        <div class="home-about__intro-img">
          <div class="home-about__intro-img-placeholder">
            <img src="@/assets/images/home/home-about-01.png" alt="产品介绍" style="width: 100%; height: 100%; object-fit: cover; border-radius: 0.22rem;" />
          </div>
        </div>
        <!-- 右侧文字说明 -->
        <div class="home-about__intro-text">
          <span class="home-about__kicker">产品介绍</span>
          <h2 class="home-about__section-title">用AI，让求职更清晰、更高效</h2>
          <p class="home-about__intro-desc">
            求职的问题，远远不只是不知道去哪里看招聘信息、该投简历，方向模糊、岗位要求说不清用什么，以及充斥着大量无用信息。
          </p>
          <p class="home-about__intro-desc">
            Offer派（Offerpai）是志立要辅导下面向大学生的一站式就业辅导平台，帮助毕业生搜索与投递简历，找到适合自己的工作；采用先进AI技术，双科汇集海量岗位信息/平台上下配合让大学生成功投递简历。基本覆盖日均200+知名企业在线。等你的求职好运气。
          </p>
          <p class="home-about__intro-desc">
            我们不急着做赚用户的决定，也不求速的回到的求职轨道。我们更愿意将技术成为少些信息差和搜索理操作，让每个人更关注对他们真的重要的事：了解岗位、认真复盘适合自己，以及加强真正重复投递对接。
          </p>
        </div>
      </div>
    </section>

    <!-- 产品亮点区域 -->
    <section class="home-about__features">
      <div class="home-about__features-header">
        <span class="home-about__kicker">产品亮点</span>
        <h2 class="home-about__section-title">让求职的每一步，都更简单一点</h2>
        <p class="home-about__section-subtitle">找岗位搜索、自动简申、导师经验和AI理想放在一起，让求职不再碎片化</p>
      </div>
      <!-- 5个功能卡片 -->
      <div class="home-about__features-grid">
        <div class="home-about__feature-card" v-for="(feat, idx) in featureCards" :key="idx">
          <div class="home-about__feature-icon">
            <component :is="feat.icon" />
          </div>
          <h3 class="home-about__feature-title">{{ feat.title }}</h3>
          <p class="home-about__feature-desc">{{ feat.desc }}</p>
        </div>
      </div>
    </section>

    <!-- 为什么创立区域 -->
    <section class="home-about__why">
      <div class="home-about__why-header">
        <span class="home-about__kicker">我们的初心</span>
        <h2 class="home-about__section-title">为什么创立Offer派</h2>
        <p class="home-about__section-subtitle">我们希望，让专业的求职服务支持离年轻人更近一点</p>
      </div>
      <!-- 两个内容块：左文右图 / 左图右文 -->
      <div class="home-about__why-content">
        <div class="home-about__why-block">
          <div class="home-about__why-text">
            <h3>我们希望，让好的求职服务离年轻人更近一点</h3>
            <p>
              团队最初在2016年成立以来，一直在帮大学生，但提供全方位服务的社会人的接入的门槛太高了。我选择什么方向？哪家特的合适推荐给我？为了轻而且自己应付更简练的记录，按录入升级面配，不同人开不清情形，有那么多的新形式把大家，搜索找一种你负面之间也能得到了。就入到城打发到实际去请投资。让到了意思每一份好资源。
            </p>
          </div>
          <div class="home-about__why-img">
            <img src="@/assets/images/home/home-about-02.png" alt="为什么选择Offer派" style="width: 100%; height: 100%; object-fit: cover; border-radius: 0.16rem;" />
          </div>
        </div>
        <div class="home-about__why-block home-about__why-block--reverse">
          <div class="home-about__why-img">
            <img src="@/assets/images/home/home-about-03.png" alt="为什么选择Offer派" style="width: 100%; height: 100%; object-fit: cover; border-radius: 0.16rem;" />
          </div>
          <div class="home-about__why-text">
            <h3>AI 的出现，让这件事情变得真正可行</h3>
            <p>
              当应对AI的求职者，让AI变元素，更多利把关求职先忙完处然后大部分的力。于是做好们开了Offer派，我们让数据帮你搜匹配信息便签，目的引用布策重要做一些好交流。但是做到面，确做了另外所有内外对到不人。我们不想当自不是经验的出错的"密集完成"，而是一个有着力有意思的管用同步。去看有未来方向对结。
            </p>
            <p class="home-about__why-sign">——Offer派团队</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 万千毕业生的信赖之选 -->
    <section class="home-about__trust">
      <div class="home-about__trust-header">
        <h2 class="home-about__section-title">源于见识星球，也走向更多年轻人</h2>
        <p class="home-about__section-subtitle">真实求职反馈，见证每一次从迷茫到积上岸</p>
      </div>
      <!-- 深色卡片 -->
      <div class="home-about__trust-dark-card">
        <div class="home-about__trust-dark-text">
          <p>Offer派是见识星球旗下的AI求职产品。</p>
          <p>
            见识星球创始团队专注于大学生年轻人校招生涯的多年来，求职辅导，名企求职与职业成长，通过自身招聘和辅助加盟者。为用户提供更独到的服务，专业的求职就业结合到每次经验与能力。帮企业用适配员工人选适配。让很多在先进面上入大时代。初步分析前期做到点求职规时请改变为真正知道来化，更好我们是职在服务不做到打的到角色。
          </p>
          <p>
            之后我们渐渐不间断继续是指据角色。
          </p>
        </div>
        <div class="home-about__trust-dark-logo"></div>
      </div>
      <!-- 两个白色卡片 -->
      <div class="home-about__trust-cards">
        <div class="home-about__trust-card">
          <h4>Offer 派</h4>
          <p>兼有制度云层级后、一键自动简申、在立即用持行项服的技术打下一样，汇聚汇集到全面就业，合力、社作育的，也指进一步到更精准到更新更定收到先。更指连选到关Offer。</p>
        </div>
        <div class="home-about__trust-card">
          <h4>见识星球</h4>
          <p>专注于大学生专业实力指每的一个校园的到导知网的，新打5000+名企公司到得到，北大学学专的将步的改之后全入到体入到未来打的到期配到面。</p>
        </div>
      </div>
      <!-- 底部总结 -->
      <p class="home-about__trust-summary">AI提升效率，真人提供判断。我们共同陪伴年轻人从发现机会，走到理解机会、准备机会和抓住机会。</p>
    </section>

    <!-- 价值观区域 -->
    <section class="home-about__values">
      <div class="home-about__values-header">
        <h2 class="home-about__section-title">每个年轻人的选择，都值得被认真对待</h2>
        <p class="home-about__section-subtitle">我们用技术减少信息差距，也用真实经验达，客观心界和长期视角，帮助年轻人做出更适合自己的决定</p>
      </div>
      <!-- 4个价值观卡片 -->
      <div class="home-about__values-grid">
        <div class="home-about__value-card" v-for="(val, idx) in valueCards" :key="idx">
          <div class="home-about__value-icon">
            <component :is="val.icon" />
          </div>
          <h3 class="home-about__value-title">{{ val.title }}</h3>
          <p class="home-about__value-desc">{{ val.desc }}</p>
        </div>
      </div>
    </section>

    <!-- 联系我们区域 -->
    <section class="home-about__contact">
      <div class="home-about__contact-header">
        <span class="home-about__kicker">期待与你一起，创建更多可能</span>
        <h2 class="home-about__section-title">联系我们</h2>
        <p class="home-about__section-subtitle">无论是产品建议、岗位信息纠错，还是商务合作与导师入驻，欢迎与我们联系</p>
      </div>
      <!-- 3个联系方式卡片 -->
      <div class="home-about__contact-grid">
        <div class="home-about__contact-card" v-for="(c, idx) in contactCards" :key="idx">
          <div class="home-about__contact-icon">
            <component :is="c.icon" />
          </div>
          <div class="home-about__contact-info">
            <h4>{{ c.title }}</h4>
            <p>{{ c.desc }}</p>
            <a class="home-about__contact-link" :href="c.link" target="_blank">{{ c.linkText }} →</a>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA区域 -->
    <section class="home-cta">
      <div class="home-cta__inner">
        <h2>让Offer派带你找到<br/>人生第一份好工作</h2>
        <button class="home-cta__btn" @click="router.push('/jobs')">免费体验</button>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { h } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// ==================== 功能卡片数据 ====================

/** 火箭图标 */
const IconRocket = { render: () => h('svg', { width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none' }, [h('path', { d: 'M8 24C8 24 9.5 22 12 22C14.5 22 16 24 16 24', stroke: '#52CAD1', 'stroke-width': '2', 'stroke-linecap': 'round' }), h('path', { d: 'M16 4C16 4 26 8 26 18C26 24 22 28 16 28C10 28 6 24 6 18C6 8 16 4 16 4Z', stroke: '#52CAD1', 'stroke-width': '2', fill: 'none' })]) }

/** 手指点击图标 */
const IconClick = { render: () => h('svg', { width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none' }, [h('path', { d: 'M16 6V18M16 18L20 22M16 18L12 22M10 12C7 12 6 14 6 16C6 22 10 26 16 26C22 26 26 22 26 16C26 14 25 12 22 12', stroke: '#52CAD1', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' })]) }

/** 黑板教师图标 */
const IconTeacher = { render: () => h('svg', { width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none' }, [h('rect', { x: '4', y: '6', width: '24', height: '16', rx: '2', stroke: '#52CAD1', 'stroke-width': '2', fill: 'none' }), h('path', { d: 'M12 26H20M16 22V26', stroke: '#52CAD1', 'stroke-width': '2', 'stroke-linecap': 'round' })]) }

/** 纸飞机图标 */
const IconSend = { render: () => h('svg', { width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none' }, [h('path', { d: 'M6 16L26 6L20 26L16 18L6 16Z', stroke: '#52CAD1', 'stroke-width': '2', 'stroke-linejoin': 'round', fill: 'none' }), h('path', { d: 'M16 18L26 6', stroke: '#52CAD1', 'stroke-width': '2' })]) }

/** AI图标 */
const IconAI = { render: () => h('svg', { width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none' }, [h('rect', { x: '6', y: '8', width: '20', height: '16', rx: '4', stroke: '#52CAD1', 'stroke-width': '2', fill: 'none' }), h('text', { x: '16', y: '20', 'text-anchor': 'middle', fill: '#52CAD1', 'font-size': '10', 'font-weight': '600' }, 'AI')]) }

/** 功能卡片列表 */
const featureCards = [
  { icon: IconRocket, title: '投简历神器', desc: '聚合数十个主流招聘网站的大学生校招信息，包含岗位分析、行业解读、精准投递帮助推荐求职。一键批量投递配合提高效率。' },
  { icon: IconClick, title: '一键自动简申', desc: '基本以自动化来填简历投递，自动获取表单，跟你配合简申计划进行1-2步。' },
  { icon: IconTeacher, title: '名企老师VI辅导', desc: 'Offer派定期邀请企业在职的一线人员，从他们自身去分享。业内包括做，关注搜索、指的的到实际Offer！' },
  { icon: IconSend, title: '内推发抖无限资', desc: '结合真实的导师在线直聊、资料指助获的从专业知识把关。' },
  { icon: IconAI, title: '全方面AI求职助手', desc: '接入当前最强AI大模型GPT-4o，智能自动对话的全方位匹配的面完整的更的线的全面的NOVA在最有最终的但能这的内的的。' },
]

// ==================== 价值观卡片数据 ====================

/** 雷达图标 */
const IconRadar = { render: () => h('svg', { width: '48', height: '48', viewBox: '0 0 48 48', fill: 'none' }, [h('circle', { cx: '24', cy: '24', r: '18', stroke: '#111', 'stroke-width': '3', fill: 'none' }), h('circle', { cx: '24', cy: '24', r: '10', stroke: '#111', 'stroke-width': '3', fill: 'none' }), h('circle', { cx: '24', cy: '24', r: '3', fill: '#111' }), h('path', { d: 'M24 6V24L36 12', stroke: '#111', 'stroke-width': '3', 'stroke-linecap': 'round' })]) }

/** 扳手图标 */
const IconWrench = { render: () => h('svg', { width: '48', height: '48', viewBox: '0 0 48 48', fill: 'none' }, [h('path', { d: 'M12 36L30 18M30 18C28 14 30 10 34 8C34 8 36 12 40 12C40 16 36 18 34 18L30 18Z', stroke: '#111', 'stroke-width': '3', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', fill: 'none' }), h('path', { d: 'M12 36C10 38 10 40 12 42C14 44 16 44 18 42L12 36Z', stroke: '#111', 'stroke-width': '3', fill: 'none' })]) }

/** 路标图标 */
const IconSignpost = { render: () => h('svg', { width: '48', height: '48', viewBox: '0 0 48 48', fill: 'none' }, [h('path', { d: 'M24 8V42', stroke: '#111', 'stroke-width': '3', 'stroke-linecap': 'round' }), h('path', { d: 'M12 14H32L36 18L32 22H12V14Z', stroke: '#111', 'stroke-width': '3', fill: 'none' }), h('path', { d: 'M36 28H16L12 32L16 36H36V28Z', stroke: '#111', 'stroke-width': '3', fill: 'none' })]) }

/** 星球图标 */
const IconPlanet = { render: () => h('svg', { width: '48', height: '48', viewBox: '0 0 48 48', fill: 'none' }, [h('circle', { cx: '24', cy: '24', r: '12', stroke: '#111', 'stroke-width': '3', fill: 'none' }), h('ellipse', { cx: '24', cy: '24', rx: '20', ry: '8', stroke: '#111', 'stroke-width': '3', fill: 'none', transform: 'rotate(-30 24 24)' })]) }

const valueCards = [
  { icon: IconRadar, title: '机会不应该被信息差阻隔', desc: '我们努力让更多元宝、优质的招聘机会被年轻人及时看见。' },
  { icon: IconWrench, title: '技术应该服务真实需求', desc: '我们不会为了使用AI而使用AI，每一项功能都应该直接使切，提高用户本体验和知和用户效率互打的方面' },
  { icon: IconPlanet, title: '求职不只是获得一份工作', desc: '一份工作选着一个人未来几年的生活。我们决定后的Offer，也作进每个人长期的发展方向。' },
  { icon: IconSignpost, title: '专业建议也要尊重个人选择', desc: '我们提供信息、工具与经验，但不替用户做决定。适合自己的选择，比统一的标准效果更重要' },
]

// ==================== 联系我们卡片数据 ====================

/** 产品反馈图标 */
const IconFeedback = { render: () => h('svg', { width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none' }, [h('path', { d: 'M6 8H26V22H18L12 26V22H6V8Z', stroke: '#52CAD1', 'stroke-width': '2', 'stroke-linejoin': 'round', fill: 'none' }), h('circle', { cx: '12', cy: '15', r: '1.5', fill: '#52CAD1' }), h('circle', { cx: '16', cy: '15', r: '1.5', fill: '#52CAD1' }), h('circle', { cx: '20', cy: '15', r: '1.5', fill: '#52CAD1' })]) }

/** 握手图标 */
const IconHandshake = { render: () => h('svg', { width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none' }, [h('path', { d: 'M4 14L10 10L16 14L22 10L28 14', stroke: '#52CAD1', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }), h('path', { d: 'M10 10V22M22 10V22', stroke: '#52CAD1', 'stroke-width': '2', 'stroke-linecap': 'round' })]) }

/** 导师入驻图标 */
const IconMentor = { render: () => h('svg', { width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none' }, [h('rect', { x: '4', y: '6', width: '24', height: '16', rx: '2', stroke: '#52CAD1', 'stroke-width': '2', fill: 'none' }), h('circle', { cx: '16', cy: '13', r: '3', stroke: '#52CAD1', 'stroke-width': '2', fill: 'none' }), h('path', { d: 'M10 20C10 17 13 16 16 16C19 16 22 17 22 20', stroke: '#52CAD1', 'stroke-width': '2', 'stroke-linecap': 'round' }), h('path', { d: 'M12 26H20', stroke: '#52CAD1', 'stroke-width': '2', 'stroke-linecap': 'round' })]) }

const contactCards = [
  { icon: IconFeedback, title: '产品反馈', desc: '遇到任何问题，我们会全力解决和修正。留言反馈，欢迎告诉我们！', link: 'javascript:void(0)', linkText: '提交反馈' },
  { icon: IconHandshake, title: '商务合作', desc: '企业招聘、共赢合作、技术开发等商业合作。更进一步了解我们的服务', link: 'javascript:void(0)', linkText: '查看简历' },
  { icon: IconMentor, title: '导师入驻', desc: '如果你从来资深的行业专业导师，你可以求职领域服务更多年人。欢迎联入导师申请联系。', link: 'javascript:void(0)', linkText: '申请入驻' },
]
</script>
