@props([
    'size' => 'md',      // sm | md | lg
    'suffix' => false,   // append "Cloud" in the muted tone
    '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.

    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
        @if ($suffix)<span class="font-semibold {{ $tone === 'white' ? 'text-white/70' : 'text-muted' }}">Cloud</span>@endif</span>
</span>