{{--
  Expects: $legalPageContent, $crossUrl (string), optional $locale
--}}
@php
    $locale = $locale ?? 'en';
    $contactUrl = $locale === 'ar' ? route('ar.contact.us') : route('contact.us');
@endphp

<section class="section-space legal-page">
    <div class="main-container">
        <div class="legal-hero scroll-load">
            <div class="legal-hero-inner">
                <span class="section-kicker">
                    <i class="fa-solid {{ data_get($legalPageContent, 'hero.icon', 'fa-scale-balanced') }}"></i>
                    {{ data_get($legalPageContent, 'hero.kicker') }}
                </span>
                <h1>{{ data_get($legalPageContent, 'hero.h1') }}</h1>
                <p class="legal-updated">{{ data_get($legalPageContent, 'hero.last_updated') }}</p>
                <p class="legal-intro">{{ data_get($legalPageContent, 'hero.intro') }}</p>
            </div>
        </div>

        <div class="legal-layout">
            <aside class="legal-toc d-none d-lg-block scroll-load" aria-label="{{ $locale === 'ar' ? 'في هذه الصفحة' : 'On this page' }}">
                <p class="legal-toc-title">{{ $locale === 'ar' ? 'في هذه الصفحة' : 'On this page' }}</p>
                <ul>
                    @foreach (data_get($legalPageContent, 'sections', []) as $sec)
                        @if (!empty($sec['id']))
                            <li>
                                <a href="#{{ $sec['id'] }}">{{ $sec['title'] ?? '' }}</a>
                            </li>
                        @endif
                    @endforeach
                </ul>
            </aside>

            <article class="legal-body scroll-load">
                @foreach (data_get($legalPageContent, 'sections', []) as $sec)
                    <section class="legal-section" id="{{ $sec['id'] ?? '' }}">
                        <h2>
                            <span class="legal-section-icon" aria-hidden="true">
                                <i class="fa-solid {{ $sec['icon'] ?? 'fa-circle' }}"></i>
                            </span>
                            <span>{{ $sec['title'] ?? '' }}</span>
                        </h2>
                        @foreach (data_get($sec, 'paragraphs', []) as $para)
                            <p>{{ $para }}</p>
                        @endforeach
                    </section>
                @endforeach

                <div class="legal-cross-band scroll-load">
                    <div>
                        <h3>{{ data_get($legalPageContent, 'cross.band_title') }}</h3>
                        <p>{{ data_get($legalPageContent, 'cross.link_hint') }}</p>
                    </div>
                    <div class="legal-cross-actions">
                        <a href="{{ $crossUrl }}" class="btn-legal-outline interactive">
                            <i class="fa-solid fa-file-lines"></i>
                            {{ data_get($legalPageContent, 'cross.link_label') }}
                        </a>
                        <a href="{{ $contactUrl }}" class="btn-legal-primary interactive">
                            <i class="fa-solid fa-headset"></i>
                            {{ $locale === 'ar' ? 'اتصل بنا' : 'Contact us' }}
                        </a>
                    </div>
                </div>
            </article>
        </div>
    </div>
</section>
