@php
    $locale = app()->getLocale();
@endphp
<div class="space-y-3.5" x-data="{ open: null }">
    <header class="mb-2 flex flex-wrap items-center gap-3.5 animate-rise">
        <div class="min-w-0 flex-1">
            <p class="lbl">{{ __('support.eyebrow') }}</p>
            <h1 class="mt-[7px] text-[23px] font-bold leading-[1.12] tracking-[-0.03em] text-ink min-[901px]:text-[30px]">
                {{ __('support.title') }}
            </h1>
        </div>

        <x-ui.button variant="ink" class="shrink-0"
                     x-on:click="$dispatch('openModal', { component: 'new-support-request' })">
            <x-ui.icon name="plus" class="size-4" />{{ __('support.new') }}
        </x-ui.button>
    </header>

    <div class="grid gap-3.5 min-[1101px]:grid-cols-[1fr_340px]">
        {{-- ── The customer's own requests ──────────────────────────────────
             The page used to lead with three cards about opening hours. What
             somebody arriving here actually wants to know is what they already
             asked and whether anybody has answered — so that goes first, and
             the contact details move to the side where they belong. --}}
        <div class="space-y-3.5">
            <section class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise">
                <div class="flex items-center justify-between gap-3 border-b border-line px-5 py-3.5">
                    <h2 class="font-semibold text-ink">{{ __('support.tickets') }}</h2>
                    @if ($openCount > 0)
                        <span class="inline-flex shrink-0 items-center gap-[7px] rounded-pill border border-accent-border bg-accent-subtle px-[11px] py-1 text-xs font-medium text-accent-text">
                            {{ trans_choice('support.open_count', $openCount, ['count' => $openCount]) }}
                        </span>
                    @endif
                </div>

                @forelse ($requests as $r)
                    <article class="flex flex-wrap items-start gap-3 border-b border-line px-5 py-4 last:border-0">
                        <div class="min-w-0 flex-1">
                            <p class="font-medium text-ink">{{ $r->subject }}</p>
                            <p class="mt-1 text-xs text-muted">
                                {{ __('support.category_'.$r->category) }}
                                · {{ $r->created_at->local()->locale($locale)->isoFormat('LL, LT') }}
                                @if ($r->reported_by) · {{ $r->reported_by }} @endif
                            </p>
                            @if ($r->answered_at)
                                <p class="mt-1 text-xs text-success">
                                    {{ __('support.answered_at', ['when' => $r->answered_at->local()->locale($locale)->isoFormat('LL, LT')]) }}
                                </p>
                            @endif
                        </div>

                        @php $tone = ['open' => 'info', 'in_progress' => 'provisioning', 'answered' => 'active', 'closed' => 'suspended'][$r->status] ?? 'info'; @endphp
                        <x-ui.badge :status="$tone" class="shrink-0">{{ __('support.status_'.$r->status) }}</x-ui.badge>
                    </article>
                @empty
                    {{-- An empty state that says what to do, not "no data". --}}
                    <div class="px-5 py-10 text-center">
                        <span class="mx-auto grid size-11 place-items-center rounded-lg bg-surface-2 text-muted">
                            <x-ui.icon name="life-buoy" class="size-5" />
                        </span>
                        <p class="mt-3 font-medium text-ink">{{ __('support.empty_title') }}</p>
                        <p class="mx-auto mt-1 max-w-sm text-sm text-muted">{{ __('support.empty_body') }}</p>
                        <x-ui.button variant="secondary" class="mt-4"
                                     x-on:click="$dispatch('openModal', { component: 'new-support-request' })">
                            {{ __('support.new') }}
                        </x-ui.button>
                    </div>
                @endforelse
            </section>

            {{-- ── Frequent questions ───────────────────────────────────────
                 Each answer ends where the thing can actually be done. An FAQ
                 that only describes a button leaves the reader hunting for it. --}}
            <section class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:60ms]">
                <div class="border-b border-line px-5 py-3.5">
                    <h2 class="font-semibold text-ink">{{ __('support.faq') }}</h2>
                </div>
                <ul class="divide-y divide-line">
                    @foreach ($faqs as $i => $f)
                        <li>
                            <button type="button"
                                    class="flex w-full items-center gap-3 px-5 py-3.5 text-left text-sm font-medium text-ink hover:bg-surface-hover"
                                    @click="open = open === {{ $i }} ? null : {{ $i }}" :aria-expanded="open === {{ $i }}">
                                <span class="flex-1">{{ $f['q'] }}</span>
                                <x-ui.icon name="chevron-down" class="size-4 shrink-0 text-muted transition-transform"
                                           ::class="open === {{ $i }} ? 'rotate-180' : ''" />
                            </button>
                            <div x-show="open === {{ $i }}" x-cloak x-transition class="px-5 pb-4">
                                <p class="text-sm leading-relaxed text-muted">{{ $f['a'] }}</p>
                                @if ($f['to'])
                                    <a href="{{ $f['to'] }}" wire:navigate
                                       class="mt-2 inline-flex items-center gap-1.5 text-sm font-semibold text-accent-text hover:underline">
                                        {{ $f['cta'] }}
                                        <x-ui.icon name="chevron-down" class="size-3.5 -rotate-90" />
                                    </a>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ul>
            </section>
        </div>

        {{-- ── Contact, and the one question an outage raises ───────────────
             "Is it me or is it you" is what a customer asks first when
             something is down, and it is answered by a page rather than by us. --}}
        <aside class="space-y-3.5">
            <section class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:120ms]">
                <h2 class="font-semibold text-ink">{{ __('support.contact') }}</h2>

                <dl class="mt-3.5 space-y-3.5 text-sm">
                    <div>
                        <dt class="lbl">{{ __('support.contact_email') }}</dt>
                        <dd class="mt-1">
                            <a href="mailto:support@clupilot.com" class="font-medium text-accent-text hover:underline">support@clupilot.com</a>
                        </dd>
                    </div>
                    <div>
                        <dt class="lbl">{{ __('support.contact_hours') }}</dt>
                        <dd class="mt-1 text-body">{{ __('support.contact_hours_val') }}</dd>
                    </div>
                    <div>
                        <dt class="lbl">{{ __('support.contact_sla') }}</dt>
                        <dd class="mt-1 text-body">{{ __('support.contact_sla_val') }}</dd>
                    </div>
                </dl>
            </section>

            <section class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:180ms]">
                <h2 class="font-semibold text-ink">{{ __('support.status_title') }}</h2>
                <p class="mt-1.5 text-sm leading-relaxed text-muted">{{ __('support.status_body') }}</p>
                <x-ui.button variant="secondary" size="sm" class="mt-3.5" :href="route('status')" target="_blank" rel="noopener">
                    <x-ui.icon name="external-link" class="size-4" />{{ __('support.status_cta') }}
                </x-ui.button>
            </section>
        </aside>
    </div>
</div>