Adipisci sed laborum

@php
    $singleCodeBlock = $section->quickGuideBlocks()
        ->where('block_type', 'single_code')
        ->orderBy('position')
        ->first();
    $isCodeDarkMode = (bool) ($singleCodeBlock?->code_dark_mode_enabled ?? false);
@endphp

@if ($section->quickGuide && $section->quickGuide->isSingleCode())
    <section class="py-5 bg-white">
        <div class="container-lg">
            <div class="row g-4">
                <div class="col-12 col-lg-4 d-flex">
                    <article class="captcha-card p-4 w-100 h-100 position-relative fs-5 border-start-brand-dark">
                        {!! $section->quickGuide->text_content !!}
                    </article>
                </div>

                @if ($section->quickGuide->code_content)
                    <div class="col-12 col-lg-8 d-flex">
                        <div
                            class="code-snippet-window {{ $isCodeDarkMode ? 'code-snippet-window--dark' : '' }}" x-data="{ copied: false }">
                                <div class="code-snippet-header">
                                    <div class="code-snippet-controls">
                                        <div class="window-dot window-dot--red"></div>
                                        <div class="window-dot window-dot--yellow"></div>
                                        <div class="window-dot window-dot--green"></div>
                                    </div>
                                    @if ($section->quickGuide->code_language)
                                        <div class="code-snippet-title">
                                            {{ strtoupper($section->quickGuide->code_language) }}
                                        </div>
                                    @endif
                                    <button
                                        type="button"
                                        class="snippet-copy-btn"
                                        :class="{ 'copied': copied }"
                                        @click="
                                            navigator.clipboard.writeText($el.closest('.code-snippet-window').querySelector('code').innerText).then(() => {
                                                copied = true;
                                                setTimeout(() => copied = false, 2000);
                                            })
                                        "
                                    >
                                        <i :class="copied ? '{{ icon('check') }}' : '{{ icon('copy') }}'"></i>
                                        <span x-text="copied ? 'Copied' : 'Copy'"></span>
                                    </button>
                                </div>
                                <div class="code-snippet-body {{ $isCodeDarkMode ? 'code-snippet-body--dark' : '' }}">
                                    <pre class="mb-0"><code class="language-{{ $section->quickGuide->code_language ?? 'plaintext' }}">{{ $section->quickGuide->code_content }}</code></pre>
                                </div>
                            </div>

                            @if($singleCodeBlock?->hasActionButton())
                                <div class="mt-3">
                                    <a href="{{ $singleCodeBlock->action_button_url }}" class="btn btn-captcha-primary" target="_blank" rel="noopener noreferrer">
                                        {{ $singleCodeBlock->action_button_label }}
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>

    @push('scripts')
        <!-- Prism.js -->
        <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup-templating.min.js"></script>
        @php
            $normalizeLanguage = static function ($code): string {
                $normalized = strtolower((string) $code);

                return match ($normalized) {
                    'c#', 'c-sharp', 'csharp' => 'csharp',
                    'c++', 'cpp' => 'cpp',
                    'js', 'javascript' => 'javascript',
                    'ts', 'typescript' => 'typescript',
                    'py', 'python' => 'python',
                    'shell', 'bash', 'sh' => 'bash',
                    'html' => 'markup',
                    default => preg_replace('/[^a-z0-9]+/', '', $normalized) ?: 'plaintext',
                };
            };
        @endphp
        @if ($section->quickGuide->code_language)
            <script
                src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-{{ $normalizeLanguage($section->quickGuide->code_language) }}.min.js">
            </script>
        @endif
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Prism.highlightAll();
            });
        </script>
    @endpush

    @push('styles')
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css">
    @endpush
@endif