@extends('layouts.site')

@section('title', 'Classes & Schedule — Head Bangers Boxing, Dubai')

@push('styles')
<style>
.ctype-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.ctype{background:var(--ink);padding:clamp(28px,3vw,46px);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,2.4vw,40px)}
.ctype .ci{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,4vw,3.6rem);color:transparent;-webkit-text-stroke:1px var(--brass-deep);line-height:.8}
.ctype h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:10px}
.ctype p{color:var(--muted);font-size:15px;max-width:42ch;margin-bottom:20px}
.ctype .ct-meta{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.ct-meta .lab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2);display:flex;flex-direction:column;gap:6px}
.ct-meta .lab b{color:var(--brass-br);font-weight:700;font-size:13px;letter-spacing:.08em}
.intensity{display:flex;gap:5px;align-items:center}
.intensity i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.intensity i.on{background:var(--brass)}

.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--bone-2);
  border:1px solid var(--line);padding:11px 18px;border-radius:2px;transition:.3s;background:transparent}
.chip:hover{border-color:var(--brass);color:var(--bone)}
.chip.on{background:var(--brass);color:#0a0a0b;border-color:var(--brass)}

.sched-scroll{overflow-x:auto;margin:0 calc(var(--gut)*-1);padding:0 var(--gut) 8px;-webkit-overflow-scrolling:touch}
.sched{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);min-width:980px}
.day-col{background:var(--ink);display:flex;flex-direction:column}
.day-head{padding:18px 16px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:baseline;position:sticky;top:0;background:var(--ink-2);z-index:1}
.dh-day{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.15rem;letter-spacing:.02em}
.dh-date{font-family:var(--mono);font-size:11px;color:var(--muted)}
.day-col .slots{display:flex;flex-direction:column;padding:10px;gap:10px;flex:1}
.slot{background:var(--ink-3);border:1px solid var(--line-soft);border-left:2px solid var(--brass-deep);padding:13px 13px 12px;transition:.3s;cursor:pointer}
.slot:hover{border-color:var(--line);border-left-color:var(--brass);transform:translateY(-2px);background:var(--ink-4)}
.slot-time{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--brass-br)}
.slot h4{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.05rem;line-height:1;margin:7px 0 5px}
.slot-coach{font-size:12.5px;color:var(--muted)}
.slot-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.slot-len{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted-2);text-transform:uppercase}
.slot-spots{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#7bbf8a}
.slot-spots.low{color:var(--brass-br)}
.slot-spots.full{color:var(--muted-2)}
.day-col.empty-day .slots::after{content:'\2014';color:var(--muted-2);text-align:center;padding:30px 0;font-family:var(--mono)}

.day-tabs{display:none;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.day-tab{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-2);
  border:1px solid var(--line);padding:10px 14px;border-radius:2px;transition:.3s}
.day-tab.on{background:var(--brass);color:#0a0a0b;border-color:var(--brass)}

.book-note{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:clamp(40px,6vw,72px)}
.book-note > div{background:var(--ink-3);padding:clamp(28px,3vw,48px)}
.book-note h3{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:14px}
.book-note p{color:var(--bone-2);max-width:42ch;margin-bottom:22px}
.steps{display:flex;flex-direction:column;gap:18px}
.step{display:flex;gap:16px;align-items:flex-start}
.step .sn{font-family:var(--mono);font-weight:700;color:var(--brass-br);font-size:13px;border:1px solid var(--line);width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;border-radius:50%}
.step b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.05rem;display:block;margin-bottom:3px}
.step span{color:var(--muted);font-size:14px}

@media (max-width:900px){.ctype-grid{grid-template-columns:1fr}.book-note{grid-template-columns:1fr}}
@media (max-width:760px){
  .day-tabs{display:flex}
  .sched-scroll{overflow:visible;margin:0;padding:0}
  .sched{display:block;min-width:0;border:0;background:transparent}
  .day-col{display:none;border:1px solid var(--line-soft);margin-bottom:1px}
  .day-col:not(.day-hidden){display:flex}
  .day-col.day-hidden{display:none}
  .day-head{position:static}
}
@media (max-width:480px){.ctype{grid-template-columns:1fr;gap:14px}.ctype .ci{font-size:2rem}}
</style>
@endpush

@section('content')
@php
  $dayLabels = ['mon' => 'Mon', 'tue' => 'Tue', 'wed' => 'Wed', 'thu' => 'Thu', 'fri' => 'Fri', 'sat' => 'Sat', 'sun' => 'Sun'];
  $filterLabels = [
    'heavy' => 'Heavy Hitter',
    'technique' => 'Technique',
    'strength' => 'Strength & Cond.',
    'sparring' => 'Sparring',
    'recovery' => 'Recovery',
  ];
@endphp

<section class="page-hero wrap">
  <span class="kicker" data-reveal>Classes &amp; Schedule</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:50ch">{{ $blocks['hero']->body }}</p>
</section>

<!-- CLASS TYPES -->
<section class="wrap" style="padding-bottom:clamp(48px,7vh,96px)">
  <div class="ctype-grid" data-reveal>
    @foreach ($classTypes as $classType)
      <div class="ctype">
        <div class="ci">{{ $classType->number }}</div>
        <div>
          <h3>{{ $classType->name }}</h3>
          <p>{{ $classType->description }}</p>
          <div class="ct-meta">
            <div class="lab">Duration<b>{{ $classType->duration_minutes }} min</b></div>
            <div class="lab">Level<b>{{ $classType->level_label }}</b></div>
            <div class="lab">Intensity<div class="intensity">
              @for ($i = 1; $i <= 5; $i++)
                <i @class(['on' => $i <= $classType->intensity])></i>
              @endfor
            </div></div>
          </div>
        </div>
      </div>
    @endforeach
  </div>
</section>

<!-- SCHEDULE -->
<section class="sec-pad" style="background:var(--ink-2)">
  <div class="wrap">
    <div class="eyebrow-row">
      <div>
        <span class="kicker" data-reveal>This Week</span>
        <h2 class="display-md" data-reveal data-delay="1" style="margin-top:18px">The schedule.</h2>
      </div>
      <p class="lead" data-reveal data-delay="2" style="max-width:30ch">Filter by program, then tap a slot to book. Updated every Sunday.</p>
    </div>

    <div class="filter-bar" data-reveal>
      <button class="chip on" data-filter="all" type="button">All classes</button>
      @foreach ($filterLabels as $slug => $label)
        <button class="chip" data-filter="{{ $slug }}" type="button">{{ $label }}</button>
      @endforeach
    </div>

    <div class="day-tabs" data-reveal>
      @foreach ($dayLabels as $key => $label)
        <button class="day-tab @if($key === 'mon') on @endif" data-daytab="{{ $key }}" type="button">{{ $label }}</button>
      @endforeach
    </div>

    <div class="sched-scroll" data-reveal>
      <div class="sched">
        @foreach ($dayLabels as $dayKey => $dayLabel)
          @php $sessions = $sessionsByDay[$dayKey] ?? collect(); @endphp
          <div class="day-col @if($sessions->isEmpty()) empty-day @endif" data-day="{{ $dayKey }}">
            <div class="day-head">
              <span class="dh-day">{{ $dayLabel }}</span>
              <span class="dh-date">{{ strtoupper($weekDates[$dayKey]->format('d M')) }}</span>
            </div>
            <div class="slots">
              @foreach ($sessions as $session)
                @php
                  $spotsClass = match ($session->availability) {
                    'low' => 'low',
                    'waitlist' => 'full',
                    default => '',
                  };
                  $time = \Illuminate\Support\Str::of($session->start_time)->substr(0, 5);
                @endphp
                <div class="slot" data-slot="{{ $session->classType->slug }}">
                  <span class="slot-time">{{ $time }}</span>
                  <h4>{{ $session->classType->name }}</h4>
                  <span class="slot-coach">{{ $session->coach->shortName() }}</span>
                  <div class="slot-foot">
                    <span class="slot-len">{{ $session->duration_minutes }}m</span>
                    <span class="slot-spots {{ $spotsClass }}">{{ $session->spots_label }}</span>
                  </div>
                </div>
              @endforeach
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </div>
</section>

<!-- BOOKING -->
<section class="sec-pad wrap">
  <div class="book-note">
    <div>
      <span class="kicker" data-reveal>Booking</span>
      <h3 data-reveal data-delay="1" style="margin-top:16px">First class<br>on the house.</h3>
      <p data-reveal data-delay="1">Memberships book through the Head Bangers app &mdash; reserve a spot up to 7 days out, manage your schedule, and join the waitlist with one tap. New here? Claim a free class and we&rsquo;ll set you up at the front desk.</p>
      <div class="hero-actions" data-reveal data-delay="2" style="display:flex;gap:14px;flex-wrap:wrap">
        <a href="{{ route('membership') }}" class="btn btn-primary">Claim free class <span class="arrow">&rarr;</span></a>
        <a href="{{ route('contact') }}" class="btn btn-ghost">Ask a question</a>
      </div>
    </div>
    <div>
      <span class="kicker no-rule" data-reveal>How it works</span>
      <div class="steps" data-reveal data-delay="1" style="margin-top:24px">
        <div class="step"><span class="sn">1</span><div><b>Book your spot</b><span>Choose a class and time. Capped sizes mean your place is guaranteed.</span></div></div>
        <div class="step"><span class="sn">2</span><div><b>Arrive 15 early</b><span>Grab gloves and wraps (provided), meet your coach, get settled.</span></div></div>
        <div class="step"><span class="sn">3</span><div><b>Answer the bell</b><span>Leave it all on the canvas. Showers, towels and recovery are waiting.</span></div></div>
      </div>
    </div>
  </div>
</section>
@endsection
