@extends('layouts.site')

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

@push('styles')
<style>
.about-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,5vw,72px);align-items:end}
.about-hero .am{position:relative}
.about-hero .responsive-image{width:100%;height:clamp(300px,34vw,440px)}
.philosophy{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,90px)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:clamp(40px,6vw,72px)}
.value{background:var(--ink);padding:clamp(28px,3vw,42px)}
.value .vi{font-family:var(--display);font-weight:900;font-size:1.5rem;color:var(--brass-br);margin-bottom:18px}
.value h3{font-size:1.4rem;margin-bottom:12px}
.value p{color:var(--muted);font-size:15px}
.roster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px)}
.coach-card{background:var(--ink-3);border:1px solid var(--line-soft);display:grid;grid-template-columns:38% 1fr;overflow:hidden}
.coach-card .responsive-image{width:100%;height:100%;min-height:320px}
.coach-card .cc-body{padding:clamp(24px,2.4vw,36px);display:flex;flex-direction:column}
.coach-card h3{font-size:1.55rem;line-height:.95}
.coach-card .role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-br);margin:8px 0 16px}
.coach-card p{color:var(--bone-2);font-size:14.5px;flex:1;margin-bottom:18px}
.facility-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.facility-split .responsive-image{width:100%;height:clamp(380px,46vw,560px)}
@media (max-width:900px){
  .about-hero,.philosophy,.facility-split{grid-template-columns:1fr}
  .roster{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr}
}
@media (max-width:560px){.coach-card{grid-template-columns:1fr}.coach-card .responsive-image{min-height:240px}}
</style>
@endpush

@section('content')
<section class="page-hero wrap">
  <div class="about-hero">
    <div>
      <span class="kicker" data-reveal>The House &middot; Est. 2024</span>
      <h1 class="display-lg" data-reveal data-delay="1">{!! str_replace('fighters.', '<span class="brass">fighters.</span>', nl2br(e($blocks['hero']->title))) !!}</h1>
      <p class="lead" data-reveal data-delay="2" style="max-width:46ch">{{ $blocks['hero']->body }}</p>
    </div>
    <div class="am media-wrap" data-reveal data-delay="2">
      <x-responsive-image :src="$blocks['hero']->meta['image'] ?? 'tex-a.jpg'" style="width:100%;height:clamp(300px,34vw,440px)" />
      <div class="scrim"></div>
      <div class="media-tag">{{ $blocks['hero']->meta['media_tag'] ?? 'The floor · DIFC' }}</div>
    </div>
  </div>
</section>

<div class="stat-row wrap" data-reveal>
  <div class="stat"><div class="n"><em>2024</em></div><div class="l">Founded in Dubai</div></div>
  <div class="stat"><div class="n">600<em>+</em></div><div class="l">Members &amp; counting</div></div>
  <div class="stat"><div class="n">12</div><div class="l">Coaches on the floor</div></div>
  <div class="stat"><div class="n">1,200<em>m&sup2;</em></div><div class="l">Of training space</div></div>
</div>

<!-- PHILOSOPHY -->
<section class="sec-pad wrap">
  <div class="philosophy">
    <div>
      <span class="kicker" data-reveal>Philosophy</span>
      <h2 class="display-md" data-reveal data-delay="1" style="margin-top:18px">{!! nl2br(e($blocks['philosophy']->title)) !!}</h2>
    </div>
    <div data-reveal data-delay="1">
      <p class="lead" style="margin-bottom:22px">{{ $blocks['philosophy']->body }}</p>
      <p style="color:var(--bone-2);margin-bottom:22px">Our coaching is technical first. Before we ask you to hit hard, we teach you to hit <em>right</em> &mdash; stance, guard, footwork, breath. Power is a by-product of precision. That patience is what separates a fitness fad from a craft you&rsquo;ll carry for life.</p>
      <p style="color:var(--bone-2)">And we do it together. Capped classes, named coaches, a community that notices when you miss a week. Premium, to us, isn&rsquo;t marble and mirrors. It&rsquo;s being seen.</p>
    </div>
  </div>

  <div class="value-grid">
    <div class="value" data-reveal>
      <div class="vi">01</div>
      <h3>Technique<br>over ego</h3>
      <p>Every punch is earned. We build from the ground up so the work lasts longer than the soreness.</p>
    </div>
    <div class="value" data-reveal data-delay="1">
      <div class="vi">02</div>
      <h3>Everyone<br>spars equal</h3>
      <p>Beginner or pro, you&rsquo;re coached with the same care. No tiers of attention, no VIP shortcuts.</p>
    </div>
    <div class="value" data-reveal data-delay="2">
      <div class="vi">03</div>
      <h3>Train hard,<br>recover smart</h3>
      <p>The work between rounds matters. Mobility, breath and recovery are programmed, not optional.</p>
    </div>
  </div>
