@php
    $section = $sections->get($key);
    $title = old("sections.{$key}.title", $section->title ?? $def['title']);
    $html = old(
        "sections.{$key}.body",
        \App\Domain\Catalog\Support\ProductPageCopy::sanitize((string) ($section->body_html ?? ''))
    );
    $items = old(
        "sections.{$key}.items",
        \App\Domain\Catalog\Support\ProductPageCopy::collateralItems((string) ($section->body_html ?? ''))
    );
    $itemSlots = max(6, count($items) + 2);
    $icons = \App\Domain\Catalog\Support\ProductPageCopy::COLLATERAL_ICONS;
@endphp

<div class="mb-3">
    <label class="form-label" for="section_{{ $key }}_title">Section heading</label>
    <input class="form-control" id="section_{{ $key }}_title" name="sections[{{ $key }}][title]" value="{{ $title }}" required>
</div>

@if (($def['type'] ?? '') === 'links')
    <p class="text-muted">{{ $def['help'] }} Open <a href="{{ route('admin.cms.media.index') }}">Media</a> to see every brochure and document URL.</p>
    @for ($i = 0; $i < $itemSlots; $i++)
        <div class="border rounded p-3 mb-3" data-media-row>
            <div class="fw-semibold mb-2">Item {{ $i + 1 }}</div>
            <div class="row g-2">
                <div class="col-md-3">
                    <label class="form-label">Icon</label>
                    <select class="form-select" name="sections[{{ $key }}][items][{{ $i }}][icon]">
                        @foreach ($icons as $iconKey => $iconLabel)
                            <option value="{{ $iconKey }}" @selected(($items[$i]['icon'] ?? 'file') === $iconKey)>{{ $iconLabel }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Name</label>
                    <input class="form-control" data-media-name-input name="sections[{{ $key }}][items][{{ $i }}][label]" value="{{ $items[$i]['label'] ?? '' }}" placeholder="Product Brochure A4 Format">
                </div>
                <div class="col-md-5">
                    <label class="form-label">Link</label>
                    <div class="d-flex gap-2">
                        <input class="form-control" data-media-url-input name="sections[{{ $key }}][items][{{ $i }}][url]" value="{{ $items[$i]['url'] ?? '' }}" placeholder="/legacy/downloads/… or https://">
                        <button class="btn btn-outline-primary text-nowrap" type="button" data-media-open data-media-url="{{ route('admin.cms.media.index') }}">Choose file</button>
                    </div>
                </div>
            </div>
        </div>
    @endfor
    <dialog id="media-picker-dialog" class="media-picker" data-media-url="{{ route('admin.cms.media.index') }}">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <strong>Choose a file</strong>
            <button type="button" class="btn btn-sm btn-outline-secondary" data-media-close>Close</button>
        </div>
        <input class="form-control mb-2" type="search" data-media-search placeholder="Search AO, brochure, cheat sheet…">
        <div data-media-list class="media-picker-list text-muted">Type to search, then click a file.</div>
    </dialog>
    @push('styles')
    <style>
        .media-picker { width: min(720px, 96vw); max-height: 80vh; border: 1px solid #d7e1ea; border-radius: 10px; padding: 1rem; }
        .media-picker-list { max-height: 50vh; overflow: auto; display: grid; gap: 0.4rem; }
        .media-pick-item { display: grid; gap: 0.15rem; text-align: left; width: 100%; border: 1px solid #d7e1ea; background: #fff; border-radius: 8px; padding: 0.65rem 0.75rem; cursor: pointer; }
        .media-pick-item:hover { border-color: var(--brand-primary, #0F62FE); background: #f4f8fb; }
        .media-pick-item span { color: var(--brand-muted, #5b6b7c); font-size: 0.82rem; word-break: break-all; }
    </style>
    @endpush
    @push('scripts')
        <script src="{{ asset('js/media-picker.js') }}"></script>
    @endpush
@else
    <div class="mb-3">
        <label class="form-label" for="section_{{ $key }}_body">Content</label>
        <div class="rte" data-rich-text>
            <div class="rte-bar" role="toolbar" aria-label="Text formatting">
                <button type="button" data-cmd="bold" title="Bold"><strong>B</strong></button>
                <button type="button" data-cmd="italic" title="Italic"><em>I</em></button>
                <button type="button" data-cmd="underline" title="Underline"><span style="text-decoration:underline">U</span></button>
                <span class="rte-sep"></span>
                <button type="button" data-cmd="insertUnorderedList" title="Bullet list">• List</button>
                <button type="button" data-cmd="insertOrderedList" title="Numbered list">1. List</button>
                <span class="rte-sep"></span>
                <button type="button" data-cmd="createLink" title="Add link">Link</button>
                <button type="button" data-cmd="unlink" title="Remove link">Unlink</button>
            </div>
            <div class="rte-area" data-rich-text-area contenteditable="true" aria-label="{{ $def['title'] }} content"></div>
            <textarea class="rte-source" id="section_{{ $key }}_body" name="sections[{{ $key }}][body]" hidden>{{ $html }}</textarea>
        </div>
        <div class="form-text">{{ $def['help'] }}</div>
    </div>
@endif