@extends('layout.user')
@section('title','কোর্স নেই')

@section('content')
@php
  $globalCoursesBannerUrl = !empty($coursesBanner) ? asset(ltrim($coursesBanner, '/')) : null;
@endphp

<div class="max-w-3xl mx-auto px-3 py-10">
  @if($globalCoursesBannerUrl)
    <div class="courses-top-banner-wrap mb-3">
      <img src="{{ $globalCoursesBannerUrl }}" alt="Courses banner" class="courses-top-banner">
    </div>
  @endif

  <div class="relative">
    {{-- ব্যাকগ্রাউন্ড লাইট গ্রেডিয়েন্ট --}}
    <div class="absolute -z-10 inset-0 blur-2xl opacity-60"
         style="background:
           radial-gradient(120px 80px at 15% 25%, rgba(255,166,0,.12), transparent),
           radial-gradient(140px 90px at 85% 20%, rgba(255,72,0,.10), transparent),
           radial-gradient(160px 120px at 50% 90%, rgba(16,185,129,.12), transparent);">
    </div>

    {{-- কার্ড --}}
    <div class="rounded-2xl border border-slate-200 bg-white/80 backdrop-blur-sm shadow-sm p-8 text-center animate-fade-in">
      
      <div class="mx-auto h-16 w-16 rounded-full bg-gradient-to-br from-orange-500 to-rose-500 flex items-center justify-center shadow-md">
        <i class="fa-solid fa-book-open text-white text-2xl"></i>
      </div>

      <h1 class="mt-4 text-xl sm:text-2xl font-extrabold text-slate-800">কোর্স নেই</h1>
      <p class="mt-2 text-sm sm:text-base text-slate-600">
        এখনো কোনো কোর্স তৈরি হয়নি। শীঘ্রই নতুন কোর্স যুক্ত করা হবে। 
      </p>

      <div class="mt-6">
        <a href="{{ route('dashboard') }}"
           class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-gradient-to-r from-orange-500 to-rose-500 text-white font-semibold shadow hover:shadow-md transition">
          <i class="fa-solid fa-house"></i> ড্যাশবোর্ডে ফিরে যান
        </a>
      </div>
    </div>
  </div>
</div>

{{-- Animation --}}
<style>
  .courses-top-banner-wrap{
    position:sticky;
    top:8px;
    z-index:20;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #bfdbfe;
    box-shadow:0 4px 16px rgba(15,23,42,.12);
    background:#fff;
  }
  .courses-top-banner{
    width:100%;
    height:clamp(150px, 26vw, 260px);
    object-fit:cover;
    display:block;
  }
  @keyframes fadeIn { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
  .animate-fade-in { animation: fadeIn .4s ease-out both; }
</style>
@endsection
