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

{block name="content"}
<!-- 纳海川官方网站 现代中式技术洞察与新闻资讯列表 开始 -->

<!-- 1. 顶部 Hero Banner -->
<section class="nhc-article-hero">
    <div class="nhc-container">
        <div class="nhc-article-hero-inner">
            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
                <span class="nhc-seal">技术洞察</span>
                <span style="font-size: 13px; color: var(--primary); font-weight: 600; letter-spacing: 1px;">ENGINEERING & PERSPECTIVES</span>
            </div>
            <h1 class="nhc-article-hero-title">
                贵阳纳海川科技 · 技术洞察与研发动态
            </h1>
            <p class="nhc-article-hero-subtitle">
                扎根西南数谷，专注企业级软件定制开发、高可用微服务中台、移动端全生态与私域 AI 智能体工程落地。深入解构系统架构设计考量，沉淀务实严谨的工程经验。
            </p>
        </div>
    </div>
</section>

<!-- 2. 主体内容区 -->
<section style="background: var(--bg-primary); padding: 40px 0 72px 0;">
    <div class="nhc-container">

        <!-- 分类导航栏 -->
        <div class="nhc-category-bar">
            <div class="nhc-category-tags">
                <a href="{:addon_url('official/web.official_journalism/list',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.pid')])}" 
                   class="nhc-category-tag {if input('param.sid') == input('param.pid') || empty(input('param.sid'))}active{/if}">
                    <span>全部动态</span>
                </a>
                {foreach $res['son'] as $subcat}
                <a href="{:get_cate_url($subcat)}" 
                   class="nhc-category-tag {if $subcat['is_choose']}active{/if}">
                    <span>{:ze($subcat,'name')}</span>
                </a>
                {/foreach}
            </div>
            <div style="font-size: 13px; color: var(--text-muted);">
                <span>严谨工程实录 · 持续技术沉淀</span>
            </div>
        </div>

        <!-- 文章网格 -->
        {if count($data) > 0}
        <div class="nhc-article-grid">
            {foreach $data as $index => $item}
            <article class="nhc-article-card">
                <a href="{:addon_url('official/web.official_journalism/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}" class="nhc-article-card-thumb">
                    {if !empty($item['image'])}
                    <img src="{$item['image']}" alt="{$item['title']}" loading="lazy">
                    {else/}
                    <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #F1F5F9; color: #94A3B8; font-size: 14px;">纳海川技术洞察</div>
                    {/if}
                </a>
                <div class="nhc-article-card-body">
                    <div class="nhc-article-meta">
                        <span class="nhc-article-category-badge">{if !empty($son_data)}{:ze($son_data,'name')}{else/}{:ze($res,'name')}{/if}</span>
                        <span>{:date('Y-m-d', $item['createtime'])}</span>
                        <span>·</span>
                        <span>纳海川研发</span>
                    </div>
                    <a href="{:addon_url('official/web.official_journalism/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}">
                        <h2 class="nhc-article-card-title">{$item['title']}</h2>
                    </a>
                    <p class="nhc-article-card-desc">
                        {$item['subheading']}
                    </p>
                    <div class="nhc-article-card-footer">
                        <span>阅读耗时约 4 分钟</span>
                        <a href="{:addon_url('official/web.official_journalism/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}" class="nhc-article-read-btn">
                            <span>阅读全文</span>
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                        </a>
                    </div>
                </div>
            </article>
            {/foreach}
        </div>

        <!-- 现代化分页组件 -->
        <div class="page_custom" style="display: flex; justify-content: center; margin-top: 40px;">
            <div class="page_son">
                {$data->render(['pid'=>(int)input('param.pid'),'sid'=>(int)input('param.sid')])}
            </div>
        </div>

        {else/}
        <!-- 空状态展示 -->
        <div style="text-align: center; padding: 80px 20px; background: #F8FAFC; border: 1px solid var(--border-color); border-radius: var(--radius-sm);">
            <div class="nhc-seal" style="margin-bottom: 12px;">纳海川</div>
            <p style="color: var(--text-secondary); font-size: 15px;">暂无相关动态，技术团队持续更新中</p>
        </div>
        {/if}

    </div>
</section>
<!-- 现代中式技术洞察与新闻资讯列表 结束 -->
{/block}