{{--
    "Which addresses are really ours, and what to do if you fell for one that
    was not."

    A public page rather than a paragraph buried in the portal: somebody who
    has just typed their password into a copy of our sign-in form is not signed
    in anywhere, and the page they need has to be reachable without an account.
    It is linked from every mail footer, from the sign-in form and from the
    site footer — the three places a person is when the question comes up.

    The domain list is derived from configuration, never typed. A stale list
    here would tell a customer that a phishing domain is one of ours.
--}}
<x-layouts.site :title="__('security.title').' — CluPilot Cloud'">

<article class="mx-auto max-w-[820px] px-5 pb-24 pt-32 sm:px-6 lg:pt-36">
    <p class="lbl">{{ __('security.eyebrow') }}</p>
    <h1 class="mt-4 text-[clamp(2rem,4vw,3rem)] font-bold leading-[1.08] tracking-[-0.035em] text-ink">{{ __('security.title') }}</h1>
    <p class="mt-5 max-w-[62ch] text-md leading-relaxed text-muted">{{ __('security.lead') }}</p>

    {{-- ── The addresses ────────────────────────────────────────────────── --}}
    <section class="mt-12">
        <h2 class="text-lg font-bold tracking-[-0.02em] text-ink">{{ __('security.domains_title') }}</h2>
        <p class="mt-2 max-w-[62ch] text-sm leading-relaxed text-muted">{{ __('security.domains_body') }}</p>

        <div class="mt-6 overflow-hidden rounded-xl border border-line bg-surface shadow-xs">
            @foreach (App\Support\OfficialDomains::registrable() as $domain => $role)
                <div class="flex flex-wrap items-center gap-x-4 gap-y-1 border-b border-line px-6 py-4 last:border-0">
                    <x-ui.icon name="shield-check" class="size-4 shrink-0 text-success" />
                    <b class="font-mono text-md text-ink">{{ $domain }}</b>
                    <span class="text-sm text-muted">{{ __('security.domain_'.$role) }}</span>
                </div>
            @endforeach
        </div>

        <p class="mt-4 text-sm leading-relaxed text-muted">{{ __('security.domains_rule') }}</p>

        <div class="mt-6 rounded-xl border border-line bg-surface-2 p-6">
            <p class="lbl">{{ __('security.hosts_title') }}</p>
            <ul class="mt-4 space-y-2">
                @foreach (App\Support\OfficialDomains::hosts() as $entry)
                    <li class="flex flex-wrap items-baseline gap-x-4 gap-y-1 text-sm">
                        <span class="font-mono text-ink">{{ $entry['host'] }}</span>
                        <span class="text-muted">{{ __('security.host_'.$entry['what']) }}</span>
                    </li>
                @endforeach
            </ul>
        </div>
    </section>

    {{-- ── What we never do ─────────────────────────────────────────────── --}}
    <section class="mt-14">
        <h2 class="text-lg font-bold tracking-[-0.02em] text-ink">{{ __('security.never_title') }}</h2>
        <div class="mt-5 space-y-3">
            @foreach (['password', 'card', 'remote', 'urgency'] as $never)
                <div class="flex gap-3 rounded-lg border border-line bg-surface px-5 py-4">
                    <x-ui.icon name="x" class="mt-0.5 size-4 shrink-0 text-danger" />
                    <p class="text-sm leading-relaxed text-body">{{ __('security.never_'.$never) }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- ── What to do ───────────────────────────────────────────────────── --}}
    <section class="mt-14">
        <h2 class="text-lg font-bold tracking-[-0.02em] text-ink">{{ __('security.compromised_title') }}</h2>
        <p class="mt-2 max-w-[62ch] text-sm leading-relaxed text-muted">{{ __('security.compromised_lead') }}</p>

        <ol class="mt-6 space-y-4">
            @foreach (['change', 'sessions', 'others', 'tell'] as $i => $step)
                <li class="relative flex gap-4 rounded-xl border border-line bg-surface p-6 shadow-xs">
                    <span class="grid size-8 shrink-0 place-items-center rounded-pill bg-accent-subtle font-mono text-sm font-medium text-accent-text">{{ $i + 1 }}</span>
                    <div>
                        <b class="block font-semibold text-ink">{{ __('security.step_'.$step) }}</b>
                        <p class="mt-1 max-w-[58ch] text-sm leading-relaxed text-muted">{{ __('security.step_'.$step.'_body') }}</p>
                        @if ($step === 'change')
                            <x-ui.button href="{{ route('login') }}" size="sm" class="mt-4">{{ __('security.step_change_action') }}</x-ui.button>
                        @endif
                    </div>
                </li>
            @endforeach
        </ol>

        <div class="mt-8 rounded-xl border border-accent-border bg-accent-subtle p-6">
            <p class="text-sm leading-relaxed text-body">{{ __('security.tell_us') }}</p>
            <a href="mailto:office&#64;clupilot.com" class="mt-3 inline-flex items-center gap-2 text-sm font-semibold text-accent-text underline-offset-4 hover:underline">
                <x-ui.icon name="mail" class="size-4" />office&#64;clupilot.com
            </a>
        </div>
    </section>
</article>

</x-layouts.site>