@extends('frontend::layouts.master')
@section('content')
    <x-frontend::herobanner type="product" />
    {{-- Page Title --}}
    <x-frontend::breadcrumb :items="$breadcrumb" current="{{ end($breadcrumb)['name'] ?? '' }}" />

    {{-- Product 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="{{ $product['image'] ?? '' }}" alt="{!! $product['name'] ?? '' !!}"
                            onerror="this.classList.add('is-broken'); this.removeAttribute('src');">
                    </div>
                </div>
                <div class="product-detail-grid__info">
                    <h1 class="product-detail-grid__title">{!! $product['name'] ?? '' !!}</h1>
                    <p class="product-detail-grid__lead">{!! $product['desc'] ?? '' !!}</p>

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

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

                </div>
            </div>
        </div>
    </section>
    @if (!empty($product['text']))
        <section class="billboard-section">
            <div class="container">
                {!! $product['text'] ?? '' !!}
            </div>
        </section>
    @endif

    @if (!empty($product['related']))
        <section class="section sect-products-list sect-portfolio-related">
            <div class="container">
                <div class="products-list-head">
                    <h2 class="products-list-head__title">@lang('frontend::text.related_portfolio')</h2>
                </div>
                <div class="products-grid">
                    @foreach ($product['related'] as $rel)
                        @include('frontend::partials.portfolio-card', [
                            'item' => $rel,
                            'showDetailBtn' => false,
                        ])
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection