{{-- 
    Table of contents partial. Expects $post array with 'toc' key:
    [['level' => 2, 'text' => '...', 'id' => 'slug'], ...]
    
    Renders sticky sidebar TOC. Active section highlighted in orange via
    IntersectionObserver. Top reading-progress bar tracks scroll through article.
--}}
@php $toc = $post['toc'] ?? []; @endphp

@if(!empty($toc))
{{-- Top reading progress bar --}}
<div id="geasReadingProgress" aria-hidden="true" style="position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #f97316 0%, #ea580c 100%); z-index: 60; transition: width 0.05s linear;"></div>

<aside class="geas-toc" style="font-family: 'DM Sans', sans-serif;">
    <div style="font-size: 0.6875rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.875rem;">
        On this page
    </div>
    <nav aria-label="Table of contents">
        <ul style="list-style: none; padding: 0; margin: 0; border-left: 1px solid #e2e8f0;">
            @foreach($toc as $entry)
                <li style="{{ $entry['level'] === 3 ? 'padding-left: 1rem;' : '' }}">
                    <a href="#{{ $entry['id'] }}" data-toc-link="{{ $entry['id'] }}" style="display: block; padding: 0.375rem 0 0.375rem 0.875rem; margin-left: -1px; border-left: 2px solid transparent; font-size: 0.8125rem; color: #64748b; text-decoration: none; line-height: 1.4; transition: color 0.15s, border-color 0.15s;">
                        {{ $entry['text'] }}
                    </a>
                </li>
            @endforeach
        </ul>
    </nav>
</aside>

<style>
    .geas-toc a[data-toc-link].is-active {
        color: #f97316 !important;
        border-left-color: #f97316 !important;
        font-weight: 500;
    }
    .geas-toc a[data-toc-link]:hover {
        color: #0f172a;
    }
</style>

<script>
(function() {
    // Reading progress bar
    var progressBar = document.getElementById('geasReadingProgress');
    var article = document.querySelector('.geas-article-body');
    if (!article || !progressBar) return;

    function updateProgress() {
        var rect = article.getBoundingClientRect();
        var start = rect.top + window.scrollY - window.innerHeight * 0.2;
        var end = rect.bottom + window.scrollY - window.innerHeight * 0.8;
        var pos = window.scrollY;
        var pct = 0;
        if (pos > start) pct = Math.min(100, ((pos - start) / Math.max(1, end - start)) * 100);
        progressBar.style.width = pct + '%';
    }
    window.addEventListener('scroll', updateProgress, { passive: true });
    updateProgress();

    // Active section tracking
    var headings = article.querySelectorAll('h2[id], h3[id]');
    var links = document.querySelectorAll('a[data-toc-link]');
    if (!('IntersectionObserver' in window) || !headings.length) return;

    var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                var id = entry.target.id;
                links.forEach(function(l) {
                    l.classList.toggle('is-active', l.getAttribute('data-toc-link') === id);
                });
            }
        });
    }, { rootMargin: '-80px 0px -60% 0px', threshold: 0 });

    headings.forEach(function(h) { observer.observe(h); });
})();
</script>
@endif