<!DOCTYPE html>
<html lang="en">
<?php
require_once __DIR__ . '/includes/blog-service.php';

// 1. Resolve Post Slug / ID
$rawSlug = $_GET['slug'] ?? $_GET['post'] ?? $_GET['id'] ?? '';
$post = null;

if (!empty($rawSlug)) {
    $post = get_blog_by_slug($rawSlug);
}

// Fallback: If no slug or not found, show 404 state
if (!$post && !empty($rawSlug)) {
    http_response_code(404);
}

$blogTitle   = $post['title'] ?? 'Article Not Found';
$blogImage   = $post['image'] ?? 'Asset/home-v3.webp';
$publishDate = $post['publishDate'] ?? 'May 2026';
$readTime    = $post['readTime'] ?? '5 min read';
$category    = $post['category'] ?? 'Insights';
$backLink    = 'blog.php';
$pagetitle   = $blogTitle . ' | Nesvra Blog';

include 'components/head.php';
?>

<body class="bg-white">

    <?php include 'components/navbar.php'; ?>

    <?php if (!$post): ?>
        <!-- 404 / Post Not Found State -->
        <section class="min-h-[70vh] flex items-center justify-center px-6 py-32 bg-white">
            <div class="max-w-lg mx-auto text-center" data-aos="fade-up">
                <span class="font-mono text-xs uppercase tracking-[0.3em] text-brandOrange font-semibold block mb-4">404 — Not Found</span>
                <h1 class="text-4xl md:text-5xl font-semibold text-royal tracking-tight mb-4">Article Not Found</h1>
                <p class="text-soft text-base leading-relaxed mb-8">
                    The requested article could not be located or may have been moved to a new section.
                </p>
                <a href="blog.php" class="inline-flex items-center gap-3 px-8 py-4 bg-royal text-white rounded-full font-semibold text-sm hover:bg-electric transition-colors shadow-lg shadow-royal/20">
                    <i class="ri-arrow-left-line"></i> Back to All Blogs
                </a>
            </div>
        </section>
    <?php else: ?>

        <!-- Dynamic Blog Hero Header -->
        <?php include 'components/BlogDetails/blog-head.php'; ?>

        <!-- Main Article & Sidebar Section -->
        <section class="py-16 md:py-24 px-6 md:px-[3%] bg-white">
            <div class="max-w-[1300px] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12">

                <!-- MAIN ARTICLE CONTENT -->
                <div class="lg:col-span-8 order-1">

                    <?php if (!empty($post['content'])): 
                        $dynamicContent = $post['content'];
                        if (!empty($blogImage)) {
                            // If content already has an <img> tag in the first 2500 characters, dynamically bind its src & alt
                            if (preg_match('/<img\s+[^>]*src=["\'][^"\']+["\'][^>]*>/i', $dynamicContent)) {
                                $dynamicContent = preg_replace(
                                    '/<img\s+[^>]*src=["\'][^"\']+["\'][^>]*>/i',
                                    '<img src="' . htmlspecialchars($blogImage) . '" alt="' . htmlspecialchars($blogTitle) . '" class="w-full h-[400px] md:h-[480px] rounded-[24px] mb-12 object-cover object-center shadow-md" />',
                                    $dynamicContent,
                                    1
                                );
                            } else {
                                // If no img tag exists in content, dynamically inject the hero image right after the first paragraph (or at the top)
                                if (preg_match('/(<\/p>)/i', $dynamicContent)) {
                                    $dynamicContent = preg_replace(
                                        '/(<\/p>)/i',
                                        '$1' . "\n\n" . '<img src="' . htmlspecialchars($blogImage) . '" alt="' . htmlspecialchars($blogTitle) . '" class="w-full h-[400px] md:h-[480px] rounded-[24px] mb-12 object-cover object-center shadow-md" />',
                                        $dynamicContent,
                                        1
                                    );
                                } else {
                                    $dynamicContent = '<img src="' . htmlspecialchars($blogImage) . '" alt="' . htmlspecialchars($blogTitle) . '" class="w-full h-[400px] md:h-[480px] rounded-[24px] mb-12 object-cover object-center shadow-md" />' . $dynamicContent;
                                }
                            }
                        }
                    ?>
                        <div class="article-body">
                            <?= $dynamicContent ?>
                        </div>
                    <?php else: ?>
                        <!-- Standard Fallback Template with Brand Typography -->
                        <p class="text-xl md:text-2xl text-dark font-[400] leading-relaxed tracking-tight mb-12">
                            <?= htmlspecialchars($post['description']) ?>
                        </p>

                        <img src="<?= htmlspecialchars($blogImage) ?>" alt="<?= htmlspecialchars($blogTitle) ?>" class="w-full h-[400px] md:h-[480px] rounded-[24px] mb-12 object-cover object-center shadow-lg" />

                        <div class="prose prose-zinc max-w-none space-y-8">
                            <h2 class="text-2xl md:text-3xl font-medium text-royal tracking-tighter mb-4">
                                Strategic Overview & Market Dynamics
                            </h2>
                            <p class="text-soft text-lg leading-relaxed">
                                In today's digital landscape, launching and scaling technology systems requires infrastructure designed for reliability, modular expansion, and instant regulatory compliance. Whether you're entering fintech or modernizing enterprise operations, precision in architecture determines long-term profitability.
                            </p>

                            <!-- Stat Pull Strip -->
                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 my-10 not-prose">
                                <div class="flex flex-col gap-1 p-5 bg-[#F8F9FA] rounded-[20px] text-center border border-zinc-100">
                                    <span class="text-2xl md:text-3xl font-semibold text-royal tracking-tight">85%</span>
                                    <span class="text-[11px] font-mono uppercase tracking-widest text-soft">Faster Deployment</span>
                                </div>
                                <div class="flex flex-col gap-1 p-5 bg-[#F8F9FA] rounded-[20px] text-center border border-zinc-100">
                                    <span class="text-2xl md:text-3xl font-semibold text-royal tracking-tight">100%</span>
                                    <span class="text-[11px] font-mono uppercase tracking-widest text-brandOrange font-semibold">IP Ownership</span>
                                </div>
                                <div class="flex flex-col gap-1 p-5 bg-[#F8F9FA] rounded-[20px] text-center border border-zinc-100">
                                    <span class="text-2xl md:text-3xl font-semibold text-royal tracking-tight">24/7</span>
                                    <span class="text-[11px] font-mono uppercase tracking-widest text-soft">Engineering Ops</span>
                                </div>
                            </div>

                            <h2 class="text-2xl md:text-3xl font-medium text-royal tracking-tighter mb-4">
                                Key Engineering & Business Considerations
                            </h2>
                            <p class="text-soft text-lg leading-relaxed">
                                Modern platforms cannot rely on disjointed vendors or legacy monolithic databases. A unified ecosystem provides seamless ledger synchronization, automated reconciliation, and bank-grade security at every layer.
                            </p>

                            <!-- Case Study / Key Insight Box -->
                            <div class="bg-royal text-white rounded-[24px] p-8 my-10 border border-white/10 shadow-xl">
                                <span class="text-brandOrange font-mono text-[10px] uppercase tracking-widest mb-3 block font-bold">Key Insight</span>
                                <p class="text-base md:text-lg font-[400] leading-relaxed text-zinc-200">
                                    "Businesses that control their core infrastructure rather than renting piecemeal SaaS tools reduce long-term operational costs by over <span class="text-white font-semibold">40%</span> while preserving total sovereignty over their customer data."
                                </p>
                            </div>

                            <!-- Closing CTA Strip -->
                            <div class="border border-zinc-100 rounded-[28px] p-6 md:p-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6 bg-[#F8F9FA] mt-12 not-prose" data-aos="fade-up">
                                <div>
                                    <p class="font-mono text-[10px] uppercase tracking-widest text-brandOrange mb-1 font-semibold">Ready to build?</p>
                                    <p class="text-dark font-medium text-lg leading-snug">See how Nesvra powers high-growth fintechs and enterprise systems.</p>
                                </div>
                                <a href="book-strategy-call.php" class="shrink-0 bg-royal text-white font-semibold text-sm px-8 py-4 rounded-full hover:bg-electric transition-colors duration-300 shadow-lg shadow-royal/20 whitespace-nowrap">
                                    Book Strategy Call →
                                </a>
                            </div>
                        </div>
                    <?php endif; ?>

                </div><!-- /lg:col-span-8 -->

                <!-- SIDEBAR COMPONENT -->
                <?php include 'components/BlogDetails/aside.php'; ?>

            </div>
        </section>

    <?php endif; ?>

    <script src="Scripts/blog-read.js"></script>
    <?php include 'components/Scroll-to-top.php'; ?>
    <?php include 'components/footer.php'; ?>

</body>
</html>
