@extends('layouts.public')

@section('content')
    <div class="mx-auto max-w-6xl px-4 py-14">
        <div class="reveal max-w-3xl">
            <h1 class="text-4xl font-semibold tracking-tight">Professional Scientific Courses</h1>
            <p class="mt-5 text-base leading-relaxed text-slate-600">Structured, practical courses with hands-on exercises and real datasets.</p>
        </div>

        <div class="mt-10 grid gap-6 md:grid-cols-3">
            @forelse($courses as $course)
                <a href="{{ route('courses.show', $course) }}" class="reveal group overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
                    <div class="relative aspect-[16/10] bg-slate-100">
                        @if($course->thumbnail_path)
                            <img class="h-full w-full object-cover" src="{{ asset('storage/'.$course->thumbnail_path) }}" alt="{{ $course->title }}" loading="lazy">
                        @else
                            @php($fallback = $loop->index % 2 === 0 ? 'uploads/demo/courses/course-bio.jpg' : 'uploads/demo/courses/course-python.jpg')
                            @php($fallbackPath = public_path('storage/'.$fallback))
                            @if(file_exists($fallbackPath))
                                <img class="absolute inset-0 h-full w-full object-cover" src="{{ asset('storage/'.$fallback) }}" alt="{{ $course->title }}" loading="lazy">
                                <div class="absolute inset-0 bg-gradient-to-t from-slate-900/40 via-slate-900/0 to-transparent"></div>
                            @else
                                <div class="absolute inset-0 bg-gradient-to-br from-emerald-200/60 via-cyan-200/40 to-indigo-200/50 gradient-animate"></div>
                                <div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_10%,rgba(16,185,129,0.25),transparent_40%),radial-gradient(circle_at_80%_30%,rgba(6,182,212,0.22),transparent_45%),radial-gradient(circle_at_60%_90%,rgba(99,102,241,0.18),transparent_50%)]"></div>
                            @endif
                        @endif
                        <div class="absolute left-4 top-4 flex flex-wrap gap-2">
                            @if($course->duration_label)
                                <div class="rounded-full border border-slate-200 bg-white/90 px-3 py-1 text-xs text-slate-700 shadow-sm">{{ $course->duration_label }}</div>
                            @endif
                            @if($course->level)
                                <div class="rounded-full border border-slate-200 bg-white/90 px-3 py-1 text-xs text-slate-700 shadow-sm">{{ $course->level }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="text-lg font-semibold">{{ $course->title }}</div>
                        @if($course->short_description)
                            <div class="mt-2 line-clamp-3 text-sm text-slate-600">{{ \Illuminate\Support\Str::limit(strip_tags($course->short_description), 200) }}</div>
                        @endif
                        <div class="mt-5 inline-flex items-center text-sm font-semibold text-emerald-700 group-hover:text-emerald-800">
                            View course
                        </div>
                    </div>
                </a>
            @empty
                <div class="rounded-2xl border border-slate-200 bg-white p-8 text-sm text-slate-600 shadow-sm">
                    Courses will appear here after publishing them from the admin panel.
                </div>
            @endforelse
        </div>
    </div>
@endsection