<?php
$blogs = $blogs ?? [];
$latest_blogs = $latest_blogs ?? [];
$blog_limit = $blog_limit ?? 6;
$p = $p ?? 1;

$archive_loop = $latest_blogs;
$featured = ($p === 1 && !empty($archive_loop)) ? array_shift($archive_loop) : null;
$stream_items = $archive_loop;
$total_calculated_pages = !empty($blogs) ? (int) ceil(count($blogs) / $blog_limit) : 1;

$blog_header_image = $base_url . '/assets/images/blogs/WHO-Manufacturing.webp';

function insight_svg_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>',
        'search' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10.8 4a6.8 6.8 0 1 0 0 13.6 6.8 6.8 0 0 0 0-13.6Zm0 2a4.8 4.8 0 1 1 0 9.6 4.8 4.8 0 0 1 0-9.6Zm5.6 10 4.1 4.1-1.4 1.4-4.1-4.1 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>',
        'vial' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 2h6v2h-1v5.2l4.4 7.6A3.5 3.5 0 0 1 15.4 22H8.6a3.5 3.5 0 0 1-3-5.2L10 9.2V4H9V2Zm3 8.1-4.7 8.1A1.5 1.5 0 0 0 8.6 20h6.8a1.5 1.5 0 0 0 1.3-1.8L12 10.1Z"/></svg>'
    ];

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

<section class="insights-hero section-sm" aria-labelledby="insightsTitle">
    <div class="site-container insights-hero-grid">
        <div class="insights-hero-copy">
            <nav class="breadcrumbs" aria-label="Breadcrumb">
                <a href="<?= $base_url ?>/">Home</a>
                <span class="separator">/</span>
                <span>Blog / Updates</span>
            </nav>

            <span class="section-eyebrow">Insights</span>

            <h1 id="insightsTitle">
                Pharmaceutical<br>
                <span>Blog / Updates</span>
            </h1>

            <p>
                Stay informed with the latest updates, innovations, and insights from Sanjar Pharma LLP and the global pharmaceutical industry.
            </p>
        </div>

        <div class="insights-hero-visual" aria-hidden="true">
            <img
                src="<?= htmlspecialchars($blog_header_image, ENT_QUOTES, 'UTF-8') ?>"
                width="420"
                height="420"
                alt=""
                loading="eager"
                decoding="async"
            >
        </div>
    </div>
</section>

<section class="insights-listing-section section section-surface">
    <div class="site-container insights-layout">
        <div class="insights-main">
            <div class="content-title-row">
                <span class="form-accent-dash" aria-hidden="true"></span>
                <h2>Latest Updates</h2>
            </div>

            <?php if ($featured): ?>
                <article class="blog-card-large card card-hover">
                    <a href="<?= $base_url ?>/<?= htmlspecialchars($featured['slug'], ENT_QUOTES, 'UTF-8') ?>">
                        <div class="featured-img-wrap">
                            <img
                                src="<?= $base_url . htmlspecialchars($featured['image'], ENT_QUOTES, 'UTF-8') ?>"
                                width="760"
                                height="360"
                                alt="<?= htmlspecialchars($featured['title'], ENT_QUOTES, 'UTF-8') ?>"
                                loading="eager"
                                decoding="async"
                            >
                            <span class="badge badge-brand">Company Update</span>
                        </div>

                        <div class="featured-blog-body">
                            <div class="blog-meta">
                                <span><?= insight_svg_icon('calendar') ?> May 20, 2026</span>
                                <span><?= insight_svg_icon('clock') ?> 5 min read</span>
                            </div>

                            <h3><?= htmlspecialchars($featured['title'], ENT_QUOTES, 'UTF-8') ?></h3>

                            <p>
                                <?= htmlspecialchars($featured['seo_desc'], ENT_QUOTES, 'UTF-8') ?>
                            </p>

                            <span class="read-more">
                                Read More
                                <?= insight_svg_icon('arrow') ?>
                            </span>
                        </div>
                    </a>
                </article>
            <?php endif; ?>

            <div class="blog-stream-list">
                <?php if (!empty($stream_items) || $featured): ?>
                    <?php foreach ($stream_items as $item): ?>
                        <article class="blog-stream-item card card-hover">
                            <a href="<?= $base_url ?>/<?= htmlspecialchars($item['slug'], ENT_QUOTES, 'UTF-8') ?>">
                                <div class="stream-img-wrapper">
                                    <img
                                        src="<?= $base_url . htmlspecialchars($item['image'], ENT_QUOTES, 'UTF-8') ?>"
                                        width="220"
                                        height="150"
                                        alt="<?= htmlspecialchars($item['title'], ENT_QUOTES, 'UTF-8') ?>"
                                        loading="lazy"
                                        decoding="async"
                                    >
                                </div>

                                <div class="stream-copy">
                                    <span class="badge">Industry Insight</span>

                                    <div class="blog-meta">
                                        <span>May 15, 2026</span>
                                        <span>4 min read</span>
                                    </div>

                                    <h3><?= htmlspecialchars($item['title'], ENT_QUOTES, 'UTF-8') ?></h3>

                                    <span class="read-more">
                                        Read More
                                        <?= insight_svg_icon('arrow') ?>
                                    </span>
                                </div>
                            </a>
                        </article>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="empty-state card card-pad">
                        <p>No dynamic insights or updates found on this index sequence path.</p>
                    </div>
                <?php endif; ?>
            </div>

            <?php if ($total_calculated_pages > 1): ?>
                <nav class="pagination" aria-label="Insights pagination">
                    <?php for ($i = 1; $i <= $total_calculated_pages; $i++): ?>
                        <?php $page_link = ($i === 1) ? $base_url . '/insights' : $base_url . '/insights/page/' . $i . '/'; ?>
                        <a
                            href="<?= htmlspecialchars($page_link, ENT_QUOTES, 'UTF-8') ?>"
                            class="<?= $p === $i ? 'active' : '' ?>"
                            <?= $p === $i ? 'aria-current="page"' : '' ?>
                        >
                            <?= $i ?>
                        </a>
                    <?php endfor; ?>
                </nav>
            <?php endif; ?>
        </div>

        <aside class="insights-sidebar" aria-label="Insights sidebar">
            <div class="sidebar-inner">
                <div class="sidebar-card card card-pad">
                    <form class="insight-search-form" action="<?= $base_url ?>/insights" method="get">
                        <label class="sr-only" for="insightSearch">Search updates</label>
                        <input id="insightSearch" type="search" name="s" placeholder="Search updates...">
                        <button type="submit" aria-label="Search insights">
                            <?= insight_svg_icon('search') ?>
                        </button>
                    </form>
                </div>

                <nav class="sidebar-card card card-pad" aria-label="Product portfolio">
                    <h2>Product Portfolio</h2>

                    <div class="sidebar-menu-list">
                        <?php
                        $sidebar_categories = [
                            ['name' => 'Dry Powder Injection', 'url' => $base_url . '/product-category/dry-powder-injection'],
                            ['name' => 'Liquid Vial Injection', 'url' => $base_url . '/product-category/liquid-vial-injection'],
                            ['name' => 'Ampoule Injection', 'url' => $base_url . '/product-category/ampoule-injection'],
                            ['name' => 'PFS Injection', 'url' => $base_url . '/product-category/pfs-injection'],
                            ['name' => 'Eye / Ear Drops', 'url' => $base_url . '/product-category/eye-ear-drops'],
                            ['name' => 'Suspension Injection', 'url' => $base_url . '/product-category/suspension-injection']
                        ];
                        ?>

                        <?php foreach ($sidebar_categories as $cat): ?>
                            <a href="<?= htmlspecialchars($cat['url'], ENT_QUOTES, 'UTF-8') ?>">
                                <span><?= insight_svg_icon('vial') ?> <?= htmlspecialchars($cat['name'], ENT_QUOTES, 'UTF-8') ?></span>
                                <?= insight_svg_icon('arrow') ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </nav>

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

                    <a href="<?= $base_url ?>/contact" class="primary-button">
                        Send Enquiry
                        <?= insight_svg_icon('arrow') ?>
                    </a>
                </div>
            </div>
        </aside>
    </div>
