<?php
$page_title       = "Cinderella Charity Ball — Arlington's Premier Charity Gala";
$page_description = "For over 65 years, the Cinderella Charity Ball has raised $15+ million for the Boys & Girls Clubs of Arlington. Join us for the 67th Annual Ball on April 10, 2027.";
include 'includes/header.php';
?>

<!-- ============================================================
     HERO
     ============================================================ -->
<section class="hero" aria-label="Welcome to the Cinderella Charity Ball">

  <!-- Decorative backgrounds -->
  <div class="hero-grid-bg" aria-hidden="true"></div>
  <div class="hero-decor-circle-1" aria-hidden="true"></div>
  <div class="hero-decor-circle-2" aria-hidden="true"></div>

  <div class="hero-inner">

    <!-- Left: Content -->
    <div class="hero-content">

      <div class="hero-eyebrow">
        <span class="eyebrow">65+ Years of Giving &nbsp;·&nbsp; Arlington, Texas</span>
      </div>

      <h1 class="hero-title">Cinderella<br>Charity Ball</h1>
      <span class="hero-script script-accent">Est. 1961</span>

      <p class="hero-desc">
        Arlington's longest-standing charitable tradition — where community, elegance,
        and generosity come together every spring to transform the lives of local youth
        through the Boys &amp; Girls Clubs.
      </p>

      <div class="hero-ctas">
        <a href="/candidates.php" class="btn btn-primary">
          <i class="fas fa-star"></i> Meet the 2026 Candidates
        </a>
        <a href="/support.php#donate" class="btn btn-outline">
          <i class="fas fa-heart"></i> Donate Now
        </a>
      </div>

      <!-- Countdown Timer -->
      <div class="countdown-wrap">
        <p class="countdown-label">Next Ball Countdown</p>
        <div class="countdown" aria-label="Countdown to the 67th Annual Ball">
          <div class="countdown-unit">
            <span class="countdown-num" id="cd-days">--</span>
            <span class="countdown-txt">Days</span>
          </div>
          <span class="countdown-sep" aria-hidden="true">:</span>
          <div class="countdown-unit">
            <span class="countdown-num" id="cd-hours">--</span>
            <span class="countdown-txt">Hours</span>
          </div>
          <span class="countdown-sep" aria-hidden="true">:</span>
          <div class="countdown-unit">
            <span class="countdown-num" id="cd-mins">--</span>
            <span class="countdown-txt">Mins</span>
          </div>
          <span class="countdown-sep" aria-hidden="true">:</span>
          <div class="countdown-unit">
            <span class="countdown-num" id="cd-secs">--</span>
            <span class="countdown-txt">Secs</span>
          </div>
        </div>
        <p class="countdown-event">
          <i class="fas fa-calendar-alt" aria-hidden="true"></i>
          <strong>67th Annual Ball</strong> &nbsp;·&nbsp; April 10, 2027 &nbsp;·&nbsp; Arlington Convention Center
        </p>
      </div>

    </div><!-- .hero-content -->

    <!-- Right: Miss Cinderella Portrait -->
    <div class="hero-portrait-wrap" aria-label="Miss Cinderella 2026">
      <div class="hero-portrait-frame">
        <i class="fas fa-crown hero-crown" aria-hidden="true"></i>
        <img
          src="/image/imgi_2_Claire-Novoselsky-819x1024.jpg"
          alt="Claire Diane Novoselsky, Miss Cinderella 2026"
          class="hero-portrait-img"
          loading="eager"
          fetchpriority="high"
        >
        <div class="hero-badge">
          <i class="fas fa-crown" aria-hidden="true"></i>
          Miss Cinderella 2026
        </div>
      </div>
      <div class="hero-name-plate">
        <p class="candidate-name">Claire Diane Novoselsky</p>
        <p class="candidate-school">Junior · Arlington High School</p>
      </div>
    </div>

  </div><!-- .hero-inner -->
</section>


<!-- ============================================================
     IMPACT STATS BAR
     ============================================================ -->
