<?php
$page_title       = "Meet the 2026 Candidates | Cinderella Charity Ball Arlington";
$page_description = "Meet all 18 extraordinary candidates of the 66th Annual Cinderella Charity Ball 2026 — Arlington high school students who fundraised for the Boys & Girls Clubs.";

/* ── Candidate Data ── */
$candidates = [
  [
    'id'     => 'claire-novoselsky',
    'name'   => 'Claire Diane Novoselsky',
    'year'   => 'Junior',
    'school' => 'Arlington High School',
    'school_key' => 'arlington',
    'escort' => 'Will Beck Lemonds',
    'img'    => 'imgi_2_Claire-Novoselsky-819x1024.jpg',
    'winner' => true,
  ],
  [
    'id'     => 'hala-abdallah',
    'name'   => 'Hala Ibrahim Abdallah',
    'year'   => 'Junior',
    'school' => 'Martin High School',
    'school_key' => 'martin',
    'escort' => 'Atif Mirza',
    'img'    => 'imgi_11_Hala-Abdallah2-819x1024.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'brittany-allman',
    'name'   => 'Brittany Ann Allman',
    'year'   => 'Sophomore',
    'school' => 'Lamar High School',
    'school_key' => 'lamar',
    'escort' => 'Kenneth O\'Nan',
    'img'    => 'imgi_12_Brittany-Allman-819x1024.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'tatianna-beeman',
    'name'   => 'Tatianna Marie Beeman-Willis',
    'year'   => 'Sophomore',
    'school' => 'Arlington High School',
    'school_key' => 'arlington',
    'escort' => 'Aidan Klein',
    'img'    => 'imgi_13_Tatianna-Beeman-scaled.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'kaitlyn-bush',
    'name'   => 'Kaitlyn Grace Bush',
    'year'   => 'Junior',
    'school' => 'Martin High School',
    'school_key' => 'martin',
    'escort' => 'Cooper Dodson',
    'img'    => 'imgi_14_Kaitlyn-Bush-scaled.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'sloane-cabral',
    'name'   => 'Sloane Adyson Cabral',
    'year'   => 'Sophomore',
    'school' => 'Arlington High School',
    'school_key' => 'arlington',
    'escort' => 'Seth DeLoach',
    'img'    => 'imgi_15_Sloane-Cabral-819x1024.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'milly-chambers',
    'name'   => 'Milly Frances Chambers',
    'year'   => 'Junior',
    'school' => 'Grace Preparatory Academy',
    'school_key' => 'other',
    'escort' => 'Ty Porter',
    'img'    => 'imgi_16_Milly-Chambers-scaled.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'ryleigh-ingram',
    'name'   => 'Ryleigh Brooke Ingram',
    'year'   => 'Junior',
    'school' => 'Venture High School',
    'school_key' => 'other',
    'escort' => 'Andre Garcia',
    'img'    => 'imgi_17_Riley-Ingram-scaled.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'lillian-kirk',
    'name'   => 'Lillian Hayden Kirk',
    'year'   => 'Junior',
    'school' => 'Arlington High School',
    'school_key' => 'arlington',
    'escort' => 'Brennan Allsup',
    'img'    => 'imgi_18_Lillian-Kirk-819x1024.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'hannah-kirkbride',
    'name'   => 'Hannah Grace Kirkbride',
    'year'   => 'Junior',
    'school' => 'Martin High School',
    'school_key' => 'martin',
    'escort' => 'Ethan Boone',
    'img'    => 'imgi_19_Hannah-Kirkbride-819x1024.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'jocelyn-mayo',
    'name'   => 'Jocelyn Ann Mayo',
    'year'   => 'Sophomore',
    'school' => 'Nolan Catholic High School',
    'school_key' => 'other',
    'escort' => 'Benjamin Chapa',
    'img'    => 'imgi_20_Jocelyn-Mayo-819x1024.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'canela-oliva',
    'name'   => 'Canela Rose Oliva',
    'year'   => 'Junior',
    'school' => 'Arlington High School',
    'school_key' => 'arlington',
    'escort' => 'Ethan Alvarez Pardo',
    'img'    => 'imgi_21_Canela-Rose-Olivia-819x1024.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'isha-patel',
    'name'   => 'Isha Vinitkumar Patel',
    'year'   => 'Sophomore',
    'school' => 'Lamar High School',
    'school_key' => 'lamar',
    'escort' => 'Logan Woodman',
    'img'    => 'imgi_22_Isha-Patel-819x1024.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'sophie-pham',
    'name'   => 'Sophie Hong-An Pham',
    'year'   => 'Junior',
    'school' => 'Martin High School',
    'school_key' => 'martin',
    'escort' => 'Zachary Clark',
    'img'    => 'imgi_23_Sophie-819x1024.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'sofia-romero',
    'name'   => 'Sofia Alexa Romero',
    'year'   => 'Junior',
    'school' => 'Arlington High School',
    'school_key' => 'arlington',
    'escort' => 'Heston Alana',
    'img'    => 'imgi_24_Sofia-Romero-819x1024.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'madelyn-stewart',
    'name'   => 'Madelyn Rose Stewart',
    'year'   => 'Junior',
    'school' => 'Martin High School',
    'school_key' => 'martin',
    'escort' => 'Miles Lewis',
    'img'    => 'imgi_25_Madelyn-Stewart-scaled.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'madilyn-swanson',
    'name'   => 'Madilyn Rose Swanson',
    'year'   => 'Sophomore',
    'school' => 'Pantego Christian Academy',
    'school_key' => 'other',
    'escort' => 'Maddox Ritter',
    'img'    => 'imgi_26_Madilyn-Swanson-819x1024.jpg',
    'winner' => false,
  ],
  [
    'id'     => 'cassidy-tucker',
    'name'   => 'Cassidy Mae Tucker',
    'year'   => 'Sophomore',
    'school' => 'The Oakridge School',
    'school_key' => 'other',
    'escort' => 'Cayden Sargent',
    'img'    => 'imgi_27_Cassidy-Tucker-819x1024.jpg',
    'winner' => false,
  ],
];

