<?php include 'includes/header.php'; ?>
<style>
  /* ABOUT PAGE CARDS */
  .content-box .card {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #444;
  }

  .content-box .card .card-title,
  .content-box .card .card-text {
    color: #fff !important;
  }

  .content-box .card img {
    border: 2px solid #fff;
  }
  </style>
<div class="container content-box mt-5">
  <div class="text-center mb-5">
    <h1>About Home Time Radio</h1>
    <p class="subtext">Meet the station and the voices behind the mic</p>
  </div>

  <?php
  $aboutFile = 'about-data.json';
  $aboutData = [];

  if (file_exists($aboutFile)) {
    $aboutData = json_decode(file_get_contents($aboutFile), true);
  }
  ?>

  <?php foreach ($aboutData as $entry): ?>
    <div class="card mb-4">
      <div class="row g-0">
        <div class="col-md-3 text-center d-flex align-items-center justify-content-center p-3">
          <img src="<?= htmlspecialchars($entry['image'] ?? 'uploads/default.jpg') ?>" class="img-fluid rounded shadow-sm" style="max-height: 150px;" alt="<?= htmlspecialchars($entry['title']) ?>">
        </div>
        <div class="col-md-9">
          <div class="card-body">
            <h4 class="card-title"><?= htmlspecialchars($entry['title']) ?></h4>
            <p class="card-text"><?= nl2br(htmlspecialchars($entry['description'])) ?></p>
          </div>
        </div>
      </div>
    </div>
  <?php endforeach; ?>

</div>

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