<aside class="lg:col-span-4 order-2">
    <div class="sticky top-8 flex flex-col gap-8">

        <?php
        require_once __DIR__ . '/../../includes/blog-service.php';

        $inBlogsFolder = (strpos($_SERVER['PHP_SELF'] ?? '', '/Blogs/') !== false);
        $baseUrlPrefix = $inBlogsFolder ? '../' : '';

        // Determine current post identifier
        $activeSlug = $_GET['slug'] ?? basename($_SERVER['SCRIPT_NAME'], '.php');
        if (isset($currentPost) && is_array($currentPost)) {
            $activeId = $currentPost['id'] ?? $activeSlug;
            $activeCategory = $currentPost['category'] ?? null;
        } else {
            $activePost = get_blog_by_slug($activeSlug);
            $activeId = $activePost['id'] ?? $activeSlug;
            $activeCategory = $activePost['category'] ?? null;
        }

        $suggestions = get_related_blogs($activeId, $activeCategory, 3);
        ?>

        <!-- Suggested reads -->
        <div class="flex flex-col gap-5">
            <div class="flex items-center gap-4 px-1">
                <h4 class="font-mono text-[11px] uppercase tracking-[0.3em] text-soft whitespace-nowrap">Suggested Reads</h4>
                <div class="h-px w-full bg-zinc-100"></div>
            </div>

            <div class="flex flex-col gap-3">
                <?php foreach ($suggestions as $item): 
                    $targetSlug = $item['slug'] ?? basename($item['path'], '.php');
                    $targetUrl = $baseUrlPrefix . "blog-details.php?slug=" . urlencode($targetSlug);
                ?>
                    <a href="<?= htmlspecialchars($targetUrl) ?>" class="group p-5 md:p-6 rounded-[24px] border border-zinc-100 hover:border-royal/20 hover:bg-zinc-50 transition-all duration-500">
                        <span class="text-[9px] font-semibold uppercase tracking-widest text-brandOrange mb-2 block"><?= htmlspecialchars($item['category']) ?></span>
                        <h5 class="text-sm font-medium text-dark tracking-tight leading-snug group-hover:text-electric transition-colors">
                            <?= htmlspecialchars($item['title']) ?>
                        </h5>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>

        <!-- Reading progress + share -->
        <div class="flex items-center justify-between p-5 bg-[#F8F9FA] rounded-[28px] border border-zinc-100">
            <div class="flex items-center gap-4">
                <div class="relative w-14 h-14 flex items-center justify-center flex-shrink-0">
                    <svg class="w-full h-full transform -rotate-90" viewBox="0 0 56 56">
                        <circle cx="28" cy="28" r="24" stroke="currentColor" stroke-width="4" fill="transparent" class="text-zinc-200" />
                        <circle id="progress-circle" cx="28" cy="28" r="24" stroke="currentColor" stroke-width="4" fill="transparent"
                            class="text-brandOrange transition-all duration-75"
                            stroke-dasharray="150.8" stroke-dashoffset="150.8" />
                    </svg>
                    <span id="progress-text" class="absolute font-mono text-[11px] font-semibold text-royal">0%</span>
                </div>
                <div class="flex flex-col">
                    <span class="font-mono text-[10px] uppercase tracking-widest text-brandOrange font-semibold">Reading</span>
                    <span class="text-[13px] font-semibold text-royal uppercase tracking-tighter">Progress</span>
                </div>
            </div>

            <div class="flex gap-2">
                <button type="button" onclick="shareOnTwitter()" aria-label="Share on X" class="w-9 h-9 rounded-full border border-zinc-200 flex items-center justify-center hover:bg-royal hover:text-white hover:border-royal transition-all duration-300 text-soft">
                    <i class="ri-twitter-x-fill text-sm"></i>
                </button>
                <button type="button" onclick="shareOnLinkedIn()" aria-label="Share on LinkedIn" class="w-9 h-9 rounded-full border border-zinc-200 flex items-center justify-center hover:bg-royal hover:text-white hover:border-royal transition-all duration-300 text-soft">
                    <i class="ri-linkedin-fill text-sm"></i>
                </button>
                <button type="button" onclick="copyArticleLink()" aria-label="Copy link" class="w-9 h-9 rounded-full border border-zinc-200 flex items-center justify-center hover:bg-royal hover:text-white hover:border-royal transition-all duration-300 text-soft">
                    <i class="ri-link-m text-sm"></i>
                </button>
            </div>
        </div>

        <!-- Newsletter -->
        <div class="bg-royal rounded-[28px] p-7 md:p-8 text-white">
            <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-brandOrange font-semibold block mb-3">
                Stay Updated
            </span>
            <h3 class="text-xl md:text-2xl font-[400] tracking-tighter mb-5">
                Get fintech and software insights delivered to your inbox.
            </h3>
            <form onsubmit="event.preventDefault(); alert('Thank you for subscribing to Nesvra Insights!'); this.reset();" class="flex flex-col gap-3">
                <input type="email" required placeholder="Enter your email"
                    class="bg-white/10 border border-white/20 rounded-full px-5 py-3.5 text-sm focus:outline-none focus:border-brandOrange transition-all placeholder:text-white/40 w-full text-white">
                <button type="submit" class="bg-brandOrange text-white font-semibold py-3.5 rounded-full hover:bg-white hover:text-royal transition-all duration-500 text-sm">
                    Subscribe Now
                </button>
            </form>
        </div>

    </div>
</aside>