@extends('layouts.portal')

@section('content')
<section class="section">
    <div style="max-width: 1150px; margin: 8rem auto 6rem; padding: 0 1.5rem;">
        <div style="text-align: center; margin-bottom: 3.5rem;">
            <span style="display: inline-block; background: rgba(245, 158, 11, 0.15); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.3); padding: 6px 18px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem;">
                🏆 Recognized Excellence & Honors
            </span>
            <h1 style="font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; font-weight: 800; color: white; margin: 0 0 0.6rem;">
                <span>Achievements</span> & Awards
            </h1>
            <p style="color: #9CA3AF; font-size: 1.08rem; max-width: 650px; margin: 0 auto; line-height: 1.7;">
                Explore verified accreditations, clinical awards, and achievements for {{ $tenant->name ?? 'our practice' }}.
            </p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem;">
            
            {{-- Dynamic Achievements & Awards managed via Admin --}}
            @forelse($achievements as $ach)
                @php
                    $isAward = strtolower($ach->type ?? '') == 'award';
                    $borderColor = $isAward ? 'rgba(245, 158, 11, 0.35)' : 'rgba(99, 102, 241, 0.35)';
                    $badgeBg = $isAward ? 'rgba(245, 158, 11, 0.15)' : 'rgba(99, 102, 241, 0.15)';
                    $badgeColor = $isAward ? '#F59E0B' : '#818CF8';
                    $badgeIcon = $isAward ? '🎖️ Award' : '🏆 Achievement';
                @endphp

                <div style="background: rgba(17, 24, 39, 0.75); backdrop-filter: blur(20px); border: 1px solid {{ $borderColor }}; border-radius: 28px; padding: 2.2rem; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35); transition: transform 0.3s ease;">
                    <div>
                        @if($ach->image)
                            <div style="width: 100%; height: 190px; border-radius: 16px; overflow: hidden; margin-bottom: 1.5rem; background: #000;">
                                <img src="{{ asset($ach->image) }}" alt="{{ $ach->name }}" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                        @else
                            <div style="width: 70px; height: 70px; border-radius: 20px; background: {{ $badgeBg }}; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; margin-bottom: 1.5rem;">
                                {{ $isAward ? '🎖️' : '🏆' }}
                            </div>
                        @endif

                        <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; margin-bottom: 0.8rem;">
                            <h3 style="font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 700; color: white; margin: 0; line-height: 1.35;">
                                {{ $ach->name }}
                            </h3>
                        </div>

                        <p style="color: #9CA3AF; font-size: 0.95rem; line-height: 1.65; margin-bottom: 1.8rem;">
                            {{ $ach->description }}
                        </p>
                    </div>

                    <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.2rem;">
                        <span style="background: {{ $badgeBg }}; color: {{ $badgeColor }}; border: 1px solid {{ $borderColor }}; padding: 5px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;">
                            {{ $badgeIcon }}
                        </span>
                        <span style="color: #34D399; font-size: 0.85rem; font-weight: 600;">
                            ✓ Verified Record
                        </span>
                    </div>
                </div>
            @empty
                <div style="grid-column: 1 / -1; text-align: center; padding: 4rem 2rem; background: rgba(17, 24, 39, 0.6); border-radius: 28px; border: 1px solid rgba(255,255,255,0.08); color: #9CA3AF;">
                    <div style="font-size: 3.5rem; margin-bottom: 1rem;">🏆</div>
                    <h3 style="color: white; margin-bottom: 0.5rem;">No Achievements or Awards Listed Yet</h3>
                    <p style="font-size: 0.95rem;">Check back soon for updated clinical recognitions and honors.</p>
                </div>
            @endforelse

        </div>
    </div>
</section>
@endsection