<?php
declare(strict_types=1);

// INCLUDE faylda header göndərmirik, HTML skeleton yazmırıq.

require_once __DIR__ . "/config/db.php";

if (!function_exists('e')) {
  function e($s): string { return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); }
}

$letters = [];

try {
  // Səndə cədvəl adı letters-dir
  $stmt = $pdo->query("SELECT * FROM `letters` ORDER BY id DESC");
  $letters = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
} catch (Throwable $ex) {
  // 500 yerinə problem görünsün (debug üçün)
  echo '<div style="padding:12px;border:1px solid #f3b; border-radius:10px;">';
  echo '<b>DB/SORĞU XƏTASI:</b> ' . e($ex->getMessage());
  echo '</div>';
  return; // include sonrası davam etsin
}
?>

<section class="letters" style="padding:14px 0;" id="mektublar">
  <div class="container" style="max-width:960px;">

    <?php if (!$letters): ?>
      <p>Məktub tapılmadı.</p>
    <?php else: ?>

      <div class="letters-grid" style="
        display:grid;
        gap:14px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      ">
        <?php foreach ($letters as $row): ?>
          <?php
            $id = (int)($row['id'] ?? 0);
            $title = (string)($row['title'] ?? $row['basliq'] ?? $row['subject'] ?? 'Məktub');
            $bodyHtml = (string)($row['content'] ?? $row['metn'] ?? $row['body'] ?? '');
            $plain = trim(strip_tags($bodyHtml));
            if (mb_strlen($plain, 'UTF-8') > 220) $plain = mb_substr($plain, 0, 220, 'UTF-8') . '...';
          ?>

          <article class="letter-card" style="
            border:1px solid rgba(15,23,42,.12);
            background:#fff;
            border-radius:16px;
            padding:14px 14px 12px;
            box-shadow: 0 10px 24px rgba(2,8,23,.06);
            transition: transform .15s ease, box-shadow .15s ease;
          ">
            <a href="mektub.php?id=<?= $id ?>" class="letter-link" style="
              display:block;
              text-decoration:none;
              color:inherit;
            ">
              <div class="letter-head" style="
                display:flex;
                align-items:center;
                gap:10px;
                margin-bottom:10px;
              ">
                <span class="letter-icon" style="
                  width:40px; height:40px;
                  border-radius:12px;
                  display:grid; place-items:center;
                  background: rgba(0,105,180,.10);
                  color:#0069b4;
                  flex:0 0 auto;
                ">
                  <i class="fa-solid fa-envelope"></i>
                </span>

                <h3 style="
                  margin:0;
                  font-size:16px;
                  line-height:1.25;
                  font-weight:600;
                ">
                  <?= e($title) ?>
                </h3>
              </div>

              <p style="
                margin:0;
                color: rgba(15,23,42,.78);
                line-height:1.55;
                font-size:14px;
              ">
                <?= e($plain) ?>
              </p>

              <div style="margin-top:12px; display:flex; align-items:center; gap:8px; color:rgba(0,105,180,.95); font-size:14px;">
                <span>Ətraflı</span>
                <span aria-hidden="true" style="transform: translateY(-1px);">›</span>
              </div>
            </a>
          </article>

        <?php endforeach; ?>
      </div>

      <!-- hover effekti: inline-da :hover olmur deyə kiçik style əlavə edirik -->
      <style>
        .letter-card:hover{
          transform: translateY(-2px);
          box-shadow: 0 14px 34px rgba(2,8,23,.10);
        }
        @media (max-width: 900px){
          .letters-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        }
        @media (max-width: 560px){
          .letters-grid{ grid-template-columns: 1fr !important; }
        }
      </style>

    <?php endif; ?>

  </div>
</section>