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

<div class="container content-box mt-5">
  <div class="text-center mb-5">
    <h1>Our Radio Friends</h1>
    <p class="subtext">Explore other great stations in our extended broadcast family</p>
  </div>

  <?php
  $friendsFile = 'friends-data.json';
  $friends = [];

  if (file_exists($friendsFile)) {
    $friends = json_decode(file_get_contents($friendsFile), true);
  }

  // Alternate assignment to left/right columns
  $left = [];
  $right = [];
  foreach ($friends as $i => $station) {
    if ($i % 2 === 0) {
      $left[] = $station;
    } else {
      $right[] = $station;
    }
  }
  ?>

  <div class="row">
    <div class="col-md-6">
      <div class="bg-light p-4 rounded mb-4">
        <?php foreach ($left as $station): ?>
          <a href="<?= htmlspecialchars($station['link']) ?>" class="sidebar-link d-block mb-2">🎧 <?= htmlspecialchars($station['name']) ?></a>
          <img src="<?= htmlspecialchars($station['image']) ?>" class="img-fluid rounded mb-4 sidebar-image" alt="<?= htmlspecialchars($station['name']) ?>">
        <?php endforeach; ?>
      </div>
    </div>

    <div class="col-md-6">
      <div class="bg-light p-4 rounded mb-4">
        <?php foreach ($right as $station): ?>
          <a href="<?= htmlspecialchars($station['link']) ?>" class="sidebar-link d-block mb-2">🎧 <?= htmlspecialchars($station['name']) ?></a>
          <img src="<?= htmlspecialchars($station['image']) ?>" class="img-fluid rounded mb-4 sidebar-image" alt="<?= htmlspecialchars($station['name']) ?>">
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</div>

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