@extends('layouts.portal')
@section('title', 'Intern Dashboard')
@use('App\Models\InternEvaluation', 'E')
@use('App\Models\InternHospitalAllocation', 'Allocation')
@php
    /** @var \App\Support\Internship $internship */
    $assigned  = $current?->hasConsultant();
    $progress  = $internship->progressPercent();
    $locked    = $internship->lockedCount();
    $next      = $internship->nextStep();
    $first     = $internship->first();

    // Tailwind needs full class names.
    $tones = [
        'blue'    => ['icon' => 'bg-blue-600 text-white shadow-blue-600/30',      'bar' => 'from-blue-600 to-sky-400',      'text' => 'text-blue-700'],
        'orange'  => ['icon' => 'bg-orange-500 text-white shadow-orange-500/30',  'bar' => 'from-orange-500 to-amber-400',  'text' => 'text-orange-700'],
        'indigo'  => ['icon' => 'bg-indigo-600 text-white shadow-indigo-600/30',  'bar' => 'from-indigo-600 to-blue-400',   'text' => 'text-indigo-700'],
        'amber'   => ['icon' => 'bg-amber-500 text-white shadow-amber-500/30',    'bar' => 'from-amber-500 to-yellow-300',  'text' => 'text-amber-700'],
        'emerald' => ['icon' => 'bg-emerald-500 text-white shadow-emerald-500/30','bar' => 'from-emerald-500 to-teal-400',  'text' => 'text-emerald-700'],
        'slate'   => ['icon' => 'bg-slmc text-white shadow-slmc/30',              'bar' => 'from-slate-400 to-slate-200',   'text' => 'text-slate-600'],
    ];
    $tone = $tones[$next['tone']];

    $milestone = function (array $slot): string {
        $s = $slot['evaluation']?->status;
        return match (true) {
            $s === E::LOCKED => 'border-emerald-500 bg-emerald-500 text-white',
            $s === E::RETURNED_TO_INTERN => 'border-orange-500 bg-orange-500 text-white',
            in_array($s, [E::WITH_CONSULTANT, E::RETURNED_TO_CONSULTANT, E::WITH_DIRECTOR], true) => 'border-indigo-600 bg-indigo-600 text-white',
            $slot['open'] => 'border-blue-500 bg-white text-blue-700',
            default => 'border-slate-300 bg-white text-slate-400',
        };
    };
    $ring = 2 * M_PI * 44;
@endphp

{{-- ═════════════ HERO (inside the navy banner) ═════════════ --}}
@section('hero')
<div class="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
    <div class="flex items-center gap-5">
        <span class="relative flex size-20 shrink-0 items-center justify-center rounded-3xl bg-white/10 text-3xl font-bold text-white ring-1 ring-white/25 backdrop-blur md:size-24">
            {{ $user->initials() }}
            <span @class(['absolute -right-1 -bottom-1 size-6 rounded-full border-4 border-[#0d2b66]', 'bg-emerald-400' => $assigned, 'bg-amber-400' => ! $assigned])></span>
        </span>
        <div class="min-w-0">
            <div class="mb-2 inline-flex items-center gap-3 text-xs font-semibold tracking-[.2em] text-blue-100 uppercase">
                <span class="h-px w-7 bg-blue-300"></span> Intern Medical Officer
            </div>
            <h1 class="truncate text-3xl font-bold tracking-tight text-white md:text-4xl">{{ $user->name }}</h1>
            <div class="mt-3 flex flex-wrap gap-2 text-xs font-medium">
                @if($user->registration_no)
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-white/10 px-3 py-1.5 text-white ring-1 ring-white/15"><i class="ri-id-card-line"></i> SLMC Reg. {{ $user->registration_no }}</span>
                @endif
                @if($current)
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-white/10 px-3 py-1.5 text-white ring-1 ring-white/15"><i class="ri-hospital-line"></i> {{ $current->hospital->name }}</span>
                @endif
                @if(! $current)
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-amber-400/20 px-3 py-1.5 text-amber-100 ring-1 ring-amber-300/40"><i class="ri-time-line"></i> Awaiting hospital allocation</span>
                @elseif(! $assigned)
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-amber-400/20 px-3 py-1.5 text-amber-100 ring-1 ring-amber-300/40"><i class="ri-user-search-line"></i> Awaiting consultant</span>
                @else
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-400/20 px-3 py-1.5 text-emerald-100 ring-1 ring-emerald-300/40"><i class="ri-pulse-line"></i> {{ $current->periodLabel() }} in progress</span>
                @endif
            </div>
        </div>
    </div>

    @if($current)
        <div class="flex items-center gap-6 self-start rounded-3xl border border-white/15 bg-white/10 p-5 backdrop-blur-lg lg:self-auto">
            <div class="relative size-28 shrink-0">
                <svg viewBox="0 0 100 100" class="size-full -rotate-90" aria-hidden="true">
                    <defs><linearGradient id="ring" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fb923c"/><stop offset="1" stop-color="#fde68a"/></linearGradient></defs>
                    <circle cx="50" cy="50" r="44" fill="none" stroke="rgba(255,255,255,.15)" stroke-width="8"/>
                    <circle cx="50" cy="50" r="44" fill="none" stroke="url(#ring)" stroke-width="8" stroke-linecap="round"
                        stroke-dasharray="{{ $ring }}" stroke-dashoffset="{{ $ring * (1 - max($progress, 1) / 100) }}"/>
                </svg>
                <div class="absolute inset-0 flex flex-col items-center justify-center text-white">
                    <span class="text-2xl leading-none font-extrabold">{{ $progress }}%</span>
                    <span class="mt-1 text-[10px] tracking-wider text-blue-100 uppercase">of year</span>
                </div>
            </div>
            <dl class="grid gap-3 text-white">
                <div><dt class="text-[10px] font-semibold tracking-wider text-blue-200 uppercase">Submitted to SLMC</dt><dd class="text-xl font-bold">{{ $locked }} <span class="text-sm font-medium text-blue-200">/ 4 evaluations</span></dd></div>
                <div><dt class="text-[10px] font-semibold tracking-wider text-blue-200 uppercase">Days remaining</dt><dd class="text-xl font-bold">{{ number_format($internship->daysRemaining()) }}</dd></div>
                <div><dt class="text-[10px] font-semibold tracking-wider text-blue-200 uppercase">Completes on</dt><dd class="text-sm font-semibold">{{ $internship->endsOn()->format('j M Y') }}</dd></div>
            </dl>
        </div>
    @endif
</div>
@endsection

@section('content')
{{-- ═════════════ YOUR NEXT STEP ═════════════ --}}
<section class="slmc-card relative mb-6 overflow-hidden p-6 md:p-8">
    <span class="absolute inset-y-0 left-0 w-1.5 bg-linear-to-b {{ $tone['bar'] }}"></span>
    <div class="flex flex-col gap-6 lg:flex-row lg:items-center">
        <span class="flex size-16 shrink-0 items-center justify-center rounded-2xl text-3xl shadow-lg {{ $tone['icon'] }}"><i class="{{ $next['icon'] }}"></i></span>
        <div class="min-w-0 flex-1">
            <p class="text-xs font-bold tracking-widest uppercase {{ $tone['text'] }}">Your next step · {{ $next['eyebrow'] }}</p>
            <h2 class="mt-1 text-2xl font-bold text-slmc">{{ $next['title'] }}</h2>
            <p class="mt-1 max-w-3xl text-gray-500">{{ $next['text'] }}</p>
        </div>
        @if($next['cta'])
            <a href="{{ $next['url'] }}" class="bg-warm-gradient inline-flex shrink-0 items-center justify-center gap-2 rounded-xl px-7 py-3.5 font-semibold text-white shadow-lg shadow-orange-500/25 transition hover:-translate-y-0.5 hover:brightness-110">
                {{ $next['cta'] }} <i class="ri-arrow-right-line text-lg"></i>
            </a>
        @endif
    </div>
    @if($next['evaluation'] && $next['evaluation']->status !== E::DRAFT)
        <div class="mt-6 border-t border-slmc-line pt-6">@include('partials.evaluation.stepper', ['evaluation' => $next['evaluation']])</div>
    @endif
