@extends('layouts.app')

@section('title', $service->title . ' | IBS Services')
@section('description', $service->description)

@section('content')
<x-subpage-hero 
    title="{{ $service->title }}" 
/>

<x-breadcrumbs :items="$breadcrumbs" />

<section class="py-16 bg-gray-100">
    <div class="max-w-6xl mx-auto px-6">
        <div class="grid md:grid-cols-3 gap-12">
            <div class="md:col-span-2" data-aos="fade-up">
                <h2 class="text-3xl font-bold text-gray-800 mb-6">Service Overview</h2>
                <p class="text-lg text-gray-700 leading-relaxed mb-8">
                    {{ $service->long_description ?? $service->description }}
                </p>

                @if(!empty($service->features))
                <h3 class="text-2xl font-heading mb-4 text-ibs-dark">Key Features</h3>
                <ul class="list-disc list-inside text-gray-600 space-y-2 mb-8">
                    @foreach($service->features as $feature)
                        <li>{{ $feature }}</li>
                    @endforeach
                </ul>
                @endif

                @if(!empty($service->benefits))
                <h3 class="text-2xl font-heading mb-4 text-ibs-dark">Benefits of Our Service</h3>
                <ul class="list-disc list-inside text-gray-600 space-y-2 mb-8">
                    @foreach($service->benefits as $benefit)
                        <li>{{ $benefit }}</li>
                    @endforeach
                </ul>
                @endif

                <div class="mt-10 text-center md:text-left">
                    <a href="{{ route('contact') }}" class="inline-block bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 shadow-lg">
                        Get a Free Consultation
                    </a>
                </div>
            </div>

            <div class="md:col-span-1" data-aos="fade-up" data-aos-delay="200">
                <div class="bg-gray-100 p-8 rounded-lg shadow-md">
                    <h3 class="text-2xl font-heading mb-6 text-ibs-dark">Service Information</h3>
                    <ul class="text-gray-700 space-y-3">
                        <li><strong>Category:</strong> {{ $service->category ?? 'General' }}</li>
                        <li><strong>Icon:</strong> <i class="fas {{ $service->icon }} text-xl text-yellow-600"></i></li>
                        @if($service->price)
                        <li><strong>Starting Price:</strong> ${{ number_format($service->price, 2) }}</li>
                        @endif
                    </ul>
                </div>

                @if($service->images->count() > 0)
                <div class="mt-8">
                    <img src="{{ asset('storage/' . $service->images->first()->image_path) }}" alt="{{ $service->title }}" class="w-full h-auto object-cover rounded-lg shadow-lg" loading="lazy">
                </div>
                @endif
            </div>
        </div>
    </div>
</section>

@if($service->images->count() > 0)
<section class="py-16 bg-ibs-light">
    <div class="max-w-6xl mx-auto px-6">
        <x-section-heading title="Gallery" subtitle="Visuals related to this service." />
        <div class="relative max-w-7xl mx-auto">
            <div class="swiper service-gallery-slider pb-16 relative">
                <div class="swiper-wrapper items-stretch">
                    @foreach($service->images as $image)
                        <div class="swiper-slide h-full">
                            <img src="{{ asset('storage/' . $image->image_path) }}" alt="{{ $service->title }}" class="w-full h-full object-cover rounded-lg shadow-lg" loading="lazy">
                        </div>
                    @endforeach
                </div>
                <div class="swiper-button-prev absolute top-1/2 left-0 transform -translate-y-1/2 -translate-x-12 text-gray-300 z-50"></div>
                <div class="swiper-button-next absolute top-1/2 right-0 transform -translate-y-1/2 translate-x-12 text-gray-300 z-50"></div>
            </div>
        </div>
    </div>
</section>
@endif
@endsection