<section class="stats-bar" aria-label="Our impact in numbers">
  <div class="container">
    <div class="stats-grid" data-stagger>

      <div class="stat-item">
        <div class="stat-number">
          <span class="prefix">$</span>
          <span data-count="15" data-decimals="0">0</span>
          <span class="suffix">M+</span>
        </div>
        <p class="stat-label">Raised Since 1961</p>
        <p class="stat-sub">$15,056,527 and counting</p>
      </div>

      <div class="stat-item">
        <div class="stat-number">
          <span data-count="65">0</span>
          <span class="suffix">+</span>
        </div>
        <p class="stat-label">Years of Impact</p>
        <p class="stat-sub">Arlington's longest tradition</p>
      </div>

      <div class="stat-item">
        <div class="stat-number">
          <span data-count="8190">0</span>
        </div>
        <p class="stat-label">Kids Served in 2023</p>
        <p class="stat-sub">Arlington youth programs</p>
      </div>

      <div class="stat-item">
        <div class="stat-number">
          <span data-count="1200">0</span>
          <span class="suffix">+</span>
        </div>
        <p class="stat-label">Attendees per Ball</p>
        <p class="stat-sub">Sells out every year</p>
      </div>

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


<!-- ============================================================
     WHAT'S NEW
     ============================================================ -->
<section class="whats-new section-pad" aria-labelledby="whats-new-heading">
  <div class="container">

    <header class="section-header">
      <div class="eyebrow" style="justify-content:center;">Latest Updates</div>
      <h2 id="whats-new-heading">What's Happening</h2>
      <p>Stay in the loop with the latest from the Cinderella Charity Ball community.</p>
    </header>

    <div class="news-grid" data-stagger>

      <!-- Card 1: 2026 Results -->
      <article class="news-card">
        <div class="news-card-img">
          <img
            src="/image/imgi_6_CCB-Formal4-10-26-700x300.jpg"
            alt="The 66th Annual Cinderella Charity Ball formal event"
            loading="lazy"
          >
          <span class="news-card-tag">2026 Results</span>
        </div>
        <div class="news-card-body">
          <h3>The 66th Annual Ball: A Night to Remember</h3>
          <p>Claire Diane Novoselsky was crowned Miss Cinderella 2026 at the sold-out gala at the Arlington Convention Center. See the complete results and highlights.</p>
          <a href="/ball.php" class="news-card-link">
            View Full Results <i class="fas fa-arrow-right" aria-hidden="true"></i>
          </a>
        </div>
      </article>

      <!-- Card 2: Meet the Candidates -->
      <article class="news-card">
        <div class="news-card-img">
          <img
            src="/image/imgi_9_2026CCB-Candidates12-19-25-700x300.jpg"
            alt="2026 Cinderella Charity Ball candidates gathering"
            loading="lazy"
          >
          <span class="news-card-tag">2026 Candidates</span>
        </div>
        <div class="news-card-body">
          <h3>Meet the 18 Remarkable 2026 Candidates</h3>
          <p>18 extraordinary young women from Arlington's high schools competed in this year's campaign, raising funds for the Boys &amp; Girls Clubs. Browse their profiles.</p>
          <a href="/candidates.php" class="news-card-link">
            Meet the Candidates <i class="fas fa-arrow-right" aria-hidden="true"></i>
          </a>
        </div>
      </article>

      <!-- Card 3: Donate / Support -->
      <article class="news-card">
        <div class="news-card-img">
          <img
            src="/image/imgi_8_CCB26-Candidates1-12-26-1-581x248.jpg"
            alt="Cinderella Ball candidate photo session"
            loading="lazy"
          >
          <span class="news-card-tag">Support Us</span>
        </div>
        <div class="news-card-body">
          <h3>Support the 2027 Campaign — Coming February!</h3>
          <p>The 2027 campaign opens in February. Sign up for updates to be the first to know when candidates are announced and donations open.</p>
          <a href="/support.php" class="news-card-link">
            Get Involved <i class="fas fa-arrow-right" aria-hidden="true"></i>
          </a>
        </div>
      </article>

    </div><!-- .news-grid -->
  </div>
</section>


<!-- ============================================================
     HOW IT WORKS
     ============================================================ -->
