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

{block name="css"}
<style>
/* 移动端特定微调 */
.nhc-hero {
    padding-top: 100px;
    padding-bottom: 50px;
}
.nhc-hero-title {
    font-size: 28px;
    letter-spacing: 1px;
}
.nhc-hero-subtitle {
    font-size: 14px;
}
</style>
{/block}

{block name="content"}
<!-- 纳海川移动端 首页主体 开始 -->

<!-- 1. 高端全景首屏轮播图 (Mobile Hero Carousel) -->
<section class="nhc-hero-carousel-wrap nhc-lattice-pattern">
    <div class="nhc-carousel" id="nhcHeroCarousel">
        <div class="nhc-carousel-track">
            
            <!-- 幻灯片 1：领航篇 -->
            <div class="nhc-carousel-slide nhc-slide-theme-1 active" data-slide-index="0">
                <div class="nhc-container">
                    <div class="nhc-hero-content">
                        <div class="nhc-hero-badge">
                            <span class="nhc-seal">纳海川</span>
                            <span class="nhc-hero-badge-text">现代企业数字化底座与智能体定制专家</span>
                        </div>
                        <h1 class="nhc-hero-title">
                            海纳百川以成巨流 <br><span class="highlight">聚智能</span>以启新元
                        </h1>
                        <p class="nhc-hero-subtitle">
                            纳海川专注于为政企与高成长型企业构筑稳固的业务技术中台、全端移动生态与垂直领域 AI 智能体体系。
                        </p>
                        <div class="nhc-hero-cta">
                            <a href="#contact" class="nhc-btn nhc-btn-primary">
                                <span>预约专家咨询</span>
                            </a>
                            <a href="#products" class="nhc-btn nhc-btn-outline">
                                <span>浏览核心产品</span>
                            </a>
                        </div>
                        <div class="nhc-hero-metrics">
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">99.8<sub>%</sub></div>
                                <div class="nhc-metric-label">项目按期交付率</div>
                            </div>
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">50<sub>+</sub></div>
                                <div class="nhc-metric-label">自主软著资产</div>
                            </div>
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">200<sub>+</sub></div>
                                <div class="nhc-metric-label">政企标杆客户</div>
                            </div>
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">10<sub>+</sub></div>
                                <div class="nhc-metric-label">年软件工程沉淀</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 幻灯片 2：匠造篇 -->
            <div class="nhc-carousel-slide nhc-slide-theme-2" data-slide-index="1">
                <div class="nhc-container">
                    <div class="nhc-hero-content">
                        <div class="nhc-hero-badge">
                            <span class="nhc-seal">精工匠造</span>
                            <span class="nhc-hero-badge-text">企业中台 · 全端生态 · 源码交付</span>
                        </div>
                        <h1 class="nhc-hero-title">
                            经纬立骨铸基石 <br><span class="highlight">精工致远</span>赢未来
                        </h1>
                        <p class="nhc-hero-subtitle">
                            高并发微服务底层中台与跨端原生小程序生态，提供测试驱动开发与金融级安全私有化部署。
                        </p>
                        <div class="nhc-hero-cta">
                            <a href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}" class="nhc-btn nhc-btn-primary">
                                <span>软件开发服务</span>
                            </a>
                            <a href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}" class="nhc-btn nhc-btn-outline">
                                <span>查阅标杆案例</span>
                            </a>
                        </div>
                        <div class="nhc-hero-metrics">
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">&lt;50<sub>ms</sub></div>
                                <div class="nhc-metric-label">核心接口平均响应</div>
                            </div>
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">100<sub>%</sub></div>
                                <div class="nhc-metric-label">源码完整交付</div>
                            </div>
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">60<sub>fps</sub></div>
                                <div class="nhc-metric-label">全端流畅交互</div>
                            </div>
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">ISO<sub>9001</sub></div>
                                <div class="nhc-metric-label">研发质量严审</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 幻灯片 3：智元篇 -->
            <div class="nhc-carousel-slide nhc-slide-theme-3" data-slide-index="2">
                <div class="nhc-container">
                    <div class="nhc-hero-content">
                        <div class="nhc-hero-badge">
                            <span class="nhc-seal">智能跃升</span>
                            <span class="nhc-hero-badge-text">专属大模型 · 多智能体 · RAG 知识库</span>
                        </div>
                        <h1 class="nhc-hero-title">
                            格物致知启新智 <br><span class="highlight">人机协同</span>创非凡
                        </h1>
                        <p class="nhc-hero-subtitle">
                            深入垂直行业业务一线，将专属知识库与大模型深度融合，打造安全可控的政企高阶智能体体系。
                        </p>
                        <div class="nhc-hero-cta">
                            <a href="#contact" class="nhc-btn nhc-btn-primary">
                                <span>预约场景演示</span>
                            </a>
                            <a href="#services" class="nhc-btn nhc-btn-outline">
                                <span>了解智能体</span>
                            </a>
                        </div>
                        <div class="nhc-hero-metrics">
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">&lt;1.5<sub>s</sub></div>
                                <div class="nhc-metric-label">精准向量检索</div>
                            </div>
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">85<sub>%</sub></div>
                                <div class="nhc-metric-label">工单自动解决率</div>
                            </div>
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">Multi<sub>Agent</sub></div>
                                <div class="nhc-metric-label">多智能体协同调度</div>
                            </div>
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">0<sub>泄露</sub></div>
                                <div class="nhc-metric-label">私有化本地隔离</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 幻灯片 4：赋能篇 -->
            <div class="nhc-carousel-slide nhc-slide-theme-4" data-slide-index="3">
                <div class="nhc-container">
                    <div class="nhc-hero-content">
                        <div class="nhc-hero-badge">
                            <span class="nhc-seal">矩阵赋能</span>
                            <span class="nhc-hero-badge-text">商城 · 收银 · 进销存 · 云原生 SaaS</span>
                        </div>
                        <h1 class="nhc-hero-title">
                            积厚流光成重器 <br><span class="highlight">矩阵赋能</span>拓坦途
                        </h1>
                        <p class="nhc-hero-subtitle">
                            千万级真实交易峰值淬炼的标准成熟产品矩阵，支持即开即用公有云 SaaS 与私有化部署。
                        </p>
                        <div class="nhc-hero-cta">
                            <a href="#products" class="nhc-btn nhc-btn-primary">
                                <span>申请全系统演示</span>
                            </a>
                            <a href="#contact" class="nhc-btn nhc-btn-outline">
                                <span>咨询部署方案</span>
                            </a>
                        </div>
                        <div class="nhc-hero-metrics">
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">4<sub>大</sub></div>
                                <div class="nhc-metric-label">核心成熟商业产品</div>
                            </div>
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">10W<sub>+</sub></div>
                                <div class="nhc-metric-label">日交易订单承载力</div>
                            </div>
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">软硬<sub>一体</sub></div>
                                <div class="nhc-metric-label">收银智能硬件兼容</div>
                            </div>
                            <div class="nhc-metric-item">
                                <div class="nhc-metric-val">99.99<sub>%</sub></div>
                                <div class="nhc-metric-label">金融级高可用保障</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- 底部精美长条指示器与编号 -->
        <div class="nhc-carousel-indicators" id="nhcIndicators">
            <div class="nhc-carousel-dot active" data-goto="0">
                <span class="nhc-carousel-dot-num">01</span>
                <span class="nhc-carousel-dot-bar"></span>
            </div>
            <div class="nhc-carousel-dot" data-goto="1">
                <span class="nhc-carousel-dot-num">02</span>
                <span class="nhc-carousel-dot-bar"></span>
            </div>
            <div class="nhc-carousel-dot" data-goto="2">
                <span class="nhc-carousel-dot-num">03</span>
                <span class="nhc-carousel-dot-bar"></span>
            </div>
            <div class="nhc-carousel-dot" data-goto="3">
                <span class="nhc-carousel-dot-num">04</span>
                <span class="nhc-carousel-dot-bar"></span>
            </div>
        </div>
    </div>
