@extends('layouts.shell')
@section('title', $video->title.' — Terkunci')

@section('content')
<div class="relative -mx-5 -mt-6 mb-6 aspect-video overflow-hidden">
    <img src="{{ $video->thumbnailUrl() }}" class="h-full w-full object-cover blur-sm scale-105" alt="">
    <div class="absolute inset-0 grid place-items-center bg-black/60">
        <div class="grid h-16 w-16 place-items-center rounded-full bg-black/50 backdrop-blur">
            <x-icon name="lock" class="w-7 h-7 text-qr-gold"/>
        </div>
    </div>
</div>

<div class="text-center">
    <span class="chip mb-2">Konten Premium</span>
    <h1 class="text-xl font-extrabold">{{ $video->title }}</h1>
    <p class="mt-2 text-sm text-qr-muted">{{ $video->description }}</p>

    <div class="card mt-6 p-5 text-left">
        <h3 class="font-bold">Jadi member untuk menonton</h3>
        <ul class="mt-3 space-y-2 text-sm">
            @foreach(['Akses semua video kajian','Ebook & kuis premium','Harga khusus event'] as $b)
            <li class="flex items-center gap-2"><x-icon name="check" class="w-4 h-4 text-qr-accent-light"/> {{ $b }}</li>
            @endforeach
        </ul>
        <a href="{{ route('membership.index') }}" class="btn-accent mt-4 w-full">Lihat Paket Membership</a>
    </div>
</div>
@endsection