@extends('layouts.app')
@section('title','Our Services - Journey of Life GCC')
@section('content')
<section style="background:#e0f2fe;padding:3rem 0">
  <div class="container">
    <h1 style="font-size:2.5rem;font-weight:800;color:#1e3a8a">Our Programs & Services</h1>
  </div>
</section>
<section class="services-section">
  <div class="container">
    <div class="services-grid">
      @forelse($services as $service)
      <div class="service-card">
        @if($service->featured_image)
        <img src="/storage/{{ $service->featured_image }}" alt="{{ $service->title }}" class="service-image" onerror="this.style.display='none'">
        @endif
        <div class="service-content">
          <div class="service-icon"><i class="{{ $service->icon ?? 'fas fa-graduation-cap' }}"></i></div>
          <h3 class="service-title">{{ $service->title }}</h3>
          <p class="service-description">{{ $service->short_description }}</p>
          <a href="{{ route('services.show', $service->slug) }}" class="read-more">Learn More <i class="fas fa-arrow-right"></i></a>
        </div>
      </div>
      @empty
      <p style="text-align:center;color:#6b7280;padding:3rem">No services available yet.</p>
      @endforelse
    </div>
  </div>
</section>
@endsection