</section>

<!-- 2. 服务入口 (Services Section) -->
<section id="services" class="nhc-services">
    <div class="nhc-container">
        <div class="nhc-section-header">
            <div class="nhc-section-tag">
                <span class="nhc-seal">服务矩阵</span>
                <span class="nhc-tag-text">SERVICES</span>
            </div>
            <h2 class="nhc-section-title" style="font-size: 26px;">三大核心服务 · 铸造数字生产力</h2>
            <div class="nhc-line-divider"><span></span></div>
        </div>

        <div class="nhc-services-grid">
            <div class="nhc-service-card">
                <span class="nhc-service-watermark">壹</span>
                <h3 class="nhc-service-title">软件开发</h3>
                <p class="nhc-service-desc">
                    定制企业级业务中台与私有化核心系统，解决高并发性能瓶颈、数据孤岛与复杂业务逻辑流转难题。
                </p>
                <ul class="nhc-service-list">
                    <li class="nhc-service-item">企业微服务与分布式高可用架构</li>
                    <li class="nhc-service-item">业务中台整合与跨系统数据打通</li>
                    <li class="nhc-service-item">金融级数据加密与私有化安全部署</li>
                </ul>
            </div>

            <div class="nhc-service-card">
                <span class="nhc-service-watermark">贰</span>
                <h3 class="nhc-service-title">APP与小程序定制</h3>
                <p class="nhc-service-desc">
                    覆盖全端移动生态，深度定制 iOS/Android 原生与跨平台 APP，无缝接入微信、支付宝及抖音小程序。
                </p>
                <ul class="nhc-service-list">
                    <li class="nhc-service-item">iOS / Android 跨平台高性能统一框架</li>
                    <li class="nhc-service-item">微信小程序、企业微信生态深度闭环</li>
                    <li class="nhc-service-item">蓝牙硬件与物联网 IoT 边缘设备对接</li>
                </ul>
            </div>

            <div class="nhc-service-card">
                <span class="nhc-service-watermark">叁</span>
                <h3 class="nhc-service-title">智能体开发</h3>
                <p class="nhc-service-desc">
                    聚焦垂直领域大模型工程化落地，研发具备深度业务推理、企业知识库检索（RAG）与自主工作流调度的 Agent。
                </p>
                <ul class="nhc-service-list">
                    <li class="nhc-service-item">私域知识库 RAG 向量检索与精准问答</li>
                    <li class="nhc-service-item">多智能体（Multi-Agent）协同决策与执行</li>
                    <li class="nhc-service-item">业务审批、数据分析与工单智能自动化</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- 3. 产品矩阵入口 (Products Section) -->
