@php
    $course = $course ?? [];
    $showBackLink = $showBackLink ?? true;
    $catLabel = $course['category'] ?? '課程';
@endphp

<div class="mx-auto max-w-5xl pt-6">
    {{-- Hero image --}}
    <article class="dsn-item-post">
        <div class="box-content">
            <div class="img-cat relative">
                <div class="box-image-bg relative overflow-hidden rounded-[28px] bg-black/10 aspect-[21/9]">
                    <img
                        src="{{ $course['image'] ?? '' }}"
                        alt="{{ $course['title'] ?? '課程' }}"
                        class="cover-bg-img block h-full w-full object-cover"
                        loading="lazy"
                        decoding="async"
                    >
                </div>

                <div
                    class="cat absolute right-0 top-0 z-10 flex items-center bg-amber-100 pl-[15px] pb-[10px] rounded-bl-[15px]"
                    aria-label="Categories"
                >
                    <svg class="top-svg pointer-events-none absolute h-10 w-10 text-neutral-800/90" 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" style="top:-1px;left:0;transform:translateX(-100%);fill:#fef3c6;">
                        <path d="M98.1 0h1.9v51.9h-1.9c0-27.6-22.4-50-50-50V0h50z"></path>
                    </svg>
                    <svg class="bottom-svg pointer-events-none absolute h-10 w-10 text-neutral-800/90" 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" style="bottom:1px;right:-2px;transform:translateY(100%);fill:#fef3c6;">
                        <path d="M98.1 0h1.9v51.9h-1.9c0-27.6-22.4-50-50-50V0h50z"></path>
                    </svg>

                    <span class="rounded-full bg-black px-4 py-2 text-sm font-semibold tracking-wide text-white leading-none whitespace-nowrap">
                        {{ $catLabel }}
                    </span>
                </div>
            </div>
        </div>
    </article>

    <div class="mt-10 grid grid-cols-1 gap-10 lg:grid-cols-12 lg:gap-12">
        {{-- Left copy --}}
        <div class="lg:col-span-6">
            <h1 class="text-2xl font-bold tracking-tight text-neutral-800 md:text-3xl">
                {{ $course['title'] ?? '課程介紹' }}
            </h1>

            @if (filled($course['description'] ?? null))
                <div class="course-description mt-6 max-w-2xl text-sm leading-relaxed text-neutral-700">
                    {!! $course['description'] !!}
                </div>
            @elseif (filled($course['short_description'] ?? null))
                <p class="mt-6 max-w-2xl text-sm leading-relaxed text-neutral-700">
                    {{ $course['short_description'] }}
                </p>
            @endif
        </div>

        {{-- Right cards --}}
        <div class="lg:col-span-6">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="relative overflow-hidden rounded-[22px] bg-white/90 p-6">
                    <div class="absolute right-4 top-4 text-neutral-800/10" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" class="h-16 w-16">
                            <path d="M12 7v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" />
                        </svg>
                    </div>

                    <div class="text-xs font-semibold tracking-[0.18em] text-neutral-600">課程時間</div>
                    <div class="mt-4 text-2xl font-bold text-neutral-800">
                        {{ $course['duration'] ?? '—' }}
                    </div>
                </div>

                <div class="relative overflow-hidden rounded-[22px] bg-white/90 p-6">
                    <div class="absolute right-4 top-4 text-neutral-800/10" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" class="h-16 w-16">
                            <path d="M7 10V7a5 5 0 0110 0v3" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                            <path d="M6 10h12l-1 11H7L6 10z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
                            <path d="M10 14h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                        </svg>
                    </div>

                    <div class="text-xs font-semibold tracking-[0.18em] text-neutral-600">{{ $course['price_label'] ?? '會員優惠價' }}</div>
                    <div class="mt-4 text-2xl font-bold text-neutral-800">
                        {{ $course['price'] ?? '—' }}
                    </div>
                </div>

                <div class="sm:col-span-2 overflow-hidden rounded-[22px] bg-white/90 p-6">
                    <div class="group flex items-center justify-between gap-4">
                        <div class="text-sm font-semibold text-neutral-700">課程諮詢</div>

                        <div class="flex items-center">
                            <div class="group dsn-btn dsn-btn-shape d-flex">
                                <a class="button bg-[#b6c800] group-hover:bg-[#a5b700]" href="#">
                                    <span class="title-btn">
                                        <span>使用LINE諮詢此課程</span>
                                    </span>
                                </a>

                                <span class="icon bg-[#b6c800] group-hover:bg-[#a5b700] text-white group-hover:text-white" aria-hidden="true">
                                    <img src="{{asset('assets/img/icon-line.png')}}" class="w-8 h-8" alt="">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if ($showBackLink)
                <div class="mt-10 flex justify-end">
                    <div class="group dsn-btn dsn-btn-shape d-flex">
                        <a class="button bg-neutral-800 group-hover:bg-neutral-700" href="{{ route('pages.spa.index') }}#spa-courses">
                            <span class="title-btn">
                                <span class="text-white">返回列表</span>
                            </span>
                        </a>

                        <span class="icon bg-neutral-800 group-hover:bg-neutral-700 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" style="fill: #fff">
                                <path d="M328 96h24v288h-48V177.9L81 401l-17 17-33.9-34 17-17 223-223H64V96h264z"></path>
                            </svg>
                        </span>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
