@extends('layouts.site', ['title' => '設施介紹'])

@section('seo_title', '設施介紹｜' . config('app.name'))
@section('seo_description', '維達都會生活俱樂部各館別設施介紹。')
@section('seo_keywords', '設施介紹, 場館, 會館環境, 健身')
@section('canonical', route('pages.facilities.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')
    <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>

    <section id="facilities" class="relative z-10 bg-[#313131] px-6 py-20 md:px-12">
        <div class="mx-auto max-w-7xl">
            <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                @foreach (($clubs ?? []) as $club)
                    <article class="dsn-item-post">
                        <a href="{{ route('pages.facilities.show', ['slug' => $club['slug']]) }}" class="dsn-item-post__link">
                            <div class="box-content">
                                <div class="img-cat">
                                    <div class="box-image-bg">
                                        <img
                                            src="{{ $club['img'] ?? 'https://placehold.co/1200x800/png?text=Club' }}"
                                            class="cover-bg-img"
                                            alt="{{ $club['title'] ?? '設施介紹' }}"
                                            loading="lazy"
                                        >
                                    </div>

                                    <div class="cat" aria-label="Categories">
                                        <svg class="top-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve" aria-hidden="true">
                                            <path d="M98.1 0h1.9v51.9h-1.9c0-27.6-22.4-50-50-50V0h50z"></path>
                                        </svg>
                                        <svg class="bottom-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve" aria-hidden="true">
                                            <path d="M98.1 0h1.9v51.9h-1.9c0-27.6-22.4-50-50-50V0h50z"></path>
                                        </svg>

                                        @foreach (($club['cats'] ?? []) as $cat)
                                            <span>{{ $cat }}</span>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="post-content">
                                    <div class="post-info">
                                        <h2 class="post-title">{{ $club['title'] ?? '' }}</h2>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <x-coach-spotlight />
@endsection
