<?php
//Developer: core tech web designTechnology
//Whatsapp: +2349162671360
//Telegram: @jeditech
$page_title = "Blog - SoftBillsHub - Virtual Numbers, Social Media Growth, Airtime, Data & Bill Payments";
$page_description = "Your one-stop platform for virtual number verification, social media growth (followers, likes, comments), airtime & data top-up, cable TV subscriptions, and electricity bill payments. Fast, secure, and affordable.";

include('include/header.php');

// ── Resolve post: prefer ?slug=, fallback to legacy ?id= ─────────────────
$post = null;

try {
    if (!empty($_GET['slug'])) {
        $s = $pdo->prepare(
            "SELECT * FROM blog_posts WHERE slug = :slug AND status = 'published' LIMIT 1"
        );
        $s->execute(['slug' => trim($_GET['slug'])]);
        $post = $s->fetch(PDO::FETCH_ASSOC);
    } elseif (!empty($_GET['id'])) {
        $s = $pdo->prepare(
            "SELECT * FROM blog_posts WHERE id = :id AND status = 'published' LIMIT 1"
        );
        $s->execute(['id' => (int)$_GET['id']]);
        $post = $s->fetch(PDO::FETCH_ASSOC);
    }
} catch (PDOException $e) {
    $post = null;
}

// 404 — redirect to blog listing if post not found
if (!$post) {
    header('Location: blog.php');
    exit();
}

// ── Increment view counter (fire and forget) ──────────────────────────────
try {
    $pdo->prepare("UPDATE blog_posts SET views = views + 1 WHERE id = :id")
        ->execute(['id' => $post['id']]);
} catch (PDOException $e) { /* non-critical */ }

// ── Related posts (same category, excluding current) ─────────────────────
try {
    $r = $pdo->prepare(
        "SELECT id, title, slug, thumbnail, category, created_at, read_time
         FROM blog_posts
         WHERE status = 'published' AND id != :id AND category = :cat
         ORDER BY created_at DESC LIMIT 3"
    );
    $r->execute(['id' => $post['id'], 'cat' => $post['category']]);
    $related = $r->fetchAll(PDO::FETCH_ASSOC);

    // Fill with recent posts if fewer than 3 in same category
    if (count($related) < 3) {
        $exclude_ids  = array_merge([$post['id']], array_column($related, 'id'));
        $placeholders = implode(',', array_fill(0, count($exclude_ids), '?'));
        $r2 = $pdo->prepare(
            "SELECT id, title, slug, thumbnail, category, created_at, read_time
             FROM blog_posts
             WHERE status = 'published' AND id NOT IN ($placeholders)
             ORDER BY created_at DESC LIMIT " . (3 - count($related))
        );
        $r2->execute($exclude_ids);
        $related = array_merge($related, $r2->fetchAll(PDO::FETCH_ASSOC));
    }
} catch (PDOException $e) {
    $related = [];
}


$post_date  = date('F d, Y', strtotime($post['created_at']));
$post_time  = date('g:i A',  strtotime($post['created_at']));
$full_url   = rtrim($site_data['web_url'], '/') . '/blog-details.php?slug=' . urlencode($post['slug']);
?>

<!-- Open Graph / SEO -->
<meta property="og:title"       content="<?php echo htmlspecialchars($post['title']); ?>">
<meta property="og:description" content="<?php echo htmlspecialchars($post['excerpt'] ?? ''); ?>">
<?php if (!empty($post['thumbnail'])): ?>
<meta property="og:image"       content="<?php echo htmlspecialchars(rtrim($site_data['web_url'],'/') . $post['thumbnail']); ?>">
<?php endif; ?>
<meta property="og:url"         content="<?php echo htmlspecialchars($full_url); ?>">
<meta name="description"        content="<?php echo htmlspecialchars($post['excerpt'] ?? ''); ?>">

