@extends('layouts.app')

@section('title', '网站地图 - ' . App\Models\Setting::get('site_name', '深圳市云创芯电子有限公司'))
@section('description', '网站地图：汇总本站全部主要页面与内容入口，便于浏览与检索。')

@section('content')
    {{-- Hero --}}
    <section class="px-4 sm:px-6 lg:px-8 pt-14 lg:pt-20 pb-6">
        <div class="max-w-8xl mx-auto">
            <p class="text-sm font-medium tracking-wide text-primary">网站地图</p>
            <h1 class="mt-3 max-w-3xl text-3xl font-bold leading-tight tracking-tight text-fg sm:text-4xl lg:text-5xl">
                全站页面与内容导航
            </h1>
            <p class="mt-5 max-w-2xl text-base text-muted lg:text-lg">
                这里汇总了本站的主要页面与内容入口。需要提交给搜索引擎的机读版本，请使用
                <a href="{{ url('/sitemap.xml') }}" class="text-primary hover:underline">sitemap.xml</a>。
            </p>
        </div>
    </section>

    {{-- 核心页面 --}}
    <section class="px-4 sm:px-6 lg:px-8 py-10">
        <div class="max-w-8xl mx-auto grid gap-10 lg:grid-cols-3">
            <div class="lg:col-span-1">
                <h2 class="text-xl font-bold tracking-tight text-fg">核心页面</h2>
                <p class="mt-3 text-sm text-muted">企业官网的主要栏目。</p>
            </div>
            <div class="lg:col-span-2">
                <div class="grid gap-4 sm:grid-cols-2">
                    <a href="{{ url('/') }}" class="group rounded-2xl border border-line bg-surface p-5 transition-colors hover:border-primary/40 hover:bg-surface-2">
                        <p class="text-base font-semibold text-fg group-hover:text-primary">首页</p>
                        <p class="mt-1 text-sm text-muted">企业概览与核心优势。</p>
                    </a>
                    <a href="{{ url('/about') }}" class="group rounded-2xl border border-line bg-surface p-5 transition-colors hover:border-primary/40 hover:bg-surface-2">
                        <p class="text-base font-semibold text-fg group-hover:text-primary">关于我们</p>
                        <p class="mt-1 text-sm text-muted">公司简介、能力与价值观。</p>
                    </a>
                    <a href="{{ url('/products') }}" class="group rounded-2xl border border-line bg-surface p-5 transition-colors hover:border-primary/40 hover:bg-surface-2">
                        <p class="text-base font-semibold text-fg group-hover:text-primary">产品服务</p>
                        <p class="mt-1 text-sm text-muted">芯片产品中心与方案。</p>
                    </a>
                    <a href="{{ url('/contact') }}" class="group rounded-2xl border border-line bg-surface p-5 transition-colors hover:border-primary/40 hover:bg-surface-2">
                        <p class="text-base font-semibold text-fg group-hover:text-primary">联系我们</p>
                        <p class="mt-1 text-sm text-muted">商务合作与技术支持。</p>
                    </a>
                    <a href="{{ url('/articles') }}" class="group rounded-2xl border border-line bg-surface p-5 transition-colors hover:border-primary/40 hover:bg-surface-2">
                        <p class="text-base font-semibold text-fg group-hover:text-primary">技术文章</p>
                        <p class="mt-1 text-sm text-muted">设计笔记与应用指南。</p>
                    </a>
                    <a href="{{ url('/glossary') }}" class="group rounded-2xl border border-line bg-surface p-5 transition-colors hover:border-primary/40 hover:bg-surface-2">
                        <p class="text-base font-semibold text-fg group-hover:text-primary">术语库</p>
                        <p class="mt-1 text-sm text-muted">接口与快充专业术语。</p>
                    </a>
                    <a href="{{ url('/forum') }}" class="group rounded-2xl border border-line bg-surface p-5 transition-colors hover:border-primary/40 hover:bg-surface-2">
                        <p class="text-base font-semibold text-fg group-hover:text-primary">技术论坛</p>
                        <p class="mt-1 text-sm text-muted">工程师交流与答疑。</p>
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- 产品中心 --}}
    @if ($products->isNotEmpty())
        <section class="px-4 sm:px-6 lg:px-8 py-10 bg-surface">
            <div class="max-w-8xl mx-auto grid gap-10 lg:grid-cols-3">
                <div class="lg:col-span-1">
                    <h2 class="text-xl font-bold tracking-tight text-fg">产品中心</h2>
                    <p class="mt-3 text-sm text-muted">共 {{ $products->count() }} 款已发布产品。</p>
                </div>
                <div class="lg:col-span-2">
                    <ul class="divide-y divide-line rounded-2xl border border-line bg-surface">
                        @foreach ($products as $p)
                            <li>
                                <a href="{{ route('products.show', $p->slug) }}" class="flex items-center justify-between gap-4 px-5 py-3.5 transition-colors hover:bg-surface-2">
                                    <span class="text-[15px] font-medium text-fg">{{ $p->name }}</span>
                                    <span class="text-sm text-muted">{{ $p->model ?: '查看详情' }} →</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </section>
    @endif

    {{-- 技术文章 --}}
    @if ($articles->isNotEmpty())
        <section class="px-4 sm:px-6 lg:px-8 py-10">
            <div class="max-w-8xl mx-auto grid gap-10 lg:grid-cols-3">
                <div class="lg:col-span-1">
                    <h2 class="text-xl font-bold tracking-tight text-fg">技术文章</h2>
                    <p class="mt-3 text-sm text-muted">共 {{ $articles->count() }} 篇已发布文章。</p>
                </div>
                <div class="lg:col-span-2">
                    <ul class="divide-y divide-line rounded-2xl border border-line bg-surface">
                        @foreach ($articles as $a)
                            <li>
                                <a href="{{ route('articles.show', $a->slug) }}" class="flex items-center justify-between gap-4 px-5 py-3.5 transition-colors hover:bg-surface-2">
                                    <span class="text-[15px] font-medium text-fg">{{ $a->title }}</span>
                                    <span class="shrink-0 text-sm text-muted">→</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </section>
    @endif

    {{-- 术语库 --}}
    @if ($terms->isNotEmpty())
        <section class="px-4 sm:px-6 lg:px-8 py-10 bg-surface">
            <div class="max-w-8xl mx-auto grid gap-10 lg:grid-cols-3">
                <div class="lg:col-span-1">
                    <h2 class="text-xl font-bold tracking-tight text-fg">术语库</h2>
                    <p class="mt-3 text-sm text-muted">共 {{ $terms->count() }} 条术语。</p>
                </div>
                <div class="lg:col-span-2">
                    <div class="flex flex-wrap gap-2.5">
                        @foreach ($terms as $g)
                            <a href="{{ route('glossary.show', $g->slug) }}" class="rounded-full border border-line bg-surface px-4 py-1.5 text-sm text-fg transition-colors hover:border-primary/40 hover:text-primary">
                                {{ $g->term }}
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif
@endsection