Font Specimen code

@props([
    'name',
    'role',
    'stack',
    'note' => null,
    'badge' => null,
    'sourceHref' => null,
    'sourceLabel' => null,
])

<x-ui.card padding="none" {{ $attributes->merge(['class' => 'overflow-hidden']) }}>
    <div class="border-b border-gray-200 bg-gray-50 px-5 py-4 dark:border-gray-800 dark:bg-gray-950/50">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
            <div>
                <div class="flex flex-wrap items-center gap-2">
                    <h3 class="text-base font-semibold text-gray-900 dark:text-white">{{ $name }}</h3>
                    @if ($badge)
                        <x-ui.badge variant="brand" size="sm">{{ $badge }}</x-ui.badge>
                    @endif
                </div>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ $role }}</p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                @if ($sourceHref)
                    <a href="{{ $sourceHref }}" class="inline-flex items-center gap-1 rounded-lg bg-white px-2.5 py-1.5 text-xs font-medium text-brand-600 ring-1 ring-gray-200 transition hover:text-brand-700 dark:bg-gray-900 dark:text-brand-400 dark:ring-gray-800 dark:hover:text-brand-300">
                        {{ $sourceLabel ?? 'Source' }}
                        <x-ui.icon name="arrow-up-right" weight="bold" size="xs" />
                    </a>
                @endif
                <code class="max-w-full break-all rounded-lg bg-white px-2.5 py-1.5 text-xs text-gray-500 ring-1 ring-gray-200 dark:bg-gray-900 dark:text-gray-400 dark:ring-gray-800 sm:break-normal">{{ $stack }}</code>
            </div>
        </div>
    </div>

    <div class="space-y-5 p-5" style="font-family: {{ $stack }};">
        <p class="text-4xl font-semibold leading-none tracking-tight text-gray-900 dark:text-white sm:text-5xl">Harbour ships cleaner interfaces.</p>
        <p class="max-w-2xl text-base leading-7 text-gray-600 dark:text-gray-400">
            Teams use the component library to move from product sketch to production UI without rebuilding the same navigation, forms, tables, and status patterns.
        </p>
        <div class="grid gap-3 text-sm sm:grid-cols-3">
            <div class="rounded-lg border border-gray-200 p-3 dark:border-gray-800">
                <p class="text-xs uppercase tracking-[0.12em] text-gray-400">Metric</p>
                <p class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">98.4%</p>
            </div>
            <div class="rounded-lg border border-gray-200 p-3 dark:border-gray-800">
                <p class="text-xs uppercase tracking-[0.12em] text-gray-400">Sample</p>
                <p class="mt-1 font-medium text-gray-900 dark:text-white">Aa Bb Cc 0123</p>
            </div>
            <div class="rounded-lg border border-gray-200 p-3 dark:border-gray-800">
                <p class="text-xs uppercase tracking-[0.12em] text-gray-400">Weight</p>
                <p class="mt-1 font-medium text-gray-900 dark:text-white">Regular / Medium / Semibold</p>
            </div>
        </div>
    </div>

    @if ($note)
        <div class="border-t border-gray-200 px-5 py-4 text-sm leading-6 text-gray-600 dark:border-gray-800 dark:text-gray-400">
            {{ $note }}
        </div>
    @endif
</x-ui.card>