@php
    // Resolve the content partial for the active locale; fall back to German if an EN partial
    // is missing, so a not-yet-translated topic never breaks the page.
    $locale = in_array(app()->getLocale(), ['de', 'en'], true) ? app()->getLocale() : 'de';
    $partial = 'livewire.help.content.'.$locale.'.'.$topic;
    if (! view()->exists($partial)) {
        $partial = 'livewire.help.content.de.'.$topic;
    }
@endphp

<div class="space-y-5">
    <div>
        <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-accent-text">{{ __('help.eyebrow') }}</p>
        <h2 class="mt-0.5 font-display text-xl font-semibold text-ink sm:text-2xl">{{ __('help.heading') }}</h2>
        <p class="mt-1 font-mono text-xs text-ink-3">{{ __('help.subtitle') }}</p>
    </div>

    <div class="grid gap-5 lg:grid-cols-[15rem_1fr]">
        {{-- Topic navigation (wraps above the content on small screens) --}}
        <nav class="flex flex-row flex-wrap gap-1 lg:flex-col">
            @foreach ($topics as $t)
                <button type="button" wire:click="$set('topic', '{{ $t['key'] }}')" @class([
                    'min-h-11 rounded-md px-3 py-2 text-left font-mono text-[12px] transition-colors',
                    'bg-accent/10 text-accent-text shadow-[inset_2px_0_0_var(--color-accent)]' => $topic === $t['key'],
                    'text-ink-2 hover:bg-raised hover:text-ink' => $topic !== $t['key'],
                ])>{{ $t['label'] }}</button>
            @endforeach
        </nav>

        {{-- Content --}}
        <article class="min-w-0 space-y-4 rounded-xl border border-line bg-surface p-5 shadow-panel">
            @include($partial)
        </article>
    </div>
</div>