$total    = count($candidates);
$juniors  = count(array_filter($candidates, fn($c) => $c['year'] === 'Junior'));
$sophs    = count(array_filter($candidates, fn($c) => $c['year'] === 'Sophomore'));

include 'includes/header.php';
?>

<!-- ============================================================
     PAGE HERO
     ============================================================ -->
<section class="page-hero">
  <div class="page-hero-bg" style="background-image: url('/image/imgi_8_CCB26-Candidates1-12-26-1-581x248.jpg');" role="img" aria-label="2026 Cinderella Charity Ball candidates photo session"></div>
  <div class="page-hero-overlay" aria-hidden="true"></div>
  <div class="page-hero-inner">
    <nav class="breadcrumb" aria-label="Breadcrumb">
      <a href="/">Home</a>
      <i class="fas fa-chevron-right" aria-hidden="true"></i>
      <span aria-current="page">Candidates</span>
    </nav>
    <div class="page-hero-tag"><i class="fas fa-star" aria-hidden="true"></i> Class of 2026</div>
    <h1>Meet the 2026 Candidates</h1>
    <p class="page-hero-desc">
      <?php echo $total; ?> remarkable young women. One extraordinary cause. All for the children of Arlington.
    </p>
    <div class="candidates-hero-stats">
      <span><i class="fas fa-users" aria-hidden="true"></i> <strong><?php echo $total; ?></strong> Candidates</span>
      <span><i class="fas fa-graduation-cap" aria-hidden="true"></i> <strong><?php echo $juniors; ?></strong> Juniors</span>
      <span><i class="fas fa-graduation-cap" aria-hidden="true"></i> <strong><?php echo $sophs; ?></strong> Sophomores</span>
      <span><i class="fas fa-school" aria-hidden="true"></i> <strong>8</strong> High Schools</span>
    </div>
  </div>
</section>


<!-- ============================================================
     FILTER BAR (sticky)
     ============================================================ -->
<div class="filter-bar" role="search" aria-label="Filter candidates">
  <div class="container">
    <div class="filter-bar-inner">

      <span class="filter-label">Filter:</span>

      <!-- Year filters -->
      <div class="filter-group" role="group" aria-label="Filter by class year">
        <button class="filter-btn active" data-filter="all" data-group="year" aria-pressed="true">All</button>
        <button class="filter-btn" data-filter="Junior"    data-group="year" aria-pressed="false">Juniors (<?php echo $juniors; ?>)</button>
        <button class="filter-btn" data-filter="Sophomore" data-group="year" aria-pressed="false">Sophomores (<?php echo $sophs; ?>)</button>
      </div>

      <div class="filter-divider" aria-hidden="true"></div>

      <!-- School filters -->
      <div class="filter-group" role="group" aria-label="Filter by school">
        <button class="filter-btn" data-filter="all"      data-group="school" aria-pressed="false">All Schools</button>
        <button class="filter-btn" data-filter="arlington" data-group="school" aria-pressed="false">Arlington HS</button>
        <button class="filter-btn" data-filter="martin"   data-group="school" aria-pressed="false">Martin HS</button>
        <button class="filter-btn" data-filter="lamar"    data-group="school" aria-pressed="false">Lamar HS</button>
        <button class="filter-btn" data-filter="other"    data-group="school" aria-pressed="false">Other Schools</button>
      </div>

    </div>
  </div>
