<script setup lang="ts">
const { site } = await useSiteDocument()
const absoluteUrl = useAbsoluteUrl()
useSeoMeta({ title: () => `${site.value.teacher.name}｜${site.value.brand.name}`, description: () => site.value.teacher.summary, ogTitle: () => site.value.teacher.name, ogDescription: () => site.value.teacher.summary, ogImage: () => absoluteUrl(site.value.teacher.portrait) })
useHead(() => ({ script: [{ type: 'application/ld+json', textContent: JSON.stringify({ '@context': 'https://schema.org', '@type': 'Person', name: site.value.teacher.name, description: site.value.teacher.summary, image: absoluteUrl(site.value.teacher.portrait), jobTitle: site.value.teacher.title, worksFor: { '@type': 'Organization', name: site.value.brand.companyName } }) }] }))
</script>

<template>
  <PublicPageLayout :site="site">
    <section class="detail-hero teacher-detail-hero">
      <div><p class="eyebrow">CORE MENTOR</p><h1>{{ site.teacher.name }}</h1><p>{{ site.teacher.title }}</p></div>
      <img :src="site.teacher.portrait" :alt="site.teacher.name" width="536" height="804" decoding="async">
    </section>
    <section class="detail-content teacher-detail-content">
      <article><h2>人物介绍</h2><p class="long-copy">{{ site.teacher.fullBio }}</p></article>
      <aside><h3>核心方向</h3><div class="tag-list"><span v-for="tag in site.teacher.tags" :key="tag">{{ tag }}</span></div><h3>核心成果</h3><ul><li v-for="item in site.teacher.achievements" :key="item">{{ item }}</li></ul></aside>
    </section>
    <section class="timeline-section section-pad"><div class="section-heading centered"><p class="eyebrow">EXPERIENCE</p><h2>经历与实践</h2></div><div class="timeline-list"><article v-for="item in site.teacher.experiences" :key="`${item.year}-${item.title}`"><time>{{ item.year }}</time><div><h3>{{ item.title }}</h3><p>{{ item.description }}</p></div></article></div></section>
    <section v-if="site.teacher.externalLinks.length" class="authority-links"><h2>外部权威链接</h2><a v-for="link in site.teacher.externalLinks" :key="link.url" :href="link.url" target="_blank" rel="noopener noreferrer">{{ link.label }} ↗</a></section>
  </PublicPageLayout>
</template>
