@extends('layouts.site', ['title' => '最新消息'])

@section('seo_title', '最新消息｜' . config('app.name'))
@section('seo_description', '維達都會生活俱樂部最新消息與活動資訊。')
@section('seo_keywords', '最新消息, 活動資訊, 會館公告')
@section('canonical', route('pages.news.index'))

@section('body_class', 'home-page')

@push('head')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Mr+Dafoe&display=swap" rel="stylesheet">
@endpush

@section('content')
    {{-- Hero / Page title --}}
    <section id="hero-section" class="relative bg-[#0e0e0e] px-6 pt-36 md:pt-48 lg:pt-56 pb-8 lg:pb-12 md:px-12">
        <div class="mx-auto max-w-7xl">
            <div class="flex items-end justify-end">
                <div class="text-right">
                    <nav aria-label="Breadcrumb" class="flex justify-end">
                        <ol class="flex items-center gap-x-1 text-xs font-semibold tracking-[0.2em] text-white/60">
                            <li>
                                <a href="{{ route('pages.home') }}" class="uppercase hover:text-white/85 transition-colors">HOME</a>
                            </li>
                            <li aria-hidden="true" class="inline-flex items-center">
                                <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4 text-white/60">
                                    <path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </li>
                            <li>
                                <span aria-current="page">最新消息</span>
                            </li>
                        </ol>
                    </nav>
                    <h1 class="mt-1 lg:mt-3 text-4xl md:text-5xl font-bold tracking-tight text-white">
                        最新消息
                    </h1>
                </div>
            </div>
        </div>
    </section>

    {{-- News list --}}
    <section class="bg-[#313131] px-6 py-16 md:px-12">
        <div class="mx-auto max-w-4xl">
            <div class="">
                @forelse ($posts as $post)
                    <div class="border-b border-white/10 py-3 last:border-b-0">
                        <a
                            href="{{ route('pages.news.show', ['slug' => $post->slug]) }}"
                            class="group flex min-w-0 items-center gap-1 lg:gap-4 px-0 md:px-6 py-3 text-white hover:bg-white/5 rounded-3xl transition-colors"
                        >
                            <div class="shrink-0">
                                <span class="inline-flex items-center rounded-full bg-white/35 px-3 lg:px-6 py-2 text-xs lg:text-sm font-semibold tracking-wide text-white/90">
                                    {{ $post->venue_name ?? '全館' }}
                                </span>
                            </div>

                            <div class="w-20 shrink-0 whitespace-nowrap text-sm lg:text-base text-center text-white/60">
                                {{ optional($post->published_at)->format('n月j日') ?? '' }}
                            </div>

                            <div class="flex-1 min-w-0">
                                <div class="truncate text-base lg:font-semibold tracking-wide">
                                    {{ $post->title }}
                                </div>
                            </div>

                            <div class="shrink-0">
                                <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6 lg:h-10 lg:w-10 transition-all group-hover:text-red-600 group-hover:translate-x-2" aria-hidden="true">
                                    <path d="M7 12h10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                                    <path d="M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </div>
                        </a>
                    </div>
                @empty
                    <div class="py-10 text-center text-white/70">
                        目前尚無最新消息。
                    </div>
                @endforelse
            </div>

            <div class="mt-10">
                {{ $posts->links() }}
            </div>
        </div>
    </section>

    <x-coach-spotlight />
@endsection
