@php
  $footer = app(\App\Support\Storefront\FooterContent::class)->data();
  $contact = $footer['contact'];
  $newsletter = $footer['newsletter'];
  $newsletterFailed = old('_source') === 'footer-newsletter' && $errors->has('email');
  $tickerItems = ['Free mockup in 48 hours', 'Production in under a week', 'Trusted by 200+ gyms', 'In-house design team', 'Shipping worldwide', 'Melbourne made'];
@endphp
<footer id="footer" class="tra-footer" data-tra-footer>
  <div class="tra-footer-tape" aria-hidden="true">
    <div class="tra-footer-tape-track">
      @foreach([1, 2] as $copy)
        <span class="tra-footer-tape-group">
          @foreach($tickerItems as $tickerItem)
            <span>{{ $tickerItem }}</span><i data-lucide="sparkle"></i>
          @endforeach
        </span>
      @endforeach
    </div>
  </div>

  <div class="tra-footer-shell">
    <div class="tra-footer-ring">
      <span class="tra-footer-ropes" aria-hidden="true"><span></span><span></span><span></span></span>
      <span class="tra-footer-post is-tl" aria-hidden="true"></span>
      <span class="tra-footer-post is-tr" aria-hidden="true"></span>
      <span class="tra-footer-post is-bl" aria-hidden="true"></span>
      <span class="tra-footer-post is-br" aria-hidden="true"></span>

      <div class="tra-footer-hero">
        <div class="tra-footer-pitch">
          <a href="{{ route('home') }}" class="tra-footer-brand" aria-label="{{ $contact['name'] }} home">
            <span class="tra-footer-brand-mark" aria-hidden="true">R</span>
            <span class="tra-footer-brand-text">The Ring <b>Authority</b></span>
          </a>
          <h2 class="tra-footer-headline">Stay in <em>your corner.</em></h2>
          <p class="tra-footer-lede">Canvas drops, event-season offers and care tips for clubs, gyms and promoters. One email a month, never spam.</p>

          @if($newsletter)
            <form method="POST" action="{{ route('forms.submit', $newsletter->handle) }}" class="tra-footer-signup {{ $newsletterFailed ? 'is-invalid' : '' }}" data-tra-signup>
              @csrf
              <input type="text" name="website_url" class="hidden" tabindex="-1" autocomplete="off" aria-hidden="true">
              <input type="hidden" name="_idempotency" value="{{ \Illuminate\Support\Str::uuid() }}">
              <input type="hidden" name="_source" value="footer-newsletter">
              <div class="tra-footer-signup-field">
                <label for="footer-newsletter-email" class="sr-only">Email address</label>
                <i data-lucide="mail" class="tra-footer-signup-icon" aria-hidden="true"></i>
                <input id="footer-newsletter-email" type="email" name="email" required autocomplete="email" placeholder="you@yourgym.com"
                       value="{{ old('_source') === 'footer-newsletter' ? old('email') : '' }}"
                       @if($newsletterFailed) aria-invalid="true" @endif aria-describedby="footer-newsletter-note">
                <button type="submit" class="tra-footer-signup-submit">
                  <span>Subscribe</span>
                  <i data-lucide="arrow-right" aria-hidden="true"></i>
                </button>
              </div>
              <label class="tra-footer-consent">
                <input type="checkbox" name="consent_marketing" value="1" required @checked(old('_source') === 'footer-newsletter' && old('consent_marketing'))>
                <span>Yes, email me news and offers. Unsubscribe anytime.</span>
              </label>
              <p id="footer-newsletter-note" class="tra-footer-signup-note" data-tra-signup-note aria-live="polite">{{ $newsletterFailed ? $errors->first('email') : '' }}</p>
            </form>
          @endif
        </div>

        <div class="tra-footer-reach">
          <div class="tra-footer-status" data-tra-workshop-status>
            <span class="tra-footer-status-dot" aria-hidden="true"></span>
            <span data-tra-workshop-label>Workshop hours Mon–Fri, 9AM – 5PM</span>
            <span class="tra-footer-status-time" data-tra-workshop-time></span>
          </div>
          <a href="{{ $contact['phone_href'] }}" class="tra-footer-tile">
            <span class="tra-footer-tile-icon"><i data-lucide="phone" aria-hidden="true"></i></span>
            <span class="tra-footer-tile-text"><small>Call the workshop</small><b>{{ $contact['phone'] }}</b></span>
            <i data-lucide="arrow-up-right" class="tra-footer-tile-go" aria-hidden="true"></i>
          </a>
          <a href="{{ $contact['whatsapp_href'] }}" class="tra-footer-tile" target="_blank" rel="noopener noreferrer">
            <span class="tra-footer-tile-icon"><i data-lucide="message-circle" aria-hidden="true"></i></span>
            <span class="tra-footer-tile-text"><small>WhatsApp</small><b>Chat with the team</b></span>
            <i data-lucide="arrow-up-right" class="tra-footer-tile-go" aria-hidden="true"></i>
          </a>
          <a href="mailto:{{ $contact['email'] }}" class="tra-footer-tile">
            <span class="tra-footer-tile-icon"><i data-lucide="at-sign" aria-hidden="true"></i></span>
            <span class="tra-footer-tile-text"><small>Email</small><b>{{ $contact['email'] }}</b></span>
            <i data-lucide="arrow-up-right" class="tra-footer-tile-go" aria-hidden="true"></i>
          </a>
          <a href="{{ $contact['map_url'] }}" class="tra-footer-tile" target="_blank" rel="noopener noreferrer">
            <span class="tra-footer-tile-icon"><i data-lucide="map-pin" aria-hidden="true"></i></span>
            <span class="tra-footer-tile-text"><small>Workshop</small><b>{{ $contact['address'][0] }}, {{ $contact['address'][1] }}</b></span>
            <i data-lucide="arrow-up-right" class="tra-footer-tile-go" aria-hidden="true"></i>
          </a>
        </div>
      </div>

      <nav class="tra-footer-rounds" aria-label="Footer">
        @foreach($footer['columns'] as $column)
          <div class="tra-footer-round">
            <p class="tra-footer-round-title"><span>R{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>{{ $column['title'] }}</p>
            <ul>
              @foreach($column['children'] as $link)
                <li>
                  <a href="{{ $link['url'] }}" class="tra-footer-link {{ $link['highlight'] ? 'is-highlight' : '' }}" @if($link['new_tab']) target="_blank" rel="noopener" @endif>
                    <span>{{ $link['title'] }}</span>
                    <i data-lucide="arrow-right" aria-hidden="true"></i>
                  </a>
                </li>
              @endforeach
            </ul>
          </div>
        @endforeach
        <div class="tra-footer-round tra-footer-round-cta">
          <p class="tra-footer-round-title"><span>Bell</span>Custom work</p>
          <p class="tra-footer-cta-copy">Send your logo and ring size. A finished mockup lands in your inbox within 48 hours, free.</p>
          <a href="/pages/request-for-quotation" class="tra-footer-cta-btn">
            Get a free mockup
            <i data-lucide="arrow-right" aria-hidden="true"></i>
          </a>
        </div>
      </nav>
    </div>
  </div>

  <div class="tra-footer-wordmark" data-tra-wordmark aria-hidden="true">
    <span>The Ring Authority</span>
  </div>

  <div class="tra-footer-bar">
    <p class="tra-footer-copy">© {{ date('Y') }} {{ $contact['name'] }} · {{ $contact['address'][2] }}</p>
    @if($footer['legal'] !== [])
      <ul class="tra-footer-legal" aria-label="Legal">
        @foreach($footer['legal'] as $link)
          <li><a href="{{ $link['url'] }}" @if($link['new_tab']) target="_blank" rel="noopener" @endif>{{ $link['title'] }}</a></li>
        @endforeach
      </ul>
    @endif
    <button type="button" class="tra-footer-top" data-tra-back-to-top aria-label="Back to top">
      <svg viewBox="0 0 44 44" aria-hidden="true"><circle cx="22" cy="22" r="20" pathLength="100"></circle><circle class="tra-footer-top-progress" cx="22" cy="22" r="20" pathLength="100"></circle></svg>
      <i data-lucide="arrow-up" aria-hidden="true"></i>
    </button>
  </div>
</footer>