@extends('layouts.site')

@section('title', 'Membership & Pricing — Head Bangers Boxing, Dubai')

@push('styles')
<style>
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tier{background:var(--ink-3);border:1px solid var(--line-soft);padding:clamp(28px,2.6vw,40px);display:flex;flex-direction:column;position:relative;transition:.4s var(--ease)}
.tier:hover{transform:translateY(-5px);border-color:var(--line)}
.tier.feature{background:linear-gradient(160deg,#220b0d,var(--ink-3) 55%);border-color:var(--brass-deep)}
.tier .badge{position:absolute;top:-1px;right:24px;background:var(--brass);color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px}
.tier .tname{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.7rem;line-height:1}
.tier .tdesc{color:var(--muted);font-size:14px;margin:10px 0 22px;min-height:42px}
.tier .price{font-family:var(--display);font-weight:900;font-size:clamp(2.8rem,4vw,3.8rem);line-height:.9;display:flex;align-items:baseline;gap:4px}
.tier .price sup{font-size:1rem;font-family:var(--mono);font-weight:700;color:var(--muted)}
.tier .price small{font-size:.9rem;font-family:var(--mono);font-weight:400;color:var(--muted);align-self:flex-end;margin-bottom:8px}
.tier ul{margin:26px 0 30px;flex:1}
.tier ul li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line-soft);font-size:14.5px;color:var(--bone-2)}
.tier ul li::before{content:'';width:7px;height:7px;background:var(--brass);transform:rotate(45deg);margin-top:7px;flex-shrink:0}
.tier ul li.off{color:var(--muted-2)}
.tier ul li.off::before{background:var(--line)}
.tier .btn{justify-content:center}

.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.pack{background:var(--ink);padding:clamp(26px,2.6vw,38px);text-align:center}
.pack .pn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-br);margin-bottom:16px}
.pack .pp{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,3.4vw,3rem);line-height:.9}
.pack .pp sup{font-size:.8rem;font-family:var(--mono);color:var(--muted);vertical-align:super}
.pack .pper{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:10px;letter-spacing:.06em}

.intro-banner{background:linear-gradient(120deg,#220b0d,var(--ink-3));border:1px solid var(--brass-deep);padding:clamp(32px,4vw,56px);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.intro-banner h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
.intro-banner p{color:var(--bone-2);max-width:48ch;margin-top:12px}

.faq{max-width:880px}
@media (max-width:900px){.tier-grid,.packs{grid-template-columns:1fr}.tier.feature{order:-1}.intro-banner{grid-template-columns:1fr}}
@media (max-width:560px){.packs{grid-template-columns:1fr}}
</style>
@endpush

@section('content')
<section class="page-hero wrap">
  <span class="kicker" data-reveal>Membership &amp; Pricing</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>

<!-- INTRO OFFER -->
<section class="wrap" style="padding-bottom:clamp(40px,5vh,72px)">
  <div class="intro-banner" data-reveal>
    <div>
      <span class="kicker no-rule">New members</span>
      <h2 class="display-sm" style="margin-top:14px">{{ $blocks['intro_offer']->title }}</h2>
      <p>{!! str_replace('50% off their first month', '<b style="color:var(--brass-br)">50% off their first month</b>', e($blocks['intro_offer']->body)) !!}</p>
    </div>
    <a href="{{ route('contact') }}" class="btn btn-primary btn-lg">Claim free class <span class="arrow">&rarr;</span></a>
  </div>
</section>

<!-- TIERS -->
<section class="sec-pad-sm wrap">
  <div class="eyebrow-row">
    <div>
      <span class="kicker" data-reveal>Memberships</span>
      <h2 class="display-md" data-reveal data-delay="1" style="margin-top:16px">Monthly, no<br>lock-in.</h2>
    </div>
    <p class="lead" data-reveal data-delay="2" style="max-width:30ch">Cancel or freeze any time with 30 days&rsquo; notice. Annual options save more.</p>
  </div>

  <div class="tier-grid">
    @foreach ($tiers as $index => $tier)
      <div class="tier @if($tier->is_featured) feature @endif" @if($index > 0) data-reveal data-delay="{{ $index }}" @else data-reveal @endif>
        @if ($tier->badge_text)
          <span class="badge">{{ $tier->badge_text }}</span>
        @endif
        <div class="tname">{{ $tier->name }}</div>
        <div class="tdesc">{{ $tier->description }}</div>
        <div class="price">
          <sup>AED</sup>@if($tier->slug === 'dynasty')12k@else{{ number_format($tier->price_cents / 100) }}@endif<small>/ {{ $tier->billing_period }}</small>
        </div>
        <ul>
          @foreach ($tier->features as $feature)
            <li @class(['off' => ! $feature->is_included])>{{ $feature->text }}</li>
          @endforeach
        </ul>
        <a href="{{ route('contact') }}" class="btn btn-{{ $tier->cta_variant ?? 'ghost' }}">Choose {{ $tier->name }}</a>
      </div>
    @endforeach
  </div>
</section>

<!-- CLASS PACKS -->
<section class="sec-pad-sm wrap">
  <div class="eyebrow-row">
    <div>
      <span class="kicker" data-reveal>No commitment</span>
      <h2 class="display-md" data-reveal data-delay="1" style="margin-top:16px">Class packs.</h2>
    </div>
    <p class="lead" data-reveal data-delay="2" style="max-width:32ch">Pay as you go. Packs never expire while your account is active.</p>
  </div>
  <div class="packs" data-reveal>
    @foreach ($packs as $pack)
      <div class="pack">
        <div class="pn">{{ $pack->name }}</div>
        <div class="pp"><sup>AED</sup>{{ number_format($pack->price_cents / 100) }}</div>
        <div class="pper">{{ $pack->per_unit_label }}</div>
      </div>
    @endforeach
  </div>
</section>

<!-- FAQ -->
<section class="sec-pad" style="background:var(--ink-2)">
  <div class="wrap">
    <div class="eyebrow-row">
      <div>
        <span class="kicker" data-reveal>Good to know</span>
        <h2 class="display-md" data-reveal data-delay="1" style="margin-top:16px">Questions,<br>answered.</h2>
      </div>
    </div>
    <div class="faq" data-reveal>
      @foreach ($faqs as $faq)
        <div class="acc-item">
          <button class="acc-head" type="button"><h3>{{ $faq->question }}</h3><span class="acc-icon"></span></button>
          <div class="acc-body"><div class="acc-body-inner">{{ $faq->answer }}</div></div>
        </div>
      @endforeach
    </div>
  </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('contact') }}" class="btn btn-primary btn-lg">Claim free class <span class="arrow">&rarr;</span></a>
    <a href="{{ route('classes') }}" class="btn btn-ghost btn-lg">See the schedule</a>
  </x-slot:actions>
</x-cta-band>
@endsection
