@extends('layouts.site', ['title' => $course['title'] ?? '課程介紹'])

@php
    $courseImage = $course['image'] ?? null;
@endphp

@section('seo_title', ($course['title'] ?? '課程介紹') . '｜怡SPA｜' . config('app.name'))
@section('seo_description', $course['short_description'] ?? '怡SPA 課程介紹與預約資訊。')
@section('seo_keywords', trim(implode(', ', array_filter([
    $course['title'] ?? null,
    '怡SPA',
    '課程介紹',
    'SPA 課程',
]))))
@section('canonical', route('pages.spa.courses.show', ['slug' => $course['slug'] ?? '']))
@section('og_image', $courseImage)
@section('og_image_alt', $course['title'] ?? '怡SPA 課程')

@push('structured_data')
    @php
        $schema = [
            '@context' => 'https://schema.org',
            '@type' => 'Course',
            'name' => $course['title'] ?? '怡SPA 課程',
            'description' => $course['short_description'] ?? $course['description'] ?? '怡SPA 課程介紹',
            'provider' => [
                '@type' => 'Organization',
                'name' => config('app.name'),
            ],
        ];
        if (filled($courseImage)) {
            $schema['image'] = [$courseImage];
        }
    @endphp
    <script type="application/ld+json">{!! json_encode($schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>
@endpush

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

@section('content')
    {{-- Hero / Page title --}}
    <section id="hero-section" class="relative bg-[#b6c800] 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.spa.index') }}" class="uppercase hover:text-white/85 transition-colors">怡SPA</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">
                        {{ $course['title'] ?? '課程介紹' }}
                    </h1>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-amber-100/70 px-6 py-14 md:px-12">
        @include('pages.spa.courses._body', ['course' => $course])
    </section>
    <section id="spa-booking" class="scroll-mt-28 bg-[#b6c800] px-6 py-4 md:px-12">
    </section>
@endsection
