@php
    $examples = [
        'Badges' => <<<'BLADE'
            <span class="relative inline-flex"><x-icon name="notifications" /><x-badge floating /></span>
            <span class="relative inline-flex"><x-icon name="mail" /><x-badge value="4" floating /></span>
            <span class="relative inline-flex"><x-icon name="inbox" /><x-badge value="1204" max="999" floating /></span>
            <x-badge value="Expired" tonal />
            <x-badge value="Active" color="success" tonal />
            <x-badge value="Password" color="info" tonal />
            <x-badge value="Built in" color="primary" solid />
            <x-badge value="Pro" outline />
            <x-badge value="Draft" color="neutral" tonal />
            <x-badge value="Archived" color="neutral" outline />
            <span class="relative inline-flex"><x-icon name="chat" /><x-badge value="2" color="neutral" floating /></span>
            <x-badge tonal color="tertiary"><x-icon name="bolt" filled class="size-3" /> Pro</x-badge>
            <x-badge value="Beta" tonal color="plain" class="bg-primary-fixed text-on-primary-fixed" />
            BLADE,
        'Snackbars' => <<<'BLADE'
            <div x-data class="flex flex-wrap items-center gap-4">
                <x-button label="Saved" variant="tonal" x-on:click="materialToast('Settings saved', { type: 'success' })" />
                <x-button label="With a description" variant="tonal" x-on:click="materialToast('Upload failed', { type: 'error', description: 'The file is larger than 4 GB.' })" />
                <x-button label="With an action" variant="tonal" x-on:click="materialToast('Share deleted', { action: { label: 'Undo', handler: () => materialToast('Share restored', { type: 'info' }) } })" />
                <x-button label="Until dismissed" variant="tonal" x-on:click="materialToast('Your storage is almost full', { type: 'warning', timeout: 0 })" />
                <x-button label="Sticky, with an event" variant="tonal" x-on:click="materialToast('A new version is ready', { type: 'info', sticky: true, action: { label: 'Reload', event: 'showcase:reload' } })" x-on:showcase:reload.window="materialToast('Reloading…')" />
            </div>
            BLADE,
        'Plain tooltips' => <<<'BLADE'
            <x-button icon="content_copy" tooltip="Copy link" />
            <x-button icon="qr_code_2" tooltip-bottom="Show QR code" />
            <x-tooltip text="Expires in 3 days" side="right">
                <span tabindex="0" class="focus-ring rounded-corner-xs type-body-md text-on-surface-variant">holiday-photos.zip</span>
            </x-tooltip>
            BLADE,
        'Rich tooltips' => <<<'BLADE'
            <x-rich-tooltip title="Expiry" text="Recipients lose access after this time. Admins can change the longest time allowed.">
                <x-button icon="help" aria-label="About expiry" />
            </x-rich-tooltip>

            <x-rich-tooltip title="Password protection" text="Recipients need the password before they can see the files." persistent>
                <x-button label="Press for details" icon="lock" variant="outlined" />
                <x-slot:actions>
                    <x-button label="Learn more" />
                </x-slot:actions>
            </x-rich-tooltip>
            BLADE,
        'Alerts' => <<<'BLADE'
            <x-alert title="Storage almost full" description="3.8 GB of 4 GB used. Old shares are deleted when they expire." color="warning" class="w-full" />
            <x-alert description="Links are shown only once. Copy yours before you leave the page." class="w-full" dismissible />
            <x-alert title="Upload failed" color="error" class="w-full">
                The connection dropped at 64%.
                <x-slot:actions><x-button label="Try again" /></x-slot:actions>
            </x-alert>
            <x-alert description="Settings saved." color="success" class="w-full" />
            BLADE,
        'Stats' => <<<'BLADE'
            <div class="grid w-full gap-4 medium:grid-cols-2 expanded:grid-cols-4">
                <x-stat title="Shares" value="1,204" icon="link" description="12 this week" />
                <x-stat title="Files" value="8,317" icon="description" />
                <x-stat title="Stored" value="3.2 GB" icon="hard_drive" description="of 4 GB" />
                <x-stat title="Downloads" value="42,019" icon="download" />
            </div>
            BLADE,
        'Empty state' => <<<'BLADE'
            <x-empty-state icon="upload_file" title="No shares yet" description="Files you share appear here, with their links and when they expire." class="w-full">
                <x-slot:actions>
                    <x-button label="Upload files" icon="upload" variant="filled" />
                </x-slot:actions>
            </x-empty-state>
            BLADE,
        'Empty state with an illustration' => <<<'BLADE'
            <x-empty-state title="No routes yet" description="Draw a route on the map, or import one from a GPX file." class="w-full">
                <x-slot:illustration class="text-primary">
                    <svg class="size-32" viewBox="0 0 120 120" fill="none" aria-hidden="true">
                        <circle cx="60" cy="60" r="56" class="fill-primary-container" />
                        <path d="M28 86C40 62 56 92 68 64S86 42 90 46" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="1 10" />
                        <circle cx="28" cy="86" r="7" fill="currentColor" />
                        <path d="M90 18a12 12 0 0 1 12 12c0 10-12 22-12 22S78 40 78 30a12 12 0 0 1 12-12Z" class="fill-tertiary" />
                        <circle cx="90" cy="30" r="4" class="fill-on-tertiary" />
                    </svg>
                </x-slot:illustration>
                <x-slot:actions>
                    <x-button label="Draw a route" icon="route" variant="filled" />
                </x-slot:actions>
            </x-empty-state>
            BLADE,
    ];
@endphp

<section id="communication" class="scroll-mt-24 space-y-6">
    <h2 class="type-headline-md">Communication</h2>

    <p class="max-w-3xl type-body-md text-on-surface-variant">
        <code>&lt;x-badge&gt;</code>, <code>&lt;x-toast&gt;</code> (the snackbar host, fed by the <code>Toasts</code> concern or <code>materialToast()</code>),
        <code>&lt;x-tooltip&gt;</code>, <code>&lt;x-rich-tooltip&gt;</code>, <code>&lt;x-alert&gt;</code>, <code>&lt;x-stat&gt;</code> and <code>&lt;x-empty-state&gt;</code>.
    </p>

    @foreach ($examples as $title => $code)
        <x-showcase::example :$title :$code />
    @endforeach
</section>