<?php
// Conexão centralizada
require __DIR__ . '/conexao.php';

function resumo_padrao(array $p, int $limite = 300){
  // pega o primeiro campo preenchido (fallback)
  $raw = '';
  foreach (['descricao_1','resumo','descricao','descricao_2','conteudo','content'] as $k) {
    if (!empty($p[$k])) { $raw = (string)$p[$k]; break; }
  }
  $raw = strip_tags($raw);
  // normaliza espaços e quebras de linha (não corta por ponto)
  $raw = trim(preg_replace('/\s+/u', ' ', $raw));

  // corte seguro sem mbstring obrigatório
  if (function_exists('mb_strlen') && function_exists('mb_substr')) {
    if (mb_strlen($raw,'UTF-8') <= $limite) return $raw;
    $cut = mb_substr($raw, 0, $limite, 'UTF-8');
  } else {
    if (strlen($raw) <= $limite) return $raw;
    $cut = substr($raw, 0, $limite);
  }

  // evita cortar a última palavra
  $cut = preg_replace('/\s+\S*$/u', '', $cut);
  return rtrim($cut) . '…';
}


function h($s){return htmlspecialchars((string)$s,ENT_QUOTES,'UTF-8');}
function dbr($ymd){return $ymd?date('d/m/Y',strtotime($ymd)):'';}
function excerpt($text, $limit = 300){
  $text = trim(strip_tags((string)$text));
  if ($text === '') return '';
  // comprimento seguro sem mbstring
  $len = function_exists('mb_strlen') ? mb_strlen($text, 'UTF-8') : strlen($text);
  if ($len <= $limit) return $text;
  // corte seguro
  $short = function_exists('mb_substr') ? mb_substr($text, 0, $limit, 'UTF-8') : substr($text, 0, $limit);
  // tenta não cortar no meio da última palavra
  $short = preg_replace('/\s+\S*$/u', '', $short);
  return rtrim($short, " \t\n\r\0\x0B.,;:!-") . '…';
}


$sql = "SELECT id, titulo, nome_url, imagem, data, descricao_1, palavras FROM blog
        ORDER BY data DESC, id DESC";
$posts = $pdo->query($sql)->fetchAll(); // apenas UMA vez
?>


<!DOCTYPE html>
<html lang="pt-BR">
  
