<?php
// ═══ Public site renderer — turns DB content into pages using the revamp design ═══

function render_hero($p){
  if (!$p['hero_show']) return '';
  $bg = $p['hero_image'] ? "background-image:url('" . e(link_url($p['hero_image'])) . "')" : '';
  $h  = '<div class="page-hero" id="main-content">';
  $h .= '<div class="page-hero-bg" style="' . $bg . '"></div>';
  $h .= '<div class="page-hero-inner"><div class="container">';
  if ($p['hero_eyebrow']) $h .= '<span class="eyebrow">' . e($p['hero_eyebrow']) . '</span>';
  $h .= '<h1>' . e($p['hero_heading'] ?: $p['title']) . '</h1>';
  if ($p['hero_subtext']) $h .= '<p>' . e($p['hero_subtext']) . '</p>';
  $h .= '</div></div></div>';
  return $h;
}

function render_section($s){
  if (!$s['visible']) return '';
  $head = '';
  if (!empty($s['subheading'])) $head .= '<span class="eyebrow">' . e($s['subheading']) . '</span>';
  if (!empty($s['heading']))    $head .= '<h2>' . e($s['heading']) . '</h2>';

  switch ($s['type']) {
    case 'html': // raw HTML entered by an admin (trusted)
      return $s['body'];

    case 'cta':
      $o  = '<div class="cta-band"><div class="container">';
      if ($s['heading']) $o .= '<h2>' . e($s['heading']) . '</h2>';
      if ($s['body'])    $o .= '<p>' . e($s['body']) . '</p>';
      if ($s['button_text']) $o .= '<div class="cta-btns"><a href="' . e(link_url($s['button_url'])) . '" class="btn btn-white">' . e($s['button_text']) . '</a></div>';
      return $o . '</div></div>';

    case 'cards':
      $cards = json_decode($s['extra'] ?: '[]', true) ?: [];
      $items = '';
      foreach ($cards as $c){
        $items .= '<div class="bento-item">';
        if (!empty($c['image'])) $items .= '<img src="' . e(link_url($c['image'])) . '" alt="" loading="lazy" style="width:100%;height:170px;object-fit:cover;border-radius:12px;margin-bottom:1rem">';
        $items .= '<h3>' . e($c['title'] ?? '') . '</h3><p>' . e($c['text'] ?? '') . '</p></div>';
      }
      return '<section class="sp"><div class="container">' . $head
        . '<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:1.5rem">' . $items . '</div></div></section>';

    case 'image_text':
      $img = $s['image'] ? '<img src="' . e(link_url($s['image'])) . '" alt="" loading="lazy" style="width:100%;border-radius:16px">' : '';
      $btn = $s['button_text'] ? '<a href="' . e(link_url($s['button_url'])) . '" class="btn btn-purple" style="margin-top:1.25rem">' . e($s['button_text']) . '</a>' : '';
      return '<section class="sp"><div class="container"><div style="display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center">'
        . $img . '<div>' . $head . '<div>' . $s['body'] . '</div>' . $btn . '</div></div></div></section>';

    default: // richtext
      return '<section class="sp"><div class="container">' . $head . '<div>' . $s['body'] . '</div></div></section>';
  }
}

function render_sections($pid){
  $out = '';
  foreach (page_sections($pid, true) as $s) $out .= render_section($s);
  return $out;
}

