@php
    $settings = $pageBuilder['settings'];
    $identity = $pageBuilder['identity'];
    $localized = fn($value) => data_get($value, $locale) ?: data_get($value, 'en') ?: data_get($value, 'ar');
    $heroImage = $identity['hero_image'] ? uploads($identity['hero_image']) : null;
    $enabledSections = $pageSections;
    $socialLinks = $settings['social_links'] ?? (array) data_get($branch->settings, 'portfolio', []);
    $contactEmail = data_get($socialLinks, 'email', data_get($branch->settings, 'portfolio.email'));
    $contactPhone = data_get($socialLinks, 'phone', data_get($branch->settings, 'portfolio.phone'));
@endphp

<main id="services" class="qr-builder-page">
    <div class="qr-builder-shell">
        @if ($settings['show_hero'])
            <section class="qr-builder-hero" style="--qr-hero-height: {{ $identity['hero_height'] }}px; @if ($heroImage) background-image: linear-gradient(rgba(0,0,0,{{ $identity['hero_overlay'] / 100 }}), rgba(0,0,0,{{ $identity['hero_overlay'] / 100 }})), url('{{ $heroImage }}'); @endif">
                <div class="qr-builder-hero-content">
                    <h1>{{ $localized($settings['welcome']) ?: $branch->title }}</h1>
                    @if ($localized($settings['subtitle']))
                        <p>{{ strip_tags(html_entity_decode($localized($settings['subtitle']), ENT_QUOTES | ENT_HTML5, 'UTF-8')) }}</p>
                    @endif
                </div>
            </section>
        @endif

        @include('website.branches.portfolio.partials.advertisements')

        @if ($settings['show_install_pwa'])
            <div class="qr-builder-pwa"><button class="btn" id="installPwaButton" style="display:none"><i class="las la-download"></i> @lang('global.install_pwa')</button></div>
        @endif

        <div class="qr-builder-sections">
            @foreach ($enabledSections as $section)
                @php
                    $sectionStores = $section['stores'];
                    $rows = max(1, (int) ($section['max_rows'] ?? 2));
                    $columns = max(1, (int) $section['columns']);
                    // A wide mosaic tile occupies two tracks beside the smaller tiles.
                    $mosaicColumns = $columns === 1 ? 1 : $columns + 1;
                    $capacity = match ($section['layout']) {
                        'grid', 'mosaic' => $columns * $rows,
                        'featured' => 1 + 2 * ($rows - 1),
                        'list' => $rows,
                        default => $sectionStores->count(),
                    };
                    if ($section['layout'] === 'mosaic') {
                        $capacity = 0;
                        $mosaicRow = 1;
                        $usedTracks = 0;
                        foreach ($sectionStores as $unusedStore) {
                            $span = $capacity % 5 === 0 ? min(2, $mosaicColumns) : 1;
                            if ($usedTracks + $span > $mosaicColumns) {
                                $mosaicRow++;
                                $usedTracks = 0;
                            }
                            if ($mosaicRow > $rows) break;
                            $usedTracks += $span;
                            $capacity++;
                        }
                    }
                    if ($section['visible_limit'] ?? null) $capacity = min($capacity, (int) $section['visible_limit']);
                    $sectionStores = $sectionStores->take($capacity);
                    $sectionBackground = $section['background_image'] ? uploads($section['background_image']) : null;
                    $imageDisplay = $section['image_display'] ?? 'auto';
                    if ($imageDisplay === 'auto') {
                        $imageDisplay = in_array($section['layout'], ['grid', 'grid_slider', 'mosaic']) && (int) $section['columns'] === 1 && in_array($section['image_ratio'], ['wide', 'landscape']) ? 'full' : 'inset';
                    }
                @endphp

                @if ($sectionStores->isNotEmpty())
                    <section id="qr-section-{{ $section['key'] }}" class="qr-builder-section layout-{{ $section['layout'] }}" data-builder-section
                        style="--section-background: {{ ($section['background_mode'] ?? 'color') === 'transparent' ? 'transparent' : $section['background_color'] }}; --section-image-fit: {{ $section['image_fit'] ?? 'contain' }}; --section-image-radius: {{ $section['image_radius'] ?? 24 }}px; --section-image-shadow: {{ ['none' => 'none', 'soft' => '0 8px 22px rgba(17,30,33,.10)', 'strong' => '0 12px 28px rgba(17,30,33,.22)'][$section['image_shadow'] ?? 'soft'] }}; --section-text: {{ $section['inherit_text_color'] ? 'var(--qr-text)' : $section['text_color'] }}; --section-columns: {{ $section['columns'] }}; @if ($sectionBackground) background-image: url('{{ $sectionBackground }}'); @endif">
                        @if ($localized($section['title']) || $localized($section['subtitle']))
                            <header class="qr-builder-section-header">
                                <div>
                                    @if ($localized($section['title']))
                                        <h2>{{ $localized($section['title']) }}</h2>
                                    @endif
                                    @if ($localized($section['subtitle']))
                                        <p>{{ strip_tags(html_entity_decode($localized($section['subtitle']), ENT_QUOTES | ENT_HTML5, 'UTF-8')) }}</p>
                                    @endif
                                </div>
                                @if ($section['show_view_all'])
                                    <button type="button" class="qr-builder-view-all"
                                        style="--view-all-bg: {{ $section['view_all_background'] === 'color' ? $section['view_all_background_color'] : 'transparent' }}; --view-all-text: {{ $section['view_all_text_color'] }}; --view-all-border: {{ $section['view_all_border_color'] }}; --view-all-border-style: {{ $section['view_all_border_style'] }}; --view-all-border-width: {{ $section['view_all_border_width'] }}px; --view-all-radius: {{ $section['view_all_radius'] }}px;"
                                        data-qr-section-open="{{ $section['key'] }}" data-section-title="{{ $localized($section['title']) }}">@lang('qr_builder.view_all') <i class="las la-angle-left" aria-hidden="true"></i></button>
                                @endif
                            </header>
                        @endif

                        @if ($section['layout'] === 'grid_slider')
                            <div @class(['qr-builder-grid-slider', 'has-more' => $sectionStores->count() > $columns * $rows]) tabindex="0" aria-label="{{ $localized($section['title']) }}">
                                @foreach ($sectionStores->chunk($section['columns'] * ($section['max_rows'] ?? 2)) as $slideStores)
                                    <div class="qr-builder-grid-slide qr-builder-store-layout ratio-{{ $section['image_ratio'] }} style-{{ $section['card_style'] }} image-display-{{ $imageDisplay }}">
                                        @foreach ($slideStores as $store)
                                            @include('website.branches.portfolio.builder.store', ['store' => $store, 'section' => $section, 'featured' => false, 'expanded' => false])
                                        @endforeach
                                    </div>
                                @endforeach
                            </div>
                            @if ($sectionStores->count() > $section['columns'] * ($section['max_rows'] ?? 2))
                                <div class="qr-builder-grid-controls">
                                    <small class="qr-builder-grid-hint">@lang('qr_builder.swipe_more')</small>
                                    <button type="button" data-grid-slide="-1" aria-label="@lang('qr_builder.previous_slide')"><i class="las la-angle-right" aria-hidden="true"></i></button>
                                    <button type="button" data-grid-slide="1" aria-label="@lang('qr_builder.next_slide')"><i class="las la-angle-left" aria-hidden="true"></i></button>
                                </div>
                            @endif
                        @else
                        <div class="qr-builder-store-layout ratio-{{ $section['layout'] === 'list' ? 'square' : $section['image_ratio'] }} style-{{ $section['layout'] === 'list' ? 'minimal' : $section['card_style'] }} image-display-{{ $imageDisplay }}" @if ($section['layout'] === 'mosaic') style="--mosaic-columns: {{ $mosaicColumns }}; --mosaic-wide-span: {{ min(2, $mosaicColumns) }};" @endif>
                            @foreach ($sectionStores as $store)
                                @include('website.branches.portfolio.builder.store', [
                                    'store' => $store,
                                    'section' => $section,
                                    'featured' => $section['layout'] === 'featured' && $loop->first,
                                    'expanded' => $section['layout'] === 'list',
                                ])
                            @endforeach
                        </div>
                        @endif
                    </section>
                    @if ($section['show_view_all'])
                        <template id="qr-section-template-{{ $section['key'] }}">
                            @include('website.branches.portfolio.builder.section-list', ['section' => $section])
                        </template>
                    @endif
                    @foreach (($section['category_sections'] ?? collect()) as $nestedSection)
                        <template id="qr-section-template-{{ $nestedSection['key'] }}">
                            @include('website.branches.portfolio.builder.section-list', ['section' => $nestedSection])
                        </template>
                    @endforeach
                @endif
            @endforeach
        </div>

        <div id="qrBuilderNoResults" class="qr-builder-empty" hidden>
            <i class="las la-search"></i>
            <strong>@lang('qr_builder.no_results')</strong>
        </div>

        @if ($settings['show_contact'] && ($contactEmail || $contactPhone || collect($socialLinks)->only(['facebook', 'instagram', 'twitter', 'linkedin', 'youtube', 'snapchat', 'tiktok'])->filter()->isNotEmpty()))
            <section class="qr-builder-contact">
                <div>@if (filled(data_get($settings, 'contact_label.'.$locale)))<small>{{ data_get($settings, 'contact_label.'.$locale) }}</small>@endif
                    <h2>@lang('global.contact_us')</h2>
                </div>
                <div class="qr-builder-contact-links">
                    @if ($email = $contactEmail)
                        <a class="clickable" href="mailto:{{ $email }}" aria-label="@lang('validation.attributes.email')" title="{{ $email }}" click-type="email" clickable-type="branch" clickable-id="{{ $branch->id }}"><i class="las la-envelope" aria-hidden="true"></i></a>
                    @endif
                    @if ($phone = $contactPhone)
                        <a class="clickable" href="tel:{{ preg_replace('/[^+0-9]/', '', $phone) }}" aria-label="@lang('validation.attributes.phone')" title="{{ $phone }}" click-type="phone" clickable-type="branch" clickable-id="{{ $branch->id }}"><i class="las la-phone" aria-hidden="true"></i></a>
                    @endif
                    @foreach (['facebook', 'instagram', 'twitter', 'linkedin', 'youtube', 'snapchat', 'tiktok'] as $social)
                        @if ($url = data_get($socialLinks, $social))
                            <a class="clickable" href="{{ $url }}" click-type="{{ $social }}" clickable-type="branch" clickable-id="{{ $branch->id }}" target="_blank" rel="noopener noreferrer">
                                @if ($social === 'tiktok')
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="20" height="20" fill="currentColor" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M544.5 273.9C500.5 274 457.5 260.3 421.7 234.7L421.7 413.4C421.7 446.5 411.6 478.8 392.7 506C373.8 533.2 347.1 554 316.1 565.6C285.1 577.2 251.3 579.1 219.2 570.9C187.1 562.7 158.3 545 136.5 520.1C114.7 495.2 101.2 464.1 97.5 431.2C93.8 398.3 100.4 365.1 116.1 336C131.8 306.9 156.1 283.3 185.7 268.3C215.3 253.3 248.6 247.8 281.4 252.3L281.4 342.2C266.4 337.5 250.3 337.6 235.4 342.6C220.5 347.6 207.5 357.2 198.4 369.9C189.3 382.6 184.4 398 184.5 413.8C184.6 429.6 189.7 444.8 199 457.5C208.3 470.2 221.4 479.6 236.4 484.4C251.4 489.2 267.5 489.2 282.4 484.3C297.3 479.4 310.4 469.9 319.6 457.2C328.8 444.5 333.8 429.1 333.8 413.4L333.8 64L421.8 64C421.7 71.4 422.4 78.9 423.7 86.2C426.8 102.5 433.1 118.1 442.4 131.9C451.7 145.7 463.7 157.5 477.6 166.5C497.5 179.6 520.8 186.6 544.6 186.6L544.6 274z"/></svg>
                                @elseif ($social === 'twitter')
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="20" height="20" fill="currentColor" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M453.2 112L523.8 112L369.6 288.2L551 528L409 528L297.7 382.6L170.5 528L99.8 528L264.7 339.5L90.8 112L236.4 112L336.9 244.9L453.2 112zM428.4 485.8L467.5 485.8L215.1 152L173.1 152L428.4 485.8z"/></svg>
                                @else
                                    <i class="lab la-{{ $social }}"></i>
                                @endif
                            </a>
                        @endif
                    @endforeach
                </div>
            </section>
        @endif
    </div>
</main>