@props([
    'title',
    'comparisons',
    'highlight' => null,
])
@php
    use App\Support\Highlight;
@endphp
<section class="nova-section nova-showcase" id="nova-showcase" aria-labelledby="nova-showcase-title">
    <div class="nova-wrap">
        <header class="nova-section-head">
            <span class="nova-tag">Before & after</span>
            <h2 id="nova-showcase-title" class="nova-section-head__title">
                {!! Highlight::word($title, $highlight) !!}
            </h2>
            <p class="nova-section-head__lede">Real transformations from trade businesses like yours. Drag each slider to see the difference branding makes.</p>
        </header>

        <div class="nova-showcase__grid">
            @foreach($comparisons as $comparison)
                @php
                    $label = $comparison['label'] ?? '';
                    $cat = $comparison['category'] ?? '';
                    $beforeImg = $cat ? asset("images/portfolio/{$cat}-1.jpg") : '';
                    $afterImg = $cat ? asset("images/portfolio/{$cat}-2.jpg") : '';
                @endphp
                <article class="nova-showcase__cell">
                    <div
                        class="nova-ba"
                        data-work-compare
                        role="img"
                        aria-label="Before and after comparison: {{ $label }}"
                    >
                        <div class="nova-ba__halves">
                            <div class="nova-ba__half nova-ba__half--before">
                                <span class="nova-ba__tag">Before</span>
                                @if($beforeImg)
                                    <img
                                        src="{{ $beforeImg }}"
                                        alt="{{ $label }} before"
                                        loading="lazy"
                                        decoding="async"
                                        width="800"
                                        height="600"
                                        draggable="false"
                                    >
                                @endif
                            </div>
                            <div class="nova-ba__half nova-ba__half--after" data-work-compare-after>
                                <span class="nova-ba__tag nova-ba__tag--after">After</span>
                                @if($afterImg)
                                    <img
                                        src="{{ $afterImg }}"
                                        alt="{{ $label }} after"
                                        loading="lazy"
                                        decoding="async"
                                        width="800"
                                        height="600"
                                        draggable="false"
                                    >
                                @endif
                            </div>
                        </div>
                        <div class="nova-ba__split" data-work-compare-handle aria-hidden="true">
                            <span class="nova-ba__split-line"></span>
                            <span class="nova-ba__split-knob">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
                                    <path d="M8 8l-4 4 4 4M16 8l4 4-4 4" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                        </div>
                    </div>

                    <div class="nova-showcase__meta">
                        <h3 class="nova-showcase__name">{{ $label }}</h3>
                        @if($cat)
                            <a href="{{ route('work.show', $cat) }}" class="nova-showcase__link">
                                View project <span aria-hidden="true">→</span>
                            </a>
                        @endif
                    </div>
                </article>
            @endforeach
        </div>

        <footer class="nova-section__foot">
            <a href="{{ route('work.show', 'fleet-designs') }}" class="nova-btn nova-btn--secondary">View full portfolio</a>
        </footer>
    </div>
</section>