<?php include 'includes/header.php';
function ht_asset_url(string $path, string $fallbackDir = ''): string {
  $path = trim($path);
  if ($path === '') return '';
  if (preg_match('#^(https?:)?//#i', $path) || str_starts_with($path, 'data:')) return $path;
  $path = str_replace('\\', '/', $path);
  $path = ltrim($path, '/');
  if ($fallbackDir !== '' && strpos($path, '/') === false) $path = trim($fallbackDir, '/') . '/' . $path;
  return '/' . $path;
}
?>
<style>
  .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; object-fit: contain; background: rgba(0,0,0,.25); }
</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 = __DIR__ . '/about-data.json';
  $aboutData = file_exists($aboutFile) ? json_decode((string)file_get_contents($aboutFile), true) : [];
  if (!is_array($aboutData)) $aboutData = [];
  ?>

  <?php foreach ($aboutData as $entry): $img = ht_asset_url((string)($entry['image'] ?? ''), 'uploads'); ?>
    <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">
          <?php if ($img !== ''): ?><img src="<?= htmlspecialchars($img, ENT_QUOTES, 'UTF-8') ?>" class="img-fluid rounded shadow-sm" style="max-height: 150px; width:100%;" alt="<?= htmlspecialchars((string)($entry['title'] ?? ''), ENT_QUOTES, 'UTF-8') ?>"><?php endif; ?>
        </div>
        <div class="col-md-9">
          <div class="card-body">
            <h4 class="card-title"><?= htmlspecialchars((string)($entry['title'] ?? ''), ENT_QUOTES, 'UTF-8') ?></h4>
            <p class="card-text"><?= nl2br(htmlspecialchars((string)($entry['description'] ?? ''), ENT_QUOTES, 'UTF-8')) ?></p>
          </div>
        </div>
      </div>
    </div>
  <?php endforeach; ?>
</div>
<?php include 'includes/footer.php'; ?>
