@extends('layouts.frontend')

@section('title', $service->title . ' — NSMA')
@section('description', $service->meta_description ?? $service->short_description)

@section('content')

<section class="bg-nsma-dark text-white py-16">
    <div class="max-w-5xl mx-auto px-4 lg:px-8">
        <a href="{{ route('services.index') }}" class="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-white mb-6">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            Үйлчилгээний жагсаалт руу буцах
        </a>
        <h1 class="text-3xl lg:text-5xl font-black mb-4">{{ $service->title }}</h1>
        @if($service->short_description)
            <p class="text-gray-300 text-lg max-w-2xl">{{ $service->short_description }}</p>
        @endif
    </div>
</section>

<section class="py-16">
    <div class="max-w-5xl mx-auto px-4 lg:px-8">
        @if($service->cover_image)
            <img src="{{ $service->coverImageUrl() }}" alt="" class="w-full rounded-2xl mb-10 object-cover max-h-[500px]">
        @endif

        <div class="prose prose-lg max-w-none">
            {!! $service->full_content ?? $service->description !!}
        </div>

        @if(! empty($service->features))
        <div class="mt-12 grid md:grid-cols-2 gap-3">
            @foreach($service->features as $f)
                <div class="flex items-start gap-3">
                    <span class="w-6 h-6 rounded-full bg-nsma-red text-white flex-shrink-0 flex items-center justify-center text-xs">✓</span>
                    <span>{{ $f }}</span>
                </div>
            @endforeach
        </div>
        @endif

        <div class="mt-16 bg-gray-50 rounded-2xl p-8 text-center">
            <h3 class="text-2xl font-bold mb-3">Энэ үйлчилгээ танд тохиромжтой юу?</h3>
            <p class="text-gray-600 mb-6">Бидэнтэй холбогдож, үнэ төлбөргүй зөвлөгөө аваарай.</p>
            <div class="flex items-center justify-center gap-3">
                <a href="{{ route('meeting.create') }}" class="inline-flex items-center gap-2 bg-nsma-red text-white font-semibold px-6 py-3 rounded-md hover:bg-red-600">Уулзалт товлох</a>
                @auth('client')
                    <a href="{{ route('client.orders.create', ['service' => $service->id]) }}" class="inline-flex items-center gap-2 bg-nsma-dark text-white font-semibold px-6 py-3 rounded-md hover:bg-nsma-darker">Захиалга өгөх</a>
                @else
                    <a href="{{ route('client.register') }}" class="inline-flex items-center gap-2 bg-nsma-dark text-white font-semibold px-6 py-3 rounded-md hover:bg-nsma-darker">Захиалга өгөх</a>
                @endauth
            </div>
        </div>
    </div>
</section>

@if($related->count())
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 lg:px-8">
        <h3 class="text-2xl font-bold mb-8">Холбогдох үйлчилгээ</h3>
        <div class="grid md:grid-cols-3 gap-6">
            @foreach($related as $r)
                <a href="{{ route('services.show', $r->slug) }}" class="bg-white rounded-xl p-6 hover:shadow-lg transition border border-gray-100">
                    <h4 class="text-lg font-bold mb-2">{{ $r->title }}</h4>
                    <p class="text-sm text-gray-600">{{ $r->short_description }}</p>
                </a>
            @endforeach
        </div>
    </div>
</section>
@endif

@endsection
