@extends('layouts.public')

@section('content')
    <div class="mx-auto max-w-4xl px-4 py-14 print:py-0">
        <div class="reveal relative overflow-hidden rounded-3xl border border-white/10 bg-white p-10 text-slate-900 shadow-lg print:border-0 print:shadow-none">
            <div class="pointer-events-none absolute -left-16 -top-16 h-64 w-64 rounded-full bg-emerald-200/50 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-16 -right-16 h-64 w-64 rounded-full bg-cyan-200/50 blur-3xl"></div>

            <div class="text-center">
                <div class="text-xs uppercase tracking-widest text-slate-500">Certificate of Completion</div>
                <h1 class="mt-2 text-3xl font-bold tracking-tight">Presented to</h1>
                <div class="mt-6 text-2xl font-semibold">{{ $user->name }}</div>
                <div class="mt-8 text-sm text-slate-600">for successfully completing the course</div>
                <div class="mt-2 text-xl font-semibold">{{ $course->title }}</div>
                <div class="mt-6 text-sm text-slate-600">on {{ $completedAt->format('d M Y') }}</div>
            </div>

            <div class="mt-12 grid gap-6 md:grid-cols-3">
                <div class="rounded-lg border border-slate-200 bg-white/50 p-4 text-center">
                    <div class="text-xs uppercase tracking-wide text-slate-500">Issued by</div>
                    <div class="mt-1 text-sm font-semibold">{{ \App\Models\SiteContent::value('site.name', config('app.name')) }}</div>
                </div>
                <div class="rounded-lg border border-slate-200 bg-white/50 p-4 text-center">
                    <div class="text-xs uppercase tracking-wide text-slate-500">Course</div>
                    <div class="mt-1 text-sm font-semibold">{{ $course->title }}</div>
                </div>
                <div class="rounded-lg border border-slate-200 bg-white/50 p-4 text-center">
                    <div class="text-xs uppercase tracking-wide text-slate-500">Date</div>
                    <div class="mt-1 text-sm font-semibold">{{ $completedAt->format('d M Y') }}</div>
                </div>
            </div>

            <div class="mt-12 flex items-center justify-between">
                <div class="text-xs text-slate-500">Generated by {{ config('app.name') }}</div>
                <button onclick="window.print()" class="rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-800 hover:bg-slate-50 print:hidden">Print / Save as PDF</button>
            </div>
        </div>
    </div>
@endsection