{# trade-pro about — cms 关于页设计移植（Task 10e）。
   区块序列对照 D:/project/cms/runtimes/astro-site-runtime/src/pages/[locale]/about.astro
   （像素基准 dist/hesupipe/en/about/）：
   PageHero（面包屑 + 封面底图 + 页内锚点按钮）→ 公司介绍两栏（文案 +
   实景图 + 悬浮数据条）→ 富文本正文（cms 仅富文本渲染，平台 body 存在
   即渲染）→ 优势特性网格（浅底）→ 使命深色带（实景底图 + 玻璃卡）→
   厂区图集卡（图集驱动）→ 资质特性网格（浅底）。
   与 cms 的结构决策：
   1. about 数据 = 一个普通页面条目（title/summary/body/cover + fields）。
      cms 词典中的 stats（26+/19+/47/10）与厂区卡文案平台无对应字段：
      stats 复用 10a 首页关于两栏的派生计数（产品/分类/品牌/案例，全空
      整段隐藏）；厂区卡由 page.cover + fields.gallery（make_context 的
      gallery 变量，去重含封面）驱动，无图整段隐藏——与首页 about 两栏
      不同，这是完整页面，静态设计区块（优势/使命/资质）保留 cms 形态。
   2. cms markFloatImages 构建期给正文图片打浮动 class：平台 sanitize 剥
      离 class 属性（10d 同结论），不移植；正文统一 body_copy（.pro-rich
      基线）+ 双挂 sf-tp-article-body 复用 10d 富文本排版层（about.astro
      的 about-body 与全站 rich-body 同构）。
   3. hero 的「Our History」按钮 cms 锚到 #main（hero 正下方的内容区），
      平台模板不在 main 内，锚到介绍两栏的 #tp-about-intro（构建器豁免
      # 锚点链接）；文案列的 history 链接指向 /news/（cms 同款），无文章
      时隐藏以免空栏目断链。
   4. cms 使命深色带底图固定 factory.webp：平台用 gallery[0]（即封面优先）
      作实景底图，无图回退 theme.css .section--dark 纯渐变（10a CTA 同策）。
   5. cms 的 certKicker 等词典文案是设计内容（同首页 trustbar/features
      处理）：移植为英文静态文案，去除 HESU 专属表述（厂名/年份）。 #}
<section class="sf-tp-page-hero sf-tp-about-hero">
  {% if safe_image(page.cover) %}<img class="sf-tp-page-hero-bg" src="{{ safe_image(page.cover) }}" alt="" width="1600" height="900" fetchpriority="high" decoding="async">{% endif %}
  <div class="sf-tp-page-hero-overlay" aria-hidden="true"></div>
  <div class="wrap">
    <nav class="sf-tp-breadcrumb" aria-label="Breadcrumb" data-reveal>
      <a href="/">Home</a><span class="sf-tp-breadcrumb-current">{{ page.title }}</span>
    </nav>
    <div class="sf-tp-page-hero-copy" data-reveal style="--reveal-i: 1">
      <span class="eyebrow">ABOUT US</span>
      <h1>{{ page.title }}</h1>
      {% if page.summary %}<p class="sf-tp-page-hero-lead">{{ page.summary }}</p>{% endif %}
      <a class="sf-tp-btn" href="#tp-about-intro">Our history {{ icon('arrow-right') }}</a>
    </div>
  </div>
</section>
<section class="section sf-tp-about-intro" id="tp-about-intro">
  <div class="wrap sf-tp-two-col">
    <div class="sf-tp-copy" data-reveal>
      <span class="eyebrow">COMPANY INTRODUCTION</span>
      <h2>Who we are</h2>
      <p>{{ page.summary or site.tagline or 'Company profile, capabilities and export experience.' }}</p>
      {% if stories %}<a class="sf-tp-btn" href="/news/">Company history {{ icon('arrow-right') }}</a>{% endif %}
    </div>
    <div data-reveal style="--reveal-i: 1">
      <div class="sf-tp-photo">
        {% if gallery %}<img src="{{ gallery[0] }}" alt="{{ site.name }} facility" width="800" height="600" loading="lazy" decoding="async">
        {% else %}<div class="sf-tp-photo-plain" aria-hidden="true"><span>EXPORT · B2B</span></div>{% endif %}
      </div>
      {% if groups['product'] or groups['vehicle'] or categories or brands or cases %}
      <div class="sf-tp-stats">
        {% if groups['product'] or groups['vehicle'] %}<div class="sf-tp-stat"><strong class="mono">{{ groups['product']|length + groups['vehicle']|length }}</strong><span>Products</span></div>{% endif %}
        {% if categories %}<div class="sf-tp-stat"><strong class="mono">{{ categories|length }}</strong><span>Categories</span></div>{% endif %}
        {% if brands %}<div class="sf-tp-stat"><strong class="mono">{{ brands|length }}</strong><span>Brands</span></div>{% endif %}
        {% if cases %}<div class="sf-tp-stat"><strong class="mono">{{ cases|length }}</strong><span>Case studies</span></div>{% endif %}
      </div>
      {% endif %}
    </div>
  </div>
</section>
{% if content %}
<section class="section sf-tp-about-body-section">
  <div class="wrap">
    <div class="sf-tp-section-head" data-reveal>
      <div>
        <span class="eyebrow">COMPANY INTRODUCTION</span>
        <h2>{{ page.title }}</h2>
      </div>
    </div>
    <div class="sf-tp-about-body sf-tp-article-body" data-reveal>{{ body_copy(content, page) }}</div>
  </div>
</section>
{% endif %}
<section class="section section--soft sf-tp-about-advantages">
  <div class="wrap">
    <div class="sf-tp-section-head" data-reveal>
      <div>
        <span class="eyebrow">OUR ADVANTAGES</span>
        <h2>Why buyers choose us</h2>
      </div>
    </div>
    <div class="sf-tp-feature-grid">
      {% set tp_advantages = [
        ('check', 'Reliable quality', 'Strict quality control from raw material to loaded container.'),
        ('search', 'Advanced equipment', 'Modern production and testing facilities.'),
        ('phone', 'Professional team', 'Experienced technical and export service teams.'),
        ('location', 'Global service', 'Products delivered to worldwide markets.'),
      ] %}
      {% for tp_icon, tp_title, tp_desc in tp_advantages %}
      <div class="sf-tp-feature" data-reveal style="--reveal-i: {{ loop.index0 }}">
        <div class="icon-circle" aria-hidden="true">{{ icon(tp_icon) }}</div>
        <h3>{{ tp_title }}</h3>
        <p>{{ tp_desc }}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
<section class="section section--dark sf-tp-about-mission">
  {% if gallery %}<img class="sf-tp-about-mission-bg" src="{{ gallery[0] }}" alt="" loading="lazy" decoding="async">{% endif %}
  <div class="wrap">
    <div class="sf-tp-section-head" data-reveal>
      <div>
        <span class="eyebrow">OUR MISSION</span>
        <h2>Reliable solutions for a better tomorrow</h2>
      </div>
      <p class="sf-tp-intro">Our mission is to deliver reliable products and dependable service for global development.</p>
    </div>
    <div class="sf-tp-feature-grid">
      {% set tp_mission = [
        ('quote', 'Our mission', 'Reliable solutions for global development.'),
        ('location', 'Our vision', 'A trusted global partner in our field.'),
        ('check', 'Our values', 'Quality, innovation and sustainability.'),
        ('phone', 'Our promise', 'Long-term value for customers.'),
      ] %}
      {% for tp_icon, tp_title, tp_desc in tp_mission %}
      <div class="sf-tp-feature" data-reveal style="--reveal-i: {{ loop.index0 }}">
        <div class="icon-circle" aria-hidden="true">{{ icon(tp_icon) }}</div>
        <h3>{{ tp_title }}</h3>
        <p>{{ tp_desc }}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% if gallery %}
