{extend name="web/official_common/mobile/base" /}

{block name="content"}
<!-- 纳海川官方网站 · 移动端联系我们独立页 (Contact Us Page Mobile) 开始 -->
<div class="nhc-mobile-contact-page" style="background: #F8FAFC; min-height: 100vh; padding-bottom: 60px;">
    
    <!-- 1. 移动端 Hero 视窗 -->
    <div style="background: #FFFFFF; padding: 28px 16px 24px; border-bottom: 1px solid #E2E8F0; text-align: center;">
        <div style="margin-bottom: 10px;">
            <span class="nhc-seal" style="padding: 2px 10px; font-size: 11px;">精诚共赢 · 敏捷响应</span>
        </div>
        <h1 style="font-family: 'Noto Serif SC', 'SimSun', serif; font-size: 20px; font-weight: 700; color: #0F172A; margin: 0 0 10px 0; line-height: 1.4;">
            开启确定性数字化技术合作
        </h1>
        <p style="font-size: 13px; color: #64748B; margin: 0; line-height: 1.6;">
            贵阳纳海川科技有限公司技术架构团队立足西南数谷，提供经得起白盒审查的架构评估与 24 小时快速对接。
        </p>
    </div>

    <!-- 2. 直通热线与 SLA 响应卡片 -->
    <div style="padding: 16px;">
        <div style="background: #FFFFFF; border-radius: 6px; border: 1px solid #E2E8F0; padding: 18px; margin-bottom: 16px;">
            <div style="font-size: 11px; font-weight: 700; color: #2563EB; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px;">快速直联通道</div>
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
                <div>
                    <div style="font-size: 12px; color: #64748B;">业务咨询与架构专线</div>
                    <div style="font-family: 'Noto Serif SC', serif; font-size: 20px; font-weight: 700; color: #0F172A;">13984036826</div>
                </div>
                <a href="tel:13984036826" style="background: #2563EB; color: #FFFFFF; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 4px; text-decoration: none;">
                    立即拨打
                </a>
            </div>
            <div style="border-top: 1px solid #F1F5F9; padding-top: 10px; font-size: 12px; color: #64748B; display: flex; justify-content: space-between;">
                <span>技术邮箱: server@gynhc.com</span>
                <span>响应承诺: 2小时直连</span>
            </div>
        </div>

        <!-- 3. 需求评估表单卡片 -->
        <div style="background: #FFFFFF; border-radius: 6px; border: 1px solid #E2E8F0; padding: 20px;">
            <div style="text-align: center; margin-bottom: 16px;">
                <span class="nhc-seal" style="padding: 2px 8px; font-size: 11px;">需求评估</span>
                <h2 style="font-family: 'Noto Serif SC', 'SimSun', serif; font-size: 17px; font-weight: 700; color: #0F172A; margin: 6px 0 4px 0;">
                    预约架构师 1 对 1 方案研讨
                </h2>
                <p style="font-size: 12px; color: #64748B; margin: 0;">
                    提交您的业务需求，架构师将在 2 小时内回访
                </p>
            </div>

            <form enctype="multipart/form-data" id="frmMobileContact">
                {:token()}

                <!-- 需求主题 -->
                <div style="margin-bottom: 14px;">
                    <label style="display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px;">
                        合作方向 / 需求主题 <span style="color: #DC2626;">*</span>
                    </label>
                    <input type="text" name="title" id="mobileTitle" value="企业级技术中台与软件定制" required style="width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 4px; font-size: 13px; color: #0F172A;">
                </div>

                <!-- 对接人 -->
                <div style="margin-bottom: 14px;">
                    <label style="display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px;">
                        对接人姓名 / 称呼 <span style="color: #DC2626;">*</span>
                    </label>
                    <input type="text" name="name" required placeholder="如：张总监 / 李经理" style="width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 4px; font-size: 13px; color: #0F172A;">
                </div>

                <!-- 电话 -->
                <div style="margin-bottom: 14px;">
                    <label style="display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px;">
                        联系手机 <span style="color: #DC2626;">*</span>
                    </label>
                    <input type="tel" name="phone" required placeholder="请填写联系电话" style="width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 4px; font-size: 13px; color: #0F172A;">
                </div>

                <!-- 详细需求 -->
                <div style="margin-bottom: 14px;">
                    <label style="display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px;">
                        业务痛点与期望功能 <span style="color: #DC2626;">*</span>
                    </label>
                    <textarea name="content" rows="3" placeholder="请简述您现存的系统痛点、期望功能或预估上线周期..." style="width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 4px; font-size: 13px; color: #0F172A; resize: vertical;"></textarea>
                </div>

                {if $captchaType == 'text'}
                <div style="margin-bottom: 14px;">
                    <label style="display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px;">
                        安全验证码 <span style="color: #DC2626;">*</span>
                    </label>
                    <div style="display: flex; gap: 8px;">
                        <input type="text" name="captcha" id="captcha_input_m" required placeholder="填写验证码" style="width: 60%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 4px; font-size: 13px;">
                        <img src="{:captcha_src()}" height="40" onclick="this.src = '{:captcha_src()}?r=' + Math.random();" style="border-radius: 4px;"/>
                    </div>
                </div>
                {/if}

                <button class="in_post_m" stu="1" type="button" style="width: 100%; background: #2563EB; color: #FFFFFF; font-size: 14px; font-weight: 600; padding: 12px 0; border: none; border-radius: 4px; cursor: pointer;">
                    立即提交需求评估
                </button>
                <div style="text-align: center; font-size: 11px; color: #94A3B8; margin-top: 10px;">
                    严格执行 ISO 27001 体系规范 · 客户商业信息与数据终身保密
                </div>
            </form>
        </div>

        <!-- 4. 物理实体办公双基地 (Dual-HQ) -->
        <div style="background: #FFFFFF; border-radius: 6px; border: 1px solid #E2E8F0; padding: 18px; margin-top: 16px;">
            <div style="font-size: 11px; font-weight: 700; color: #0F172A; letter-spacing: 1px; margin-bottom: 12px;">物理实体办公基地</div>
            
            <div style="margin-bottom: 14px;">
                <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
                    <span class="nhc-seal" style="padding: 1px 6px; font-size: 10px;">营销中心</span>
                    <span style="font-size: 13px; font-weight: 700; color: #0F172A;">花果园中环广场商务基地</span>
                </div>
                <div style="font-size: 12px; color: #475569; line-height: 1.5;">
                    贵州省贵阳市南明区花果园遵义中路中环广场2号楼26楼20-21号
                </div>
            </div>

            <div style="border-top: 1px solid #F1F5F9; padding-top: 14px;">
                <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
                    <span class="nhc-seal" style="padding: 1px 6px; font-size: 10px;">技术中心</span>
                    <span style="font-size: 13px; font-weight: 700; color: #0F172A;">经开区大数据安全产业基地</span>
                </div>
                <div style="font-size: 12px; color: #475569; line-height: 1.5;">
                    贵州省贵阳市经开区数字经济产业园大数据安全产业园数楼4楼02-03号
                </div>
            </div>
        </div>

    </div>

