@extends('layouts.app')

@section('title', $course->meta_title ?: $course->title . ' | Angel Care Institute')

@push('styles')
<meta name="description" content="{{ $course->meta_description ?: $course->short_description }}">
@if($course->meta_keywords)
<meta name="keywords" content="{{ $course->meta_keywords }}">
@endif
@endpush

@section('content')

{{-- Hero --}}
<div class="relative pt-24 lg:pt-28 pb-20 overflow-hidden">
    <div class="absolute inset-0" style="background:#027fc5;"></div>
    <div class="absolute inset-0 opacity-10"
         style="background-image:none;background-size:28px 28px;"></div>

    <div class="relative z-10 container mx-auto px-4 lg:px-8">
        <div class="flex flex-col lg:flex-row items-center gap-12">

            {{-- Left: info --}}
            <div class="flex-1 text-white" data-aos="fade-right">
                {{-- Breadcrumb --}}
                <nav class="flex items-center space-x-2 text-sm text-white/60 mb-6">
                    <a href="{{ route('home') }}" class="hover:text-white transition-colors">Home</a>
                    <i class="fas fa-chevron-right text-xs"></i>
                    <a href="{{ route('course.index') }}" class="hover:text-white transition-colors">Courses</a>
                    <i class="fas fa-chevron-right text-xs"></i>
                    <span class="text-white/90">{{ $course->title }}</span>
                </nav>

                {{-- Badges --}}
                <div class="flex flex-wrap gap-2 mb-5">
                    @if($course->duration)
                    <span class="px-3 py-1 bg-white/20 backdrop-blur-sm border border-white/30 text-white text-xs font-semibold rounded-full">
                        <i class="fas fa-clock mr-1"></i>{{ $course->duration }}
                    </span>
                    @endif
                    @if($course->certification)
                    <span class="px-3 py-1 bg-yellow-400 text-yellow-900 text-xs font-bold rounded-full">
                        <i class="fas fa-certificate mr-1"></i>{{ $course->certification }}
                    </span>
                    @endif
                    @if($course->is_featured)
                    <span class="px-3 py-1 bg-white/20 backdrop-blur-sm border border-white/30 text-white text-xs font-semibold rounded-full">
                        <i class="fas fa-star text-yellow-300 mr-1"></i>Most Popular
                    </span>
                    @endif
                </div>

                <h1 class="text-4xl lg:text-5xl font-extrabold leading-tight mb-5">{{ $course->title }}</h1>
                <p class="text-lg text-blue-100 leading-relaxed mb-8">{{  $course->short_description  }}</p>

                {{-- Quick facts --}}
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-8">
                    @if($course->starting_date)
                    <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-4 text-center">
                        <div class="text-teal-300 text-xl mb-1"><i class="fas fa-calendar-alt"></i></div>
                        <div class="text-white text-xs font-semibold">Starting Date</div>
                        <div class="text-white font-bold text-sm mt-1">{{ $course->formatted_starting_date }}</div>
                    </div>
                    @endif
                    @if($course->mode)
                    <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-4 text-center">
                        <div class="text-teal-300 text-xl mb-1"><i class="fas fa-map-marker-alt"></i></div>
                        <div class="text-white text-xs font-semibold">Mode</div>
                        <div class="text-white font-bold text-sm mt-1">{{ $course->mode }}</div>
                    </div>
                    @endif
                    @if($course->max_students)
                    <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-4 text-center">
                        <div class="text-teal-300 text-xl mb-1"><i class="fas fa-users"></i></div>
                        <div class="text-white text-xs font-semibold">Max Students</div>
                        <div class="text-white font-bold text-sm mt-1">{{ $course->max_students }} Only</div>
                    </div>
                    @endif
                </div>

                {{-- CTA --}}
                <div class="flex flex-wrap gap-4">
                    <a href="#course-application"
                       class="inline-flex items-center gap-x-2 px-7 py-4 bg-white font-bold text-lg rounded-full shadow-2xl hover:-translate-y-1 transition-all duration-300"
                       style="color:#027fc5;">
                        <i class="fas fa-file-alt"></i> Apply Now
                    </a>
                    <a href="#course-application"
                       class="inline-flex items-center gap-x-2 px-7 py-4 border-2 border-white/50 text-white font-bold text-lg rounded-full hover:bg-white/10 transition-all duration-300">
                        <i class="fas fa-calendar-check"></i> Free Counseling
                    </a>
                </div>
            </div>

            {{-- Right: course image --}}
            <div class="flex-1 w-full max-w-lg" data-aos="fade-left">
                @if($course->featured_image && file_exists(public_path('uploads/courses/'.$course->featured_image)))
                <img src="{{ asset('uploads/courses/'.$course->featured_image) }}"
                     alt="{{ $course->title }}"
                     class="w-full rounded-3xl shadow-2xl border-4 border-white/20 object-cover"
                     style="aspect-ratio:16/10;">
                @else
                <div class="w-full rounded-3xl shadow-2xl flex items-center justify-center text-white"
                     style="aspect-ratio:16/10;background:rgba(255,255,255,0.1);border:4px solid rgba(255,255,255,0.2);">
                    <i class="{{ $course->icon_class ?? 'fas fa-graduation-cap' }} text-8xl opacity-40"></i>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Wave --}}
    <div class="absolute bottom-0 left-0 right-0">
        <svg viewBox="0 0 1440 60" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" class="w-full h-12">
            <path d="M0,30 C360,60 1080,0 1440,30 L1440,60 L0,60 Z" fill="#f9fafb"/>
        </svg>
    </div>
</div>

{{-- Long Description --}}
<section class="py-20 bg-gray-50">
    <div class="container mx-auto px-4 lg:px-8">
        <div class="max-w-4xl mx-auto">
            @if($course->long_description)
            <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8 lg:p-12 prose prose-lg max-w-none
                        prose-headings:font-extrabold prose-h2:text-3xl prose-h3:text-xl
                        prose-a:text-primary-600 prose-strong:text-gray-900"
                 style="--tw-prose-headings:color:#027fc5;">
                {!! $course->long_description !!}
            </div>
            @endif

            {{-- Course application --}}
            <div id="course-application" class="mt-12 bg-white rounded-3xl shadow-xl border border-gray-100 p-6 lg:p-10">
                <div class="text-center max-w-2xl mx-auto mb-8">
                    <span class="inline-flex items-center px-4 py-2 bg-primary-100 text-primary-600 text-sm font-semibold rounded-full mb-4">
                        <i class="fas fa-file-signature mr-2"></i>Course Application
                    </span>
                    <h3 class="text-3xl font-extrabold text-gray-900 mb-3">Apply for {{ $course->title }}</h3>
                    <p class="text-gray-600">Seats are limited. Submit your details and our team will contact you within 24 hours.</p>
                </div>
                @include('components.forms.course-application', ['course' => $course, 'countries' => $countries ?? collect(), 'selectedCourse' => $course, 'source' => 'course-detail'])
            </div>
        </div>
    </div>
</section>

@endsection