@extends('user.layout')
@section('content')
    <div class="container-fluid p-0">
        <div class="card border-0 rounded-0 overflow-hidden">
            <img class="card-img img-fluid rounded-0 w-100" src="{{ optimizedImageUrl('banner', @$banner->image, 1600) }}" srcset="{{ optimizedImageSrcset('banner', @$banner->image, 1600) }}" sizes="100vw" fetchpriority="high" decoding="async" alt="{{ @$banner->title }}" title="{{ @$banner->title }}" style="max-height: 100vh;" />

            <div class="card-img-overlay text-white d-flex flex-column justify-content-center px-lg-5" style="background: rgba(0, 0, 0, 0.5);">
                <p class="card-text mb-0">#{{ str_replace(' ', '', config('app.name')) }}</p>
                <h2 class="card-title mb-3">{{ @$banner->title }}</h2>
                <p class="card-text">{{ @$banner->sub_title }}</p>
            </div>
        </div>
    </div>

    <div class="container-fluid container-lg mt-4 mb-5">
        <h3 class="mb-4 fw-bolder secondary">Our Products</h3>

        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 justify-content-center g-3 g-lg-4">
            @foreach ($products as $key => $product)
                <div class="col">
                    <div class="card border-0 h-100 overflow-hidden scroll-reveal">
                        <div class="overflow-hidden">
                            <img class="card-img-top img-fluid w-100" src="{{ optimizedImageUrl('product', $product->image, 960) }}" srcset="{{ optimizedImageSrcset('product', $product->image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="{{ $product->title }}" title="{{ $product->title }}" style="height: 230px;" />
                        </div>

                        <div class="card-body py-2 d-flex flex-column justify-content-between">
                            <div>
                                <h6 class="card-title text-justify secondary mt-2">{{ $product->name }}</h6>
                                <div class="text-justify">{!! excerpt($product->description, 300) !!}</div>
                            </div>
                            <a class="btn button-effect stretched-link secondary" href="{{ route('product-details', $product->slug) }}" role="button"><span>View Product</span></a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection

@push('scripts')
    @foreach ($products ?? [] as $product)
        <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "Product",
            "name": "{{ $product->name }}",
            "image": [
                "{{ $product->image ? asset('storage/product/' . $product->image) : '' }}"
            ],
            "description": {!! json_encode(strip_tags($product->description)) !!},
            "sku": "{{ $product->slug }}",
            "additionalProperty": [
                @if(!empty($product->specification))
                    @foreach(explode("\n", strip_tags($product->specification)) as $spec)
                    {
                        "@type": "PropertyValue",
                        "name": "Specification",
                        "value": "{{ trim($spec) }}"
                    }@if(!$loop->last),@endif
                    @endforeach
                @endif
            ],
            "feature": [
                @if(!empty($product->feature))
                    @foreach(explode("\n", strip_tags($product->feature)) as $feat)
                    "{{ trim($feat) }}"@if(!$loop->last),@endif
                    @endforeach
                @endif
            ],
            "offers": {
                "@type": "Offer",
                "url": "{{ url()->current() }}",
                "priceCurrency": "USD",
                "availability": "{{ $product->status == 'Active' ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock' }}",
                "price": "0.00"
            }
        }
        </script>
    @endforeach
@endpush