</section>

@if(! $current)
    {{-- ═════════════ NOT YET ALLOCATED ═════════════ --}}
    <section class="slmc-card overflow-hidden">
        <div class="border-b border-slmc-line p-6 md:px-8">
            <p class="text-xs font-semibold tracking-widest text-slmc-600 uppercase">What happens next</p>
            <h3 class="text-xl font-bold text-slmc">Your one-year internship journey</h3>
        </div>
        <ol class="relative grid gap-6 p-6 md:grid-cols-3 md:p-8">
            <span class="absolute top-[3.25rem] right-[17%] left-[17%] hidden h-px bg-linear-to-r from-slmc-line via-slmc-sky/40 to-slmc-line md:block"></span>
            @foreach([
                ['ri-government-line',  'Ministry of Health', 'Allocates your first six-month internship hospital following your appointment to the SLMC.'],
                ['ri-user-shared-line', 'Hospital Director',  'Assigns your Supervisory Consultant, unit and later your second six-month placement.'],
                ['ri-file-list-3-line', 'Evaluations',        'Four quarterly evaluations — two in each six-month period — submitted to SLMC.'],
            ] as [$icon, $title, $text])
                <li class="relative flex flex-col items-center text-center">
                    <span class="relative mb-4 flex size-14 items-center justify-center rounded-2xl bg-white text-2xl text-slmc-600 shadow-md ring-1 ring-slmc-line"><i class="{{ $icon }}"></i>
                        <span class="absolute -top-2 -right-2 flex size-6 items-center justify-center rounded-full bg-slmc text-[11px] font-bold text-white">{{ $loop->iteration }}</span>
                    </span>
                    <p class="font-bold text-slmc">{{ $title }}</p>
                    <p class="mt-1 max-w-xs text-sm text-gray-500">{{ $text }}</p>
                </li>
            @endforeach
        </ol>
    </section>
