<?php
$current_blog = $current_blog ?? [];
$blogs = $blogs ?? [];

function blog_detail_icon($type) {
    $icons = [
        'arrow' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13.2 5.3 20 12l-6.8 6.7-1.4-1.4 4.4-4.3H4v-2h12.2l-4.4-4.3 1.4-1.4Z"/></svg>',
        'calendar' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 2h2v2h6V2h2v2h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3V2Zm13 8H4v10h16V10Z"/></svg>',
        'clock' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 11h5v-2h-4V6h-2v7Z"/></svg>',
        'person' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5Z"/></svg>',
        'grid' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"/></svg>'
    ];

    return $icons[$type] ?? $icons['arrow'];
}

$related_articles = [];
foreach ($blogs as $related) {
    if (!empty($related['slug']) && !empty($current_blog['slug']) && $related['slug'] === $current_blog['slug']) {
        continue;
    }

    $related_articles[] = $related;

    if (count($related_articles) >= 3) {
        break;
    }
}
?>

<section class="blog-detail-section section section-surface">
    <div class="site-container blog-detail-layout">
        <article class="blog-detail-card card card-pad" aria-labelledby="blogDetailTitle">
            <span class="badge badge-brand">Quality & Compliance</span>

            <h1 id="blogDetailTitle">
                <?= htmlspecialchars($current_blog['title'] ?? '', ENT_QUOTES, 'UTF-8') ?>
            </h1>

            <div class="blog-detail-meta">
                <span><?= blog_detail_icon('calendar') ?> May 08, 2026</span>
                <span><?= blog_detail_icon('person') ?> By Sanjar Pharma LLP</span>
                <span><?= blog_detail_icon('clock') ?> 5 min read</span>
            </div>

            <div class="detail-hero-img-box">
                <img
                    src="<?= $base_url . htmlspecialchars($current_blog['image'] ?? '', ENT_QUOTES, 'UTF-8') ?>"
                    width="900"
                    height="480"
                    alt="<?= htmlspecialchars($current_blog['title'] ?? '', ENT_QUOTES, 'UTF-8') ?>"
                    loading="eager"
                    decoding="async"
                    fetchpriority="high"
                >
            </div>

            <div class="blog-rendered-markup">
                <?= $current_blog['content'] ?? '' ?>
            </div>

            <aside class="quote-signature-box">
                <p>"At Sanjar Pharma LLP, quality is not just a process - it's our promise to the world."</p>
                <strong>Executive Board, Sanjar Pharma</strong>
            </aside>
        </article>

        <aside class="blog-detail-sidebar" aria-label="Blog sidebar">
            <div class="sidebar-inner">
                <nav class="sidebar-card card card-pad" aria-label="In this article">
                    <h2>In This Article</h2>
                    <div id="table-of-contents" class="toc-list">
                        <a href="#toc-1">1. Specialization & Portfolio</a>
                        <a href="#toc-2">2. Quality & Compliance Systems</a>
                        <a href="#toc-3">3. Infrastructure & Innovation</a>
                        <a href="#toc-4">4. Global Leadership Matrix</a>
                    </div>
                </nav>

                <nav class="sidebar-card card card-pad" aria-label="Product categories">
                    <h2>Product Categories</h2>

                    <div class="sidebar-menu-list">
                        <a href="<?= $base_url ?>/product-category/dry-powder-injection">
                            <span><?= blog_detail_icon('grid') ?> Dry Powder Injection</span>
                            <?= blog_detail_icon('arrow') ?>
                        </a>

                        <a href="<?= $base_url ?>/product-category/liquid-vial-injection">
                            <span><?= blog_detail_icon('grid') ?> Liquid Vial Injection</span>
                            <?= blog_detail_icon('arrow') ?>
                        </a>
                    </div>

                    <a href="<?= $base_url ?>/products" class="secondary-button sidebar-view-all">
                        View All Products
                        <?= blog_detail_icon('arrow') ?>
                    </a>
                </nav>

                <div class="sidebar-card card card-pad">
                    <h2>Send Us an Enquiry</h2>
                    <p>Looking for a scalable contract manufacturing partnership?</p>

                    <form action="<?= $base_url ?>/actions/send-message.php" method="POST" class="sidebar-enquiry-form">
                        <label class="sr-only" for="blogName">Full Name</label>
                        <input id="blogName" type="text" name="name" placeholder="Full Name*" autocomplete="name" required>

                        <label class="sr-only" for="blogEmail">Email Address</label>
                        <input id="blogEmail" type="email" name="email" placeholder="Email Address*" autocomplete="email" required>

                        <button type="submit" class="primary-button">
                            Send Enquiry
                            <?= blog_detail_icon('arrow') ?>
                        </button>
                    </form>
                </div>
            </div>
        </aside>
    </div>

    <?php if (!empty($related_articles)): ?>
        <div class="site-container related-articles-section">
            <div class="related-head">
                <h2>Related Articles</h2>
                <a href="<?= $base_url ?>/insights" class="section-link">
                    View All Articles
                    <?= blog_detail_icon('arrow') ?>
                </a>
            </div>

            <div class="related-grid">
                <?php foreach ($related_articles as $related): ?>
                    <article class="related-card card card-hover">
                        <a href="<?= $base_url ?>/<?= htmlspecialchars($related['slug'], ENT_QUOTES, 'UTF-8') ?>">
                            <img
                                src="<?= $base_url . htmlspecialchars($related['image'], ENT_QUOTES, 'UTF-8') ?>"
                                width="420"
                                height="240"
                                alt="<?= htmlspecialchars($related['title'], ENT_QUOTES, 'UTF-8') ?>"
                                loading="lazy"
                                decoding="async"
                            >

                            <div class="related-body">
                                <span class="badge">Industry Insight</span>
                                <h3><?= htmlspecialchars($related['title'], ENT_QUOTES, 'UTF-8') ?></h3>

                                <span class="read-more">
                                    Read Article
                                    <?= blog_detail_icon('arrow') ?>
                                </span>
                            </div>
                        </a>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    <?php endif; ?>
