---
import { site } from "../data/site";
---
<dialog class="contact-dialog contact-dialog--form" data-contact-dialog aria-labelledby="contact-dialog-title">
  <div class="contact-dialog__panel">
    <button class="contact-dialog__close" type="button" data-contact-dialog-close aria-label="关闭领取弹窗">×</button>
    <div class="contact-dialog__heading">
      <h2 id="contact-dialog-title">免费领取 1对1 专属学情深度分析</h2>
      <p>留下手机号，教务主任会尽快沟通孩子情况，也可添加教务主任微信。</p>
    </div>
    <form class="consultation-form" data-consultation-form>
      <label for="consultation-phone">家长手机号</label>
      <div class="consultation-phone-row"><span>+86</span><input id="consultation-phone" name="phone" type="tel" inputmode="numeric" autocomplete="tel" maxlength="11" placeholder="请输入 11 位手机号" required /></div>
      <label class="consultation-consent"><input name="consent" type="checkbox" required /><span>提交即表示同意<a href="/service-agreement.html" target="_blank">《用户协议》</a>与<a href="/privacy-agreement.html" target="_blank">《隐私政策》</a></span></label>
      <p class="consultation-error" data-consultation-error aria-live="polite"></p>
      <button class="button consultation-submit" type="submit">立即领取</button>
    </form>
  </div>
</dialog>

<dialog class="contact-dialog contact-dialog--phone" data-phone-dialog aria-labelledby="phone-dialog-title">
  <div class="contact-dialog__panel">
    <button class="contact-dialog__close" type="button" data-phone-dialog-close aria-label="关闭官方电话信息">×</button>
    <div class="phone-dialog__heading">
      <h2 id="phone-dialog-title">官方联系方式</h2>
      <p>课程咨询、服务反馈与商务合作，可通过以下官方渠道联系我们。</p>
    </div>
    <div class="official-contact-list">
      <section class="official-contact-item official-contact-item--phone">
        <span>客服电话</span>
        <a href={`tel:${site.contact.phone}`}>{site.contact.phoneDisplay}</a>
        <p>课程咨询与服务反馈</p>
      </section>
      <section class="official-contact-item">
        <span>微信小程序</span>
        <strong>启优学一对一</strong>
        <p>搜索小程序名称提交预约</p>
      </section>
      <section class="official-contact-item">
        <span>联系邮箱</span>
        <a href={`mailto:${site.contact.email}`}>{site.contact.email}</a>
        <p>商务合作与服务反馈</p>
      </section>
      <section class="official-contact-item">
        <span>官方网站</span>
        <a href={`https://${site.contact.website}`}>{site.contact.website}</a>
        <p>官方课程与服务信息</p>
      </section>
    </div>
  </div>
</dialog>

<dialog class="contact-dialog contact-dialog--teacher" data-teacher-dialog aria-labelledby="teacher-dialog-title">
  <div class="contact-dialog__panel">
    <button class="contact-dialog__close" type="button" data-teacher-dialog-close aria-label="关闭教务主任微信弹窗">×</button>
    <div class="teacher-dialog__heading">
      <h2 id="teacher-dialog-title">添加教务主任微信</h2>
      <p>手机号已提交，教务主任稍后会与您联系，也可扫码添加教务主任微信。</p>
    </div>
    <div class="teacher-contact">
      <div class="teacher-contact__identity"><strong data-teacher-name></strong><span data-teacher-title></span></div>
      <img data-teacher-qr alt="教务主任微信二维码" />
      <p class="teacher-wechat" data-teacher-wechat-wrap>微信号：<strong data-teacher-wechat></strong><button type="button" data-copy-teacher-wechat>复制</button></p>
    </div>
  </div>
</dialog>
