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

{block name="css"}
<link href="__ADDON__/layui-v2.6.8/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" type="text/css">
{/block}

{block name="content"}
<!-- 纳海川官方网站 · 联系我们独立页 (Contact Us Page) 开始 -->

<!-- 1. 联系我们 Hero 视窗 -->
<section class="nhc-page-hero nhc-lattice-pattern">
    <div class="nhc-container">
        <div class="nhc-breadcrumb">
            <a href="{:addon_url('official/web.official_home/index')}">首页</a>
            <span>/</span>
            <span>联系我们</span>
        </div>
        <div style="margin-bottom: 16px;">
            <span class="nhc-seal">精诚共赢 · 敏捷响应</span>
        </div>
        <h1 class="nhc-page-title">开启确定性数字化技术合作</h1>
        <p class="nhc-page-desc">
            贵阳纳海川科技有限公司技术中台与解决方案架构团队常驻西南核心数谷。我们承诺为每一家意向企业提供经得起白盒审查的架构评估与 24 小时快速响应。
        </p>
    </div>
</section>

<!-- 2. 主体联系与需求评估板块 (12列网格，左7右5) -->
<section class="nhc-contact-section" style="padding: 70px 0 90px; background: #FFFFFF;">
    <div class="nhc-container">
        <div class="nhc-contact-layout">
            
            <!-- 左侧：需求评估与工单表单 (7列) -->
            <div class="nhc-contact-form-wrap nhc-corner-card">
                <div class="nhc-form-header">
                    <span class="nhc-seal" style="margin-bottom: 8px;">需求评估</span>
                    <h2 class="nhc-form-title">预约资深架构师 1 对 1 方案研讨</h2>
                    <p class="nhc-form-sub">
                        请详细填写您的业务需求与期望指标，我们将在 2 小时内安排专属架构师与您深度对接。
                    </p>
                </div>

                <form enctype="multipart/form-data" class="nhc-contact-form" id="frmResume">
                    {:token()}

                    <!-- 意向主题快捷选择 -->
                    <div class="nhc-form-group">
                        <label class="nhc-form-label">意向合作方向 <span class="nhc-required">*</span></label>
                        <div class="nhc-tag-selector">
                            <span class="nhc-topic-tag active" data-topic="企业级技术中台与软件定制">企业级中台定制</span>
                            <span class="nhc-topic-tag" data-topic="APP与微信小程序全生态定制">APP/小程序定制</span>
                            <span class="nhc-topic-tag" data-topic="垂直领域私有 RAG 与 AI 智能体开发">私有 AI 智能体</span>
                            <span class="nhc-topic-tag" data-topic="商业商城/收银/进销存系统部署">商业产品选型</span>
                        </div>
                        <input type="text" name="title" id="contactTitle" value="企业级技术中台与软件定制" required class="nhc-form-input" placeholder="请填写需求主题或选择上方标签">
                    </div>

                    <div class="nhc-form-row">
                        <!-- 称呼 -->
                        <div class="nhc-form-group">
                            <label class="nhc-form-label">对接人姓名 / 称呼 <span class="nhc-required">*</span></label>
                            <input type="text" name="name" required class="nhc-form-input" placeholder="如：张总监 / 李经理">
                        </div>
                        <!-- 电话 -->
                        <div class="nhc-form-group">
                            <label class="nhc-form-label">联系电话 / 手机 <span class="nhc-required">*</span></label>
                            <input type="text" name="phone" required class="nhc-form-input" placeholder="请填写您的联系手机">
                        </div>
                    </div>

                    <!-- 详细需求 -->
                    <div class="nhc-form-group">
                        <label class="nhc-form-label">业务背景与详细需求 <span class="nhc-required">*</span></label>
                        <textarea name="content" class="nhc-form-textarea" rows="4" placeholder="请简述您现存的系统痛点、期望实现的功能模块、预估上线周期或性能要求，以便架构师提前研判..."></textarea>
                    </div>

                    {if $captchaType == 'text'}
                    <div class="nhc-form-group">
                        <label class="nhc-form-label">安全验证码 <span class="nhc-required">*</span></label>
                        <div style="display: flex; gap: 12px; align-items: center;">
                            {include file="web/official_common/pc/captcha" event="register" type="$captchaType" /}
                        </div>
                    </div>
                    {/if}

                    <div style="margin-top: 24px;">
                        <button class="nhc-btn nhc-btn-primary nhc-btn-lg in_post" stu="1" type="button" style="width: 100%; justify-content: center;">
                            <span>立即提交需求评估</span>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                        </button>
                    </div>
                    <div class="nhc-form-privacy">
                        纳海川严格执行 ISO 27001 信息安全规范，承诺对您的商业需求与业务数据终身保密。
                    </div>
                </form>
            </div>

            <!-- 右侧：直通热线、实体地址与地图 (5列) -->
            <div class="nhc-contact-info-wrap">
                
                <!-- 直通热线与响应 SLA 卡片 -->
                <div class="nhc-contact-card nhc-corner-card" style="margin-bottom: 24px;">
                    <div class="nhc-info-badge">快速直联</div>
                    <h3 class="nhc-info-card-title">业务咨询与技术支持</h3>
                    
                    <div class="nhc-info-item">
                        <div class="nhc-info-icon">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                        </div>
                        <div class="nhc-info-text">
                            <div class="nhc-info-label">业务咨询专线</div>
                            <a href="tel:13984036826" class="nhc-info-val nhc-phone-link">13984036826</a>
                            <div class="nhc-info-note">工作日 09:00 - 18:00（资深架构师直连）</div>
                        </div>
                    </div>

                    <div class="nhc-info-item">
                        <div class="nhc-info-icon">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                        </div>
                        <div class="nhc-info-text">
                            <div class="nhc-info-label">技术委员会公用邮箱</div>
                            <div class="nhc-info-val">server@gynhc.com</div>
                            <div class="nhc-info-note">商务合作、白盒技术方案评审接收入口</div>
                        </div>
                    </div>

                    <div class="nhc-sla-bar">
                        <div class="nhc-sla-tag">SLA 响应承诺</div>
                        <div class="nhc-sla-text">工作日 2 小时内快速响应 · 24 小时内出具方案大纲</div>
                    </div>
                </div>

                <!-- 实体办公双基地与地图视窗 (Map & Addresses) -->
                <div class="nhc-contact-card nhc-contact-map nhc-corner-card">
                    <h3 class="nhc-info-card-title">物理实体办公基地</h3>
                    
                    <!-- 营销与销售中心 -->
                    <div class="nhc-location-item">
                        <div class="nhc-location-header">
                            <span class="nhc-seal" style="padding: 1px 6px; font-size: 10px;">营销中心</span>
                            <span class="nhc-location-title">花果园中环广场商务基地</span>
                        </div>
                        <p class="nhc-location-addr">
                            贵州省贵阳市南明区花果园遵义中路中环广场2号楼26楼20-21号
                        </p>
                    </div>

                    <!-- 研发与技术中心 -->
                    <div class="nhc-location-item" style="border-top: 1px solid var(--border-color); padding-top: 14px; margin-top: 14px;">
                        <div class="nhc-location-header">
                            <span class="nhc-seal" style="padding: 1px 6px; font-size: 10px;">技术中心</span>
                            <span class="nhc-location-title">经开区大数据安全产业基地</span>
                        </div>
                        <p class="nhc-location-addr">
                            贵州省贵阳市经开区数字经济产业园大数据安全产业园数楼4楼02-03号
                        </p>
                    </div>

                    <!-- 地图视窗 / 示意图 -->
                    <div class="nhc-map-visual" style="margin-top: 18px;">
                        <div class="nhc-map-canvas">
                            <div class="nhc-map-pin pin-1">
                                <span class="nhc-pin-pulse"></span>
                                <span class="nhc-pin-label">南明营销中心</span>
                            </div>
                            <div class="nhc-map-pin pin-2">
                                <span class="nhc-pin-pulse"></span>
                                <span class="nhc-pin-label">经开技术中心</span>
                            </div>
                            <div class="nhc-map-grid-bg"></div>
                        </div>
                        <div class="nhc-map-footer">
                            <span>贵阳核心数谷双基地联动 · 欢迎来访考察交流</span>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
