<?php include 'includes/header.php'; ?>
<?php include 'includes/db.php'; ?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>News Feed</title>
<style>
/* ===== Base ===== */
body {
  background: #f4f6f9;
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
}

/* ===== Container ===== */
.news-container {
  width: 90%;
  max-width: 1200px;
  margin: 60px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* ===== Card ===== */
.news-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease, box-shadow 0.3s;
}

.news-card.visible {
  transform: translateY(0);
  opacity: 1;
}

.news-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* ===== Images ===== */
.news-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  border-bottom: 1px solid #eee;
}

.news-card:hover img {
  transform: scale(1.05);
}

/* ===== Content ===== */
.news-content {
  padding: 20px;
  
  color: #25A9C2;
}

.news-content h3 {
  .news-content h3 {
  font-size: 1.35rem;
  color: #25A9C2;  /* final color */
  margin-bottom: 10px;
  line-height: 1.3;
}

}

.news-content p {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Header ===== */
h2.news-header {
  text-align: center;
  margin-top: 30px;
  color: #25A9C2;
  font-size: 2.2rem;
  font-weight: 700;
  position: relative;
}

h2.news-header::after {
  content: "";
  color: #25A9C2;
  display: block;
  width: 60px;
  height: 4px;
  background: #007bff;
  margin: 10px auto 0;
  border-radius: 2px;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .news-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .news-container {
    grid-template-columns: 1fr;
  }

  .news-content p {
    max-height: 80px;
  }
}

/* ===== Fade-in animation ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>

<h2 class="news-header">📰 Latest News</h2>

<div class="news-container">
<?php
$result = $conn->query("SELECT * FROM news ORDER BY id DESC");

while ($row = $result->fetch_assoc()):
    $newsId = $row['id'];

    $imgResult = $conn->query("SELECT image_path FROM news_images WHERE news_id = $newsId LIMIT 1");
    if ($imgResult->num_rows > 0) {
        $imgRow = $imgResult->fetch_assoc();
        $imagePath = $imgRow['image_path'];
    } elseif (!empty($row['image'])) {
        $imagePath = $row['image'];
    } else {
        $imagePath = 'assets/images/no-image.jpg';
    }

    $short = strip_tags($row['content']);
    $short = mb_strlen($short) > 150 ? mb_substr($short, 0, 150) . '...' : $short;
?>
  <a href="news-details.php?id=<?= $row['id'] ?>" class="news-card">
    <img src="<?= htmlspecialchars($imagePath) ?>" alt="<?= htmlspecialchars($row['title']) ?>">
    <div class="news-content">
      <h3><?= htmlspecialchars($row['title']) ?></h3>
      <p><?= htmlspecialchars($short) ?></p>
    </div>
  </a>
<?php endwhile; ?>
</div>

<script>
// Fade-in cards on scroll
const cards = document.querySelectorAll('.news-card');

function showCards() {
  const triggerBottom = window.innerHeight / 5 * 4;

  cards.forEach(card => {
    const cardTop = card.getBoundingClientRect().top;
    if(cardTop < triggerBottom) {
      card.classList.add('visible');
    }
  });
}

window.addEventListener('scroll', showCards);
window.addEventListener('load', showCards);
</script>

<?php include 'includes/footer.php'; ?>
</body>
</html>