<section id="products" class="nhc-products">
    <div class="nhc-container">
        <div class="nhc-section-header">
            <div class="nhc-section-tag">
                <span class="nhc-seal">核心产品</span>
                <span class="nhc-tag-text">PRODUCTS</span>
            </div>
            <h2 class="nhc-section-title" style="font-size: 26px;">四大标准化产品矩阵</h2>
            <div class="nhc-line-divider"><span></span></div>
        </div>

        <div class="nhc-products-grid">
            <div class="nhc-product-card">
                <span class="nhc-product-type-badge">全渠道商城</span>
                <h3 class="nhc-product-name">商城</h3>
                <p class="nhc-product-desc">B2B2C 多商户入驻、社交裂变营销与全域私域流量精细化运营系统。</p>
            </div>
            <div class="nhc-product-card">
                <span class="nhc-product-type-badge">毫秒级收银</span>
                <h3 class="nhc-product-name">收银</h3>
                <p class="nhc-product-desc">软硬件一体智能收银系统，聚合支付秒级核销，断网离线平稳记账。</p>
            </div>
            <div class="nhc-product-card">
                <span class="nhc-product-type-badge">业财一体化</span>
                <h3 class="nhc-product-name">进销存</h3>
                <p class="nhc-product-desc">采购、销售、仓储与财务全链路打通，多仓实时调拨与智能补货预警。</p>
            </div>
            <div class="nhc-product-card">
                <span class="nhc-product-type-badge">多租户平台</span>
                <h3 class="nhc-product-name">SaaS版本</h3>
                <p class="nhc-product-desc">云原生高可用多租户架构，开箱即用免运维，弹性扩展金融级容灾。</p>
            </div>
        </div>
    </div>