</section>

<!-- 3. 常见技术咨询解答 -->
<section class="nhc-faq nhc-section-padding" style="background: var(--bg-secondary);">
    <div class="nhc-container">
        <div class="nhc-section-header">
            <div class="nhc-section-tag">
                <span class="nhc-seal">沟通须知</span>
                <span class="nhc-tag-text">COOPERATION FAQ</span>
            </div>
            <h2 class="nhc-section-title">初次对接常见问题</h2>
            <p class="nhc-section-desc">
                我们以务实坦诚的态度，提前解答您在商务与技术合作中最关注的核心疑问。
            </p>
            <div class="nhc-line-divider"><span></span></div>
        </div>

        <div class="nhc-faq-grid">
            <div class="nhc-faq-item">
                <h3 class="nhc-faq-question">提交需求后多久能收到初步方案？</h3>
                <p class="nhc-faq-answer">
                    我们在收到需求后 2 小时内会有资深解决方案架构师进行电话电话回访，并在 24 小时内免费出具针对业务痛点的初步技术拓扑与评估大纲。
                </p>
            </div>
            <div class="nhc-faq-item">
                <h3 class="nhc-faq-question">是否支持前期签署保密协议（NDA）？</h3>
                <p class="nhc-faq-answer">
                    完全支持。对于涉及敏感商业逻辑、政企业务规范或专属数据的项目，纳海川在深度技术交流前可先行签署具备法律效力的保密协议。
                </p>
            </div>
            <div class="nhc-faq-item">
                <h3 class="nhc-faq-question">是否支持技术架构师现场当面交流？</h3>
                <p class="nhc-faq-answer">
                    西南地区（贵阳及周边城市）可随时安排资深架构师上门沟通或邀请莅临纳海川基地；全国其他省市可安排腾讯会议/飞书高清视频技术研讨。
                </p>
            </div>
            <div class="nhc-faq-item">
                <h3 class="nhc-faq-question">定制开发的项目如何保障代码自主可控？</h3>
                <p class="nhc-faq-answer">
                    纳海川提供白盒源码交付协议，不设任何硬件锁、加密狗或暗门，交付全套源码、数据库设计字典及本地化持续集成编译指南。
                </p>
            </div>
        </div>
    </div>
