@props([
    'size' => 'md',      // sm | md | lg
    'tone' => 'ink',     // ink | white — for the dark sign-in plate
])
{{--
    The lockup. Mark plus wordmark, one definition.

    It had five. The website header set the word in ink at -0.02em, the
    sidebar split it into "Clu" plus an orange "Pilot", the sign-in plate set
    it white at a third size, the placeholder inlined its own, and the
    maintenance screen had no wordmark at all — five surfaces of one product,
    each with its own idea of the brand.

    The ink version wins because the website is the newest and most considered
    of them, and because a two-tone wordmark makes the accent a permanent
    fixture rather than something used sparingly.

    "Cloud" is no longer optional either. It was on the footer, the placeholder
    and the maintenance screen and absent from the header, the sidebar and the
    sign-in plate — "sometimes it says Cloud and sometimes it does not", which
    is exactly right. The product is called CluPilot Cloud; that is the name on
    the invoices and in every mail, so it is the name everywhere.

    The mark and the word are the only two children of the flex row, and the
    word is a single element. `gap` applies between EVERY child of a flex
    container and a bare text node is a child — written the other way this
    shipped reading "Clu Pilot Cloud".
--}}
@php
    $marks = ['sm' => 'size-6', 'md' => 'size-7', 'lg' => 'size-9'];
    $words = ['sm' => 'text-base', 'md' => 'text-lg', 'lg' => 'text-xl'];
@endphp
<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-2.5']) }}>
    <x-ui.logo class="{{ $marks[$size] ?? $marks['md'] }} shrink-0" />
    {{-- The directive sits on its own line on purpose. Blade only compiles a
         directive at a non-word boundary, so `CluPilot@if (…)` leaves the @if
         as literal text and the matching @endif then blows up the compiled
         view with a parse error. The newline also supplies the space before
         "Cloud". --}}
    <span class="whitespace-nowrap {{ $words[$size] ?? $words['md'] }} font-bold tracking-[-0.025em] {{ $tone === 'white' ? 'text-white' : 'text-ink' }}">CluPilot
        <span class="font-semibold {{ $tone === 'white' ? 'text-white/70' : 'text-muted' }}">Cloud</span></span>
</span>