@extends('layouts.app')

@section('title', 'Courses | English Bloom English Academy')
@section('meta_description', 'Explore practical English courses for confident speaking, communication and professional growth.')

@section('content')
<section class="ees-courses-hero">
    <div class="container text-center">
        <span class="ees-courses-eyebrow">LEARN • PRACTISE • BLOOM</span>
        <h1>Find the English Course<br>Made for Your Goals</h1>
        <p>Practical, interactive programs designed to help you communicate clearly and confidently in everyday and professional life.</p>
    </div>
</section>

<section class="ees-courses-section">
    <div class="container">
        <div class="ees-courses-heading text-center">
            <span>EXPLORE OUR PROGRAMS</span>
            <h2>Choose Your Learning Path</h2>
            <p>Every course includes guided practice, personalised feedback and real-world communication activities.</p>
        </div>

        @if ($courses->count())
            <div class="row g-4">
                @foreach ($courses as $course)
                    <div class="col-md-6 col-xl-4">
                        <article class="ees-program-card">
                            <div class="ees-program-media">
                                @if ($course->image)
                                    <img src="{{ asset('storage/' . $course->image) }}" alt="{{ $course->title }}" loading="lazy">
                                @else
                                    <div class="ees-program-placeholder" aria-hidden="true"><span>EB</span></div>
                                @endif
                                <span class="ees-program-status">Admissions Open</span>
                            </div>

                            <div class="ees-program-body">
                                <h3>{{ $course->title }}</h3>
                                <p class="ees-program-description">{{ $course->short_description ?: 'Build practical English skills through structured, interactive learning.' }}</p>

                                <div class="ees-program-meta">
                                    <div><span>Duration</span><strong>{{ $course->duration ?: 'Flexible' }}</strong></div>
                                    <div>
                                        <span>Course Fee</span>
                                        <strong>{{ $course->fee !== null ? '₹'.number_format((float) $course->fee, 2) : 'Contact us' }}</strong>
                                    </div>
                                </div>

                                @if ($course->description)
                                    <p class="ees-program-detail">{{ \Illuminate\Support\Str::limit(strip_tags($course->description), 140) }}</p>
                                @endif

                                @if ($course->fee !== null && (float) $course->fee > 0)
                                    <a href="{{ route('courses.enroll', $course) }}" class="ees-enroll-button">Enroll Now <span>→</span></a>
                                @else
                                    <a href="{{ route('contact') }}" class="ees-enroll-button">Enquire Now <span>→</span></a>
                                @endif
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>

            <div class="mt-5 d-flex justify-content-center">{{ $courses->links() }}</div>
        @else
            <div class="ees-courses-empty text-center">
                <div>✦</div><h3>New Courses Are Blooming Soon</h3>
                <p>Contact us to discuss your English learning goals.</p>
                <a href="{{ route('contact') }}" class="btn btn-primary">Contact Us</a>
            </div>
        @endif
    </div>
</section>

<section class="ees-course-assurance">
    <div class="container"><div class="row g-4 text-center">
        <div class="col-md-4"><strong>Personalised Guidance</strong><span>Learn at your level and pace</span></div>
        <div class="col-md-4"><strong>Practical Learning</strong><span>Use English in real situations</span></div>
        <div class="col-md-4"><strong>Confidence First</strong><span>Speak freely without hesitation</span></div>
    </div></div>
</section>
@endsection