</section>

<style>
.insights-hero {
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.insights-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.55fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.insights-hero-copy {
  max-width: 720px;
}

.insights-hero h1 {
  margin-bottom: 1rem;
}

.insights-hero h1 span {
  color: var(--primary);
}

.insights-hero p {
  max-width: 62ch;
}

.insights-hero-visual {
  justify-self: end;
  width: min(100%, 420px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.insights-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.content-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
}

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

.form-accent-dash {
  width: 4px;
  height: 24px;
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--primary);
}

.blog-card-large {
  margin-bottom: 2rem;
  overflow: hidden;
}

.blog-card-large a,
.blog-stream-item a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.featured-img-wrap {
  position: relative;
  height: 320px;
  overflow: hidden;
  background: var(--surface-2);
}

.featured-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-img-wrap .badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.featured-blog-body {
  padding: clamp(1rem, 2vw, 1.5rem);
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.blog-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.blog-meta svg,
.read-more svg,
.sidebar-menu-list svg,
.insight-search-form svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.blog-card-large h3 {
  margin-bottom: 0.75rem;
  font-size: clamp(1.25rem, 1.2vw + 1rem, 2rem);
}

.blog-card-large p {
  display: -webkit-box;
  margin-bottom: 1rem;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--primary);
  font-size: 0.86rem;
  font-weight: 700;
}

.blog-stream-list {
  display: grid;
  gap: 1rem;
}

.blog-stream-item {
  overflow: hidden;
}

.blog-stream-item a {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem;
}

.stream-img-wrapper {
  width: 220px;
  height: 150px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.stream-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stream-copy h3 {
  margin: 0.55rem 0 0.75rem;
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.25rem);
}

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

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

.insight-search-form {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.insight-search-form input {
  width: 100%;
  min-height: 46px;
  padding: 0 0.9rem;
  border: 0;
  color: var(--heading);
  background: transparent;
  outline: 0;
}

.insight-search-form button {
  width: 48px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: #fff;
  background: var(--primary);
}

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

.sidebar-menu-list {
  display: grid;
}

.sidebar-menu-list a {
  display: flex;
  align-items: center;
  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);
}

.enquiry-card p {
  font-size: 0.9rem;
}

.empty-state {
  text-align: center;
}

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

  .insights-hero-visual {
    display: none;
  }

  .insights-sidebar {
    position: static;
  }

  .featured-img-wrap {
    height: 280px;
  }
}

@media (max-width: 575px) {
  .blog-stream-item a {
    grid-template-columns: 1fr;
  }

  .stream-img-wrapper {
    width: 100%;
    height: 190px;
  }

  .featured-img-wrap {
    height: 230px;
  }
}
</style>