@props(['course'])

@php
    $organization = $course->organization;
    $price = $course->effectivePriceCents();
@endphp

<article class="group flex flex-col overflow-hidden rounded-lg border border-slate-200 bg-white transition hover:border-slate-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-800">

    <a href="{{ route('courses.show', $course) }}" class="block aspect-video overflow-hidden bg-slate-100 dark:bg-slate-700">
        @if ($course->thumbnail_path)
            {{-- Explicit dimensions: no layout shift, which is half the LCP battle --}}
            <img
                src="{{ Storage::disk('public')->url($course->thumbnail_path) }}"
                alt=""
                width="480" height="270"
                loading="lazy" decoding="async"
                class="h-full w-full object-cover transition duration-300 group-hover:scale-[1.02]"
            >
        @endif
    </a>

    <div class="flex flex-1 flex-col gap-2 p-4">

        {{-- Provider badge: the University / Trainer distinction is the platform's positioning, so it reads before the title. --}}
        @if ($organization)
            <a href="{{ route('providers.show', $organization->slug) }}"
               class="inline-flex w-fit items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide
                      {{ $organization->type === \App\Enums\OrganizationType::University
                         ? 'border-teal-300 bg-teal-50 text-teal-800 dark:border-teal-700 dark:bg-teal-950 dark:text-teal-300'
                         : 'border-amber-300 bg-amber-50 text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-300' }}">
                {{ $organization->type->label() }}
            </a>
        @endif

        <h3 class="text-[15px] font-semibold leading-snug text-slate-900 dark:text-slate-100">
            <a href="{{ route('courses.show', $course) }}" class="hover:underline">{{ $course->title }}</a>
        </h3>

        <p class="text-[13px] text-slate-500 dark:text-slate-400">
            {{ $organization?->name ?? $course->owner->name }}
        </p>

        {{-- Every number here is a denormalised column. No aggregation on a listing page. --}}
        <p class="mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-2 text-[12px] tabular-nums text-slate-500 dark:text-slate-400">
            @if ($course->rating_count > 0)
                <span class="font-semibold text-amber-600 dark:text-amber-400">{{ number_format($course->rating_avg, 1) }}</span>
                <span>({{ number_format($course->rating_count) }})</span>
                <span aria-hidden="true">&middot;</span>
            @endif
            <span>{{ $course->total_lectures }} lectures</span>
            <span aria-hidden="true">&middot;</span>
            <span>{{ $course->durationLabel() }}</span>
        </p>

        <p class="text-[15px] font-bold text-slate-900 dark:text-slate-100">
            @if ($course->isFree())
                <span class="text-teal-700 dark:text-teal-400">Free</span>
            @else
                {{ $course->currency }} {{ number_format($price / 100, 2) }}
                @if ($course->sale_price_cents !== null && $course->sale_price_cents < $course->price_cents)
                    <span class="ml-1 text-[13px] font-normal text-slate-400 line-through">
                        {{ number_format($course->price_cents / 100, 2) }}
                    </span>
                @endif
            @endif
        </p>
    </div>
</article>