<style>
  /* ── BREADCRUMB ────────────────────────────────── */
  .bd-breadcrumb {
    padding: 1.25rem 2.5rem;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
  }
  .bd-breadcrumb-inner {
    max-width: 900px; margin: 0 auto;
    display: flex; align-items: center; gap: 8px;
    font-size: .78rem; color: var(--text3);
  }
  .bd-breadcrumb a { color: var(--text3); transition: color .2s; }
  .bd-breadcrumb a:hover { color: var(--g); }
  .bd-breadcrumb-sep { color: var(--border2); }
  .bd-breadcrumb-current { color: var(--text2); font-weight: 500; }

  /* ── HERO IMAGE ────────────────────────────────── */
  .post-hero {
    position: relative; overflow: hidden;
    background: var(--bg3);
    max-height: 480px;
  }
  .post-hero-img {
    width: 100%; max-height: 480px; object-fit: cover; display: block;
  }
  .post-hero-no-thumb {
    width: 100%; height: 340px;
    background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
    display: flex; align-items: center; justify-content: center;
  }
  .post-hero-no-thumb-ico {
    width: 80px; height: 80px; border-radius: 20px;
    background: rgba(31,208,112,.1); border: 1px solid rgba(31,208,112,.2);
    display: flex; align-items: center; justify-content: center;
  }
  .post-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8,11,15,.8) 0%, transparent 60%);
  }
  .post-hero-cat {
    position: absolute; top: 1.5rem; left: 1.5rem;
    padding: 5px 14px; border-radius: 20px; font-size: .7rem; font-weight: 700;
    background: var(--g); color: #000;
    text-transform: uppercase; letter-spacing: .07em;
    box-shadow: 0 2px 12px var(--g-glow);
  }

  /* ── ARTICLE LAYOUT ────────────────────────────── */
  .post-layout {
    max-width: 900px; margin: 0 auto;
    padding: 3rem 2.5rem 5rem;
  }
  .post-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800; letter-spacing: -.04em; line-height: 1.15;
    color: var(--text); margin-bottom: 1.5rem;
  }

  /* ── META BAR ──────────────────────────────────── */
  .post-meta-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
    margin-bottom: 2.5rem;
  }
  .post-meta-item {
    display: flex; align-items: center; gap: 6px;
    font-size: .8rem; color: var(--text2); font-weight: 500;
  }
  .post-meta-item svg { color: var(--g); flex-shrink: 0; }
  .post-meta-div { width: 1px; height: 16px; background: var(--border); }
  .post-meta-author-av {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(31,208,112,.15); border: 1px solid rgba(31,208,112,.25);
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 700; color: var(--g);
  }
  .post-views-badge {
    margin-left: auto;
    display: flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px;
    background: rgba(31,208,112,.08); border: 1px solid rgba(31,208,112,.18);
    font-size: .72rem; font-weight: 700; color: var(--g);
  }

  /* ── CONTENT BODY ──────────────────────────────── */
  .post-content-body {
    font-size: .9375rem; line-height: 1.85; color: var(--text2);
    margin-bottom: 3rem;
  }
  .post-content-body h2, .post-content-body h3 {
    font-weight: 800; letter-spacing: -.03em; color: var(--text);
    margin: 2.5rem 0 1rem;
  }
  .post-content-body h2 { font-size: 1.5rem; }
  .post-content-body h3 { font-size: 1.2rem; }
  .post-content-body h3 { color: var(--g); }
  .post-content-body p { margin-bottom: 1.25rem; }
  .post-content-body ul, .post-content-body ol {
    padding-left: 1.5rem; margin-bottom: 1.25rem;
  }
  .post-content-body li { margin-bottom: .5rem; }
  .post-content-body a { color: var(--g); font-weight: 600; }
  .post-content-body a:hover { color: var(--g2); text-decoration: underline; }
  .post-content-body img {
    max-width: 100%; border-radius: 12px; margin: 1.5rem 0;
    border: 1px solid var(--border);
  }
  .post-content-body blockquote {
    border-left: 3px solid var(--g);
    padding: .875rem 1.25rem;
    background: rgba(31,208,112,.05);
    border-radius: 0 12px 12px 0;
    margin: 1.75rem 0;
    font-style: italic; color: var(--text);
  }
  .post-content-body pre {
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: 12px; padding: 1.25rem; overflow-x: auto;
    font-size: .8rem; line-height: 1.7; margin-bottom: 1.25rem;
  }
  .post-content-body code {
    background: var(--bg3); border: 1px solid var(--border);
    padding: 2px 6px; border-radius: 5px; font-size: .82em;
    color: var(--g);
  }
  .post-content-body pre code { background: none; border: none; padding: 0; color: var(--text2); }

  /* ── SHARE ─────────────────────────────────────── */
  .share-section {
    padding: 1.75rem 1.5rem;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: 16px; margin-bottom: 2.5rem;
  }
  .share-title { font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; }
  .share-btns { display: flex; gap: 8px; flex-wrap: wrap; }
  .share-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 10px; font-size: .775rem; font-weight: 600;
    border: none; cursor: pointer; transition: all .22s; text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
  .share-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
  .share-btn.facebook { background: #1877f2; color: #fff; }
  .share-btn.twitter  { background: #1da1f2; color: #fff; }
  .share-btn.linkedin { background: #0077b5; color: #fff; }
  .share-btn.whatsapp { background: #25d366; color: #000; }
  .share-btn.copy     { background: var(--surface); color: var(--text2); border: 1px solid var(--border2); }
  .share-btn.copy:hover { border-color: var(--g); color: var(--g); }

  /* ── BACK LINK ─────────────────────────────────── */
  .post-back {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .825rem; font-weight: 600; color: var(--text2);
    padding: 9px 18px; border-radius: 10px;
    border: 1px solid var(--border2); background: var(--surface);
    transition: all .2s; margin-bottom: 3rem;
  }
  .post-back:hover { border-color: var(--g); color: var(--g); transform: translateX(-3px); }

  /* ── RELATED POSTS ─────────────────────────────── */
  .related-sec {
    background: var(--bg2);
    border-top: 1px solid var(--border);
    padding: 4rem 2.5rem 5rem;
  }
  .related-inner { max-width: 1100px; margin: 0 auto; }
  .related-head { text-align: center; margin-bottom: 2.5rem; }
  .related-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .68rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--g); margin-bottom: .875rem;
  }
  .related-eyebrow::before, .related-eyebrow::after { content: ''; width: 20px; height: 1.5px; background: var(--g); border-radius: 2px; }
  .related-title { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.04em; color: var(--text); }
  .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }

  .related-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 16px;
    overflow: hidden; cursor: pointer; transition: all .3s;
    display: flex; flex-direction: column;
  }
  .related-card:hover { transform: translateY(-5px); border-color: rgba(31,208,112,.2); box-shadow: 0 16px 40px var(--shadow); }
  .related-thumb { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform .35s; }
  .related-card:hover .related-thumb { transform: scale(1.04); }
  .related-thumb-wrap { overflow: hidden; position: relative; }
  .related-no-thumb {
    width: 100%; height: 180px;
    background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
  }
  .related-cat-pill {
    position: absolute; bottom: 10px; left: 10px;
    padding: 3px 10px; border-radius: 20px; font-size: .62rem; font-weight: 700;
    background: var(--g); color: #000; text-transform: uppercase; letter-spacing: .06em;
  }
  .related-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
  .related-card-title {
    font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: .5rem;
    line-height: 1.4; transition: color .2s;
  }
  .related-card:hover .related-card-title { color: var(--g); }
  .related-card-meta { display: flex; align-items: center; gap: .75rem; font-size: .72rem; color: var(--text3); margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--border); }

  /* ── CTA ───────────────────────────────────────── */
  .post-cta-sec { padding: 3rem 2.5rem 5rem; background: var(--bg); }
  .post-cta-box {
    max-width: 700px; margin: 0 auto;
    background: linear-gradient(135deg, #0f3d22 0%, #15603a 50%, #1a7c40 100%);
    border: 1px solid rgba(31,208,112,.35); border-radius: 22px;
    padding: 3rem 2.5rem; text-align: center; position: relative; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.25), 0 0 60px rgba(31,208,112,.08);
  }
  .post-cta-box::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 22px 22px; pointer-events: none;
  }
  .post-cta-box h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: #fff; margin-bottom: .75rem; position: relative; z-index: 1; }
  .post-cta-box p { font-size: .9375rem; color: rgba(255,255,255,.7); margin-bottom: 2rem; position: relative; z-index: 1; }
  .post-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 30px; background: #fff; color: #0f3d22;
    border-radius: 12px; font-size: .875rem; font-weight: 700;
    box-shadow: 0 4px 20px rgba(0,0,0,.2); transition: all .25s;
    position: relative; z-index: 1;
  }
  .post-cta-btn:hover { background: #f0fdf4; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.25); }

  @media(max-width: 768px) {
    .post-layout { padding: 2rem 1.25rem 3rem; }
    .bd-breadcrumb { padding: 1rem 1.25rem; }
    .post-meta-bar { gap: .75rem; }
    .post-meta-div { display: none; }
    .share-btns { gap: 6px; }
    .related-sec { padding: 3rem 1.25rem 4rem; }
    .post-cta-sec { padding: 2rem 1.25rem 4rem; }
    .post-cta-box { padding: 2.5rem 1.5rem; }
  }
</style>

<!-- Breadcrumb -->
<div class="bd-breadcrumb">
  <div class="bd-breadcrumb-inner">
    <a href="<?php echo $site_data['web_url']; ?>/">Home</a>
    <span class="bd-breadcrumb-sep">›</span>
    <a href="<?php echo $site_data['web_url']; ?>/blog">Blog</a>
    <span class="bd-breadcrumb-sep">›</span>
    <span class="bd-breadcrumb-current"><?php echo htmlspecialchars(mb_strimwidth($post['title'], 0, 50, '...')); ?></span>
  </div>
</div>

<!-- Hero image -->
<div class="post-hero">
  <?php if (!empty($post['thumbnail'])): ?>
    <img src="<?php echo htmlspecialchars($post['thumbnail']); ?>"
         alt="<?php echo htmlspecialchars($post['title']); ?>"
         class="post-hero-img">
    <div class="post-hero-overlay"></div>
  <?php else: ?>
    <div class="post-hero-no-thumb">
      <div class="post-hero-no-thumb-ico">
        <svg width="36" height="36" fill="none" stroke="var(--g)" stroke-width="1.5" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
        </svg>
      </div>
    </div>
  <?php endif; ?>
  <?php if (!empty($post['category'])): ?>
    <span class="post-hero-cat"><?php echo htmlspecialchars($post['category']); ?></span>
  <?php endif; ?>
</div>

<!-- Article -->
<div class="post-layout">

  <!-- Back link -->
  <a href="<?php echo $site_data['web_url']; ?>/blog" class="post-back">
    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
    Back to Blog
  </a>

  <!-- Title -->
  <h1 class="post-title"><?php echo htmlspecialchars($post['title']); ?></h1>

  <!-- Meta bar -->
  <div class="post-meta-bar">
    <div class="post-meta-item">
      <div class="post-meta-author-av"><?php echo strtoupper(substr($post['author'] ?? 'A', 0, 2)); ?></div>
      <?php echo htmlspecialchars($post['author'] ?? 'Admin'); ?>
    </div>
    <div class="post-meta-div"></div>
    <div class="post-meta-item">
      <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
      <?php echo $post_date; ?>
    </div>
    <div class="post-meta-div"></div>
    <div class="post-meta-item">
      <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
      <?php echo $post_time; ?>
    </div>
    <?php if (!empty($post['read_time'])): ?>
    <div class="post-meta-div"></div>
    <div class="post-meta-item">
      <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
      <?php echo htmlspecialchars($post['read_time']); ?>
    </div>
    <?php endif; ?>
    <div class="post-views-badge">
      <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
      <?php echo number_format($post['views'] ?? 0); ?> views
    </div>
  </div>

  <!-- Content body (stored as HTML from editor e.g. Summernote) -->
  <div class="post-content-body">
    <?php echo $post['content']; ?>
  </div>

  <!-- Share section -->
  <div class="share-section">
    <div class="share-title">Share this article:</div>
    <div class="share-btns">
      <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($full_url); ?>"
         target="_blank" rel="noopener" class="share-btn facebook">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>
        Facebook
      </a>
      <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode($full_url); ?>&text=<?php echo urlencode($post['title']); ?>"
         target="_blank" rel="noopener" class="share-btn twitter">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/></svg>
        Twitter / X
      </a>
      <a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode($full_url); ?>&title=<?php echo urlencode($post['title']); ?>"
         target="_blank" rel="noopener" class="share-btn linkedin">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>
        LinkedIn
      </a>
      <a href="https://api.whatsapp.com/send?text=<?php echo urlencode($post['title'] . ' ' . $full_url); ?>"
         target="_blank" rel="noopener" class="share-btn whatsapp">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
        WhatsApp
      </a>
      <button onclick="copyLink()" class="share-btn copy" id="copyBtn">
        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
        Copy Link
      </button>
    </div>
  </div>

</div><!-- /post-layout -->

<!-- Related Posts -->
<?php if (!empty($related)): ?>
<div class="related-sec">
  <div class="related-inner">
    <div class="related-head">
      <div class="related-eyebrow">More Reading</div>
      <h2 class="related-title">Related Articles</h2>
    </div>
    <div class="related-grid">
      <?php foreach ($related as $rp):
        $rlink = 'blog-details.php?slug=' . urlencode($rp['slug']);
        $rdate = date('M d, Y', strtotime($rp['created_at']));
      ?>
      <div class="related-card reveal" onclick="window.location.href='<?php echo $rlink; ?>'">
        <div class="related-thumb-wrap">
          <?php if (!empty($rp['thumbnail'])): ?>
            <img src="<?php echo htmlspecialchars($rp['thumbnail']); ?>"
                 alt="<?php echo htmlspecialchars($rp['title']); ?>"
                 class="related-thumb" loading="lazy">
          <?php else: ?>
            <div class="related-no-thumb">📰</div>
          <?php endif; ?>
          <?php if (!empty($rp['category'])): ?>
            <span class="related-cat-pill"><?php echo htmlspecialchars($rp['category']); ?></span>
          <?php endif; ?>
        </div>
        <div class="related-body">
          <h4 class="related-card-title"><?php echo htmlspecialchars($rp['title']); ?></h4>
          <div class="related-card-meta">
            <span style="display:flex;align-items:center;gap:5px">
              <svg width="11" height="11" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
              <?php echo $rdate; ?>
            </span>
            <?php if (!empty($rp['read_time'])): ?>
            <span style="display:flex;align-items:center;gap:5px">
              <svg width="11" height="11" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
              <?php echo htmlspecialchars($rp['read_time']); ?>
            </span>
            <?php endif; ?>
          </div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>
<?php endif; ?>

<!-- CTA -->
<div class="post-cta-sec">
  <div class="post-cta-box reveal">
    <h2>Ready To Start Growing?</h2>
    <p>Join thousands of satisfied customers who trust <?php echo htmlspecialchars($site_data['web_name']); ?> for their digital growth needs.</p>
    <a href="<?php echo $site_data['web_url']; ?>/signup" class="post-cta-btn">
      <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
      Get Started Now
    </a>
  </div>
</div>

<script>
function copyLink() {
    navigator.clipboard.writeText('<?php echo addslashes($full_url); ?>').then(function() {
        var btn = document.getElementById('copyBtn');
        btn.innerHTML = '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> Copied!';
        btn.style.borderColor = 'var(--g)';
        btn.style.color = 'var(--g)';
        setTimeout(function() {
            btn.innerHTML = '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg> Copy Link';
            btn.style.borderColor = 'var(--border2)';
            btn.style.color = 'var(--text2)';
        }, 2500);
    }).catch(function() {
        /* fallback for older browsers */
        var ta = document.createElement('textarea');
        ta.value = '<?php echo addslashes($full_url); ?>';
        document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta);
    });
}
</script>

<?php include('include/footer.php'); ?>