<section class="how-it-works section-pad" aria-labelledby="how-heading">
  <div class="container">

    <header class="section-header">
      <div class="eyebrow" style="justify-content:center;">The Process</div>
      <h2 id="how-heading">How the Cinderella Ball Works</h2>
      <p>From application to impact — here's how Arlington's most beloved tradition comes together each year.</p>
    </header>

    <div class="steps-grid" data-stagger>

      <div class="step-item">
        <div class="step-icon">
          <i class="fas fa-file-alt" aria-hidden="true"></i>
          <span class="step-number">1</span>
        </div>
        <h4>Apply</h4>
        <p>Each fall, eligible sophomores and juniors from Arlington high schools submit applications showcasing their academics, leadership, and community involvement.</p>
      </div>

      <div class="step-item">
        <div class="step-icon">
          <i class="fas fa-hand-holding-heart" aria-hidden="true"></i>
          <span class="step-number">2</span>
        </div>
        <h4>Campaign</h4>
        <p>Selected candidates fundraise February through April, reaching out to donors and organizing creative events — all proceeds go directly to the Boys &amp; Girls Clubs.</p>
      </div>

      <div class="step-item">
        <div class="step-icon">
          <i class="fas fa-gem" aria-hidden="true"></i>
          <span class="step-number">3</span>
        </div>
        <h4>The Ball</h4>
        <p>At the sold-out annual gala, the community gathers to celebrate Arlington's extraordinary young women, with Miss Cinderella crowned at the evening's climax.</p>
      </div>

      <div class="step-item">
        <div class="step-icon">
          <i class="fas fa-children" aria-hidden="true"></i>
          <span class="step-number">4</span>
        </div>
        <h4>Impact</h4>
        <p>100% of proceeds after Ball expenses fund Boys &amp; Girls Club programs, facilities, and scholarships — directly changing the lives of Arlington's youth.</p>
      </div>

    </div><!-- .steps-grid -->
  </div>
</section>


<!-- ============================================================
     CANDIDATES SPOTLIGHT
     ============================================================ -->
<section class="candidates-section section-pad" aria-labelledby="candidates-heading">
  <div class="container">

    <header class="section-header">
      <div class="eyebrow" style="justify-content:center;">Class of 2026</div>
      <h2 id="candidates-heading">Meet the 2026 Candidates</h2>
      <p>18 outstanding young women who gave their hearts to Arlington's children this campaign season.</p>
    </header>

    <div class="candidates-grid has-winner" data-stagger>

      <!-- Miss Cinderella 2026 (Winner) -->
      <div class="candidate-card winner-card reveal">
        <img
          src="/image/imgi_2_Claire-Novoselsky-819x1024.jpg"
          alt="Claire Diane Novoselsky, Miss Cinderella 2026"
          loading="lazy"
        >
        <div class="winner-ribbon">
          <i class="fas fa-crown" aria-hidden="true"></i> Miss Cinderella 2026
        </div>
        <div class="candidate-overlay">
          <p class="candidate-name">Claire Diane Novoselsky</p>
          <p class="candidate-school">Junior · Arlington High School</p>
        </div>
      </div>

      <!-- Candidate 2 -->
      <div class="candidate-card reveal">
        <img
          src="/image/imgi_11_Hala-Abdallah2-819x1024.jpg"
          alt="Hala Ibrahim Abdallah"
          loading="lazy"
        >
        <div class="candidate-overlay">
          <p class="candidate-name">Hala Ibrahim Abdallah</p>
          <p class="candidate-school">Junior · Martin High School</p>
        </div>
      </div>

      <!-- Candidate 3 -->
      <div class="candidate-card reveal">
        <img
          src="/image/imgi_12_Brittany-Allman-819x1024.jpg"
          alt="Brittany Ann Allman"
          loading="lazy"
        >
        <div class="candidate-overlay">
          <p class="candidate-name">Brittany Ann Allman</p>
          <p class="candidate-school">Sophomore · Lamar High School</p>
        </div>
      </div>

      <!-- Candidate 4 -->
      <div class="candidate-card reveal">
        <img
          src="/image/imgi_19_Hannah-Kirkbride-819x1024.jpg"
          alt="Hannah Grace Kirkbride"
          loading="lazy"
        >
        <div class="candidate-overlay">
          <p class="candidate-name">Hannah Grace Kirkbride</p>
          <p class="candidate-school">Junior · Martin High School</p>
        </div>
      </div>

      <!-- Candidate 5 -->
      <div class="candidate-card reveal">
        <img
          src="/image/imgi_23_Sophie-819x1024.jpg"
          alt="Sophie Hong-An Pham"
          loading="lazy"
        >
        <div class="candidate-overlay">
          <p class="candidate-name">Sophie Hong-An Pham</p>
          <p class="candidate-school">Junior · Martin High School</p>
        </div>
      </div>

      <!-- Candidate 6 -->
      <div class="candidate-card reveal">
        <img
          src="/image/imgi_27_Cassidy-Tucker-819x1024.jpg"
          alt="Cassidy Mae Tucker"
          loading="lazy"
        >
        <div class="candidate-overlay">
          <p class="candidate-name">Cassidy Mae Tucker</p>
          <p class="candidate-school">Sophomore · The Oakridge School</p>
        </div>
      </div>

    </div><!-- .candidates-grid -->

    <div class="candidates-cta reveal">
      <a href="/candidates.php" class="btn btn-blue">
        <i class="fas fa-users" aria-hidden="true"></i> View All 18 Candidates
      </a>
      <p>Plus explore Cinderellas in History going back to 1961</p>
    </div>

  </div>
