@extends('layouts.site')

@section('content')
<section class="fees-hero container" aria-labelledby="fees-hero-title">
    <p class="eyebrow">Fees and commission</p>
    <h1 id="fees-hero-title">Clear fees. <em>Stated plainly.</em></h1>
    <p class="fees-hero-lede">No hidden charges. Every engagement begins with terms agreed in writing.</p>
</section>

<nav class="fees-overview" aria-label="Jump to a fee category">
    <div class="container fees-overview-row">
        @foreach (config('tashi.fees') as $section)
        <a href="#{{ $section['slug'] }}"><span>{{ $section['number'] }}</span>{{ $section['title'] }}</a>
        @endforeach
    </div>
</nav>

<div class="container fees-body">
@foreach (config('tashi.fees') as $section)
<section class="fee-section" id="{{ $section['slug'] }}" aria-labelledby="{{ $section['slug'] }}-heading">
    <div class="fee-section-head">
        <span class="fee-step">{{ $section['number'] }} /</span>
        <h2 id="{{ $section['slug'] }}-heading">{{ $section['title'] }}</h2>
    </div>
    <div class="fee-section-body">
        <div class="fee-table-wrap">
            <table class="fee-table">
                <caption class="sr-only">{{ $section['title'] }} commission rates</caption>
                <colgroup>
                    <col class="fee-col-label">
                    @for ($i = 1; $i < count($section['columns']); $i++)
                    <col class="fee-col-value">
                    @endfor
                </colgroup>
                <thead>
                    <tr>
                        @foreach ($section['columns'] as $i => $column)
                        <th scope="col" @if($i > 0) class="fee-table-value" @endif>{{ $column }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @foreach ($section['rows'] as $row)
                    <tr>
                        @foreach ($row as $i => $cell)
                        @if ($i === 0)
                        <th scope="row">{{ $cell }}</th>
                        @else
                        <td class="fee-table-value">{{ $cell }}</td>
                        @endif
                        @endforeach
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</section>
@endforeach
</div>

<section class="fees-closing container">
    <div class="fees-closing-card">
        <div class="fees-closing-text">
            <p class="eyebrow">Before you engage</p>
            <p>Applicable taxes extra. Commission is payable on execution of the agreement or registration, as applicable. Final terms are confirmed in writing before engagement.</p>
        </div>
        <a class="button" href="{{ url('/contact/') }}">Discuss your transaction <x-arrow /></a>
    </div>
</section>
@endsection