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

@php
    $coverUrl = $post->cover_image_path
        ? (\App\Support\Uploads\ImageVariants::mediumUrl($post->cover_image_path, 'public') ?? \Illuminate\Support\Facades\Storage::disk('public')->url($post->cover_image_path))
        : 'https://placehold.co/900x1200/png?text=News+Poster';
    $publishedAt = optional($post->published_at ?? $post->created_at)->toIso8601String();
    $modifiedAt = optional($post->updated_at ?? $post->published_at ?? $post->created_at)->toIso8601String();
@endphp

@section('seo_title', ($post->title ?? '最新消息') . '｜' . config('app.name'))
@section('seo_description', $post->summary ?: '維達都會生活俱樂部最新消息與活動資訊。')
@section('seo_keywords', trim(implode(', ', array_filter([
    $post->title ?? null,
    $post->venue_name ?? null,
    '最新消息',
    config('app.name'),
]))))
@section('canonical', route('pages.news.show', ['slug' => $post->slug]))
@section('og_type', 'article')
@section('og_image', $coverUrl)
@section('og_image_alt', $post->title ?? '最新消息')
@section('article_published_time', $publishedAt)
@section('article_modified_time', $modifiedAt)

@push('structured_data')
    @php
        $schema = [
            '@context' => 'https://schema.org',
            '@type' => 'NewsArticle',
            'headline' => $post->title ?? '最新消息',
            'datePublished' => $publishedAt,
            'dateModified' => $modifiedAt,
            'image' => [$coverUrl],
            'mainEntityOfPage' => [
                '@type' => 'WebPage',
                '@id' => route('pages.news.show', ['slug' => $post->slug]),
            ],
            'author' => [
                '@type' => 'Organization',
                'name' => config('app.name'),
            ],
            'publisher' => [
                '@type' => 'Organization',
                'name' => config('app.name'),
            ],
        ];
    @endphp
    <script type="application/ld+json">{!! json_encode($schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>
@endpush

@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>
                                <a href="{{ route('pages.news.index') }}" class="uppercase hover:text-white/85 transition-colors">NEWS</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">
                        {{ $post->title }}
                    </h1>
                </div>
            </div>
        </div>
    </section>

    {{-- News detail --}}
    <section class="bg-[#313131] px-6 py-16 md:px-12">
        <div class="mx-auto max-w-5xl">
            <div class="grid gap-10 md:grid-cols-12 md:items-start">
                <div class="md:col-span-6">
                    <div class="overflow-hidden rounded-[26px] bg-white/5 shadow-2xl">
                        <img
                            src="{{ $coverUrl }}"
                            alt="{{ $post->title }}"
                            class="block w-full object-cover"
                            loading="lazy"
                        >
                    </div>
                </div>

                <div class="md:col-span-6 text-white/80">
                    <div class="flex flex-wrap items-center gap-6 text-sm text-white/55 border-b border-white/10 pb-4 mb-4">
                        <div class="inline-flex items-center gap-2">
                            <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" aria-hidden="true">
                                <path d="M8 7V5m8 2V5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                                <rect x="3" y="6" width="18" height="15" rx="2" stroke="currentColor" stroke-width="2" />
                            </svg>
                            <span>{{ optional($post->published_at)->format('Y年n月j日') ?? '' }}</span>
                        </div>
                        <div class="inline-flex items-center gap-2">
                            <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" aria-hidden="true">
                                <path d="M12 21s7-6.4 7-12a7 7 0 1 0-14 0c0 5.6 7 12 7 12z" stroke="currentColor" stroke-width="2" />
                                <circle cx="12" cy="9" r="2" stroke="currentColor" stroke-width="2" />
                            </svg>
                            <span>{{ $post->venue_name ?? '全館' }}</span>
                        </div>
                    </div>

                    <div class="mt-8 space-y-4 text-base 2xl:text-lg leading-7">
                        @if (filled($post->summary))
                            <div class="font-semibold text-red-500">
                                {{ $post->summary }}
                            </div>
                        @endif

                        @if (filled($post->content))
                            <div class="space-y-4">
                                {!! $post->content !!}
                            </div>
                        @else
                            <p>（此則消息尚未填寫內容）</p>
                        @endif
                    </div>
                </div>
            </div>

            <div class="mt-12 border-t border-white/10 pt-6">
                <div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
                    <div class="flex items-center gap-3">
                        <!-- AddToAny BEGIN -->
                        <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
                            <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
                            <a class="a2a_button_facebook"></a>
                            <a class="a2a_button_facebook_messenger"></a>
                            <a class="a2a_button_line"></a>
                            <a class="a2a_button_wechat"></a>
                            <a class="a2a_button_threads"></a>
                            <a class="a2a_button_x"></a>
                        </div>
                        <script async src="https://static.addtoany.com/menu/page.js"></script>
                        <!-- AddToAny END -->
                    </div>

                    <div class="group dsn-btn dsn-btn-shape d-flex">
                        <a class="button bg-red-600 group-hover:bg-red-500 " href="{{ route('pages.news.index') }}">
                            <span class="title-btn">
                                <span>返回列表</span>
                            </span>
                        </a>

                        <span class="icon bg-red-600 group-hover:bg-red-500 text-white group-hover:text-white" aria-hidden="true">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="rotate-180">
                                <path d="M328 96h24v288h-48V177.9L81 401l-17 17-33.9-34 17-17 223-223H64V96h264z"></path>
                            </svg>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <x-coach-spotlight />
@endsection
