@extends('layouts.site')
@section('title','Stone & Product Photo and Video Gallery | VIPO Granite')
@section('description','View VIPO Granite stone gallery photos and videos showcasing granite, marble, terrazzo, flooring, countertops and architectural finishes in Uganda and South Sudan.')
@section('content')
@include('site.partials.page-hero',['eyebrow'=>$copy['hero_eyebrow'],'heading'=>$copy['hero_heading'],'intro'=>$copy['hero_intro']])
<section class="section"><div class="wrap"><div class="section-heading"><div><span class="eyebrow">{{ $copy['gallery_eyebrow'] }}</span><h2 class="section-title">{{ $copy['gallery_heading'] }}</h2></div><a href="{{ route('quote') }}" class="button button-dark">Ask about these stones ↗</a></div>
<nav class="gallery-filters" aria-label="Filter gallery products"><a @class(['selected'=>$selectedProduct==='']) href="{{ route('gallery') }}">All materials</a>@foreach($products as $product)<a @class(['selected'=>$selectedProduct===$product->slug]) href="{{ route('gallery',['product'=>$product->slug]) }}">{{ $product->title }}</a>@endforeach</nav>
<div class="stone-gallery-grid">@forelse($items as $item)<figure class="stone-gallery-item">@if($item->media_type==='video')<video controls preload="metadata" playsinline aria-label="{{ $item->title }}"><source src="{{ $item->media_url }}">Your browser cannot play this video. <a href="{{ $item->media_url }}">Open the file</a>.</video>@else<a href="{{ $item->media_url }}" target="_blank" rel="noopener" aria-label="Open larger image of {{ $item->title }}"><img src="{{ $item->media_url }}" alt="{{ $item->alt_text ?: $item->title }}" loading="lazy"></a>@endif<figcaption><span class="card-kicker">{{ $item->product?->title ?: 'Stone inspiration' }}</span><h3>{{ $item->title }}</h3>@if($item->caption)<p>{{ $item->caption }}</p>@endif</figcaption></figure>@empty<div class="gallery-empty"><h3>Looking for inspiration?</h3><p>This gallery will feature real stone material photographs and videos as VIPO's team uploads them. For the current selection, ask us directly.</p><a class="button button-dark" href="{{ route('contact') }}">Contact VIPO ↗</a></div>@endforelse</div>
<div class="pagination">{{ $items->links() }}</div><p class="editorial-note">{{ $copy['gallery_note'] }}</p></div></section>
@include('site.partials.cta')
@endsection