@extends('frontend::layouts.master')
@section('content')
    <x-frontend::herobanner type="services" />

    {{-- Page Title --}}
    <x-frontend::breadcrumb :items="$breadcrumb" current="{{ end($breadcrumb)['name'] ?? '' }}" />

    {{-- Service Detail --}}
    <section class="section sect-product-detail">
        <div class="container">
            <div class="product-detail-grid">
                <div class="product-detail-grid__media">
                    <div class="product-detail-grid__image">
                        <img src="{{ $service['image'] ?? '' }}" alt="{{ $service['name'] ?? '' }}"
                            onerror="this.classList.add('is-broken'); this.removeAttribute('src');">
                    </div>
                </div>
                <div class="product-detail-grid__info">
                    <h1 class="product-detail-grid__title">{!! $service['name'] ?? '' !!}</h1>
                    <p class="product-detail-grid__lead">{!! $service['desc'] ?? '' !!}</p>

                    <div class="product-detail-grid__description">
                        <p>{!! $service['detail'] ?? '' !!}</p>
                    </div>

                    @if (!empty($service['features'] ?? []))
                        <ul class="product-detail-grid__features">
                            @foreach ($service['features'] ?? [] as $feature)
                                <li>{{ $feature ?? '' }}</li>
                            @endforeach
                        </ul>
                    @endif

                </div>
            </div>
        </div>
    </section>
    <section class="sect-services-list">
        <div class="container">
            {!! $service['text'] ?? '' !!}
        </div>
    </section>
@endsection