@extends('frontend.layouts.app')

@section('title', 'Awards')

@section('content')
    {{-- Hero Section --}}
    @include('frontend.partials.hero', [
        'mainHeading' => __('pages.awards'),
        'subHeading' => __('pages.awards_sub_heading'),
        'breadcrumb1' => [
            'name' => __('route.home'),
            'route' => route('home'),
        ],
        'breadcrumb2' => [
            'name' => __('pages.awards'),
            'route' => route('awards'),
            'class' => 'text-gray-400',
        ],
        'breadcrumb3' => null,
        'breadcrumb4' => null,
    ])

    {{-- Awards Cards --}}
    <section class="px-4 sm:px-6 md:px-10 lg:px-20 xl:px-40 py-16">
        @php
            use App\Enum\AwardTypeEnum;
        @endphp

        <div id="award-section" class="h-auto w-full justify-items-center font-poppins pt-10 pb-10">
            <div class="flex flex-col w-full items-center">
                <div id="award-title" class="h-16 flex items-center justify-center text-white font-semibold">
                    <div class="flex items-center justify-center space-x-3 my-6">
                        <span class="w-3 h-3 bg-primary rounded-full"></span>
                        <span class="w-3 h-3 bg-primary rounded-full"></span>
                        <span
                            class="text-primary font-bold text-xl opacity-70 font-poppins">{{ __('homepage.highlights_of_excellence') }}</span>
                        <span class="w-3 h-3 bg-primary rounded-full"></span>
                        <span class="w-3 h-3 bg-primary rounded-full"></span>
                    </div>
                </div>

                <div class="items-center self-center mb-10">
                    <p class="text-[#000000] lg:w-[902px] font-medium text-base text-center">
                        {{ __('homepage.award_description') }}
                    </p>
                </div>

                <div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-5 w-full">
                    @foreach ($awards as $i => $award)
                        @php
                            $type = $award->award_type;
                            $isGold = $type == AwardTypeEnum::GOLD->value;
                            $isSilver = $type == AwardTypeEnum::SILVER->value;
                            $label = AwardTypeEnum::map($type);

                            $cardBg = $isGold
                                ? 'background:linear-gradient(145deg,#044335 0%,#0b6b55 45%,#022b22 100%)'
                                : ($isSilver
                                    ? 'background:linear-gradient(145deg,#0a4f41 0%,#15806a 50%,#05352b 100%)'
                                    : 'background:linear-gradient(145deg,#03352b 0%,#06614d 55%,#021f19 100%)');

                            $stripe = $isGold
                                ? 'background:linear-gradient(90deg,#b8922a,#f0d060,#b8922a)'
                                : ($isSilver
                                    ? 'background:linear-gradient(90deg,#6b7280,#c5cad2,#6b7280)'
                                    : 'background:linear-gradient(90deg,#a0522d,#d9a07a,#a0522d)');

                            $badgeBg = $isGold
                                ? 'rgba(184,146,42,0.18)'
                                : ($isSilver
                                    ? 'rgba(107,114,128,0.18)'
                                    : 'rgba(160,82,45,0.18)');
                            $badgeClr = $isGold ? '#f0d060' : ($isSilver ? '#c5cad2' : '#d9a07a');
                            $badgeBdr = $isGold
                                ? 'rgba(184,146,42,0.3)'
                                : ($isSilver
                                    ? 'rgba(197,202,210,0.25)'
                                    : 'rgba(217,160,122,0.25)');

                            $ringClr = $isGold
                                ? 'rgba(240,208,96,0.12)'
                                : ($isSilver
                                    ? 'rgba(197,202,210,0.1)'
                                    : 'rgba(217,160,122,0.1)');
                            $strokeClr = $isGold ? '#f0d060' : ($isSilver ? '#c5cad2' : '#d9a07a');
                        @endphp

                        <div class="flex-none w-[280px] sm:w-[300px] h-[410px] rounded-2xl overflow-hidden flex flex-col relative border border-white/5 shadow-md hover:-translate-y-2 hover:shadow-2xl transition-all duration-300"
                            style="{{ $cardBg }};scroll-snap-align:start;">

                            {{-- Metallic top stripe --}}
                            <div class="h-[2px] w-full flex-shrink-0" style="{{ $stripe }}"></div>

                            {{-- Index --}}
                            <span class="absolute top-4 left-4 text-[10px] font-bold tracking-widest text-white/40 z-10">
                                {{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}
                            </span>

                            {{-- Trophy area --}}
                            <div class="relative flex items-center justify-center h-44 flex-shrink-0">
                                <div class="absolute w-32 h-32 rounded-full border"
                                    style="border-color:{{ $ringClr }}"></div>
                                <div class="absolute w-[5.5rem] h-[5.5rem] rounded-full border"
                                    style="border-color:{{ $ringClr }};opacity:.7"></div>

                                <img src="{{ $setting->primary_logo }}" alt="award"
                                    class="relative w-20 h-20 object-contain opacity-90 transition-transform duration-400 hover:scale-110">
                            </div>

                            {{-- Tier badge --}}
                            <div class="px-5 mb-1">
                                <span
                                    class="inline-flex items-center gap-1.5 text-[9px] font-bold tracking-[0.14em] uppercase px-3 py-1 rounded-[4px] border"
                                    style="background:{{ $badgeBg }};color:{{ $badgeClr }};border-color:{{ $badgeBdr }}">
                                    <svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor">
                                        <path
                                            d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                                    </svg>
                                    {{ $label }}
                                </span>
                            </div>

                            {{-- Content --}}
                            <div class="flex flex-col flex-1 px-5 pb-6 gap-2">

                                <p class="text-[9px] font-bold tracking-[0.2em] uppercase text-white/35 mt-1">
                                    {{ __('homepage.winner') }}
                                </p>

                                <h3 class="text-[15px] font-bold text-white leading-snug line-clamp-2">
                                    {{ app()->getLocale() == 'en' ? $award['title_en'] ?? '' : $award['title_np'] ?? ($award['title_en'] ?? '') }}
                                </h3>

                                <p class="text-[13px] text-white/55 leading-[1.65] line-clamp-3 flex-1">
                                    {{ app()->getLocale() == 'en'
                                        ? $award['short_description_en'] ?? ''
                                        : $award['short_description_np'] ?? ($award['short_description_en'] ?? '') }}
                                </p>

                            </div>

                        </div>
                    @endforeach
                </div>
            </div>
        </div>

    </section>
@endsection