@php
    $methodologies = config('specialist.methodologies', []);
@endphp

<section class="sk-expertise sk-methodologies sk-cro-offerings sk-cro-offerings--full" aria-labelledby="sk-methodologies-heading">
    <div class="container">
        <h2 class="sk-expertise__title" id="sk-methodologies-heading">Global SEO Methodologies That We Have Tested</h2>
        <p class="sk-expertise__intro">
            We adopt rigorous global SEO frameworks, test them on Google.co.ke, and engineer them for Kenyan buyers, networks, and search behaviour.
        </p>

        <div class="sk-cro-offerings__frame" data-cro-tabs>
            <div class="sk-cro-offerings__layout">
                <div class="sk-cro-offerings__nav" role="tablist" aria-label="SEO methodologies">
                    @foreach($methodologies as $index => $method)
                        <button type="button"
                                class="sk-cro-offerings__nav-btn{{ $index === 0 ? ' is-active' : '' }}"
                                role="tab"
                                id="methodology-tab-{{ $index + 1 }}"
                                aria-selected="{{ $index === 0 ? 'true' : 'false' }}"
                                aria-controls="methodology-panel-{{ $index + 1 }}"
                                data-cro-tab="{{ $index }}"
                                @if($index !== 0) tabindex="-1" @endif>
                            {{ $method['tab'] }}
                        </button>
                    @endforeach
                </div>

                <div class="sk-cro-offerings__panels">
                    @foreach($methodologies as $index => $method)
                        <article class="sk-cro-offerings__panel{{ $index === 0 ? ' is-active' : '' }}"
                                 role="tabpanel"
                                 id="methodology-panel-{{ $index + 1 }}"
                                 aria-labelledby="methodology-tab-{{ $index + 1 }}"
                                 @if($index !== 0) aria-hidden="true" @endif>
                            <h3 class="sk-cro-offerings__panel-title">{{ $method['title'] }}</h3>
                            <p class="sk-cro-offerings__panel-meta mb-2">
                                <span class="text-muted small">Source:</span> {{ $method['source'] }}
                            </p>
                            <p class="sk-cro-offerings__panel-intro">{{ $method['summary'] }}</p>

                            <h4 class="sk-methodologies__apply-heading">How we apply it in Kenya</h4>
                            <p class="sk-methodologies__apply-lead">{{ $method['application'] }}</p>
                            @if(!empty($method['apply_points']))
                                <ul class="sk-cro-offerings__list">
                                    @foreach($method['apply_points'] as $point)
                                        <li>{{ $point }}</li>
                                    @endforeach
                                </ul>
                            @endif

                            <a href="{{ \App\Support\Consultation::url('free_discovery', ['ref' => $method['ref'] ?? 'methodology']) }}"
                               class="btn btn-primary mt-3">
                                {{ $method['cta'] ?? 'Book a free consultation' }}
                            </a>
                        </article>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

@once
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('[data-cro-tabs]').forEach(function(root) {
        var tabs = root.querySelectorAll('.sk-cro-offerings__nav-btn');
        var panels = root.querySelectorAll('.sk-cro-offerings__panel');
        if (!tabs.length || !panels.length) {
            return;
        }

        function activateTab(index) {
            tabs.forEach(function(tab, i) {
                var isActive = i === index;
                tab.classList.toggle('is-active', isActive);
                tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
                tab.tabIndex = isActive ? 0 : -1;
            });

            panels.forEach(function(panel, i) {
                var isActive = i === index;
                panel.classList.toggle('is-active', isActive);
                panel.setAttribute('aria-hidden', isActive ? 'false' : 'true');
            });
        }

        tabs.forEach(function(tab, index) {
            tab.addEventListener('click', function() {
                activateTab(index);
            });
        });
    });
});
</script>
@endpush
@endonce