@use('App\Support\Img')
@props(['achievement'])

@once
<style>
    .ach { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 1rem; background: #fff; border: 1px solid #e5e7eb;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
    .ach:hover { transform: translateY(-4px); border-color: #bfdbfe; box-shadow: 0 18px 30px -18px rgba(37, 99, 235, .40); }
    .dark .ach { background: rgba(15, 23, 42, .72); border-color: #1e293b; box-shadow: none; }
    .dark .ach:hover { border-color: rgba(96, 165, 250, .5); box-shadow: 0 18px 30px -18px rgba(59, 130, 246, .5); }

    .ach-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #eff6ff; }
    .ach-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
    .ach:hover .ach-media img { transform: scale(1.05); }
    .ach-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #2563eb;
        background: radial-gradient(rgba(37, 99, 235, .20) 1px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(135deg, #dbeafe, #fef3c7); }
    .dark .ach-ph { color: #93c5fd; background: radial-gradient(rgba(147, 197, 253, .18) 1px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(135deg, #172554, #3b2a0a); }

    .ach-badge { position: absolute; top: .75rem; right: .75rem; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
        border-radius: 9999px; color: #fff; background: #f59e0b; box-shadow: 0 6px 14px -4px rgba(217, 119, 6, .7); }
    .ach-date { position: absolute; left: .75rem; bottom: .75rem; padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 600;
        color: #92400e; background: rgba(255, 251, 235, .96); box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .35); }

    .ach-body { flex: 1; padding: 1.1rem 1.2rem 1.3rem; }
    .ach-title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: #0f172a; }
    .dark .ach-title { color: #fff; }
    .ach-desc { display: -webkit-box; margin: .5rem 0 0; overflow: hidden; font-size: .88rem; line-height: 1.6; color: #64748b; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
    .dark .ach-desc { color: #94a3b8; }
</style>
@endonce

<article class="ach">
    <div class="ach-media">
        @if($achievement->image)
            <img src="{{ Img::url($achievement->image) }}" alt="{{ $achievement->title }}" loading="lazy">
        @else
            <div class="ach-ph">
                <svg class="h-14 w-14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 4h8v5a4 4 0 0 1-8 0V4Z"/><path d="M8 6H4v1a3 3 0 0 0 3 3M16 6h4v1a3 3 0 0 1-3 3M12 13v4M8 21h8M10 17h4"/></svg>
            </div>
        @endif

        <span class="ach-badge" aria-hidden="true">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4h8v5a4 4 0 0 1-8 0V4Z"/><path d="M8 6H4v1a3 3 0 0 0 3 3M16 6h4v1a3 3 0 0 1-3 3M12 13v4M8 21h8M10 17h4"/></svg>
        </span>
        <span class="ach-date">{{ $achievement->achieved_at->format('d M Y') }}</span>
    </div>

    <div class="ach-body">
        <h3 class="ach-title">{{ $achievement->title }}</h3>
        @if($achievement->description)<p class="ach-desc">{{ $achievement->description }}</p>@endif
    </div>
</article>