<?php
declare(strict_types=1);
require __DIR__ . '/api/bootstrap.php';
require __DIR__ . '/api/functions-content.php';

$locale = current_locale();
$settings = normalize_settings(settings($locale));
$siteName = $settings['site_name'] ?? 'Tanzelat';

$query = trim((string) ($_GET['q'] ?? ''));
$category = trim((string) ($_GET['category'] ?? ''));
$posts = articles($category !== '' ? $category : null, 500, $query, $locale);
$ads = ads();

$blogTitle = $locale === 'en' ? $siteName . ' Blog' : 'مدونة ' . $siteName;
$pageTitle = $blogTitle;
$activeNav = 'blog';
$bodyClass = 'blog-page';

require __DIR__ . '/partials/header.php';
?>

    <main>
      <section class="blog-hero">
        <div class="blog-wave wave-one"></div>
        <div class="blog-wave wave-two"></div>
        <div class="container">
          <div class="blog-hero-content reveal">
            <span class="soft-pill">
              <i class="bi bi-lightning-charge"></i>
              <span data-i18n="blogPageBadge"><?= $locale === 'en' ? 'Tech News' : 'أخبار التقنية' ?></span>
            </span>
            <h1><?= e($blogTitle) ?></h1>
            <p data-i18n="blogPageText"><?= $locale === 'en' ? 'Discover the latest articles, tutorials, and news about software and gaming.' : 'اكتشف أحدث المقالات، الشروحات، وآخر أخبار عالم البرمجيات والألعاب.' ?></p>
          </div>
        </div>
      </section>

      <section class="blog-listing">
        <div class="container">
          <div class="blog-top-line reveal">
            <a href="#"><span data-i18n="showAll"><?= $locale === 'en' ? 'Show all' : 'عرض الكل' ?></span><i class="bi bi-arrow-left"></i></a>
          </div>

          <div class="blog-layout">
            <div class="blog-feed-large">
              <?php foreach ($posts as $post): ?>
              <?php
                $postImage = trim((string) ($post['thumbnail'] ?? ''));
                if ($postImage === '' && !empty($post['screenshots'][0])) {
                    $postImage = trim((string) $post['screenshots'][0]);
                }
              ?>
              <article class="journal-card reveal">
                <div class="journal-image db-image journal-<?= ['game', 'learning', 'devices', 'ai'][array_rand(['game', 'learning', 'devices', 'ai'])] ?>"<?= $postImage !== '' ? ' style="background-image: linear-gradient(rgba(8,33,70,.16), rgba(8,33,70,.32)), url(\'' . e($postImage) . '\')"' : '' ?>>
                  <span><i class="bi bi-grid-3x3-gap"></i><b><?= e($post['category_name'] ?? ($locale === 'en' ? 'Articles' : 'مقالات')) ?></b></span>
                </div>
                <div class="journal-body">
                  <time><i class="bi bi-calendar4"></i> <?= e($post['published_at'] ? date('Y-m-d', strtotime($post['published_at'])) : '') ?></time>
                  <h2><?= e($post['title']) ?></h2>
                  <p><?= e($post['excerpt']) ?></p>
                  <a href="<?= e(rawurlencode((string) $post['slug'])) ?>"><span data-i18n="readArticle"><?= $locale === 'en' ? 'Read article' : 'قراءة المقال' ?></span><i class="bi bi-arrow-left"></i></a>
                </div>
              </article>
              <?php endforeach; ?>
              <?php if (empty($posts)): ?>
              <article class="journal-card reveal">
                <div class="journal-image journal-game">
                  <span><i class="bi bi-controller"></i><b data-i18n="tagGames"><?= $locale === 'en' ? 'Games' : 'ألعاب' ?></b></span>
                </div>
                <div class="journal-body">
                  <time><i class="bi bi-calendar4"></i> 12 مايو 2026</time>
                  <h2 data-i18n="blogPostOneTitle"><?= $locale === 'en' ? 'Best AI-powered ad design site for your products' : 'افضل موقع لتصميم اعلانات لمنتجاتك بالذكاء الاصطناعي' ?></h2>
                  <p data-i18n="blogPostOneText"><?= $locale === 'en' ? 'PUBG Mobile is one of the most prominent battle royale games worldwide.' : 'تعتبر لعبة ببجي موبايل واحدة من أبرز ألعاب القتال والبقاء على مستوى العالم.' ?></p>
                  <a href="blog-detail.php"><span data-i18n="readArticle"><?= $locale === 'en' ? 'Read article' : 'قراءة المقال' ?></span><i class="bi bi-arrow-left"></i></a>
                </div>
              </article>

              <article class="journal-card reveal">
                <div class="journal-image journal-learning">
                  <span><i class="bi bi-grid-3x3-gap"></i><b data-i18n="filterApps"><?= $locale === 'en' ? 'Apps' : 'تطبيقات' ?></b></span>
                </div>
                <div class="journal-body">
                  <time><i class="bi bi-calendar4"></i> 11 مايو 2026</time>
                  <h2 data-i18n="blogPostTwoTitle"><?= $locale === 'en' ? 'Best app for caller ID and blocking spam' : 'فضل تطبيق لمعرفة هوية المتصل وحظر المكالمات المزعجة' ?></h2>
                  <p data-i18n="blogPostTwoText"><?= $locale === 'en' ? 'Teaching English to children has become a necessity in today\'s world.' : 'تعليم اللغة الإنجليزية للأطفال أصبح ضرورة ملحة في عالمنا اليوم.' ?></p>
                  <a href="blog-detail.php"><span data-i18n="readArticle"><?= $locale === 'en' ? 'Read article' : 'قراءة المقال' ?></span><i class="bi bi-arrow-left"></i></a>
                </div>
              </article>
              <?php endif; ?>

              <nav class="pagination-strip reveal" aria-label="Pagination">
                <a href="#"><i class="bi bi-chevron-right"></i></a>
                <a class="active" href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <span>...</span>
                <a href="#"><i class="bi bi-chevron-left"></i></a>
              </nav>
            </div>

            <aside class="blog-sidebar reveal">
              <?php $sidebarAd = safe_ad_html($ads['blog_sidebar'] ?? ''); ?>
              <?php if ($sidebarAd !== ''): ?>
              <div class="blog-ad-box" data-ad-slot="blog_sidebar" data-ad-rendered="server"><?= $sidebarAd ?></div>
              <?php endif; ?>

              <div class="popular-panel">
                <h2 data-i18n="mostRead"><?= $locale === 'en' ? 'Most read' : 'الأكثر قراءة' ?></h2>
                <p data-i18n="mostReadText"><?= $locale === 'en' ? 'Most discussed topics this week' : 'المواضيع الأكثر تداولاً هذا الأسبوع' ?></p>
                <a href="#"><span data-i18n="filterApps"><?= $locale === 'en' ? 'Apps' : 'تطبيقات' ?></span><strong data-i18n="popularOne"><?= $locale === 'en' ? 'Your complete guide to the best Play Store alternatives 2024' : 'دليلك الشامل لأفضل بدائل متجر بلاي في 2024' ?></strong></a>
                <a href="#"><span data-i18n="tagGames"><?= $locale === 'en' ? 'Games' : 'ألعاب' ?></span><strong data-i18n="popularTwo"><?= $locale === 'en' ? 'How to run Android games smoothly on PC' : 'كيفية تشغيل ألعاب أندرويد على الحاسوب بسلاسة' ?></strong></a>
                <a href="#"><span data-i18n="filterSites"><?= $locale === 'en' ? 'Sites' : 'مواقع' ?></span><strong data-i18n="popularThree"><?= $locale === 'en' ? 'Top 5 free high-res image download sites' : 'أفضل 5 مواقع لتحميل الصور بدقة عالية مجاناً' ?></strong></a>
                <a href="#"><span data-i18n="tagTech"><?= $locale === 'en' ? 'Tech' : 'تقنية' ?></span><strong data-i18n="popularFour"><?= $locale === 'en' ? 'Hidden features in the new iOS 18 update' : 'مميزات خفية في تحديث iOS 18 الجديد' ?></strong></a>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </main>

<?php
require __DIR__ . '/partials/footer.php';
