@php
    $items = $section['parameters']['items'] ?? [];
    $title = $section['parameters']['title'] ?? 'Sumário da Página';
    $backgroundColor = $section['parameters']['background_color'] ?? '#ffffff';
    $removeBottomSpacing = !empty($section['parameters']['remove_bottom_spacing']);
@endphp

<section class="ftco-section" 
         style="padding-top: 48px; padding-bottom: 48px; background-color: {{ $backgroundColor }}; {{ $removeBottomSpacing ? 'margin-bottom: 0;' : 'margin-bottom: 24px;' }}"
         id="summary-{{ $section['id'] }}">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-10 col-md-offset-1">
                <nav class="page-summary-box" 
                     style="padding: 24px; border: 1px solid rgba(0,0,0,0.05); background: #fff; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); border-radius: 0.25rem;"
                     aria-labelledby="summary-title-{{ $section['id'] }}">
                     
                    <header class="summary-header" style="margin-bottom: 24px; border-bottom: 1px solid #eee; padding-bottom: 16px;">
                        <h2 id="summary-title-{{ $section['id'] }}" class="h4" style="margin: 0; font-weight: 800; color: #333; text-transform: uppercase; letter-spacing: 1px;">
                            <i class="fa fa-list-ul text-danger" style="margin-right: 8px;" aria-hidden="true"></i>
                            {{ $title }}
                        </h2>
                    </header>

                    <ul class="summary-list list-unstyled" style="margin-bottom: 0;" role="list">
                        @foreach($items as $index => $item)
                            @php
                                $target = $item['target'] ?? '#';
                                $itemTitle = $item['title'] ?? 'Item ' . ($index + 1);
                            @endphp
                            <li class="summary-item" style="margin-bottom: 8px; line-height: 1.6; display: flex; align-items: baseline;" role="listitem">
                                <span class="summary-dot text-danger" style="margin-right: 8px;" aria-hidden="true">&bull;</span>
                                <a href="{{ $target }}" class="summary-link" style="color: #555; text-decoration: none; transition: 0.2s; flex: 1; display: flex; align-items: baseline;">
                                    <span class="summary-text fw-bold">{{ $itemTitle }}</span>
                                    <span class="summary-filler" style="flex: 1; border-bottom: 1px dotted #ccc !important; margin-left: 8px; margin-right: 8px; position: relative; top: -4px;"></span>
                                    <span class="summary-action small text-muted text-uppercase" style="font-size: 10px; letter-spacing: 1px;">Ir para seção</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</section>

<style>
    .summary-link:hover .summary-text { color: var(--tenant-primary); }
    .summary-link:hover .summary-filler { border-bottom-color: var(--tenant-primary) !important; }
    .summary-item { line-height: 1.6; }
</style>