@extends('layouts.app')
@section('title','{{ $service->title }} - Journey of Life GCC')
@section('content')
<section style="background:#e0f2fe;padding:3rem 0">
  <div class="container">
    <a href="{{ route('services.index') }}" style="color:#3b82f6;text-decoration:none">← Back to Services</a>
    <h1 style="font-size:2.5rem;font-weight:800;color:#1e3a8a;margin-top:1rem">{{ $service->title }}</h1>
    <p style="color:#6b7280;margin-top:0.5rem">{{ $service->mode }} | {{ $service->duration }}</p>
  </div>
</section>
<section style="padding:4rem 0;background:white">
  <div class="container">
    <div style="display:grid;grid-template-columns:2fr 1fr;gap:3rem">
      <div>
        @if($service->featured_image)
        <img src="/storage/{{ $service->featured_image }}" alt="{{ $service->title }}" style="width:100%;border-radius:12px;margin-bottom:2rem" onerror="this.style.display='none'">
        @endif
        <div style="line-height:1.8;color:#374151">{!! nl2br(e($service->full_description)) !!}</div>
        @if($service->who_can_join)
        <h3 style="margin-top:2rem;color:#1e3a8a">Who Can Join?</h3>
        <p style="margin-top:0.5rem;line-height:1.8">{{ $service->who_can_join }}</p>
        @endif
      </div>
      <div>
        <div style="background:#e0f2fe;border-radius:12px;padding:1.5rem;position:sticky;top:100px">
          <h3 style="color:#1e3a8a;margin-bottom:1rem">Quick Info</h3>
          <p><strong>Mode:</strong> {{ $service->mode }}</p>
          <p style="margin-top:0.5rem"><strong>Duration:</strong> {{ $service->duration ?? 'Flexible' }}</p>
          <a href="{{ route('contact') }}" style="display:block;background:#1e3a8a;color:white;text-align:center;padding:0.875rem;border-radius:8px;margin-top:1.5rem;text-decoration:none;font-weight:600">Enroll Now</a>
          <a href="https://wa.me/97333850267" style="display:block;background:#25d366;color:white;text-align:center;padding:0.875rem;border-radius:8px;margin-top:0.75rem;text-decoration:none;font-weight:600">WhatsApp Us</a>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection