@extends('layouts.static-page')

@section('meta_title', $pageTitle)
@section('meta_description', 'BlackSplit help center')

@push('style')
    {!! $headMarkup !!}
    <style>
        .topbar {
            display: none;
        }

        .static-page {
            padding: 12px 0 0;
        }

        .page-shell {
            width: min(1320px, calc(100% - 28px));
        }

        .static-content {
            padding-bottom: 48px;
        }

        .help-center-shell {
            overflow: hidden;
            border: 1px solid rgba(233, 215, 198, 0.9);
            border-radius: 28px;
            background: #fff;
            box-shadow: 0 16px 36px rgba(152, 110, 62, 0.08);
        }

        .help-center-shell header[role="banner"] {
            display: block;
        }

        .help-center-shell .csh-header-background {
            min-height: 72px;
        }

        .help-center-shell > *:first-child {
            margin-top: 0;
        }

        .help-center-shell > *:last-child {
            margin-bottom: 0;
        }

        .help-center-shell .csh-wrapper {
            width: min(1248px, calc(100% - 48px));
            max-width: 1248px;
        }

        .help-center-shell .csh-header-main-logo-local {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
        }

        .help-center-shell .csh-header-main-logo-local span {
            color: #fff;
            font-size: clamp(2rem, 3vw, 2.6rem);
            font-weight: 800;
            line-height: 1;
            letter-spacing: -0.05em;
        }

        .help-center-shell .csh-header-search-results.is-active {
            display: block;
            max-height: 320px;
            overflow-y: auto;
            padding: 10px 0;
        }

        .help-center-shell .csh-search-result-link {
            display: block;
            padding: 12px 18px;
            color: #16233b;
            text-decoration: none;
            font-weight: 500;
        }

        .help-center-shell .csh-search-result-link:hover,
        .help-center-shell .csh-search-result-link:focus-visible {
            background: rgba(236, 104, 0, 0.08);
            color: #ec6800;
            outline: none;
        }

        .help-center-image-rebrand {
            position: relative;
            display: inline-block;
            max-width: 100%;
        }

        .help-center-image-rebrand img {
            display: block;
            max-width: 100%;
            height: auto;
        }

        .help-center-image-rebrand--consultation {
            width: 607px;
            max-width: 100%;
        }

        .help-center-image-rebrand--consultation .help-center-image-rebrand-block {
            position: absolute;
            left: 14.8%;
            background: rgba(255, 255, 255, 0.98);
            padding: 0.35rem 0.5rem;
            line-height: 1.25;
        }

        .help-center-image-rebrand--consultation .help-center-image-rebrand-block-one {
            top: 64.2%;
            width: 56%;
        }

        .help-center-image-rebrand--consultation .help-center-image-rebrand-block-two {
            top: 78.7%;
            width: 66%;
        }

        .help-center-image-rebrand-label {
            color: #9c9792;
            font-size: clamp(10px, 1.2vw, 13px);
            margin-bottom: 0.2rem;
        }

        .help-center-image-rebrand-copy {
            color: #3d3633;
            font-size: clamp(11px, 1.35vw, 15px);
        }

        @media (max-width: 640px) {
            .static-page {
                padding-top: 10px;
            }

            .page-shell {
                width: calc(100% - 16px);
            }

            .help-center-shell {
                border-radius: 20px;
            }

            .help-center-shell .csh-wrapper {
                width: calc(100% - 28px);
            }
        }
    </style>
@endpush

@section('content')
    <section class="help-center-shell">
        {!! $bodyMarkup !!}
    </section>
@endsection

@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchForm = document.querySelector('.help-center-shell .csh-header-search');
            const searchInput = searchForm?.querySelector('input[name="search_query"]');
            const searchResults = searchForm?.querySelector('.csh-header-search-results');

            if (!searchForm || !searchInput || !searchResults) {
                return;
            }

            const internalLinks = Array.from(document.querySelectorAll('.help-center-shell a[href]'))
                .map((link) => ({
                    href: link.getAttribute('href') || '',
                    label: (link.textContent || '').replace(/\s+/g, ' ').trim(),
                }))
                .filter((item) => item.href.startsWith('/help-center') && item.label.length > 0);

            const uniqueLinks = Array.from(
                new Map(internalLinks.map((item) => [item.href + '|' + item.label, item])).values()
            );

            const renderResults = (items) => {
                if (!items.length) {
                    searchResults.innerHTML = '<div class="csh-search-result-link">No matching help articles found.</div>';
                    searchResults.classList.add('is-active');
                    return;
                }

                searchResults.innerHTML = items.map((item) => (
                    '<a class="csh-search-result-link" href="' + item.href + '">' +
                        item.label.replace(/</g, '&lt;').replace(/>/g, '&gt;') +
                    '</a>'
                )).join('');
                searchResults.classList.add('is-active');
            };

            const performSearch = () => {
                const query = searchInput.value.trim().toLowerCase();

                if (!query) {
                    searchResults.innerHTML = '';
                    searchResults.classList.remove('is-active');
                    return [];
                }

                const matches = uniqueLinks
                    .filter((item) => item.label.toLowerCase().includes(query))
                    .slice(0, 8);

                renderResults(matches);

                return matches;
            };

            searchInput.addEventListener('input', performSearch);

            searchForm.addEventListener('submit', function (event) {
                event.preventDefault();
                const matches = performSearch();

                if (matches.length) {
                    window.location.href = matches[0].href;
                }
            });

            searchInput.addEventListener('keydown', function (event) {
                if (event.key === 'Enter') {
                    event.preventDefault();
                    const matches = performSearch();

                    if (matches.length) {
                        window.location.href = matches[0].href;
                    }
                }
            });

            document.addEventListener('click', function (event) {
                if (!searchForm.contains(event.target)) {
                    searchResults.classList.remove('is-active');
                }
            });
        });
    </script>
@endpush