@props(['data'])

<section class="txss-wrap" id="sticky-services">
    <div class="txss-sticky">
        <div class="txss-container">
            {{-- Left: Content (Pinned) --}}
            <div class="txss-content">
                <div class="txss-header animate-on-scroll">
                    <span class="txss-eyebrow">Interactive Overview</span>
                    <h2 class="txss-title">{{ $data['section_title'] ?? 'Most Ordered Services (05)' }}</h2>
                </div>

                <div class="txss-panels-wrapper">
                    @foreach($data['panels'] ?? [] as $i => $panel)
                    <div class="txss-panel @if($i === 0) active @endif" data-index="{{ $i }}">
                        <div class="txss-panel-num">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</div>
                        <h3 class="txss-panel-title">{{ $panel['title'] ?? '' }}</h3>
                        <p class="txss-panel-desc">{{ $panel['description'] ?? '' }}</p>

                        <div class="txss-meta">
                            <span class="txss-price">{{ $panel['price_label'] ?? '' }}</span>
                            <div class="txss-tags">
                                @foreach($panel['features'] ?? [] as $feat)
                                <span class="txss-tag">{{ $feat }}</span>
                                @endforeach
                            </div>
                        </div>

                        <a href="{{ $panel['slug'] ? route('services.show', $panel['slug']) : '#' }}" class="txss-cta-btn">
                            <span>View details</span>
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </a>
                    </div>
                    @endforeach
                </div>

                {{-- Progress logic --}}
                <div class="txss-progress">
                    <div class="txss-progress-bar"></div>
                </div>
            </div>

            {{-- Right: Visual Mockup --}}
            <div class="txss-visual">
                @foreach($data['panels'] ?? [] as $i => $panel)
                <div class="txss-mock-container @if($i === 0) active @endif" data-index="{{ $i }}">
                    @if(!empty($panel['mock_image']))
                        <img src="{{ asset('storage/' . $panel['mock_image']) }}" alt="{{ $panel['title'] }}" class="txss-mock">
                    @else
                        {{-- Fallback Mockup --}}
                        <div class="txss-mock txss-mock--fallback">
                            <div class="txss-mock-head"></div>
                            <div class="txss-mock-body">
                                <div class="txss-mock-line"></div>
                                <div class="txss-mock-line w-3/4"></div>
                                <div class="txss-mock-line w-1/2"></div>
                            </div>
                        </div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Re-initialize the sticky services logic for the dynamic block
    const wrap = document.querySelector('#sticky-services');
    if (!wrap || typeof gsap === 'undefined') return;

    const panels = wrap.querySelectorAll('.txss-panel');
    const mocks  = wrap.querySelectorAll('.txss-mock-container');
    const bar    = wrap.querySelector('.txss-progress-bar');
    const TOTAL  = panels.length;

    function activate(idx) {
        if (panels[idx].classList.contains('active')) return;

        gsap.killTweensOf([panels, mocks]);

        panels.forEach((p, i) => {
            p.classList.toggle('active', i === idx);
            mocks[i].classList.toggle('active', i === idx);
        });

        // Sync progress bar
        gsap.to(bar, { scaleX: (idx + 1) / TOTAL, duration: 0.4, ease: 'power2.out' });
    }

    ScrollTrigger.create({
        trigger: wrap,
        start: 'top top',
        end: 'bottom bottom',
        onUpdate: (self) => {
            const pct  = Math.min(self.progress, 0.9999);
            const step = 1 / TOTAL;
            const idx  = Math.min(Math.floor(pct / step), TOTAL - 1);
            activate(idx);
        }
    });
});
</script>
@endpush