cms-SiteForge/themes/trade-pro/pages/contact.html

{# trade-pro contact — cms 联系页设计移植（Task 10f）。
   区块序列对照 D:/project/cms/runtimes/astro-site-runtime/src/pages/[locale]/contact.astro
   + src/components/LeadForm.astro（像素基准 dist/hesupipe/en/contact/）：
   PageHero（面包屑 + 封面底图 + 眉题/h1/导语）→ 联系信息/表单双栏
   （0.85fr 信息列 + 1.25fr 灰底表单卡）→ 富文本正文（body 存在才渲染）。
   与 cms 的结构决策：
   1. 无假提交纪律（核心差异）：cms LeadForm 提交到自家 control-api；
      平台表单必须由管理员配置外部 HTTPS 服务（contact-settings API
      双层校验 + make_context 渲染层回退）。form_endpoint 存在 → 渲染
      外部表单（name/email/message + pro-honeypot 蜜罐，10b 产品页
      询盘区同款契约）；不存在 → 不渲染任何 <form>，表单位换引导卡
      （真实邮箱 mailto 优先；无邮箱给通用引导 + /products/ CTA）。
   2. 联系信息条目有真实字段才渲染：平台上下文只有 footer_email
      （邮箱 mailto + mail 图标）。cms 词典的电话/地址/营业时间是
      HESU 真实数据，平台无对应字段——绝不虚构，以两条通用服务承诺
      （响应时效/采购对接，全主题既有口径）补足列表节奏。地图带同理
      不移植：Google 嵌入指向公司真实地址，无地址数据源即无地图。
      结尾 Cta 带不重复渲染：pro.html 全局 pro-end-cta 对 contact 页
      本就输出（cms Cta 也是「回联系页」自指按钮，无增量信息）。
   3. 正文：cms 无独立正文区（infoText 为单段配置文案，平台由静态
      引导语对应）；WP 迁移的 contact 页常带富文本 body，渲染为正文
      区（10d sf-tp-article-body 排版层双挂，无 body 整段隐藏）。 #}
<section class="sf-tp-page-hero sf-tp-contact-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">CONTACT US</span>
      <h1>{{ page.title }}</h1>
      {% if page.summary %}<p class="sf-tp-page-hero-lead">{{ page.summary }}</p>{% endif %}
    </div>
  </div>
</section>
<section class="section sf-tp-contact">
  <div class="wrap sf-tp-contact-grid">
    <div class="sf-tp-contact-info" data-reveal>
      <span class="eyebrow">CONTACT INFORMATION</span>
      <h2>Let's start the conversation</h2>
      <p>For enquiries about products, specifications or export orders, reach the team through the channels below.</p>
      <div class="sf-tp-contact-list">
        {% if footer_email %}
        <div class="sf-tp-contact-item">
          <div class="icon-circle" aria-hidden="true">{{ icon('mail') }}</div>
          <div><strong>Email</strong><p><a href="mailto:{{ footer_email }}">{{ footer_email }}</a></p></div>
        </div>
        {% endif %}
        <div class="sf-tp-contact-item">
          <div class="icon-circle" aria-hidden="true">{{ icon('check') }}</div>
          <div><strong>Response time</strong><p>Replies within one business day.</p></div>
        </div>
        <div class="sf-tp-contact-item">
          <div class="icon-circle" aria-hidden="true">{{ icon('phone') }}</div>
          <div><strong>Sourcing desk</strong><p>One contact from inquiry to container loading.</p></div>
        </div>
      </div>
    </div>
    <div class="sf-tp-contact-form" data-reveal style="--reveal-i: 1">
      {% if form_endpoint %}
      {# 已配置外部表单服务（HTTPS 双层校验通过）：cms LeadForm 形态 ——
         标题 + 引导语 + 纵向字段栅格；蜜罐隐藏（.pro-honeypot，10b 同款） #}
      <h2>Send us a message</h2>
      <p>Fill out the form below and we will get back to you shortly.</p>
      <form action="{{ form_endpoint }}" method="POST">
        <label>Name <input name="name" autocomplete="name" required maxlength="100"></label>
        <label>Email <input name="email" type="email" autocomplete="email" required maxlength="180"></label>
        <label>Message <textarea name="message" required minlength="6" maxlength="5000"></textarea></label>
        <input name="website" tabindex="-1" autocomplete="off" class="pro-honeypot" aria-hidden="true">
        <button type="submit" class="sf-tp-btn">Send message {{ icon('arrow-right') }}</button>
        <p class="sf-tp-contact-note">Submissions are handled by the external form service configured by the site administrator; review its privacy and spam-filtering settings.</p>
      </form>
      {% else %}
      {# 无假提交：未配置外部表单服务 → 不渲染任何 <form>。有真实邮箱给
         mailto 直达；无邮箱给通用引导 + 产品目录 CTA（不虚构任何联系方式） #}
      <h2>Send us a message</h2>
      {% if footer_email %}
      <p>The online form is not activated on this site yet. Email the team directly — replies within one business day.</p>
      <a class="sf-tp-btn" href="mailto:{{ footer_email }}">Email {{ footer_email }} {{ icon('arrow-right') }}</a>
      {% else %}
      <p>The online enquiry form is not activated on this site yet. Published specifications are available on the catalogue pages while the enquiry channel is being set up.</p>
      <a class="sf-tp-btn sf-tp-btn--ghost" href="/products/">Browse products {{ icon('arrow-right') }}</a>
      {% endif %}
      {% endif %}
    </div>
  </div>
</section>
{% if content %}
<section class="section section--soft sf-tp-contact-body-section">
  <div class="wrap">
    <div class="sf-tp-contact-body sf-tp-article-body" data-reveal>{{ body_copy(content, page) }}</div>
  </div>
</section>
{% endif %}