<head>
  <!-- Mesmo head do index -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>MJR Sistemas - Blog</title>
  <meta name="keywords" content="MJR Sistemas, blog, tecnologia, ERP">
  <meta name="description" content="Conteúdos da MJR Sistemas.">
  <meta name="author" content="MJR Sistemas">

  <link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
  <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="css/custom.css">

  <script src="js/modernizer.js"></script>

  <!-- Estilos locais só para o grid do blog (não altera seus arquivos) -->
  <style>
    .blog-grid{display:flex;flex-wrap:wrap;gap:24px}
    .blog-card{background:#fff;border-radius:14px;box-shadow:0 8px 24px rgba(2,6,23,.08);overflow:hidden;display:flex;flex-direction:column}
    .blog-thumb{width:100%;height:200px;object-fit:cover}
    .blog-body{display:flex;flex-direction:column;padding:18px}
    .blog-title{font-size:22px;line-height:1.25;margin:0 0 8px}
    .blog-meta{font-size:13px;color:#64748b;margin-bottom:12px}
    .blog-desc{color:#4a4a4a;margin-bottom:12px;overflow-wrap:anywhere;word-break:break-word;white-space:normal}
    .read-more{font-weight:600;margin-top:auto;align-self:flex-end;text-align:right}
    /* 3 colunas no md+, 1/2 col em telas menores */
    .col-blog{width:100%}
    @media (min-width:768px){.col-blog{width:calc(50% - 12px)}}
    @media (min-width:992px){.col-blog{width:calc(33.333% - 16px)}}
    /* paginação */
    .pagination>li>a,.pagination>li>span{border-radius:10px;border:1px solid #e2e8f0}
    .pagination>li>a:hover{background:#0098d9;color:#fff;border-color:transparent}
    .pagination>li.active>a{background:#0098d9;color:#fff;border-color:#0098d9}
  </style>
</head>

<body>

  <!-- Top bar + Header iguais ao index -->
  <div class="top-bar">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 col-sm-6">
          <div class="left-top">
            <div class="email-box">
              <a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i> contato@mjrsistemas.com.br</a>
            </div>
            <div class="phone-box">
              <a href="https://wa.me/82999764288"><i class="fa fa-whatsapp" aria-hidden="true"></i> (82) 99976-4288</a>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-sm-6">
          <div class="right-top">
            <div class="social-box">
              <ul>
                <li><a href="https://www.facebook.com/profile.php?id=61555663353904&mibextid=LQQJ4d"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
                <li><a href="https://www.instagram.com/mjrsistemas82?igsh=MTg5aGdvM2Fjdmx4Yg=="><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                <li><a href="https://www.linkedin.com/company/mjr-sistemas82/"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <header class="header header_style_01">
    <nav class="megamenu navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><img src="images/logos/Logo.svg" alt="MJR Sistemas" style="width:195px;height:auto;"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">Início</a></li>
            <li><a href="index.html#about">Sobre</a></li>
            <li><a href="index.html#services">Serviços</a></li>
            <li><a href="index.html#portfolio">Portfólio</a></li>
            <li><a class="active" href="blog.php">Blog</a></li>
            <li><a href="index.html#depoimentos">Depoimentos</a></li>
            <li><a href="index.html#contato">Contatos</a></li>
            <li><a href="index.html#revenda">Revenda</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <style>
  
  /* ====== Compactar TOP BAR + NAVBAR (~150px totais) – só nesta página ====== */
  /* Top bar menor (~34–38px) */
  .top-bar{padding:6px 0 !important; line-height:1.2 !important;}

  /* Navbar mais baixa (~80–95px, incluindo logo) */
  .header.header_style_01 .navbar{
    padding:6px 0 !important;
    margin-bottom:0 !important;
    min-height:unset !important;
  }
  /* Logo menor */
  .header.header_style_01 .navbar .navbar-brand img{
    width:120px !important; height:auto !important;
  }
  /* Links com menos altura */
  .header.header_style_01 .navbar .navbar-nav>li>a{
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  /* Ajustes responsivos para manter tudo compacto no mobile */
  @media (max-width:991px){
    .header.header_style_01 .navbar .navbar-brand img{width:140px !important;}
    .top-bar{padding:5px 0 !important;}
  }
  @media (max-width:767px){
    .header.header_style_01 .navbar .navbar-brand img{width:130px !important;}
    .header.header_style_01 .navbar .navbar-nav>li>a{padding:8px 10px !important;}
  }
</style>

<div class="slider-area">
		<div class="slider-wrapper owl-carousel">
			<!-- <div class="slider-item home-one-slider-otem slider-item-four slider-bg-one">
				<div class="container">
					<div class="row">
						<div class="slider-content-area">
							<div class="slide-text">
								<h1 class="homepage-three-title" style="font-size: 60px;">Sistema <span>Completo</span></h1>
								<p>Experimente grátis o nosso sistema de gestão para pequenas e médias empresas, com funcionalidades de PDV, balcão, ordem de serviço (OS), orçamentos, financeiro e emissão de boletos bancários - o sistema completo para o seu negócio.</p>
								<div class="slider-content-btn">
									<a class="button btn btn-light btn-radius btn-brd" href="https://wa.me/558299764288">WhatsApp</a>
									<a class="button btn btn-light btn-radius btn-brd" href="index.html#services">Saber mais</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div> -->
			<div class="slider-item text-center home-one-slider-otem slider-item-four slider-bg-two">
				<div class="container">
					<div class="row">
						<div class="slider-content-area">
							<div class="slide-text">
								<h1 class="homepage-three-title">Blog <span>MJR</span></h1>
								<p>Blog MJR Sistemas, confira nossos artigos com as últimas novidades, dicas e tendências sobre tecnologia, inovação e gestão para sua empresa crescer com mais eficiência e organização.</p>
								<div class="slider-content-btn">
									<a class="button btn btn-light btn-radius btn-brd" href="https://wa.me/558299764288">WhatsApp</a>
									<a class="button btn btn-light btn-radius btn-brd" href="blog.php#lista">Saber mais</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="slider-item home-one-slider-otem slider-item-four slider-bg-three">
				<div class="container">
					<div class="row">
						<div class="slider-content-area">
							<div class="slide-text">
								<h1 class="homepage-three-title">Inovação & <span>Tecnologia</span></h1>
								<p>Na MJR Sistemas, utilizamos as mais modernas tecnologias para desenvolver sistemas ágeis, seguros e eficientes, garantindo que seu negócio esteja sempre à frente.</p>
								<div class="slider-content-btn">
									<a class="button btn btn-light btn-radius btn-brd" href="https://wa.me/558299764288">WhatsApp</a>
									<a class="button btn btn-light btn-radius btn-brd" href="index.html#services">Saiba Mais</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div> -->
		</div>
	</div>


  <!-- Grade 3x3 -->
  <section class="section wb" style="padding:30px 80 40px" id="lista">
    <div class="container">
      <div id="blogGrid" class="blog-grid">
          <?php foreach ($posts as $p): ?>
          <?php
            $cats = $p['categorias'] ?? ($p['palavras'] ?? ($p['tags'] ?? ''));
          ?>
          <article class="blog-card col-blog">
            <a href="blog-single.php?slug=<?= h($p['nome_url']) ?>">
              <img class="blog-thumb"
                  src="ecommerce/arquivos-finalizados/img/blog/<?= h($p['imagem']) ?>"
                  alt="<?= h($p['titulo']) ?>">
            </a>
            <div class="blog-body">
              <div class="blog-meta">
                <?= dbr($p['data'] ?? '') ?><?= $cats !== '' ? ' • '.h($cats) : '' ?>
              </div>
              <h2 class="blog-title"><a href="blog-single.php?slug=<?= h($p['nome_url']) ?>"><?= h($p['titulo']) ?></a></h2>
              <p class="blog-desc"><?= h(resumo_padrao($p, 300)) ?></p>
              <a class="read-more" href="blog-single.php?slug=<?= h($p['nome_url']) ?>">Ler mais »</a>
            </div>
          </article>
        <?php endforeach; ?>
        </div>

      

      <!-- Paginação -->
      <nav aria-label="Paginação do blog" style="margin-top:24px">
        <ul id="pager" class="pagination"></ul>
      </nav>
    </div>
  </section>

    <!-- === FOOTER (igual ao index) === -->
    <footer class="footer">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="widget clearfix">
              <div class="widget-title">
                <img src="images/logos/logo-branco.png" alt="image" style="width: 100px; height: auto;">
              </div>
              <p>A MJR Sistemas é especializada no desenvolvimento de sistemas personalizados para otimizar processos comerciais. Utilizando tecnologias modernas, nossa equipe qualificada cria sistemas ágeis, seguros e eficientes para seu negócio.</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-4 col-xs-12" style="margin-top: 30px;">
            <div class="widget clearfix">
              <div class="widget-title">
                <h3>Links</h3>
              </div>
              <ul class="footer-links hov">
                <li><a href="index.html">Início <span class="icon icon-arrow-right2"></span></a></li>
                <li><a href="blog.php">Blog <span class="icon icon-arrow-right2"></span></a></li>
                <li><a href="#">Preços <span class="icon icon-arrow-right2"></span></a></li>
                <li><a href="index.html#about">Sobre <span class="icon icon-arrow-right2"></span></a></li>
                <li><a href="index.html#contato">Contatos <span class="icon icon-arrow-right2"></span></a></li>
              </ul>
            </div>
          </div>
          <div class="col-md-4 col-sm-4 col-xs-12" style="margin-top: 30px;">
            <div class="footer-distributed widget clearfix">
              <div class="widget-title">
                <h3>Assine nossa newsletter</h3>
                <p>Fique por dentro das novidades e atualizações da MJR Sistemas. Receba conteúdo exclusivo e informações sobre nossos serviços diretamente no seu email.</p>
              </div>
              <div class="footer-right">
                <form method="get" action="#">
                  <input placeholder="Inscreva-se na newsletter.." name="procurar">
                  <i class="fa fa-envelope-o"></i>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <div class="copyrights">
      <div class="container">
        <div class="footer-distributed">
          <div class="footer-left">
            <p class="footer-company-name">MRJ Sistemas. &copy; 2025.</p>
          </div>
        </div>
      </div>
    </div>

<a href="#" id="scroll-to-top" class="dmtop global-radius"><i class="fa fa-angle-up"></i></a>


  <!-- scripts do site (iguais ao index) -->
  <script src="js/all.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/custom.js"></script>

  <!-- Paginação Client-side (9 por página) -->
  <script>
    (function(){
      var perPage = 9;
      var items = Array.prototype.slice.call(document.querySelectorAll('#blogGrid .blog-card'));
      var total = items.length;
      var pages = Math.max(1, Math.ceil(total / perPage));

      function getPage(){
        var p = parseInt(new URLSearchParams(location.search).get('page') || '1', 10);
        return (isNaN(p) || p < 1) ? 1 : (p > pages ? pages : p);
      }

      function render(page){
        items.forEach(function(it){ it.style.display = 'none'; });
        var start = (page - 1) * perPage;
        var end = Math.min(start + perPage, total);
        for (var i = start; i < end; i++) items[i].style.display = '';

        var pager = document.getElementById('pager');
        pager.innerHTML = '';
        if (pages <= 1) return;

        function li(num, text, active){
          var li = document.createElement('li');
          if (active) li.className = 'active';
          var a = document.createElement('a');
          a.href = '?page=' + num;
          a.textContent = text;
          li.appendChild(a);
          pager.appendChild(li);
        }

        // Prev
        var current = page;
        if (current > 1) li(current-1, '«');
        // Numbers
        for (var p = 1; p <= pages; p++) li(p, String(p), p === current);
        // Next
        if (current < pages) li(current+1, '»');
      }

      render(getPage());
    })();
  </script>
</body>
</html>