<section class="section sf-tp-about-facilities">
  <div class="wrap">
    <div class="sf-tp-section-head" data-reveal>
      <div>
        <span class="eyebrow">FACTORY DISPLAY</span>
        <h2>Our manufacturing facilities</h2>
      </div>
    </div>
    <div class="sf-tp-card-grid">
      {% for tp_shot in gallery[:4] %}
      <figure class="sf-tp-about-facility" data-reveal style="--reveal-i: {{ loop.index0 % 4 }}">
        <div class="sf-tp-card-media"><img src="{{ tp_shot }}" alt="{{ site.name }} facility {{ loop.index }}" loading="lazy" decoding="async"></div>
        <figcaption><span class="sf-tp-tag">Facility {{ '%02d'|format(loop.index) }}</span></figcaption>
      </figure>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}
<section class="section section--soft sf-tp-about-certs">
  <div class="wrap">
    <div class="sf-tp-section-head" data-reveal>
      <div>
        <span class="eyebrow">CERTIFICATES</span>
        <h2>International certifications</h2>
      </div>
    </div>
    <div class="sf-tp-feature-grid">
      {% set tp_certs = [
        ('check', 'ISO 9001', 'Quality management system.'),
        ('location', 'ISO 14001', 'Environmental management system.'),
        ('search', 'ISO 45001', 'Occupational health and safety.'),
        ('download', 'CE', 'European conformity marking.'),
      ] %}
      {% for tp_icon, tp_title, tp_desc in tp_certs %}
      <div class="sf-tp-feature" data-reveal style="--reveal-i: {{ loop.index0 }}">
        <div class="icon-circle" aria-hidden="true">{{ icon(tp_icon) }}</div>
        <h3>{{ tp_title }}</h3>
        <p>{{ tp_desc }}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>