{{define "pro"}}
  <section class="off-hero">
    <span class="off-mark">Pro</span>
    <h1 class="off-name">付费模块 · 按需单买</h1>
    <p class="off-slogan">一个模块一个价，按月也行，按年更省</p>
    <p class="off-desc">
      程序本体还是老规矩：一次授权，功能不锁，不绑账号。<br>
      音视、活动、表单这三个是「可选加装」的模块——需要哪个开哪个，用不上就不花这份钱。
      价格压到最低，按月 / 按年随你挑，随时可以停。
    </p>
    <div class="off-stats">
      <div class="off-stat"><strong>5 元 / 月</strong><span>单模块起 · 一杯饮料的钱</span></div>
      <div class="off-stat"><strong>39 元 / 年</strong><span>折合每月 3 块多 · 省 21 元</span></div>
      <div class="off-stat"><strong>随时可停</strong><span>到期不续即暂停，数据一条不删</span></div>
    </div>
  </section>

  <section class="off-section">
    <h2 class="off-heading">三个模块，各买各的</h2>
    <p class="off-heading-sub">统一定价，按需选择；开通后在应用中心启用对应模块即可</p>

    <div class="price-grid">
      <div class="price-card">
        <div class="price-card-head">
          <span class="price-card-ico">{{ico "play"}}</span>
          <h3>音视</h3>
        </div>
        <p class="price-desc">音频、视频、音视频混合，一套收齐</p>
        <div class="price-amount"><strong>5</strong><span class="price-unit">元 / 月</span></div>
        <div class="price-alt">或 39 元 / 年</div>
        <ul class="price-perks">
          <li>音频 / 视频 / 混合三种类型</li>
          <li>一条节目可挂多条播放轨，页面直接播</li>
          <li>前台按类型筛选，支持封面与标签</li>
          <li>上架即推送搜索引擎收录</li>
        </ul>
        <a class="btn btn-ghost price-cta" href="#open">扫码开通 →</a>
      </div>

      <div class="price-card">
        <div class="price-card-head">
          <span class="price-card-ico">{{ico "calendar"}}</span>
          <h3>活动</h3>
        </div>
        <p class="price-desc">线上报名，线下扫码核验</p>
        <div class="price-amount"><strong>5</strong><span class="price-unit">元 / 月</span></div>
        <div class="price-alt">或 39 元 / 年</div>
        <ul class="price-perks">
          <li>线上 / 线下两种活动模式</li>
          <li>报名即出电子票，票面自带二维码</li>
          <li>现场后台扫码核验，一码一次防重复</li>
          <li>报名名单与核验记录随时查看</li>
        </ul>
        <a class="btn btn-ghost price-cta" href="#open">扫码开通 →</a>
      </div>

      <div class="price-card">
        <div class="price-card-head">
          <span class="price-card-ico">{{ico "clipboard"}}</span>
          <h3>表单</h3>
        </div>
        <p class="price-desc">收集表、问卷、报名表，随手就建</p>
        <div class="price-amount"><strong>5</strong><span class="price-unit">元 / 月</span></div>
        <div class="price-alt">或 39 元 / 年</div>
        <ul class="price-perks">
          <li>文本 / 多行 / 单选 / 多选 / 下拉 / 评分 / 数字 / 邮箱 / 电话 / 网址 / 日期 / 时间等 13 种题型</li>
          <li>必填校验 + 图形验证码，挡住灌水</li>
          <li>提交结果自动汇总，选择题与评分题给占比统计，回答可导 CSV</li>
          <li>一个链接发出去，手机电脑都能填</li>
        </ul>
        <a class="btn btn-ghost price-cta" href="#open">扫码开通 →</a>
      </div>
    </div>

    <p class="price-note">
      一个授权对应一个站点；换域名、迁服务器、要多站，开通时说一声即可。
      三个模块同价，可以只买一个，也可以先买一个用着看。
    </p>
  </section>

  <section class="off-section" id="open">
    <h2 class="off-heading">怎么开通</h2>
    <p class="off-heading-sub">不走在线支付，省掉手续费和一堆流程，扫码找作者，一句话说清楚就行</p>
    <div class="off-steps">
      <div class="off-step">
        <span class="off-step-num">1</span>
        <h3>扫码加作者</h3>
        <p>扫下面那张卡片上的码，加上微信，有事直说。</p>
      </div>
      <div class="off-step">
        <span class="off-step-num">2</span>
        <h3>说清三件事</h3>
        <p>要哪个模块、按月还是按年、站点域名是什么。</p>
      </div>
      <div class="off-step">
        <span class="off-step-num">3</span>
        <h3>作者确认开通</h3>
        <p>确认后作者给你发放授权 / 把模块交付到位。</p>
      </div>
      <div class="off-step">
        <span class="off-step-num">4</span>
        <h3>启用即用</h3>
        <p>到后台「应用中心」启用对应模块，功能立刻可用。</p>
      </div>
    </div>
  </section>

  <section class="off-section">
    <div class="price-qr">
      <img src="/static/img/contact-author-qr.jpg" alt="作者微信二维码">
      <div class="price-qr-body">
        <h3>扫码联系作者开通</h3>
        <p>加上了直接说：要开通哪个模块、按月还是按年、站点域名。价格就写在上面，没有隐藏项，也不用来回砍。</p>
        <p class="price-qr-tip">扫我加作者微信 · 有事直说，不绕弯</p>
      </div>
    </div>
  </section>

  <section class="off-section">
    <h2 class="off-heading">常被问到的几件事</h2>
    <div class="price-faq">
      <div class="price-faq-item">
        <p class="price-faq-q">到期不续会怎样？</p>
        <p class="price-faq-a">数据一条都不删。模块暂停对外展示，续上之后接着用，什么都不用重来。</p>
      </div>
      <div class="price-faq-item">
        <p class="price-faq-q">一个授权能用在几个站点？</p>
        <p class="price-faq-a">一个授权一个站点。要多站或换域名，提前说一声，作者帮你改绑。</p>
      </div>
      <div class="price-faq-item">
        <p class="price-faq-q">程序本体要另外收费吗？</p>
        <p class="price-faq-a">不用。本体一次授权就行，不按年收、不锁功能；这三个是可选加装的模块，只为你真正要用的部分付钱。</p>
      </div>
      <div class="price-faq-item">
        <p class="price-faq-q">能先看看再决定吗？</p>
        <p class="price-faq-a">可以。想了解细节、想看能不能满足你的场景，扫码聊就行，不用先掏钱。</p>
      </div>
    </div>
  </section>

  <div class="off-cta price-end">
    <a class="btn btn-primary" href="/admin">去后台启用模块 →</a>
    <a class="btn btn-ghost" href="/page/about">先聊聊再说</a>
  </div>
{{end}}