{{--
    STICKY SCROLL SERVICES — tanujashastri.com "Projects (05)" pattern
    - 500vh scroll track (5 services × 100vh)
    - Inner container is position:sticky, height:100vh
    - GSAP ScrollTrigger handles panel transitions
--}}

@php
$stickyServices = [
    [
        'num'    => '01',
        'slug'   => 'ntn-registration',
        'tag'    => 'Freelancers · Salaried · Business',
        'name'   => 'NTN Registration',
        'desc'   => 'Your National Tax Number is your gateway to legal financial existence in Pakistan. Whether you\'re salaried, freelancing, or running a business — we get your IRIS profile set up, NTN issued, and portal access live.',
        'types'  => [
            ['label'=>'Salaried / Employee', 'detail'=>'For individuals receiving a salary. Enables tax returns, vehicle registration, property purchase, and foreign remittances without WHT.'],
            ['label'=>'Freelancer / Sole Trader', 'detail'=>'For digital professionals and remote workers. Required for Payoneer/PayPal tax certification and FBR filer status.'],
            ['label'=>'Business / AOP', 'detail'=>'For SMEs, partnerships, or associations of persons. Mandatory for sales tax, vendor registration, and contract business.'],
        ],
        'requirements' => ['Valid CNIC (front & back)', 'Active mobile number (for OTP)', 'Email address', 'Utility bill (electricity/gas)'],
        'timeline' => '1–2 Business Days',
        'price'   => 'PKR 1,500',
        'color'   => '#00E0A4',
        'visual_icon' => '🪪',
        'visual_label' => 'NTN Certificate',
        'visual_data' => ['NTN No.' => '####-######-#', 'Status' => 'Active Filer', 'IRIS Portal' => 'Connected', 'Since' => '2024'],
    ],
    [
        'num'    => '02',
        'slug'   => 'income-tax-filing',
        'tag'    => 'Individuals · Business · Corporate',
        'name'   => "Income Tax<br>Filing",
        'desc'   => 'File your annual income tax return accurately and on time. We handle the entire FBR IRIS submission, calculate your tax liability, claim eligible deductions, and move you from non-filer to filer status permanently.',
        'types'  => [
            ['label'=>'Salaried Individual', 'detail'=>'Salary statements, bank profit, freelance income, and property income reconciled and filed per SRO.'],
            ['label'=>'Business / Sole Proprietor', 'detail'=>'P&L, assets, liabilities, and expenses filed with complete wealth statement.'],
            ['label'=>'Corporate (Company)', 'detail'=>'Full corporate return, tax computations, audited accounts filing per Companies Act.'],
        ],
        'requirements' => ['CNIC & NTN number', 'Salary slips or bank statements', 'Income & expense records', 'Asset & liability details', 'Rental / investment income (if any)'],
        'timeline' => '3–5 Business Days',
        'price'   => 'PKR 2,500',
        'color'   => '#2563EB',
        'visual_icon' => '📊',
        'visual_label' => 'Tax Return Filed',
        'visual_data' => ['Return Year' => 'Tax Year 2024', 'Status' => 'Submitted ✓', 'Refund' => 'Calculated', 'Filer Status' => 'Active'],
    ],
    [
        'num'    => '03',
        'slug'   => 'sales-tax-registration',
        'tag'    => 'FBR · GST · STRN',
        'name'   => "Sales Tax<br>Registration (GST)",
        'desc'   => 'Get your Sales Tax Registration Number (STRN) with FBR. Required for businesses supplying taxable goods or services above the threshold. We handle the complete FBR portal application and STRN issuance.',
        'types'  => [
            ['label'=>'Manufacturer / Importer', 'detail'=>'Mandatory for all manufacturers and importers. Enables input tax credit claims on raw materials.'],
            ['label'=>'Retailer / Trader', 'detail'=>'For traders above PKR 10M annual turnover. Covers tier-1 retailers under FBR POS scheme.'],
            ['label'=>'Service Provider', 'detail'=>'For telecom, IT, and consulting firms supplying taxable services under federal GST regime.'],
        ],
        'requirements' => ['CNIC & NTN', 'Active business bank account', 'Business proof (letterhead / utility bill)', 'Bank maintenance certificate', 'Business address details'],
        'timeline' => '2–3 Business Days',
        'price'   => 'PKR 8,500',
        'color'   => '#F59E0B',
        'visual_icon' => '📋',
        'visual_label' => 'GST Certificate',
        'visual_data' => ['STRN No.' => '##-##-####-###-##', 'Authority' => 'FBR Federal', 'Category' => 'Registered', 'Filing' => 'Monthly Return'],
    ],
    [
        'num'    => '04',
        'slug'   => 'pst-registration',
        'tag'    => 'Provincial · SRB · PRA · KPRA · BRA',
        'name'   => "PST Registration<br>(Provincial)",
        'desc'   => 'Provincial Sales Tax on Services — mandatory for service providers operating in Sindh (SRB), Punjab (PRA), KPK (KPRA), or Balochistan (BRA). We register you with the correct provincial authority and set up return filing.',
        'types'  => [
            ['label'=>'Sindh (SRB)', 'detail'=>'Services tax via SRB portal. Rate: 13%. Covers IT, consultancy, restaurants, construction, and more.'],
            ['label'=>'Punjab (PRA)', 'detail'=>'Services tax via PRA. Rate: 16%. Covers advertising, legal services, accountancy, and IT-enabled services.'],
            ['label'=>'KPK / Balochistan', 'detail'=>'KPRA and BRA registrations for service providers in respective provinces. We handle all four jurisdictions.'],
        ],
        'requirements' => ['CNIC & NTN', 'Registered office address', 'Business type & services list', 'Bank account details', 'Utility bill of business premises'],
        'timeline' => '7–10 Business Days',
        'price'   => 'PKR 9,500',
        'color'   => '#EC4899',
        'visual_icon' => '🏛️',
        'visual_label' => 'Provincial Certificate',
        'visual_data' => ['Authority' => 'SRB / PRA / KPRA', 'Status' => 'Registered', 'Rate' => '13–16%', 'Filing' => 'Monthly'],
    ],
    [
        'num'    => '05',
        'slug'   => 'company-registration',
        'tag'    => 'SECP · SMC · Pvt Ltd · AOP',
        'name'   => "Company<br>Registration",
        'desc'   => 'Register your company with SECP and become a legal entity. From single-member SMC-Pvt Ltd to multi-director Pvt Ltd companies — we handle name reservation, MoA/AoA drafting, SECP filing, and certificate delivery.',
        'types'  => [
            ['label'=>'SMC-Pvt Ltd (Single Member)', 'detail'=>'Best for solo founders. 100% ownership. Requires only 1 director with CNIC. Full limited liability protection.'],
            ['label'=>'Pvt Ltd Company', 'detail'=>'For 2–50 shareholders. Ideal for startups and businesses planning investor rounds or formal structure.'],
            ['label'=>'AOP / Partnership', 'detail'=>'Association of Persons — simpler structure for joint ventures. Registered with FBR, not SECP.'],
        ],
        'requirements' => ['CNIC of all directors', 'Proposed company name (3 options)', 'Registered office address', 'Email & phone numbers', 'Memorandum & Articles of Association'],
        'timeline' => '5–10 Business Days',
        'price'   => 'PKR 14,500',
        'color'   => '#8B5CF6',
        'visual_icon' => '🏢',
        'visual_label' => 'SECP Certificate',
        'visual_data' => ['Entity' => 'SMC-Pvt Limited', 'SECP No.' => '######', 'Directors' => '1–3', 'Liability' => 'Limited'],
    ],
];
@endphp

