@php
    $active = $settingsActive ?? 'general';
    $tabClass = fn (string $key) => $active === $key
        ? 'border-primary text-primary font-semibold'
        : 'border-transparent text-slate-600 hover:border-slate-300 hover:text-slate-900';
@endphp

<div class="rounded-xl border border-slate-200 bg-white shadow-sm">
    <div class="flex flex-wrap items-start justify-between gap-3 px-4 py-4">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">General settings</h1>
            <p class="mt-0.5 text-sm text-slate-500">Company profile, branding, security, email, and audit.</p>
        </div>
        <div class="flex flex-wrap items-center justify-end gap-3">
            @if(!(auth()->user()->is_superadmin ?? false) && auth()->user()->company_id)
                <a href="{{ route('subscription.request') }}" class="text-sm font-medium text-primary hover:underline">Manage subscription</a>
            @endif
            <a
                href="{{ route('settings.home') }}"
                class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
            >
                <i class="bi bi-arrow-left"></i> Back
            </a>
        </div>
    </div>

    <div class="border-t border-slate-200 px-4">
        <nav class="-mb-px flex flex-wrap items-center gap-1" aria-label="Settings tabs">
            <a href="{{ route('settings.index', ['tab' => 'general']) }}"
               class="inline-flex items-center border-b-2 px-3 py-3 text-sm font-medium {{ $tabClass('general') }}">
                <i class="bi bi-building me-1.5 text-base opacity-70"></i> Company
            </a>
            <a href="{{ route('settings.index', ['tab' => 'branding']) }}"
               class="inline-flex items-center border-b-2 px-3 py-3 text-sm font-medium {{ $tabClass('branding') }}">
                <i class="bi bi-image me-1.5 text-base opacity-70"></i> Branding
            </a>
            <a href="{{ route('settings.index', ['tab' => 'security']) }}"
               class="inline-flex items-center border-b-2 px-3 py-3 text-sm font-medium {{ $tabClass('security') }}">
                <i class="bi bi-shield-lock me-1.5 text-base opacity-70"></i> Security
            </a>
            <a href="{{ route('settings.email') }}"
               class="inline-flex items-center border-b-2 px-3 py-3 text-sm font-medium {{ $tabClass('email') }}">
                <i class="bi bi-envelope me-1.5 text-base opacity-70"></i> Email
            </a>
            <a href="{{ route('settings.audit') }}"
               class="inline-flex items-center border-b-2 px-3 py-3 text-sm font-medium {{ $tabClass('audit') }}">
                <i class="bi bi-journal-text me-1.5 text-base opacity-70"></i> Audit log
            </a>
        </nav>
    </div>
</div>