</section>


<!-- ============================================================
     IMPACT BAND (Full-Width Photo Section)
     ============================================================ -->
<div class="impact-band" aria-labelledby="impact-heading">
  <div class="impact-band-bg" role="img" aria-label="The 66th Annual Cinderella Charity Ball gala"></div>
  <div class="impact-band-overlay" aria-hidden="true"></div>

  <div class="impact-band-inner">

    <div class="impact-band-text reveal-left">
      <div class="eyebrow">Our Legacy</div>
      <h2 id="impact-heading">$15 Million in Transformative Change</h2>
      <p>
        Every dollar raised at the Cinderella Ball transforms lives. From music studios where kids
        discover their voices to security systems that keep them safe — your support builds
        brighter futures for Arlington's youth.
      </p>
      <a href="/bgcgtc.php" class="btn btn-outline">
        <i class="fas fa-arrow-right" aria-hidden="true"></i> See Our Impact
      </a>
    </div>

    <div class="impact-numbers reveal-right" data-stagger>

      <div class="impact-num-item">
        <span class="num">$15M+</span>
        <span class="lbl">Total Raised</span>
      </div>

      <div class="impact-num-item">
        <span class="num">100%</span>
        <span class="lbl">Goes to BGCGTC</span>
      </div>

      <div class="impact-num-item">
        <span class="num">600+</span>
        <span class="lbl">Historical Candidates</span>
      </div>

      <div class="impact-num-item">
        <span class="num">$12,500</span>
        <span class="lbl">Annual Scholarships</span>
      </div>

    </div>

  </div>
</div>


<!-- ============================================================
     PHOTO GALLERY STRIP
     ============================================================ -->
<section class="gallery-strip" aria-labelledby="gallery-heading">
  <div class="container">

    <header class="section-header">
      <div class="eyebrow" style="justify-content:center;">Behind the Scenes</div>
      <h2 id="gallery-heading">A Glimpse of the Magic</h2>
      <p>From the first candidate social to the crowning moment — the Cinderella Ball is a year-long celebration of community and service.</p>
    </header>

    <div class="gallery-grid">

      <div class="gallery-item reveal-left">
        <img
          src="/image/imgi_5_CCB2026-1-31-26-700x300.jpg"
          alt="2026 Cinderella Ball candidates social event"
          loading="lazy"
        >
      </div>

      <div class="gallery-item reveal">
        <img
          src="/image/imgi_7_CCB2026Rehersal-676x289.jpg"
          alt="2026 Ball rehearsal"
          loading="lazy"
        >
      </div>

      <div class="gallery-item reveal">
        <img
          src="/image/imgi_10_CCB2026-1-31-26b-700x300.jpg"
          alt="Candidates at the 2026 social event"
          loading="lazy"
        >
      </div>

      <div class="gallery-item reveal-right">
        <img
          src="/image/imgi_8_CCB26-Candidates1-12-26-1-581x248.jpg"
          alt="2026 Cinderella Ball candidates photo session January"
          loading="lazy"
        >
      </div>

      <div class="gallery-item reveal-right">
        <img
          src="/image/imgi_9_2026CCB-Candidates12-19-25-700x300.jpg"
          alt="2026 candidates first gathering December 2025"
          loading="lazy"
        >
      </div>

    </div>

    <div style="text-align:center; margin-top:36px;" class="reveal">
      <a href="/news.php#gallery" class="btn btn-outline-gold">
        <i class="fas fa-images" aria-hidden="true"></i> View Full Gallery
      </a>
    </div>

  </div>