</section>

<style>
.blog-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.blog-detail-card {
  padding: clamp(1.25rem, 3vw, 3rem);
}

.blog-detail-card h1 {
  margin: 1rem 0;
  font-size: clamp(2rem, 3vw, 4rem);
  line-height: 1.08;
}

.blog-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.blog-detail-meta span,
.read-more,
.sidebar-menu-list a,
.toc-list a,
.related-head a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.blog-detail-meta svg,
.read-more svg,
.sidebar-menu-list svg,
.related-head svg,
.sidebar-enquiry-form svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.detail-hero-img-box {
  height: clamp(260px, 35vw, 420px);
  margin-bottom: 1.5rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

.detail-hero-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-rendered-markup {
  color: var(--text);
  font-size: clamp(0.95rem, 0.35vw + 0.9rem, 1.1rem);
  line-height: 1.8;
}

.blog-rendered-markup h2,
.blog-rendered-markup h3,
.blog-rendered-markup h4 {
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}

.blog-rendered-markup p,
.blog-rendered-markup ul,
.blog-rendered-markup ol {
  margin-bottom: 1rem;
}

.blog-rendered-markup img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.quote-signature-box {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 5px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2);
}

.quote-signature-box p {
  margin-bottom: 0.5rem;
  color: var(--heading);
  font-weight: 700;
  font-style: italic;
}

.quote-signature-box strong {
  color: var(--primary);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-detail-sidebar {
  position: sticky;
  top: 100px;
}

.sidebar-inner {
  display: grid;
  gap: 1rem;
}

.sidebar-card h2 {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.toc-list,
.sidebar-menu-list,
.sidebar-enquiry-form {
  display: grid;
  gap: 0.55rem;
}

.toc-list a {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.toc-list a:hover {
  color: var(--primary);
}

.sidebar-menu-list {
  margin-bottom: 1rem;
}

.sidebar-menu-list a {
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.sidebar-menu-list a:last-child {
  border-bottom: 0;
}

.sidebar-menu-list a span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.sidebar-menu-list a:hover {
  color: var(--primary);
}

.sidebar-view-all {
  width: 100%;
}

.sidebar-enquiry-form input {
  width: 100%;
  min-height: 42px;
  padding: 0 0.85rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--heading);
  background: var(--input-bg);
}

.sidebar-enquiry-form .primary-button {
  border: 0;
}

.related-articles-section {
  margin-top: clamp(2.5rem, 5vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
}

.related-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.related-head h2 {
  margin: 0;
  font-size: clamp(1.35rem, 1.4vw, 2rem);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.related-card {
  overflow: hidden;
}

.related-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.related-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--surface-2);
}

.related-body {
  padding: 1rem;
}

.related-body h3 {
  display: -webkit-box;
  min-height: 48px;
  margin: 0.75rem 0;
  overflow: hidden;
  font-size: 1rem;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.read-more {
  color: var(--primary);
  font-size: 0.84rem;
  font-weight: 700;
}

@media (max-width: 991px) {
  .blog-detail-layout {
    grid-template-columns: 1fr;
  }

  .blog-detail-sidebar {
    position: static;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .blog-detail-card {
    padding: 1rem;
  }

  .related-head {
    flex-direction: column;
  }

  .detail-hero-img-box {
    height: 240px;
  }
}
</style>