</div>


<!-- ============================================================
     CANDIDATES GRID
     ============================================================ -->
<section class="all-candidates-section" id="candidates-grid" aria-labelledby="grid-heading">
  <div class="container">

    <p class="filter-result-count" id="candidate-count" aria-live="polite">
      Showing <strong><?php echo $total; ?></strong> of <?php echo $total; ?> candidates
    </p>

    <div class="all-candidates-grid" id="candidates-grid-inner">

      <?php foreach ($candidates as $c) : ?>
      <article
        class="cand-card <?php echo $c['winner'] ? 'winner' : ''; ?> reveal"
        data-year="<?php echo htmlspecialchars($c['year']); ?>"
        data-school="<?php echo htmlspecialchars($c['school_key']); ?>"
        aria-label="<?php echo htmlspecialchars($c['name']); ?>"
      >
        <div class="cand-photo">
          <img
            src="/image/<?php echo htmlspecialchars($c['img']); ?>"
            alt="<?php echo htmlspecialchars($c['name']); ?>"
            loading="lazy"
          >
          <?php if ($c['winner']) : ?>
          <div class="cand-winner-ribbon">
            <i class="fas fa-crown" aria-hidden="true"></i> Miss Cinderella 2026
          </div>
          <?php endif; ?>
        </div>
        <div class="cand-info">
          <p class="cand-name"><?php echo htmlspecialchars($c['name']); ?></p>
          <div class="cand-tags">
            <span class="cand-tag tag-year"><?php echo htmlspecialchars($c['year']); ?></span>
            <span class="cand-tag tag-school"><?php echo htmlspecialchars($c['school']); ?></span>
          </div>
          <p class="cand-escort">
            <i class="fas fa-user" aria-hidden="true"></i>
            Escort: <?php echo htmlspecialchars($c['escort']); ?>
          </p>
        </div>
      </article>
      <?php endforeach; ?>

    </div>

    <!-- No results message -->
    <div id="no-results" style="display:none; text-align:center; padding:60px 0;" aria-live="polite">
      <i class="fas fa-search" style="font-size:2rem; color:var(--gray-400); margin-bottom:14px; display:block;"></i>
      <p style="color:var(--gray-500);">No candidates match this filter. <button class="filter-btn active" onclick="resetFilters()" style="display:inline-block; margin-left:8px;">Show All</button></p>
    </div>

  </div>
</section>


<!-- ============================================================
     APPLY CTA
     ============================================================ -->
<section class="apply-cta" aria-labelledby="apply-cta-heading">
  <div class="container">
    <div class="reveal">
      <span class="script-accent" style="font-size:1.4rem; display:block; margin-bottom:12px;">Class of 2027</span>
      <h2 id="apply-cta-heading">Could You Be the Next Miss Cinderella?</h2>
      <p>Applications for the 2027 Cinderella Charity Ball open each fall. If you're a sophomore or junior with a passion for community service, we'd love to hear from you.</p>
      <div style="display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px;">
        <a href="/contact.php?subject=candidate-application" class="btn btn-primary">
          <i class="fas fa-star"></i> Learn About Applying
        </a>
        <a href="/about.php#apply-heading" class="btn btn-outline">
          <i class="fas fa-info-circle"></i> Eligibility Requirements
        </a>
      </div>
    </div>
  </div>
</section>


<!-- ============================================================
     CINDERELLAS IN HISTORY
     ============================================================ -->
