@extends('layouts.site')

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

@push('styles')
<style>
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,5vw,80px);align-items:start}
.form-card{background:var(--ink-3);border:1px solid var(--line-soft);padding:clamp(28px,3vw,48px)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.info-block{margin-bottom:34px}
.info-block .kicker{margin-bottom:16px}
.info-block .big{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.05}
.info-block a.big:hover{color:var(--brass-br)}
.info-block p{color:var(--bone-2);font-size:15.5px;line-height:1.7}
.hours-row{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line-soft);font-size:15px}
.hours-row span:first-child{color:var(--bone-2)}
.hours-row span:last-child{font-family:var(--mono);font-size:13px;color:var(--brass-br);letter-spacing:.04em}

.map-wrap{position:relative;margin-top:clamp(48px,6vw,80px);height:clamp(340px,42vw,520px);border:1px solid var(--line-soft);overflow:hidden;background:#0c0d10}
.map-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:54px 54px}
.map-roads{position:absolute;inset:0}
.map-roads span{position:absolute;background:rgba(243,239,231,.06)}
.map-roads .r1{left:0;right:0;top:38%;height:10px}
.map-roads .r2{top:0;bottom:0;left:30%;width:8px}
.map-roads .r3{left:0;right:0;bottom:24%;height:14px;transform:skewY(-3deg)}
.map-roads .r4{top:0;bottom:0;right:22%;width:6px}
.map-water{position:absolute;right:-5%;bottom:-10%;width:46%;height:55%;background:radial-gradient(ellipse at center,rgba(38,48,58,.5),transparent 70%);transform:rotate(-12deg)}
.pin{position:absolute;left:30%;top:38%;transform:translate(-50%,-100%);z-index:3}
.pin .dot{width:18px;height:18px;background:var(--brass);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 4px 18px rgba(199,154,63,.5)}
.pin .ring{position:absolute;left:50%;top:9px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--brass);transform:translate(-50%,-50%);animation:ping 2.2s var(--ease) infinite}
@keyframes ping{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}100%{transform:translate(-50%,-50%) scale(4);opacity:0}}
.map-card{position:absolute;left:24px;bottom:24px;z-index:4;background:rgba(10,10,11,.82);backdrop-filter:blur(10px);border:1px solid var(--line);padding:20px 22px;max-width:300px}
.map-card h4{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.2rem;margin-bottom:6px}
.map-card p{font-size:13.5px;color:var(--bone-2);margin-bottom:14px}
.form-success{display:none;background:rgba(199,154,63,.1);border:1px solid var(--brass-deep);padding:20px;margin-bottom:22px;color:var(--brass-br);font-size:15px}
.form-success.show{display:block}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:520px){.form-row{grid-template-columns:1fr}}
</style>
@endpush

@section('content')
@php
  $phone = $siteSettings['phone'] ?? '+971 4 456 7890';
  $email = $siteSettings['email'] ?? 'train@headbangers.ae';
  $address = $siteSettings['address'] ?? 'Gate Village, Building 4<br>DIFC, Dubai, UAE';
@endphp

<section class="page-hero wrap">
  <span class="kicker" data-reveal>Contact</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="sec-pad-sm wrap">
  <div class="contact-grid">
    <!-- FORM -->
    <div class="form-card" data-reveal>
      <span class="kicker no-rule" style="margin-bottom:22px;display:flex">Send a message</span>
      <livewire:contact-form />
    </div>

    <!-- INFO -->
    <div data-reveal data-delay="1">
      <div class="info-block">
        <span class="kicker">Visit</span>
        <div class="big">{!! $address !!}</div>
      </div>
      <div class="info-block">
        <span class="kicker">Get in touch</span>
        <a href="tel:{{ preg_replace('/\s+/', '', $phone) }}" class="big" style="display:block">{{ $phone }}</a>
        <a href="mailto:{{ $email }}" class="big" style="display:block;margin-top:8px">{{ $email }}</a>
      </div>
      <div class="info-block">
        <span class="kicker">Opening hours</span>
        <div class="hours-row"><span>Monday &ndash; Friday</span><span>06:00 &ndash; 22:00</span></div>
        <div class="hours-row"><span>Saturday</span><span>08:00 &ndash; 20:00</span></div>
        <div class="hours-row"><span>Sunday</span><span>08:00 &ndash; 18:00</span></div>
      </div>
      <div class="info-block">
        <span class="kicker">Follow</span>
        <div class="socials" style="margin-top:14px">
          <a href="#" aria-label="Instagram"><span style="font-family:var(--mono);font-size:10px;font-weight:700">IG</span></a>
          <a href="#" aria-label="TikTok"><span style="font-family:var(--mono);font-size:10px;font-weight:700">TT</span></a>
          <a href="#" aria-label="YouTube"><span style="font-family:var(--mono);font-size:10px;font-weight:700">YT</span></a>
          <a href="#" aria-label="LinkedIn"><span style="font-family:var(--mono);font-size:10px;font-weight:700">IN</span></a>
        </div>
      </div>
    </div>
  </div>

  <!-- MAP -->
  <div class="map-wrap" data-reveal>
    <div class="map-grid"></div>
    <div class="map-roads"><span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span></div>
    <div class="map-water"></div>
    <div class="pin"><span class="ring"></span><span class="dot"></span></div>
    <div class="map-card">
      <h4>Head Bangers</h4>
      <p>Gate Village, Building 4, DIFC &mdash; ground floor, opposite the plaza.</p>
      <a href="https://www.google.com/maps/search/?api=1&query=Gate+Village+DIFC+Dubai" target="_blank" rel="noopener" class="link-arrow">Open in Google Maps &rarr;</a>
    </div>
  </div>
</section>
@endsection