@else
    {{-- ═════════════ INTERNSHIP JOURNEY TIMELINE ═════════════ --}}
    <section class="slmc-card mb-6 p-6 md:p-8">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <p class="text-xs font-semibold tracking-widest text-slmc-600 uppercase">Internship journey</p>
                <h3 class="text-xl font-bold text-slmc">One year · two six-month periods · four evaluations</h3>
            </div>
            <div class="flex flex-wrap gap-3 text-[11px] font-medium text-gray-500">
                <span class="inline-flex items-center gap-1.5"><span class="size-2.5 rounded-full bg-emerald-500"></span>With SLMC</span>
                <span class="inline-flex items-center gap-1.5"><span class="size-2.5 rounded-full bg-indigo-600"></span>Under review</span>
                <span class="inline-flex items-center gap-1.5"><span class="size-2.5 rounded-full border-2 border-blue-500"></span>Open</span>
                <span class="inline-flex items-center gap-1.5"><span class="size-2.5 rounded-full border-2 border-slate-300"></span>Upcoming</span>
            </div>
        </div>

        <div class="mt-8 px-4">
            {{-- Period labels --}}
            <div class="mb-10 grid grid-cols-2 gap-6">
                @foreach([1, 2] as $p)
                    @php $a = $internship->periods[$p]; @endphp
                    <div class="min-w-0 {{ $p === 2 ? 'border-l border-slmc-line pl-4' : '' }}">
                        <p class="text-[10px] font-bold tracking-wider text-slate-400 uppercase">P{{ $p }} · {{ Allocation::PERIOD_LABELS[$p] }}</p>
                        <p class="truncate text-sm font-semibold {{ $a ? 'text-slmc' : 'text-slate-400 italic' }}">{{ $a?->hospital->name ?? 'Placement not assigned yet' }}</p>
                    </div>
                @endforeach
            </div>

            {{-- Track --}}
            <div class="relative h-3 rounded-full bg-slmc-tint">
                <div class="bg-primary-gradient absolute inset-y-0 left-0 rounded-full" style="width: {{ $progress }}%"></div>
                @unless($internship->second())
                    <div class="absolute inset-y-0 right-0 left-1/2 rounded-r-full bg-[repeating-linear-gradient(45deg,transparent_0_6px,rgba(148,163,184,.25)_6px_12px)]"></div>
                @endunless
                <span class="absolute -top-1.5 left-1/2 h-6 w-1 -translate-x-1/2 rounded-full bg-white shadow"></span>

                {{-- Today --}}
                <span class="absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2" style="left: {{ $progress }}%">
                    <span class="absolute bottom-6 left-1/2 -translate-x-1/2 rounded-md bg-slmc px-2 py-0.5 text-[10px] font-bold whitespace-nowrap text-white shadow">Today</span>
                    <span class="block size-5 rounded-full border-4 border-white bg-slmc-accent shadow-md ring-4 ring-blue-200/60"></span>
                </span>

                {{-- Evaluation milestones at the end of each quarter --}}
                <div class="absolute inset-0 grid grid-cols-4">
                    @foreach($schedule as $slot)
                        <div class="relative">
                            <span title="Evaluation {{ $slot['quarter'] }}" class="absolute top-1/2 right-0 flex size-9 translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-[3px] text-xs font-extrabold shadow-sm {{ $milestone($slot) }}">
                                @if($slot['evaluation']?->isLocked())<i class="ri-check-line text-base"></i>@else Q{{ $slot['quarter'] }}@endif
                            </span>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Milestone labels --}}
            <div class="mt-6 grid grid-cols-4 gap-2 text-right">
                @foreach($schedule as $slot)
                    <div class="min-w-0">
                        <p class="text-xs font-bold text-slmc">Evaluation {{ $slot['quarter'] }}</p>
                        <p class="hidden text-[11px] text-gray-400 sm:block">{{ $slot['ends'] ? 'Due '.$slot['ends']->format('j M Y') : 'Date pending' }}</p>
                        <p class="truncate text-[11px] font-medium text-gray-500">{{ $slot['evaluation']?->statusLabel() ?? ($slot['open'] ? 'Ready to start' : 'Upcoming') }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ═════════════ PLACEMENTS ═════════════ --}}
    <div class="mb-6 grid gap-6 xl:grid-cols-2">
        @foreach([1, 2] as $p)
            @php
                $a = $internship->periods[$p];
                $isCurrent = $a && $current->is($a);
                $director = $a?->hospital->currentDirectors->first();
                $transferred = $p === 2 && $a && $first && $a->hospital_id !== $first->hospital_id;
            @endphp
            <article @class(['slmc-card flex flex-col overflow-hidden', 'ring-2 ring-blue-300/70' => $isCurrent])>
                {{-- Header --}}
                <div class="relative bg-linear-to-br from-slmc-tint to-white p-6">
                    <div class="mb-4 flex items-center justify-between gap-3">
                        <span class="inline-flex items-center gap-2 text-xs font-bold tracking-wider text-slmc-600 uppercase">
                            <span @class(['flex size-8 items-center justify-center rounded-lg text-xs font-extrabold', 'bg-slmc text-white' => $a, 'bg-slate-200 text-slate-500' => ! $a])>P{{ $p }}</span>
                            {{ Allocation::PERIOD_LABELS[$p] }}
                        </span>
                        @if($isCurrent)
                            <span class="inline-flex items-center gap-1.5 rounded-full bg-blue-600 px-3 py-1 text-xs font-semibold text-white shadow-sm"><span class="size-1.5 animate-pulse rounded-full bg-white"></span> Current</span>
                        @elseif($a && $a->endsOn()->isPast())
                            <span class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700"><i class="ri-check-line"></i> Completed</span>
                        @elseif($a)
                            <span class="rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-600 ring-1 ring-slmc-line">Upcoming</span>
                        @endif
                    </div>
                    @if($a)
                        <h3 class="text-2xl font-bold text-slmc">{{ $a->hospital->name }}</h3>
                        <div class="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-sm text-gray-500">
                            @if($a->hospital->district)<span><i class="ri-map-pin-line"></i> {{ $a->hospital->district }}</span>@endif
                            <span><i class="ri-calendar-line"></i> {{ $a->starts_on->format('j M Y') }} – {{ $a->endsOn()->format('j M Y') }}</span>
                        </div>
                        @if($transferred)
                            <p class="mt-3 inline-flex items-center gap-1.5 rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 ring-1 ring-blue-100"><i class="ri-arrow-left-right-line"></i> Transferred from {{ $first->hospital->name }}</p>
                        @endif
                    @else
                        <h3 class="text-2xl font-bold text-slate-400">Not assigned yet</h3>
                        <p class="mt-1 text-sm text-gray-500">Evaluations 3 and 4</p>
                    @endif
                </div>

                @if($a)
                    {{-- Unit & specialty --}}
                    <div class="grid grid-cols-2 gap-3 px-6 pt-5">
                        @foreach([['ri-layout-grid-line', 'Unit', $a->unit], ['ri-heart-pulse-line', 'Specialty', $a->specialty]] as [$icon, $label, $value])
                            <div class="rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-100">
                                <p class="flex items-center gap-1.5 text-[10px] font-bold tracking-wider text-slate-500 uppercase"><i class="{{ $icon }} text-sm text-slmc-sky"></i> {{ $label }}</p>
                                <p class="mt-1 truncate font-semibold {{ $value ? 'text-slmc' : 'text-gray-400 italic' }}">{{ $value ?: 'To be assigned' }}</p>
                            </div>
                        @endforeach
                    </div>

                    {{-- People --}}
                    <div class="grid gap-3 px-6 pt-3 sm:grid-cols-2">
                        @if($a->consultant)
                            <div class="flex items-center gap-3 rounded-2xl p-3 ring-1 ring-slmc-line">
                                <span class="bg-primary-gradient flex size-11 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white">{{ $a->consultant->initials() }}</span>
                                <div class="min-w-0"><p class="truncate text-sm font-bold text-slmc">{{ $a->consultant->name }}</p><p class="truncate text-xs text-gray-500">Supervisory Consultant</p></div>
                            </div>
                        @else
                            <div class="flex items-center gap-3 rounded-2xl border-2 border-dashed border-amber-300 bg-amber-50/60 p-3">
                                <span class="flex size-11 shrink-0 items-center justify-center rounded-full bg-amber-100 text-lg text-amber-600"><i class="ri-user-search-line"></i></span>
                                <div class="min-w-0"><p class="text-sm font-bold text-amber-800">Consultant not assigned</p><p class="text-xs text-amber-700">Awaiting Hospital Director</p></div>
                            </div>
                        @endif
                        <div class="flex items-center gap-3 rounded-2xl p-3 ring-1 ring-slmc-line">
                            <span class="flex size-11 shrink-0 items-center justify-center rounded-full bg-slate-100 text-sm font-bold text-slmc-600">{{ $director?->initials() ?: '—' }}</span>
                            <div class="min-w-0"><p class="truncate text-sm font-bold text-slmc">{{ $director?->name ?? 'Not recorded' }}</p><p class="truncate text-xs text-gray-500">Hospital Director</p></div>
                        </div>
                    </div>
                @else
                    <div class="px-6 pt-5">
                        <div class="flex flex-col items-center rounded-2xl border-2 border-dashed border-slmc-line bg-slate-50/60 px-6 py-7 text-center">
                            <span class="mb-3 flex size-14 items-center justify-center rounded-2xl bg-white text-2xl text-slmc-600 shadow-sm ring-1 ring-slmc-line"><i class="ri-calendar-todo-line"></i></span>
                            <p class="font-bold text-slmc">Placement to be confirmed</p>
                            <p class="mt-1 max-w-sm text-sm text-gray-500">Your second six-month placement will be assigned by your current Hospital Director. Most interns continue at the same hospital; if you move, the new hospital's Director assigns your consultant.</p>
                        </div>
                    </div>
                @endif

                {{-- Evaluations in this period --}}
                <div class="mt-auto grid gap-4 p-6 sm:grid-cols-2">
                    @foreach(array_filter($schedule, fn ($s) => $s['period'] === $p) as $slot)
                        @php $e = $slot['evaluation']; @endphp
                        <div @class(['group relative flex flex-col overflow-hidden rounded-2xl border p-4 transition',
                            'border-slmc-line bg-white hover:-translate-y-0.5 hover:shadow-lg' => $slot['open'],
                            'border-dashed border-slate-200 bg-slate-50/70' => ! $slot['open']])>
                            <span class="pointer-events-none absolute -top-3 -right-1 text-6xl font-extrabold tracking-tighter text-slmc/5 select-none">Q{{ $slot['quarter'] }}</span>
                            <div class="mb-3 flex items-center gap-3">
                                <span class="flex size-10 items-center justify-center rounded-full border-[3px] text-xs font-extrabold {{ $milestone($slot) }}">
                                    @if($e?->isLocked())<i class="ri-check-line text-base"></i>@elseif(! $slot['open'])<i class="ri-lock-line"></i>@else Q{{ $slot['quarter'] }}@endif
                                </span>
                                <div>
                                    <p class="font-bold text-slmc">Evaluation {{ $slot['quarter'] }}</p>
                                    <p class="text-[11px] text-gray-500">{{ $slot['starts'] ? $slot['starts']->format('j M').' – '.$slot['ends']->format('j M Y') : 'Dates pending' }}</p>
                                </div>
                            </div>
                            <div class="mb-3">
                                @if($e)
                                    @include('partials.evaluation.status-badge', ['evaluation' => $e])
                                @elseif($slot['open'])
                                    <span class="inline-flex items-center gap-1.5 rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700"><i class="ri-play-circle-line"></i> Ready to start</span>
                                @else
                                    <span class="inline-flex items-center gap-1.5 text-xs font-medium text-slate-500"><i class="ri-lock-line"></i> {{ $slot['reason'] }}</span>
                                @endif
                            </div>
                            @if($slot['open'])
                                <a href="{{ route('intern.evaluations.edit', $slot['quarter']) }}" class="mt-auto flex items-center justify-between gap-3 text-[13px] font-bold text-slmc-500">
                                    {{ ! $e ? 'Start evaluation' : ($e->editableByIntern() ? ($e->status === E::RETURNED_TO_INTERN ? 'Make changes' : 'Continue draft') : 'View evaluation') }}
                                    <span class="slmc-arrow group-hover:bg-slmc-500 group-hover:text-white"><i class="ri-arrow-right-line"></i></span>
                                </a>
                            @endif
                        </div>
                    @endforeach
                </div>
            </article>
        @endforeach
    </div>

    {{-- ═════════════ HOW IT WORKS ═════════════ --}}
    <section class="slmc-card p-6 md:p-8">
        <div class="mb-6">
            <p class="text-xs font-semibold tracking-widest text-slmc-600 uppercase">Approval process</p>
            <h3 class="text-xl font-bold text-slmc">How each evaluation reaches SLMC</h3>
        </div>
        <ol class="relative grid gap-6 md:grid-cols-4">
            <span class="absolute top-6 right-[12%] left-[12%] hidden h-0.5 bg-linear-to-r from-blue-200 via-indigo-200 to-emerald-200 md:block"></span>
            @foreach([
                ['ri-user-heart-line',  'You submit',         'Complete your progress report and submit it to your consultant.', 'bg-blue-600'],
                ['ri-stethoscope-line', 'Consultant reviews', 'Edits and approves, or returns it to you for changes.',          'bg-indigo-600'],
                ['ri-hospital-line',    'Director verifies',  'Edits and approves, or returns it to the consultant.',           'bg-slmc'],
                ['ri-lock-2-line',      'Submitted to SLMC',  'Once the Director approves, it is sent to SLMC and locked.',     'bg-emerald-500'],
            ] as [$icon, $title, $text, $bg])
                <li class="relative flex flex-col items-center text-center">
                    <span class="relative mb-3 flex size-12 items-center justify-center rounded-2xl text-xl text-white shadow-lg ring-4 ring-white {{ $bg }}"><i class="{{ $icon }}"></i></span>
                    <p class="font-bold text-slmc">{{ $loop->iteration }}. {{ $title }}</p>
                    <p class="mt-1 max-w-60 text-sm text-gray-500">{{ $text }}</p>
                </li>
            @endforeach
        </ol>
    </section>
@endif
@endsection