// Blogs listing page (featured + grid) reusing the revamp blog markup
function render_blog_list(){
  $posts = all_posts(true);
  $featured = null;
  foreach ($posts as $p){ if ($p['featured']){ $featured = $p; break; } }
  if (!$featured && $posts) $featured = $posts[0];
  $css = '<style>
    .blog-banner{height:160px;display:flex;align-items:center;justify-content:center;overflow:hidden}
    .blog-banner img{width:100%;height:100%;object-fit:cover}
    .featured-post{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;background:var(--white);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden;margin-bottom:3rem;box-shadow:var(--sh)}
    .feat-post-img{min-height:280px;overflow:hidden}.feat-post-img img{width:100%;height:100%;object-fit:cover}
    .feat-post-body{padding:2rem}.feat-post-body h2{font-size:1.5rem;margin-bottom:.75rem;line-height:1.3}
    .feat-label{display:inline-block;background:var(--purple);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:100px;margin-bottom:.75rem}
    .feat-post-body .meta{display:flex;gap:1rem;font-size:12.5px;color:var(--muted);margin-bottom:.9rem}
    .feat-post-body p{color:var(--muted);font-size:.9375rem;line-height:1.78;margin-bottom:1.25rem}
    @media(max-width:900px){.featured-post{grid-template-columns:1fr}}
  </style>';
  $o = $css . '<section class="sp"><div class="container">';
  if ($featured){
    $o .= '<div class="featured-post reveal"><div class="feat-post-img"><img src="' . e($featured['banner']) . '" alt="' . e($featured['title']) . '" loading="lazy"></div><div class="feat-post-body"><span class="feat-label">Latest Post</span><h2>' . e($featured['title']) . '</h2><div class="meta"><span>' . e(date('F j, Y', strtotime($featured['published_at']))) . '</span>' . ($featured['author'] ? '<span style="color:var(--purple);font-weight:700">' . e($featured['author']) . '</span>' : '') . '</div><p>' . e($featured['excerpt']) . '</p><a href="' . base_url('blog-' .$featured['slug']) . '" class="btn btn-purple">Read Full Article</a></div></div>';
  }
  $o .= '<div class="blog-grid">';
  foreach ($posts as $p){
    if ($featured && $p['id'] == $featured['id']) continue;
    $o .= '<div class="blog-card reveal"><div class="blog-banner"><img src="' . e($p['banner']) . '" alt="' . e($p['title']) . '" loading="lazy"></div><div class="blog-body"><div class="blog-meta"><span class="blog-date">' . e(date('F j, Y', strtotime($p['published_at']))) . '</span>' . ($p['author'] ? '<span class="blog-author">' . e($p['author']) . '</span>' : '') . '</div><h3>' . e($p['title']) . '</h3><p>' . e($p['excerpt']) . '</p><a class="blog-link" href="' . base_url('blog-' .$p['slug']) . '">Read More</a></div></div>';
  }
  return $o . '</div></div></section>';
}

function render_post($post){
  $o  = '<div class="page-hero" id="main-content"><div class="page-hero-bg" style="background-image:url(\'' . e($post['banner']) . '\');filter:brightness(.4)"></div><div class="page-hero-inner"><div class="container"><span class="eyebrow">Blog</span><h1>' . e($post['title']) . '</h1><p>' . e(date('F j, Y', strtotime($post['published_at']))) . ($post['author'] ? ' · ' . e($post['author']) : '') . '</p></div></div></div>';
  $o .= '<section class="sp"><div class="container" style="max-width:760px">' . $post['body'] . '<p style="margin-top:2rem"><a href="' . base_url('blogs') . '" class="blog-link">← Back to all posts</a></p></div></section>';
  return $o;
}

// Full HTML document: SEO <head> from DB + body content + shared chrome (common.js)
function render_document($p, $body){
  $title = $p['meta_title'] ?: (($p['title'] ?? 'NTPPA') . ' | ' . setting('site_name'));
  $set = json_encode([
    'phone' => setting('phone'), 'email' => setting('email'), 'address' => setting('address'),
    'facebook' => setting('facebook'), 'youtube' => setting('youtube'), 'site_name' => setting('site_name'),
  ], JSON_UNESCAPED_SLASHES);
  ob_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title><?= e($title) ?></title>
<?php if (!empty($p['meta_description'])): ?>  <meta name="description" content="<?= e($p['meta_description']) ?>">
<?php endif; if (!empty($p['meta_keywords'])): ?>  <meta name="keywords" content="<?= e($p['meta_keywords']) ?>">
<?php endif; ?>  <meta name="robots" content="<?= e($p['robots'] ?? 'index,follow') ?>">
<?php if (!empty($p['canonical'])): ?>  <link rel="canonical" href="<?= e($p['canonical']) ?>">
<?php endif; ?>  <meta property="og:type" content="website">
  <meta property="og:title" content="<?= e($title) ?>">
<?php if (!empty($p['meta_description'])): ?>  <meta property="og:description" content="<?= e($p['meta_description']) ?>">
<?php endif; if (!empty($p['og_image'])): ?>  <meta property="og:image" content="<?= e($p['og_image']) ?>">
<?php endif; ?>  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="<?= base_url('assets/style.css') ?>">
  <script>window.NTPPA_SETTINGS = <?= $set ?>;</script>
</head>
<body>
<script src="<?= base_url('assets/common.js') ?>"></script>
<?= $body ?>
<script src="<?= base_url('assets/settings-bind.js') ?>"></script>
</body>
</html>
<?php return ob_get_clean();
}