<section class="history-teaser section-pad" id="history" aria-labelledby="history-heading">
  <div class="container">

    <header class="section-header reveal">
      <div class="eyebrow" style="justify-content:center;">A 65-Year Legacy</div>
      <h2 id="history-heading">Cinderellas in History</h2>
      <p>From Jane Louise Meier in 1961 to Claire Diane Novoselsky in 2026 — over 600 remarkable young women have carried this tradition forward.</p>
    </header>

    <div class="history-table-wrap reveal">
      <table class="history-table" aria-label="Recent Miss Cinderella winners">
        <thead>
          <tr>
            <th scope="col">Year</th>
            <th scope="col">Miss Cinderella</th>
            <th scope="col">Ball Number</th>
          </tr>
        </thead>
        <tbody>
          <?php
          $history = [
            [2026, 'Claire Diane Novoselsky',   '66th Annual', true],
            [2025, 'Miss Cinderella 2025',       '65th Annual', false],
            [2024, 'Miss Cinderella 2024',       '64th Annual', false],
            [2023, 'Miss Cinderella 2023',       '63rd Annual', false],
            [2022, 'Miss Cinderella 2022',       '62nd Annual', false],
            [2021, 'Miss Cinderella 2021',       '61st Annual', false],
            [2020, 'Miss Cinderella 2020',       '60th Annual', false],
            [2019, 'Miss Cinderella 2019',       '59th Annual', false],
            [2018, 'Miss Cinderella 2018',       '58th Annual', false],
            [2017, 'Miss Cinderella 2017',       '57th Annual', false],
            [1961, 'Jane Louise Meier',          '1st Annual',  false],
          ];
          foreach ($history as [$yr, $name, $num, $current]) :
          ?>
          <tr class="<?php echo $current ? 'winner-row' : ''; ?>">
            <td class="year-col"><?php echo $yr; ?></td>
            <td>
              <?php echo htmlspecialchars($name); ?>
              <?php if ($current) : ?>
                <span class="winner-badge"><i class="fas fa-crown" aria-hidden="true"></i> 2026</span>
              <?php endif; ?>
            </td>
            <td><?php echo htmlspecialchars($num); ?></td>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>

    <div style="text-align:center; margin-top:32px;" class="reveal">
      <p style="color:var(--gray-500); font-size:.875rem; margin-bottom:16px;">
        The complete list of all 66 Miss Cinderella winners dating back to 1961 is available upon request.
      </p>
      <a href="/contact.php" class="btn btn-outline-gold">
        <i class="fas fa-envelope"></i> Request Full History
      </a>
    </div>

  </div>
</section>


<!-- ============================================================
     CANDIDATE FILTER JAVASCRIPT
     ============================================================ -->
<script>
(function () {
  const grid       = document.getElementById('candidates-grid-inner');
  const cards      = Array.from(grid.querySelectorAll('.cand-card'));
  const countEl    = document.getElementById('candidate-count');
  const noResults  = document.getElementById('no-results');
  const total      = cards.length;

  // Active filter state
  let activeYear   = 'all';
  let activeSchool = 'all';

  function applyFilters() {
    let visible = 0;
    cards.forEach(card => {
      const yearMatch   = activeYear   === 'all' || card.dataset.year   === activeYear;
      const schoolMatch = activeSchool === 'all' || card.dataset.school === activeSchool;
      const show = yearMatch && schoolMatch;
      card.classList.toggle('hidden', !show);
      if (show) visible++;
    });

    countEl.innerHTML = `Showing <strong>${visible}</strong> of ${total} candidates`;
    noResults.style.display = visible === 0 ? 'block' : 'none';
    grid.style.display      = visible === 0 ? 'none' : '';
  }

  function setActive(btn) {
    const group = btn.dataset.group;
    document.querySelectorAll(`.filter-btn[data-group="${group}"]`).forEach(b => {
      b.classList.remove('active');
      b.setAttribute('aria-pressed', 'false');
    });
    btn.classList.add('active');
    btn.setAttribute('aria-pressed', 'true');
  }

  document.querySelectorAll('.filter-btn[data-filter]').forEach(btn => {
    btn.addEventListener('click', () => {
      setActive(btn);
      if (btn.dataset.group === 'year')   activeYear   = btn.dataset.filter;
      if (btn.dataset.group === 'school') activeSchool = btn.dataset.filter;
      applyFilters();
    });
  });

  window.resetFilters = function () {
    activeYear   = 'all';
    activeSchool = 'all';
    document.querySelectorAll('.filter-btn').forEach(b => {
      b.classList.remove('active');
      b.setAttribute('aria-pressed', 'false');
    });
    document.querySelectorAll('.filter-btn[data-filter="all"]').forEach(b => {
      b.classList.add('active');
      b.setAttribute('aria-pressed', 'true');
    });
    applyFilters();
  };
})();
</script>


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