</section>


<!-- ============================================================
     EVENTS & GET INVOLVED
     ============================================================ -->
<section class="events-section section-pad" aria-labelledby="events-heading">
  <div class="container">

    <header class="section-header">
      <div class="eyebrow" style="justify-content:center;">Mark Your Calendar</div>
      <h2 id="events-heading">Upcoming Events</h2>
      <p>Don't miss these key dates in the Cinderella Charity Ball calendar.</p>
    </header>

    <div class="events-layout">

      <!-- Events List -->
      <div class="events-list" data-stagger>

        <div class="event-item">
          <div class="event-date-block">
            <span class="month">Fall</span>
            <span class="day">26</span>
          </div>
          <div class="event-details">
            <h4>2027 Candidate Applications Open</h4>
            <p>Eligible sophomores and juniors may apply to become a 2027 Cinderella Charity Ball candidate.</p>
            <div class="event-meta">
              <span><i class="fas fa-calendar" aria-hidden="true"></i> Fall 2026</span>
              <span><i class="fas fa-map-marker-alt" aria-hidden="true"></i> Arlington, TX</span>
            </div>
          </div>
        </div>

        <div class="event-item">
          <div class="event-date-block">
            <span class="month">Feb</span>
            <span class="day">27</span>
          </div>
          <div class="event-details">
            <h4>2027 Campaign Kickoff</h4>
            <p>The 2027 campaign officially opens — start supporting your favorite candidate and help change lives in Arlington.</p>
            <div class="event-meta">
              <span><i class="fas fa-calendar" aria-hidden="true"></i> February 2027</span>
              <span><i class="fas fa-tag" aria-hidden="true"></i> Fundraising Opens</span>
            </div>
          </div>
        </div>

        <div class="event-item">
          <div class="event-date-block">
            <span class="month">Apr</span>
            <span class="day">10</span>
          </div>
          <div class="event-details">
            <h4>67th Annual Cinderella Charity Ball</h4>
            <p>Arlington's most beloved gala returns! Formal dinner, live entertainment, and the crowning of Miss Cinderella 2027.</p>
            <div class="event-meta">
              <span><i class="fas fa-calendar" aria-hidden="true"></i> April 10, 2027</span>
              <span><i class="fas fa-map-marker-alt" aria-hidden="true"></i> Arlington Convention Center</span>
              <span><i class="fas fa-ticket-alt" aria-hidden="true"></i> $150/person</span>
            </div>
          </div>
        </div>

      </div><!-- .events-list -->

      <!-- CTA Side Card -->
      <div class="events-cta-side reveal-right">
        <i class="fas fa-crown" aria-hidden="true"></i>
        <h3>Be Part of Something Beautiful</h3>
        <p>Whether you donate, volunteer, apply as a candidate, or simply attend — there's a place for you in the Cinderella Charity Ball family.</p>
        <a href="/support.php" class="btn btn-primary" style="margin-bottom:12px;">
          <i class="fas fa-heart" aria-hidden="true"></i> Support the Ball
        </a>
        <a href="/about.php#auxiliary" class="btn btn-outline" style="width:100%; justify-content:center;">
          Join the Ladies' Auxiliary
        </a>
      </div>

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


<!-- ============================================================
     CTA BANNER
     ============================================================ -->
<section class="cta-banner" aria-labelledby="cta-heading">
  <div class="container">
    <div class="reveal">
      <span class="script-accent" style="font-size:1.4rem; display:block; margin-bottom:12px;">
        Make a Difference Today
      </span>
      <h2 id="cta-heading">Ready to Change a Child's Life in Arlington?</h2>
      <p>
        100% of your donation goes directly to Boys &amp; Girls Club programs, facilities, and scholarships.
        No overhead, no middlemen — just impact.
      </p>
      <div class="cta-banner-btns">
        <a href="/support.php#donate" class="btn btn-primary">
          <i class="fas fa-heart" aria-hidden="true"></i> Donate Now
        </a>
        <a href="/bgcgtc.php" class="btn btn-outline">
          <i class="fas fa-arrow-right" aria-hidden="true"></i> See Where Money Goes
        </a>
        <a href="/candidates.php#apply" class="btn btn-outline">
          <i class="fas fa-star" aria-hidden="true"></i> Apply as a Candidate
        </a>
      </div>
    </div>
  </div>
</section>


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