<?php
// File: ucf_team.php
include 'header.php';

// --- Fetch distinct levels for tabs ---
$levels = [];
$level_query = "SELECT DISTINCT role_level FROM ucf_team ORDER BY role_level ASC";
$level_result = $conn->query($level_query);
if ($level_result) {
    $levels = array_column($level_result->fetch_all(MYSQLI_ASSOC), 'role_level');
}

// Determine current selected level
$current_level = $_GET['level'] ?? ($levels[0] ?? null);

// Fetch members for the selected level
$members = [];
if ($current_level) {
    $stmt = $conn->prepare("SELECT id, name, designation, photo_path, description FROM ucf_team WHERE role_level = ? ORDER BY id ASC");
    $stmt->bind_param("s", $current_level);
    $stmt->execute();
    $result = $stmt->get_result();
    $members = $result->fetch_all(MYSQLI_ASSOC);
    $stmt->close();
}
?>

<div class="bg-white py-12 md:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Page Header -->
    <div class="text-center mb-12">
      <h1 class="text-4xl font-extrabold text-ucf-charcoal sm:text-5xl tracking-tight">United Cultural Forum Team</h1>
      <p class="mt-4 max-w-2xl mx-auto text-lg text-gray-500">
        Meet the passionate individuals leading and supporting the UCF community across all levels.
      </p>
    </div>

    <!-- Hierarchy Tabs -->
    <?php if (!empty($levels)): ?>
      <div class="flex flex-wrap justify-center mb-10 gap-3">
        <?php foreach ($levels as $level): ?>
          <a href="?level=<?php echo urlencode($level); ?>"
             class="px-5 py-2 rounded-full font-medium border transition-all duration-200
             <?php echo ($current_level === $level)
                 ? 'bg-ucf-green text-white border-ucf-green shadow-md'
                 : 'bg-white border-gray-300 text-gray-600 hover:bg-ucf-green-light hover:text-ucf-green'; ?>">
             <?php echo htmlspecialchars($level); ?>
          </a>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>

    <!-- Members Grid -->
    <?php if (!empty($members)): ?>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <?php foreach ($members as $member): ?>
          <div class="bg-white border border-gray-200 rounded-2xl shadow-sm hover:shadow-xl transition-shadow duration-300">
            <div class="relative h-64 overflow-hidden rounded-t-2xl">
              <img src="<?php echo htmlspecialchars($member['photo_path']); ?>"
                   alt="<?php echo htmlspecialchars($member['name']); ?>"
                   class="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
            </div>
            <div class="p-6 text-center">
              <h3 class="text-xl font-bold text-ucf-charcoal"><?php echo htmlspecialchars($member['name']); ?></h3>
              <p class="text-sm text-ucf-green font-semibold mt-1"><?php echo htmlspecialchars($member['designation']); ?></p>
              <p class="text-gray-500 text-sm mt-3"><?php echo nl2br(htmlspecialchars($member['description'])); ?></p>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
    <?php else: ?>
      <div class="text-center py-16">
        <i class="fas fa-users fa-4x text-gray-300 mb-4"></i>
        <h2 class="text-2xl font-bold text-ucf-charcoal">No Members Found</h2>
        <p class="text-gray-500 mt-2">We’re currently updating our team list for this level.</p>
      </div>
    <?php endif; ?>
  </div>
</div>

<?php include 'footer.php'; ?>
