@extends('site.layouts.app')
@section('content')
  <!-- PAGE HERO -->
  <section class="page-hero">
    <div class="page-hero-bg">
      <img src="{{ asset('site/images/page-hider.png') }}" alt="الخدمات">
    </div>
    <div class="breadcrumb">
      <a href="{{ route('site.home') }}">الرئيسية</a>
      <span class="separator">←</span>
      <span>الخدمات</span>
    </div>
  </section>

  <!-- SERVICES -->
  <section class="section">
    <div class="container">
      <div class="services-grid">
        @forelse($services as $service)
          <div class="service-card fade-in" id="service-{{ $service->id }}">
            <div class="service-card-image">
              <img src="{{ $service->image ? asset('storage/'.$service->image) : asset('site/images/eye-exam.png') }}" alt="{{ $service->title }}">
            </div>
            <div class="service-card-content">
              <h3>{{ $service->title }}</h3>
              <p>{{ $service->excerpt ?? Str::limit($service->description, 140, '...') }}</p>
              <a href="{{ route('site.service-details', ['service' => $service->slug]) }}" class="btn">اعرف المزيد <span class="arrow">←</span></a>
            </div>
          </div>
        @empty
          <div class="service-card fade-in" style="grid-column: 1 / -1; text-align: center;">
            <h3>لا توجد خدمات متاحة حالياً</h3>
            <p>سيتم إضافة الخدمات في لوحة التحكم. الرجاء العودة لاحقاً.</p>
          </div>
        @endforelse
      </div>
    </div>
  </section>
@endsection