</div>
<!-- 纳海川官方网站 · 移动端联系我们独立页 (Contact Us Page Mobile) 结束 -->
{/block}

{block name="js"}
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    var captchaType = "{$captchaType}";
    document.addEventListener('DOMContentLoaded', function() {
        var postBtn = document.querySelector('.in_post_m');
        if (!postBtn) return;

        postBtn.addEventListener('click', function() {
            var form = document.getElementById('frmMobileContact');
            var title = form.querySelector("input[name='title']").value;
            var name = form.querySelector("input[name='name']").value;
            var phone = form.querySelector("input[name='phone']").value;
            var content = form.querySelector("textarea[name='content']").value;
            var tokenInput = form.querySelector("input[name='__token__']");
            var token = tokenInput ? tokenInput.value : '';
            var captchaInput = form.querySelector("#captcha_input_m");
            var captcha = captchaInput ? captchaInput.value : '';

            if (!title) { alert("请填写需求意向主题"); return; }
            if (!name) { alert("请填写您的称呼"); return; }
            if (!phone) { alert("请填写联系手机"); return; }
            if (!content) { alert("请填写详细需求与业务背景"); return; }
            if (captchaType === 'text' && !captcha) { alert("请填写安全验证码"); return; }

            postBtn.disabled = true;
            postBtn.innerText = "正在提交...";

            var data = {
                name: name,
                title: title,
                phone: phone,
                content: content,
                captcha: captcha,
                __token__: token
            };

            axios.post('', data)
                .then(function (response) {
                    var res = response.data;
                    postBtn.disabled = false;
                    postBtn.innerText = "立即提交需求评估";
                    if (res.code) {
                        alert("需求评估已成功提交！纳海川架构师将在 2 小时内与您联系对接。");
                        form.querySelector("input[name='name']").value = '';
                        form.querySelector("input[name='phone']").value = '';
                        form.querySelector("textarea[name='content']").value = '';
                        if (captchaInput) captchaInput.value = '';
                    } else {
                        alert(res.msg || "提交失败，请重试");
                        axios.get("{:addon_url('official/web.official_home/get_token')}", data)
                            .then(function(tRes) {
                                if (tRes.data && tRes.data.code === 1 && tokenInput) {
                                    tokenInput.value = tRes.data.data;
                                }
                            });
                    }
                })
                .catch(function(err) {
                    postBtn.disabled = false;
                    postBtn.innerText = "立即提交需求评估";
                    alert("提交失败，请检查网络或直接拨打电话 13984036826");
                });
        });
    });
</script>
{/block}