</section>

<!-- 4. 案例入口 (Cases Section) -->
<section id="cases" class="nhc-cases">
    <div class="nhc-container">
        <div class="nhc-section-header">
            <div class="nhc-section-tag">
                <span class="nhc-seal">标杆案例</span>
                <span class="nhc-tag-text">CASES</span>
            </div>
            <h2 class="nhc-section-title" style="font-size: 26px;">精选实践成果 · 严谨数据验证</h2>
            <div class="nhc-line-divider"><span></span></div>
        </div>

        <div class="nhc-cases-grid">
            <div class="nhc-case-card">
                <span class="nhc-case-category">商贸流通</span>
                <h3 class="nhc-case-title">快消集团全渠道分销订货中台</h3>
                <div class="nhc-case-metrics-bar">
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">65%</div>
                        <div class="nhc-case-metric-sub">订单效率提升</div>
                    </div>
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">10W+</div>
                        <div class="nhc-case-metric-sub">日峰值订单</div>
                    </div>
                </div>
            </div>

            <div class="nhc-case-card">
                <span class="nhc-case-category">连锁零售</span>
                <h3 class="nhc-case-title">全国餐饮连锁收银与门店一体化</h3>
                <div class="nhc-case-metrics-bar">
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">70%</div>
                        <div class="nhc-case-metric-sub">结算耗时缩短</div>
                    </div>
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">300+</div>
                        <div class="nhc-case-metric-sub">门店稳定运行</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 5. 流程板块 (Process Section) -->
<section id="process" class="nhc-process">
    <div class="nhc-container">
        <div class="nhc-section-header">
            <div class="nhc-section-tag">
                <span class="nhc-seal">交付体系</span>
                <span class="nhc-tag-text">PROCESS</span>
            </div>
            <h2 class="nhc-section-title" style="font-size: 26px;">五步严谨工程法</h2>
            <div class="nhc-line-divider"><span></span></div>
        </div>

        <div class="nhc-process-flow">
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">01</div>
                <h4 class="nhc-process-step-title">需求深度研判</h4>
            </div>
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">02</div>
                <h4 class="nhc-process-step-title">架构严谨立骨</h4>
            </div>
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">03</div>
                <h4 class="nhc-process-step-title">敏捷测试驱动</h4>
            </div>
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">04</div>
                <h4 class="nhc-process-step-title">高压安全审计</h4>
            </div>
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">05</div>
                <h4 class="nhc-process-step-title">私有化与维保</h4>
            </div>
        </div>
    </div>
</section>