</section>

<!-- FACILITY -->
<section class="sec-pad" style="background:var(--ink-2)">
  <div class="wrap facility-split">
    <div class="media-wrap" data-reveal>
      <x-responsive-image src="tex-f.jpg" style="width:100%;height:clamp(380px,46vw,560px)" />
      <div class="scrim"></div>
      <div class="media-tag">Competition ring</div>
    </div>
    <div>
      <span class="kicker" data-reveal>The Facility</span>
      <h2 class="display-md" data-reveal data-delay="1" style="margin-top:18px">A pro camp.<br>Open to all.</h2>
      <p class="lead" data-reveal data-delay="1" style="margin:22px 0">1,200 square metres in the heart of DIFC, designed for the sport and nothing else. No distractions, no influencers&rsquo; corner &mdash; just the tools to get better.</p>
      <ul class="feat-list" data-reveal data-delay="2" style="margin-top:8px">
        <li class="feat"><div class="fi">&#9670;</div><div><h4>Two competition-grade rings</h4><p>Full-size, sprung and maintained to federation standard for technique and supervised sparring.</p></div></li>
        <li class="feat"><div class="fi">&#9670;</div><div><h4>40 Italian leather bags</h4><p>Heavy, speed, double-end and uppercut stations &mdash; replaced on a rolling schedule.</p></div></li>
        <li class="feat"><div class="fi">&#9670;</div><div><h4>Strength floor &amp; recovery suite</h4><p>Platforms, rigs and free weights, plus contrast therapy, sauna and mobility space.</p></div></li>
      </ul>
    </div>
  </div>
</section>

<!-- ROSTER -->
<section class="sec-pad wrap">
  <div class="eyebrow-row">
    <div>
      <span class="kicker" data-reveal>The Corner</span>
      <h2 class="display-md" data-reveal data-delay="1" style="margin-top:18px">Coaches who&rsquo;ve<br>been in the deep water.</h2>
    </div>
    <p class="lead" data-reveal data-delay="2" style="max-width:32ch">Twelve coaches, one standard. Here are the people who&rsquo;ll be in your corner.</p>
  </div>
  <div class="roster">
    @foreach ($coaches as $index => $coach)
      <div class="coach-card" @if($index % 2 === 1) data-reveal data-delay="1" @else data-reveal @endif>
        <x-responsive-image :src="$coach->photoUrl()" style="width:100%;height:100%;min-height:320px" />
        <div class="cc-body">
          @php
            $nameParts = preg_split('/\s+/', $coach->name, 2);
          @endphp
          <h3>{{ $nameParts[0] }}@if(!empty($nameParts[1]))<br>{{ $nameParts[1] }}@endif</h3>
          <div class="role">{{ $coach->role }}</div>
          <p>{{ $coach->bio }}</p>
          @if ($coach->tags)
            <div class="tag-row">
              @foreach ($coach->tags as $tag)
                <span class="tag">{{ $tag }}</span>
              @endforeach
            </div>
          @endif
        </div>
      </div>
    @endforeach
  </div>
</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
