@extends('layouts.site')

@section('page_class', 'page-guides page-detail')
@section('title', $item->seo_title ?: $item->title.' - AI教程')
@section('meta_description', $item->seo_description ?: $item->excerpt)
@section('canonical', $item->canonical_url ?: route('guides.show', $item->slug))

@section('head')
<script type="application/ld+json">
{!! json_encode([
    '@context' => 'https://schema.org',
    '@type' => 'TechArticle',
    'headline' => $item->title,
    'description' => $item->excerpt,
    'datePublished' => $item->published_at?->toIso8601String(),
    'dateModified' => $item->updated_at?->toIso8601String(),
    'mainEntityOfPage' => route('guides.show', $item->slug),
], JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT) !!}
</script>
@endsection

@section('content')
<section class="module-hero">
    <div class="position-relative">
        <span class="hero-chip mb-3"><i class="bi bi-journal-code"></i> {{ strtoupper($item->difficulty ?? 'guide') }}</span>
        <h1 class="h2 fw-bold mb-2">{{ $item->h1 ?: $item->title }}</h1>
        <p class="hero-subtext">{{ $item->excerpt }}</p>
    </div>
</section>

<div class="module-grid">
    <div>
        <article class="surface-card p-3 p-lg-4">
            <div class="md-content detail-content">{!! $bodyHtml !!}</div>
        </article>
    </div>

    <aside>
        <section class="surface-card p-3 p-lg-4 mb-3">
            <h3 class="section-title mb-3">学习信息</h3>
            <ul class="list-unstyled small mb-0">
                <li class="mb-2">难度：<strong>{{ $item->difficulty }}</strong></li>
                <li class="mb-2">发布时间：<strong>{{ $item->published_at?->format('Y-m-d H:i') ?? '-' }}</strong></li>
                <li>最后更新：<strong>{{ $item->updated_at?->format('Y-m-d H:i') ?? '-' }}</strong></li>
            </ul>
        </section>

        <section class="surface-card p-3 mb-3">
            <h3 class="section-title mb-3">相关工具</h3>
            @forelse($sidebarTools as $tool)
                <article class="pb-2 mb-2 border-bottom" style="border-color:var(--line)!important;">
                    <a class="fw-semibold text-decoration-none" href="{{ route('tools.show', $tool->slug) }}">{{ $tool->name }}</a>
                    <div class="small text-muted-soft">{{ $tool->pricing_type }}</div>
                </article>
            @empty
                <p class="text-muted-soft small mb-0">暂无工具</p>
            @endforelse
        </section>

        <section class="surface-card p-3">
            <h3 class="section-title mb-3">模型推荐</h3>
            @forelse($sidebarModels as $model)
                <article class="pb-2 mb-2 border-bottom" style="border-color:var(--line)!important;">
                    <a class="fw-semibold text-decoration-none" href="{{ route('models.show', $model->slug) }}">{{ $model->name }}</a>
                    <div class="small text-muted-soft">综合 {{ $model->total_score }} 分</div>
                </article>
            @empty
                <p class="text-muted-soft small mb-0">暂无模型</p>
            @endforelse
        </section>
    </aside>
</div>
@endsection