@extends('layouts.site')

@section('title', 'Gallery — Head Bangers Boxing, Dubai')

@push('styles')
<style>
.gal-section{margin-bottom:clamp(20px,3vw,40px)}
.gal-label{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:clamp(40px,5vw,72px) 0 24px;flex-wrap:wrap}
.gal-label h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.gal-label .count{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.grid{display:grid;gap:14px}
.g-2{grid-template-columns:1.6fr 1fr}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-asym{grid-template-columns:1fr 1.4fr 1fr}
.tile{position:relative;overflow:hidden;background:var(--ink-3)}
.tile .responsive-image{width:100%;height:100%;display:block;transition:transform .7s var(--ease)}
.tile:hover .responsive-image{transform:scale(1.05)}
.tile .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(10,10,11,.7),transparent 50%);opacity:0;transition:opacity .4s}
.tile:hover .scrim{opacity:1}
.tile .cap{position:absolute;left:16px;bottom:16px;z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);opacity:0;transform:translateY(8px);transition:.4s var(--ease)}
.tile:hover .cap{opacity:1;transform:none}
.h-sm{height:clamp(220px,24vw,300px)}
.h-md{height:clamp(300px,32vw,420px)}
.h-lg{height:clamp(360px,46vw,600px)}
.feature-tile{height:clamp(380px,50vw,640px)}
.feature-tile .scrim{opacity:1;background:linear-gradient(to top,rgba(10,10,11,.85),transparent 55%)}
.feature-tile .feature-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(28px,4vw,56px)}
.feature-tile .feature-cap h3{font-size:clamp(2rem,5vw,4rem)}
.feature-tile .responsive-image{transition:transform .9s var(--ease)}
@media (max-width:760px){
  .g-2,.g-asym{grid-template-columns:1fr}
  .g-4{grid-template-columns:1fr 1fr}
  .h-sm,.h-md{height:clamp(220px,46vw,320px)}
}
</style>
@endpush

@section('content')
<section class="page-hero wrap">
  <span class="kicker" data-reveal>Gallery</span>
  <h1 class="display-lg" data-reveal data-delay="1">{!! nl2br(e($blocks['hero']->title)) !!}</h1>
  <p class="lead" data-reveal data-delay="2" style="max-width:48ch">{{ $blocks['hero']->body }}</p>
</section>

<section class="wrap" style="padding-bottom:clamp(72px,11vh,140px)">

  @if ($featureImage)
    <div class="tile feature-tile" data-reveal>
      <x-responsive-image :src="$featureImage->image_path" style="width:100%;height:100%" />
      <div class="scrim"></div>
      <div class="feature-cap">
        <span class="kicker no-rule">{{ $featureImage->caption }}</span>
        <h3 class="display-md" style="margin-top:10px">Where Dubai<br>comes to box.</h3>
      </div>
    </div>
  @endif

  @foreach ($sections as $section)
    <div class="gal-label">
      <h2 class="display-sm" data-reveal>{{ $section->name }}</h2>
      <span class="count" data-reveal data-delay="1">{{ $section->subtitle }}</span>
    </div>
    @foreach ($section->images->groupBy('grid_class') as $gridClass => $images)
      <div class="grid {{ $gridClass }} gal-section" data-reveal>
        @foreach ($images as $image)
          <div class="tile {{ $image->height_class }}">
            <x-responsive-image :src="$image->image_path" style="width:100%;height:100%" />
            <div class="scrim"></div>
            <span class="cap">{{ $image->caption }}</span>
          </div>
        @endforeach
      </div>
    @endforeach
  @endforeach
</section>

<!-- CTA -->
<x-cta-band
  :src="$blocks['cta']->meta['image'] ?? 'action.jpg'"
  :kicker="$blocks['cta']->meta['kicker'] ?? ''"
  :title="nl2br(e($blocks['cta']->title))"
>
  <x-slot:actions>
    <a href="{{ route('classes') }}" class="btn btn-primary btn-lg">Book your first class <span class="arrow">&rarr;</span></a>
    <a href="{{ route('contact') }}" class="btn btn-ghost btn-lg">Visit the gym</a>
  </x-slot:actions>
</x-cta-band>
@endsection