{{-- ─── OUTER SCROLL TRACK (500vh) ──────────────────────────── --}}
<section class="txss-wrap" id="sticky-services" data-tx-section>

    {{-- Section label outside sticky (reference site style) --}}
    <div class="txss-section-label">
        <span class="txss-section-num">05</span>
        <span class="txss-section-title">Most Ordered Services</span>
    </div>

    {{-- Number nav pills (right side, fixed relative to sticky) --}}
    <div class="txss-nav" id="txss-nav">
        @foreach($stickyServices as $i => $sv)
        <button class="txss-nav__dot{{ $i === 0 ? ' is-active' : '' }}"
                data-index="{{ $i }}"
                onclick="txssGoTo({{ $i }})"
                aria-label="{{ $sv['name'] }}">
            {{ $sv['num'] }}
        </button>
        @endforeach
    </div>

    {{-- ─── STICKY INNER CONTAINER ──────────── --}}
    <div class="txss-sticky" id="txss-sticky">

        {{-- LEFT: Panels (one per service) --}}
        <div class="txss-left">
            @foreach($stickyServices as $i => $sv)
            <div class="txss-panel{{ $i === 0 ? ' is-active' : '' }}"
                 data-index="{{ $i }}"
                 data-color="{{ $sv['color'] }}">

                {{-- Tag + Number --}}
                <div class="txss-panel__meta">
                    <span class="txss-panel__num">{{ $sv['num'] }}</span>
                    <span class="txss-panel__tag">{{ $sv['tag'] }}</span>
                </div>

                {{-- Heading --}}
                <h2 class="txss-panel__heading">{!! $sv['name'] !!}</h2>

                {{-- Description --}}
                <p class="txss-panel__desc">{{ $sv['desc'] }}</p>

                {{-- Types / Variants (if service has sub-types) --}}
                @if(isset($sv['types']) && count($sv['types']))
                <div class="txss-types">
                    @foreach($sv['types'] as $ti => $type)
                    <div class="txss-type{{ $ti === 0 ? ' is-open' : '' }}">
                        <button class="txss-type__header" onclick="txssToggle(this)">
                            <span>{{ $type['label'] }}</span>
                            <svg class="txss-type__arrow" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                        <div class="txss-type__body">
                            <p>{{ $type['detail'] }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif

                {{-- Requirements & Timeline accordions --}}
                <div class="txss-accordions">
                    <div class="txss-acc is-open">
                        <button class="txss-acc__header" onclick="txssToggle(this)">
                            <span>Requirements</span>
                            <svg class="txss-acc__arrow" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                        <div class="txss-acc__body">
                            <ul>
                                @foreach($sv['requirements'] as $req)
                                <li>{{ $req }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="txss-acc">
                        <button class="txss-acc__header" onclick="txssToggle(this)">
                            <span>Timeline</span>
                            <svg class="txss-acc__arrow" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                        <div class="txss-acc__body">
                            <p class="txss-acc__timeline">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
                                    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                                </svg>
                                {{ $sv['timeline'] }}
                            </p>
                        </div>
                    </div>
                </div>

                {{-- CTA --}}
                <div class="txss-panel__cta">
                    <a href="{{ route('services.show', $sv['slug']) }}"
                       onclick="localStorage.setItem('intent','{{ $sv['slug'] }}')"
                       class="txss-cta-btn"
                       style="--accent: {{ $sv['color'] }};">
                        <span>Start Now</span>
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </a>
                    <span class="txss-price">from {{ $sv['price'] }}</span>
                </div>

            </div>
            @endforeach
        </div>

        {{-- RIGHT: Visual panels --}}
        <div class="txss-right">
            @foreach($stickyServices as $i => $sv)
            <div class="txss-visual{{ $i === 0 ? ' is-active' : '' }}"
                 data-index="{{ $i }}"
                 style="--accent: {{ $sv['color'] }};">

                {{-- Glow bg --}}
                <div class="txss-visual__glow" style="background: radial-gradient(circle, {{ $sv['color'] }}18 0%, transparent 65%);"></div>

                {{-- Mock certificate / dashboard card --}}
                <div class="txss-visual__card">
                    <div class="txss-visual__card-header">
                        <div class="txss-visual__icon">{{ $sv['visual_icon'] }}</div>
                        <div>
                            <div class="txss-visual__card-title">{{ $sv['visual_label'] }}</div>
                            <div class="txss-visual__card-sub">Texora · Official Document</div>
                        </div>
                        <div class="txss-visual__badge" style="background: {{ $sv['color'] }}20; color: {{ $sv['color'] }}; border: 1px solid {{ $sv['color'] }}30;">Issued ✓</div>
                    </div>

                    <div class="txss-visual__divider"></div>

                    <div class="txss-visual__data">
                        @foreach($sv['visual_data'] as $key => $val)
                        <div class="txss-visual__row">
                            <span class="txss-visual__key">{{ $key }}</span>
                            <span class="txss-visual__val" style="color: {{ $sv['color'] }};">{{ $val }}</span>
                        </div>
                        @endforeach
                    </div>

                    <div class="txss-visual__footer">
                        <div class="txss-visual__seal" style="border-color: {{ $sv['color'] }}30;">
                            <div class="txss-visual__seal-inner" style="background: {{ $sv['color'] }}10; color: {{ $sv['color'] }};">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                FBR Verified
                            </div>
                        </div>
                        <div class="txss-visual__watermark">TEXORA CERTIFIED</div>
                    </div>
                </div>

                {{-- Floating stat chips --}}
                <div class="txss-visual__chips">
                    <div class="txss-visual__chip">
                        <span style="color:{{ $sv['color'] }}">⚡</span>
                        {{ $sv['timeline'] }}
                    </div>
                    <div class="txss-visual__chip">
                        <span style="color:{{ $sv['color'] }}">✅</span>
                        {{ $sv['price'] }}
                    </div>
                </div>

            </div>
            @endforeach

            {{-- Progress bar (right side track) --}}
            <div class="txss-progress-track">
                <div class="txss-progress-fill" id="txss-progress"></div>
            </div>
        </div>

    </div>{{-- /txss-sticky --}}

</section>{{-- /txss-wrap --}}

{{-- ─── STICKY SERVICES JAVASCRIPT ──────────────────────────── --}}
<script>
// ── Accordion toggle ─────────────────────────────────────
function txssToggle(btn) {
    const item = btn.closest('.txss-acc, .txss-type');
    const isOpen = item.classList.contains('is-open');
    item.closest('.txss-accordions, .txss-types')
        .querySelectorAll('.txss-acc, .txss-type')
        .forEach(el => el.classList.remove('is-open'));
    if (!isOpen) item.classList.add('is-open');
}

// ── Manual navigation ────────────────────────────────────
function txssGoTo(index) {
    const wrap = document.getElementById('sticky-services');
    if (!wrap) return;
    const totalH = wrap.offsetHeight - window.innerHeight;
    const target = wrap.offsetTop + (index / 4) * totalH;
    window.scrollTo({ top: target, behavior: 'smooth' });
}

// ── Core GSAP ScrollTrigger implementation ───────────────
document.addEventListener('DOMContentLoaded', () => {
    if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return;
    gsap.registerPlugin(ScrollTrigger);

    const wrap    = document.getElementById('sticky-services');
    const sticky  = document.getElementById('txss-sticky');
    const panels  = Array.from(document.querySelectorAll('.txss-panel'));
    const visuals = Array.from(document.querySelectorAll('.txss-visual'));
    const navDots = Array.from(document.querySelectorAll('.txss-nav__dot'));
    const progress= document.getElementById('txss-progress');

    if (!wrap || !sticky || panels.length === 0) return;

    const TOTAL = panels.length;
    let current = -1; // -1 so first activate(0) always runs

    // ─────────────────────────────────────────────────────
    //  activate(idx)
    //  FIX: Kill ALL tweens first, then use gsap.set() to
    //  immediately hard-reset every non-active panel.
    //  Never use onComplete() to remove is-active classes —
    //  that fires too late on fast back-scrolling.
    // ─────────────────────────────────────────────────────
    function activate(idx) {
        if (idx === current) return; // nothing changed

        current = idx;

        // 1. Kill every in-flight tween on panels and visuals
        gsap.killTweensOf(panels);
        gsap.killTweensOf(visuals);

        // 2. Instantly reset ALL panels to the hidden state,
        //    strip is-active from every one
        panels.forEach((p, i) => {
            p.classList.remove('is-active');
            if (i !== idx) {
                gsap.set(p, { y: 60, opacity: 0, pointerEvents: 'none' });
            }
        });
        visuals.forEach((v, i) => {
            v.classList.remove('is-active');
            if (i !== idx) {
                gsap.set(v, { opacity: 0, scale: 0.94, y: 20 });
            }
        });

        // 3. Mark + animate only the incoming panel
        const panel  = panels[idx];
        const visual = visuals[idx];

        panel.classList.add('is-active');
        gsap.fromTo(panel,
            { y: 55, opacity: 0 },
            { y: 0,  opacity: 1, pointerEvents: 'auto',
              duration: 0.55, ease: 'expo.out' }
        );

        visual.classList.add('is-active');
        gsap.fromTo(visual,
            { opacity: 0, scale: 0.94, y: 18 },
            { opacity: 1, scale: 1,    y: 0,
              duration: 0.6, ease: 'expo.out' }
        );

        // 4. Nav dots
        navDots.forEach((dot, i) => dot.classList.toggle('is-active', i === idx));

        // 5. Progress bar
        if (progress) {
            gsap.to(progress, {
                height: `${((idx + 1) / TOTAL) * 100}%`,
                duration: 0.4, ease: 'power2.out'
            });
        }
    }

    // ── ScrollTrigger: watch progress only (CSS does the pin) ─
    //  DO NOT use pin: here — .txss-sticky is position:sticky in CSS.
    //  Adding GSAP pin on top of CSS sticky + Lenis = whole page locks.
    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);
        }
    });


    // ── Keyboard support ──────────────────────────────────
    document.addEventListener('keydown', (e) => {
        const rect = wrap.getBoundingClientRect();
        const inSection = rect.top <= 0 && rect.bottom >= 0;
        if (!inSection) return;
        if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
            txssGoTo(Math.min(current + 1, TOTAL - 1));
        } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
            txssGoTo(Math.max(current - 1, 0));
        }
    });

    // ── Mobile touch swipe ────────────────────────────────
    if (window.innerWidth < 1024) {
        let touchY = 0;
        sticky.addEventListener('touchstart', e => { touchY = e.touches[0].clientY; }, { passive: true });
        sticky.addEventListener('touchend', e => {
            const dy = touchY - e.changedTouches[0].clientY;
            if (Math.abs(dy) < 30) return;
            txssGoTo(dy > 0
                ? Math.min(current + 1, TOTAL - 1)
                : Math.max(current - 1, 0));
        }, { passive: true });
    }

    // ── Initialise: hard-set panel 0 visible, rest hidden ─
    panels.forEach((p, i)  => gsap.set(p,  i === 0 ? { y: 0, opacity: 1 } : { y: 60, opacity: 0 }));
    visuals.forEach((v, i) => gsap.set(v,  i === 0 ? { opacity: 1, scale: 1, y: 0 } : { opacity: 0, scale: 0.94, y: 20 }));
    panels[0].classList.add('is-active');
    visuals[0].classList.add('is-active');
    navDots[0]?.classList.add('is-active');
    current = 0;
});
</script>