@php
    $course = $course ?? [];
@endphp

<div class="mx-auto w-full max-w-6xl px-6 py-10 md:px-12">
    <div class="grid gap-10 md:grid-cols-12 md:items-start">
        <div class="md:col-span-5">
            <div class="overflow-hidden rounded-[18px] bg-white/5">
                <img
                    src="{{ $course['image'] ?? '' }}"
                    alt="{{ $course['title'] ?? '課程' }}"
                    class="block w-full object-cover"
                    loading="lazy"
                    decoding="async"
                >
            </div>
        </div>

        <div class="md:col-span-7 text-white/80">
            <div class="max-w-xl">
                <div class="text-3xl md:text-4xl font-bold tracking-tight text-white">
                    {{ $course['title'] ?? '' }}
                </div>
                @if (!empty($course['subtitle']))
                    <div class="mt-2 text-sm text-white/55">
                        {{ $course['subtitle'] }}
                    </div>
                @endif

                @if (!empty($course['description']))
                    <p class="mt-8 text-sm md:text-base leading-7 text-white/70">
                        {{ $course['description'] }}
                    </p>
                @endif
            </div>
        </div>
    </div>
</div>
