---
import Base from "../../layouts/Base.astro";
import Header from "../../components/Header.astro";
import Footer from "../../components/Footer.astro";
import CTA from "../../components/CTA.astro";
import SectionHeading from "../../components/SectionHeading.astro";
import { site } from "../../data/site";

const title = `关于我们｜${site.brand.name}`;
const description = `${site.brand.name}是${site.brand.legalName}旗下在线一对一个性化辅导品牌，面向小学、初中和高中学生提供学情沟通、教师匹配、在线授课、课后反馈与阶段复盘服务。`;

const serviceFacts = [
  ["服务对象", "小学、初中和高中阶段学生"],
  ["授课方式", "在线一对一个性化辅导"],
  ["服务流程", "需求沟通、学情诊断、教师匹配、在线授课、课后反馈、阶段复盘"],
  ["客服热线", `${site.contact.phoneDisplay}（周一至周日 7×24 小时）`],
];
---

<Base {title} {description}>
  <Header />
  <main id="main-content">
    <section class="page-hero about-hero">
      <div class="container page-hero__inner" data-reveal>
        <div class="breadcrumb"><a href="/">首页</a> / 关于我们</div>
        <p class="about-hero__kicker">关于启优学</p>
        <h1>在线一对一<br /><em>个性化辅导品牌</em></h1>
        <p>{site.brand.tagline}；打破地域壁垒，让优质教育触手可及。</p>
      </div>
    </section>

    <section id="position" class="section-pad section-white">
      <div class="container about-brand-layout">
        <div class="about-brand-copy" data-reveal>
          <SectionHeading title="我们是什么" description={site.about.position} />
        </div>
        <div class="story-column">
          {site.about.story.map((paragraph) => <p data-reveal>{paragraph}</p>)}
        </div>
      </div>

      <div class="container about-facts" data-reveal>
        {serviceFacts.map(([label, value]) => (
          <article>
            <span>{label}</span>
            {label === "客服热线" ? <a href={`tel:${site.contact.phone}`}>{value}</a> : <strong>{value}</strong>}
          </article>
        ))}
      </div>
    </section>

    <section class="stat-band">
      <div class="container stat-grid">
        {site.home.stats.map((stat) => <div data-reveal><strong>{stat.value}</strong><p>{stat.label}</p></div>)}
      </div>
    </section>

    <section id="advantages" class="section-pad section-blue">
      <div class="container">
        <SectionHeading title="从看见问题，到看见每一步进展" description="三维学情诊断、教师匹配、互动授课、课程回放、学习反馈与阶段复盘，共同组成可以持续调整的学习服务。" />
        <div class="advantage-grid">
          {site.about.advantages.map((item) => <article data-reveal><h3>{item.title}</h3><p>{item.desc}</p></article>)}
        </div>
        <div class="about-access-bar" data-reveal>
          <div><span>便捷咨询</span><strong>多个官方入口，随时了解课程与服务</strong></div>
          <nav aria-label="启优学官方咨询入口">
            <a href={`https://${site.contact.website}`}>官方网站</a>
            <span>微信小程序「启优学一对一」</span>
            <a href={`tel:${site.contact.phone}`}>官方电话 {site.contact.phoneDisplay}</a>
          </nav>
        </div>
      </div>
    </section>

    <section class="section-pad principle-section">
      <div class="container principle-layout">
        <div>
          <h2>我们的教育理念</h2>
          <p>成绩是阶段结果，理解力、方法和主动思考能力则陪伴更久。</p>
        </div>
        <div>
          {[
            ["启发引导", "拒绝单向灌输，通过提问与反馈点燃内驱力，培养主动思考。"],
            ["因材施教", "从真实学情出发，以三维诊断为依据确定个性化阶段任务。"],
            ["能力优先", "关注知识掌握和阶段成绩，也重视方法、表达与综合能力。"],
            ["长期陪伴", "固定教师持续跟踪，在反馈与阶段复盘中稳步调整。"],
          ].map(([name, text]) => <article data-reveal><div><h3>{name}</h3><p>{text}</p></div></article>)}
        </div>
      </div>
    </section>

    <section class="section-pad vision-section">
      <div class="container vision-card" data-reveal>
        <blockquote>“{site.about.vision}”</blockquote>
        <p>因材施教不是一句口号，而是每一次诊断、匹配与调整。</p>
      </div>
    </section>

    <CTA />
  </main>
  <Footer />
</Base>