</section>

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

{block name="js"}
<script src="__ADDON__/layui-v2.6.8/layui-v2.6.8/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    var captchaType = "{$captchaType}";
    layui.use(['layer'], function(){
        var layer = layui.layer;

        // 快捷标签选择
        document.querySelectorAll('.nhc-topic-tag').forEach(function(tag) {
            tag.addEventListener('click', function() {
                document.querySelectorAll('.nhc-topic-tag').forEach(function(t) { t.classList.remove('active'); });
                this.classList.add('active');
                var topic = this.getAttribute('data-topic');
                document.getElementById('contactTitle').value = topic;
            });
        });

        $('.in_post').click(function () {
            let that = this;
            let title = $("input[name='title']").val();
            let name = $("input[name='name']").val();
            let phone = $("input[name='phone']").val();
            let __token__ = $("input[name='__token__']").val();
            let content = $("textarea[name='content']").val();
            let captcha = $("input[name='captcha']").val();

            let stu = $('.in_post').attr('stu');
            if (stu != 1) {
                layer.msg("请勿重复点击提交");
                return false;
            }

            if (!title) {
                layer.msg("请填写需求意向主题");
                return false;
            }
            if (!name) {
                layer.msg("请填写您的姓名或称呼");
                return false;
            }
            if (!phone) {
                layer.msg("请填写联系电话");
                return false;
            }
            if (!content) {
                layer.msg("请填写详细需求与业务背景");
                return false;
            }
            if (captchaType == 'text'){
                if (!captcha) {
                    layer.msg("请填写安全验证码");
                    return false;
                }
            }

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

            $('.in_post').attr('stu', 2);

            axios.post('', data)
                .then(function (response) {
                    let data = response.data;
                    $('.in_post').attr('stu', 1);
                    if(data.code){
                        layer.alert("需求评估已成功提交！纳海川解决方案架构师将在 2 小时内与您联系对接。", {icon: 6, title: "提交成功"});
                        $("input[name='name']").val('');
                        $("input[name='phone']").val('');
                        $("textarea[name='content']").val('');
                        $("input[name='captcha']").val('');
                        return false;
                    }
                    layer.msg(data.msg, {icon: 5}, function(){
                        axios.get("{:addon_url('official/web.official_home/get_token')}", data)
                            .then(function (response) {
                                let res = response.data;
                                if (res.code == 1){
                                    $("input[name='__token__']").val(res.data)
                                }
                            });
                    });
                })
                .catch(function (error) {
                    $('.in_post').attr('stu', 1);
                    layer.msg("提交失败，请检查网络或直接拨打业务专线 13984036826");
                });
        });
    });
</script>
{/block}