@extends('layouts.app')

@section('title', '技术论坛 - 深圳市云创芯电子有限公司')

@section('content')
<section class="px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
    <div class="max-w-8xl mx-auto">
        <div class="mb-8">
            <h1 class="text-2xl font-bold tracking-tight text-fg sm:text-3xl">技术论坛</h1>
            <p class="mt-2 text-sm text-muted">与工程师交流选型、调试与量产经验。</p>
        </div>

        @guest
            <div class="mb-8 flex flex-col gap-4 rounded-lg border border-line bg-surface p-5 shadow-soft sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-center gap-3">
                    <span class="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-primary-soft text-primary">
                        <x-icon name="chat" :size="24" />
                    </span>
                    <p class="text-lg text-fg">登录后即可参与版块讨论、发帖与回复。</p>
                </div>
                <div class="flex items-center gap-3">
                    <a href="{{ url('/login') }}" class="inline-flex items-center justify-center rounded-lg border border-line px-6 py-2.5 text-lg font-semibold text-fg transition hover:border-primary hover:text-primary">登录</a>
                    <a href="{{ url('/register') }}" class="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-2.5 text-lg font-semibold text-white transition hover:bg-primary-hover">注册</a>
                </div>
            </div>
        @endguest

        <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @forelse ($boards as $board)
                <a href="{{ route('forum.board', $board->slug) }}" class="group flex flex-col rounded-lg border border-line bg-surface p-6 shadow-soft transition hover:-translate-y-0.5 hover:border-primary hover:shadow-card">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-soft text-primary">
                        <x-icon name="chat" :size="22" />
                    </span>
                    <h3 class="mt-4 text-lg font-semibold text-fg transition group-hover:text-primary">{{ $board->name }}</h3>
                    <p class="mt-2 line-clamp-2 text-sm text-muted">{{ $board->description }}</p>
                    <p class="mt-4 text-xs text-muted">{{ $board->threads_count }} 个帖子</p>
                </a>
            @empty
                <p class="text-sm text-muted">版块即将开放，敬请期待。</p>
            @endforelse
        </div>
    </div>
</section>
@endsection