{{-- resources/views/filament/components/partials/comparison-block.blade.php --}}
{{-- Story 5-16: Renders a single block in read-only mode for comparison view --}}
{{-- Uses inline styles (same pattern as seo-audit-panel.blade.php) --}}
@php
$data = $block['data'] ?? [];
$type = $block['type'] ?? 'unknown';
@endphp

@switch($type)
@case('paragraph')
@case('classic')
<div style="font-size:13px;line-height:1.6;color:#374151;overflow-wrap:break-word;">
    @if (! empty($data['content']))
    {!! $data['content'] !!}
    @else
    <span style="color:#9ca3af;font-style:italic;">—</span>
    @endif
</div>
@break

@case('heading')
@php $level = $data['level'] ?? 2; @endphp
<div style="font-size:{{ match((int) $level) { 1 => '20', 2 => '17', 3 => '15', default => '14' } }}px;font-weight:700;color:#111827;line-height:1.3;">
    {{ $data['text'] ?? '' }}
</div>
@break

@case('list')
@php
$items = $data['items'] ?? [];
$listType = $data['type'] ?? 'unordered';
@endphp
@if (count($items) > 0)
@if ($listType === 'ordered')
<ol style="margin:0;padding-left:20px;font-size:13px;color:#374151;">
    @foreach ($items as $item)
    <li style="margin-bottom:2px;">{{ is_string($item) ? $item : ($item['item'] ?? '') }}</li>
    @endforeach
</ol>
@else
<ul style="margin:0;padding-left:20px;font-size:13px;color:#374151;">
    @foreach ($items as $item)
    <li style="margin-bottom:2px;">{{ is_string($item) ? $item : ($item['item'] ?? '') }}</li>
    @endforeach
</ul>
@endif
@else
<span style="color:#9ca3af;font-style:italic;font-size:12px;">Liste vide</span>
@endif
@break

@case('quote')
<blockquote style="margin:0;padding:8px 12px;border-left:3px solid #d1d5db;font-size:13px;color:#4b5563;font-style:italic;">
    {{ $data['text'] ?? '' }}
    @if (! empty($data['attribution']))
    <footer style="margin-top:4px;font-size:11px;color:#9ca3af;font-style:normal;">— {{ $data['attribution'] }}</footer>
    @endif
</blockquote>
@break

@case('image')
<div style="display:flex;flex-direction:column;gap:6px;">
    <div style="display:flex;align-items:center;gap:8px;">
        @if (! empty($data['path']))
        <img src="{{ asset('storage/' . $data['path']) }}" alt="{{ $data['alt'] ?? '' }}" style="max-width:120px;max-height:80px;border-radius:4px;object-fit:cover;border:1px solid #e5e7eb;">
        @else
        <div style="width:80px;height:60px;background:#f3f4f6;border-radius:4px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;">
            <svg style="width:20px;height:20px;color:#9ca3af;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" />
            </svg>
        </div>
        @endif
        <div style="display:flex;flex-direction:column;gap:2px;">
            @if (! empty($data['alt']))
            <span style="font-size:11px;color:#6b7280;">alt: {{ $data['alt'] }}</span>
            @endif
            @if (! empty($data['caption']))
            <span style="font-size:11px;color:#9ca3af;font-style:italic;">{{ $data['caption'] }}</span>
            @endif
        </div>
    </div>
</div>
@break

@case('gallery')
@php $images = $data['images'] ?? []; @endphp
@if (count($images) > 0)
<div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(60px, 1fr));gap:4px;">
    @foreach (array_slice($images, 0, 6) as $img)
    <img src="{{ asset('storage/' . ($img['path'] ?? $img)) }}" alt=""
        style="width:100%;height:50px;object-fit:cover;border-radius:3px;border:1px solid #e5e7eb;">
    @endforeach
    @if (count($images) > 6)
    <div style="display:flex;align-items:center;justify-content:center;height:50px;background:#f3f4f6;border-radius:3px;font-size:11px;color:#6b7280;">
        +{{ count($images) - 6 }}
    </div>
    @endif
</div>
@else
<span style="color:#9ca3af;font-style:italic;font-size:12px;">Aucune image</span>
@endif
@break

@case('video')
<div style="display:flex;align-items:center;gap:6px;font-size:12px;">
    <svg style="width:16px;height:16px;color:#6b7280;flex-shrink:0;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
    </svg>
    @if (! empty($data['url']))
    <a href="{{ $data['url'] }}" target="_blank" rel="noopener" style="color:#2563eb;text-decoration:underline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
        {{ $data['url'] }}
    </a>
    @else
    <span style="color:#9ca3af;font-style:italic;">Aucune URL</span>
    @endif
</div>
@break

@case('link')
@case('button')
<div style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:4px;font-size:12px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;">
    {{ $data['text'] ?? '(Lien)' }}
    @if (! empty($data['url']))
    <span style="font-size:10px;color:#6b7280;margin-left:4px;">→ {{ Str::limit($data['url'], 40) }}</span>
    @endif
    @if ($type === 'button' && ! empty($data['variant']))
    <span style="font-size:9px;color:#9ca3af;margin-left:4px;">[{{ $data['variant'] }}]</span>
    @endif
</div>
@break

@case('banner')
<div style="display:flex;align-items:center;gap:8px;padding:8px;border-radius:4px;background:#f0f9ff;border:1px solid #bae6fd;">
    @if (! empty($data['icon']))
    <span style="font-size:16px;">{{ $data['icon'] }}</span>
    @endif
    <span style="font-size:13px;color:#0c4a6e;">{{ $data['text'] ?? $data['content'] ?? '' }}</span>
</div>
@break

@case('kpi')
<div style="display:flex;flex-direction:column;gap:4px;">
    <div style="display:flex;align-items:baseline;gap:6px;">
        <span style="font-size:22px;font-weight:800;color:#111827;">{{ $data['number'] ?? '—' }}</span>
        @if (! empty($data['label']))
        <span style="font-size:12px;color:#6b7280;">{{ $data['label'] }}</span>
        @endif
    </div>
    @if (! empty($data['source']))
    <span style="font-size:10px;color:#9ca3af;">Source : {{ $data['source'] }}</span>
    @endif
    @if (! empty($data['variant']))
    <span style="font-size:10px;color:#9ca3af;">[{{ $data['variant'] }}]</span>
    @endif
</div>
@break

@default
<div style="font-size:12px;color:#9ca3af;font-style:italic;">
    Type de bloc inconnu : {{ $type }}
</div>
@endswitch