<!-- 6. 客户评价 (Testimonials Section) -->
<section class="nhc-testimonials">
    <div class="nhc-container">
        <div class="nhc-section-header">
            <div class="nhc-section-tag">
                <span class="nhc-seal">信赖之选</span>
                <span class="nhc-tag-text">TESTIMONIALS</span>
            </div>
            <h2 class="nhc-section-title" style="font-size: 26px;">客户信赖之选</h2>
            <div class="nhc-line-divider"><span></span></div>
        </div>
        <div class="nhc-testimonials-grid">
            <div class="nhc-testimonial-card">
                <p class="nhc-testimonial-text">
                    纳海川团队展现了极强的架构能力与业务敏锐度，为我们重构的订货中台平稳抗住大促峰值压力，库存对账零误差。
                </p>
                <div class="nhc-author-name">张总 · 供应链集团技术负责人</div>
            </div>
            <div class="nhc-testimonial-card">
                <p class="nhc-testimonial-text">
                    收银与门店进销存系统在 300 家连锁门店上线后运行极为稳定，离线记账功能解决了门店断网的大隐患。
                </p>
                <div class="nhc-author-name">李总 · 连锁餐饮运营副总裁</div>
            </div>
        </div>
    </div>
</section>

<!-- 7. 底部 CTA -->
<section id="contact" class="nhc-cta">
    <div class="nhc-container">
        <div class="nhc-cta-inner">
            <div class="nhc-cta-content">
                <h2 class="nhc-cta-title" style="font-size: 26px;">开启新一代数字化与智能化升级</h2>
                <p class="nhc-cta-desc">
                    资深系统架构师团队随时待命，为您提供深度业务剖析与技术方案规划。
                </p>
            </div>
            <div class="nhc-cta-buttons" style="margin-top: 20px;">
                <a href="tel:{:__config('site_mobile','value')}" class="nhc-btn nhc-cta-btn-light">
                    <span>致电专家咨询</span>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- 移动端首页主体 结束 -->
{/block}

{block name="js"}
<script>
document.addEventListener('DOMContentLoaded', function() {
    var carousel = document.getElementById('nhcHeroCarousel');
    if (!carousel) return;

    var slides = carousel.querySelectorAll('.nhc-carousel-slide');
    var dots = carousel.querySelectorAll('.nhc-carousel-dot');
    var currentIndex = 0;
    var totalSlides = slides.length;
    var autoPlayTimer = null;
    var intervalDuration = 5500;

    function goToSlide(index) {
        if (index < 0) {
            index = totalSlides - 1;
        } else if (index >= totalSlides) {
            index = 0;
        }
        
        slides.forEach(function(slide, i) {
            if (i === index) {
                slide.classList.add('active');
            } else {
                slide.classList.remove('active');
            }
        });

        dots.forEach(function(dot, i) {
            if (i === index) {
                dot.classList.add('active');
            } else {
                dot.classList.remove('active');
            }
        });

        currentIndex = index;
    }

    function nextSlide() {
        goToSlide(currentIndex + 1);
    }

    function prevSlide() {
        goToSlide(currentIndex - 1);
    }

    function startAutoPlay() {
        stopAutoPlay();
        autoPlayTimer = setInterval(nextSlide, intervalDuration);
    }

    function stopAutoPlay() {
        if (autoPlayTimer) {
            clearInterval(autoPlayTimer);
            autoPlayTimer = null;
        }
    }

    dots.forEach(function(dot) {
        dot.addEventListener('click', function() {
            var targetIdx = parseInt(this.getAttribute('data-goto'), 10);
            if (!isNaN(targetIdx)) {
                goToSlide(targetIdx);
                startAutoPlay();
            }
        });
    });

    // 移动端全屏滑动手势优化
    var touchStartX = 0;
    var touchEndX = 0;
    carousel.addEventListener('touchstart', function(e) {
        touchStartX = e.changedTouches[0].screenX;
        stopAutoPlay();
    }, { passive: true });

    carousel.addEventListener('touchend', function(e) {
        touchEndX = e.changedTouches[0].screenX;
        if (touchStartX - touchEndX > 45) {
            nextSlide();
        } else if (touchEndX - touchStartX > 45) {
            prevSlide();
        }
        startAutoPlay();
    }, { passive: true });

    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            stopAutoPlay();
        } else {
            startAutoPlay();
        }
    });

    startAutoPlay();
});
</script>
{/block}