@extends('layouts.app')

@section('body_class', 'page-legal')

@section('content')
@php
    $policies = [
        'privacy-policy' => ['Privacy policy', 'privacy', 'lock'],
        'terms' => ['Terms of use', 'terms', 'check'],
        'refund-policy' => ['Refund policy', 'refund', 'download'],
    ];
@endphp

{{-- HERO --}}
<section class="ihero lhero">
    <span class="chero__orb chero__orb--a" aria-hidden="true"></span>
    <span class="chero__orb chero__orb--b" aria-hidden="true"></span>
    <svg class="ihero__mark" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-shield"/></svg>
    <div class="container ihero__grid">
        <div class="ihero__copy">
            <p class="kicker kicker--light">Legal</p>
            <h1>{{ $page->title }}</h1>
            <p class="lhero__meta">
                <span><svg class="i" aria-hidden="true"><use href="#i-check"/></svg>Last updated {{ $page->updated_at->format('j F Y') }}</span>
                @if ($toc)<span><svg class="i" aria-hidden="true"><use href="#i-book"/></svg>{{ count($toc) }} sections</span>@endif
            </p>
        </div>
        <ul class="lhero__tabs" aria-label="Legal pages">
            @foreach ($policies as $slug => [$label, $route, $icon])
                <li><a href="{{ route($route) }}" @class(['is-active' => $page->slug === $slug]) @if ($page->slug === $slug) aria-current="page" @endif><svg class="i" aria-hidden="true"><use href="#i-{{ $icon }}"/></svg>{{ $label }}</a></li>
            @endforeach
        </ul>
    </div>
</section>

<section class="section lpage">
    <div class="container lpage__grid">
        @if (count($toc) > 1)
            <aside class="ltoc" aria-label="On this page">
                <p class="ltoc__title">On this page</p>
                <ol class="ltoc__list" data-legal-toc>
                    @foreach ($toc as $t)
                        <li><a href="#{{ $t['id'] }}" data-toc-link><span>{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>{{ $t['title'] }}</a></li>
                    @endforeach
                </ol>
                <a class="ltoc__help" href="{{ route('contact') }}">
                    <svg class="i i--lg" aria-hidden="true"><use href="#i-mail"/></svg>
                    <span><strong>Questions?</strong><small>Contact us</small></span>
                    <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg>
                </a>
            </aside>
        @endif

        <article class="lcard">
            <div class="prose lprose">
                {!! $body !!}
            </div>
            <p class="lcard__foot"><svg class="i" aria-hidden="true"><use href="#i-shield"/></svg>Last updated {{ $page->updated_at->format('j F Y') }}. For any question, <a href="{{ route('contact') }}">contact us</a>.</p>
        </article>
    </div>
</section>
@endsection