@extends('storefront.layout', ['title' => 'Tstore · 扩展展示站'])

@section('hero')
<div class="hero-grid">
    <div class="hero-card">
        <h1>精选 Typecho 插件与主题展示</h1>
        <p>这里是展示前台，只负责展示站点里的插件、主题、分类、截图和版本信息，不直接暴露下载地址。</p>
        <div class="hero-meta">
            <div class="hero-stat"><strong>{{ $stats['packages'] }}</strong><span>已发布扩展</span></div>
            <div class="hero-stat"><strong>{{ $stats['plugins'] }}</strong><span>插件</span></div>
            <div class="hero-stat"><strong>{{ $stats['themes'] }}</strong><span>主题</span></div>
            <div class="hero-stat"><strong>{{ $stats['categories'] }}</strong><span>分类</span></div>
        </div>
    </div>
    <div class="hero-card">
        <h3 style="margin:0 0 10px;font-size:20px">当前站点定位</h3>
        <p>前台面向访客展示内容，后台则面向管理员，通过账号密码登录后维护扩展、分类、版本和 zip 发布。</p>
        <div class="card-actions" style="margin-top:18px">
            <a class="btn" href="{{ route('storefront.plugins') }}">查看插件</a>
            <a class="btn secondary" href="{{ route('storefront.themes') }}">查看主题</a>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="panel">
    <div class="section-head">
        <div>
            <h2>推荐插件</h2>
            <p>展示基础信息、版本兼容性与分类，不直接提供 zip 下载地址。</p>
        </div>
        <a class="btn secondary" href="{{ route('storefront.plugins') }}">查看全部插件</a>
    </div>
    <div class="grid">
        @forelse($featuredPlugins as $package)
            <div class="card">
                <div class="card-top">
                    @if($package->icon_url)
                        <img class="icon" src="{{ $package->icon_url }}" alt="{{ $package->name }}">
                    @else
                        <div class="icon"></div>
                    @endif
                    <div>
                        <div class="title">{{ $package->name }}</div>
                        <div class="muted">{{ $package->author ?: '未知作者' }} · {{ $package->latestStableVersion?->version ?: $package->latest_version }}</div>
                    </div>
                </div>
                <div class="summary">{{ $package->summary ?: '暂无摘要' }}</div>
                <div class="tags">
                    @foreach($package->categories as $category)
                        <span class="chip">{{ $category->name }}</span>
                    @endforeach
                </div>
                <div class="card-actions">
                    <a class="btn secondary" href="{{ route('storefront.show', [$package->type, $package->slug]) }}">查看详情</a>
                </div>
            </div>
        @empty
            <div class="empty">当前没有推荐插件。</div>
        @endforelse
    </div>
</div>

<div class="panel section">
    <div class="section-head">
        <div>
            <h2>推荐主题</h2>
            <p>适合做展示站首页，突出视觉风格、分类和版本信息。</p>
        </div>
        <a class="btn secondary" href="{{ route('storefront.themes') }}">查看全部主题</a>
    </div>
    <div class="grid">
        @forelse($featuredThemes as $package)
            <div class="card">
                <div class="card-top">
                    @if($package->icon_url)
                        <img class="icon" src="{{ $package->icon_url }}" alt="{{ $package->name }}">
                    @else
                        <div class="icon"></div>
                    @endif
                    <div>
                        <div class="title">{{ $package->name }}</div>
                        <div class="muted">{{ $package->author ?: '未知作者' }} · {{ $package->latestStableVersion?->version ?: $package->latest_version }}</div>
                    </div>
                </div>
                <div class="summary">{{ $package->summary ?: '暂无摘要' }}</div>
                <div class="tags">
                    @foreach($package->categories as $category)
                        <span class="chip">{{ $category->name }}</span>
                    @endforeach
                </div>
                <div class="card-actions">
                    <a class="btn secondary" href="{{ route('storefront.show', [$package->type, $package->slug]) }}">查看详情</a>
                </div>
            </div>
        @empty
            <div class="empty">当前没有推荐主题。</div>
        @endforelse
    </div>
</div>
@endsection