@extends('layouts.app')
@section('title','Gallery — Rukay\'s Hairdo & Beauty')
@section('content')
<style>
.gallery-hero { background:linear-gradient(135deg,#2C1810,#8B3252); color:#fff; padding:4rem 0; text-align:center; }
.gallery-hero h1 { font-size:2.8rem; margin-bottom:.75rem; }
.gal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; margin-top:2rem; }
.gal-item { position:relative; border-radius:.75rem; overflow:hidden; aspect-ratio:4/3; cursor:pointer; }
.gal-item img { width:100%;height:100%;object-fit:cover;transition:transform .3s; }
.gal-item:hover img { transform:scale(1.04); }
.gal-overlay { position:absolute;inset:0;background:rgba(44,24,16,0);transition:background .3s;display:flex;align-items:flex-end;padding:1rem; }
.gal-item:hover .gal-overlay { background:rgba(44,24,16,.45); }
.gal-caption { color:#fff;font-size:.875rem;font-weight:500;opacity:0;transition:opacity .3s; }
.gal-item:hover .gal-caption { opacity:1; }
.cat-filter { display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin:2.5rem 0 0; }
.cat-btn { padding:.5rem 1.25rem;border-radius:9999px;border:1.5px solid #E8D5C4;background:#fff;color:#7A6058;font-size:.875rem;cursor:pointer;transition:all .2s; }
.cat-btn:hover,.cat-btn.active { background:#8B3252;color:#fff;border-color:#8B3252; }
</style>
<div class="gallery-hero"><div class="container"><h1>Our Gallery</h1><p>Explore the artistry and elegance created at Rukay's.</p></div></div>
<div class="container" style="padding-bottom:4rem;">
    <div class="cat-filter">
        <button class="cat-btn active" data-cat="all">All</button>
        @foreach($categories as $cat)<button class="cat-btn" data-cat="{{ $cat }}">{{ ucfirst($cat) }}</button>@endforeach
    </div>
    <div class="gal-grid" id="gal-grid">
        @foreach($images as $img)
        <div class="gal-item" data-cat="{{ $img->category }}">
            <img src="{{ $img->url }}" alt="{{ $img->caption }}" loading="lazy">
            <div class="gal-overlay"><span class="gal-caption">{{ $img->caption }}</span></div>
        </div>
        @endforeach
    </div>
</div>
@push('scripts')
<script>
document.querySelectorAll('.cat-btn').forEach(btn=>{
    btn.addEventListener('click',()=>{
        document.querySelectorAll('.cat-btn').forEach(b=>b.classList.remove('active'));
        btn.classList.add('active');
        const cat=btn.dataset.cat;
        document.querySelectorAll('.gal-item').forEach(item=>{item.style.display=(cat==='all'||item.dataset.cat===cat)?'':'none';});
    });
});
</script>
@endpush
@endsection