<?php
$page_title       = "Support Us — Donate & Get Involved | Cinderella Charity Ball";
$page_description = "Support the Cinderella Charity Ball and the Boys & Girls Clubs of Arlington. Learn how to donate, sponsor, or join the Ladies' Auxiliary. 100% of proceeds benefit Arlington youth.";
include 'includes/header.php';
?>

<!-- ============================================================
     PAGE HERO
     ============================================================ -->
<section class="page-hero">
  <div class="page-hero-bg" style="background-image:url('/image/imgi_5_CCB2026-1-31-26-700x300.jpg');" role="img" aria-label="Cinderella Charity Ball community gathering"></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">Support Us</span>
    </nav>
    <div class="page-hero-tag"><i class="fas fa-heart" aria-hidden="true"></i> Make a Difference</div>
    <h1>Support the Cinderella Charity Ball</h1>
    <p class="page-hero-desc">100% of proceeds (after event expenses) go directly to the Boys &amp; Girls Clubs of Greater Tarrant County in Arlington. Every dollar changes a child's life.</p>
  </div>
</section>


<!-- ============================================================
     CAMPAIGN STATUS BANNER
     ============================================================ -->
<div class="campaign-status" id="donate" role="status" aria-label="2026 campaign status">
  <div class="container">
    <div class="campaign-status-inner">
      <i class="fas fa-check-circle" aria-hidden="true"></i>
      <p>
        <strong>The 2026 Campaign has closed.</strong>
        Thank you for an incredible year of giving! The 2027 campaign opens in February — sign up below for first access.
      </p>
    </div>
  </div>
</div>


<!-- ============================================================
     HOW TO DONATE
     ============================================================ -->
<section class="section-pad" style="background:var(--off-white);" aria-labelledby="donate-heading">
  <div class="container">
    <header class="section-header reveal">
      <div class="eyebrow" style="justify-content:center;">Give with Confidence</div>
      <h2 id="donate-heading">Ways to Support Our Mission</h2>
      <p>Choose the giving option that works best for you. All donations are tax-deductible — the Ladies' Auxiliary of Arlington, Inc. is a registered 501(c)(3) organization.</p>
    </header>

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

      <!-- Check / Mail -->
      <div class="pathway-card">
        <div class="pathway-icon blue"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
        <span class="pathway-badge badge-classic">Traditional</span>
        <h3>Mail a Check</h3>
        <p>Send a tax-deductible check payable to <strong>Ladies Auxiliary of Arlington, Inc.</strong> — accepted year-round and during the campaign.</p>
        <div class="address-block">
          <strong>Make check payable to:</strong>
          Ladies Auxiliary of Arlington, Inc.
          <br><br>
          <strong>Mail to:</strong>
          PO Box 152336<br>
          Arlington, TX 76015
        </div>
        <a href="/contact.php?subject=Donations" class="btn btn-blue" style="margin-top:auto;">
          <i class="fas fa-envelope"></i> Ask a Question
        </a>
      </div>

      <!-- Support Boys & Girls Clubs Direct -->
      <div class="pathway-card featured">
        <div class="pathway-icon gold"><i class="fas fa-hand-holding-heart" aria-hidden="true"></i></div>
        <span class="pathway-badge badge-impact">Year-Round</span>
        <h3>Support Boys &amp; Girls Clubs Directly</h3>
        <p>Want to give now? Donate directly to the Boys &amp; Girls Clubs of Greater Tarrant County — every gift supports the same Arlington youth programs funded by the Ball.</p>
        <p style="font-size:.8rem; color:var(--gray-400); margin-bottom:12px;">Your gift goes directly to BGCGTC Arlington programs, facilities, and youth development initiatives.</p>
        <a href="https://www.bgcgtc.org" target="_blank" rel="noopener" class="btn btn-primary" style="margin-top:auto;">
          <i class="fas fa-external-link-alt"></i> Donate at BGCGTC.org
        </a>
      </div>

      <!-- Join / Volunteer -->
      <div class="pathway-card">
        <div class="pathway-icon green"><i class="fas fa-users" aria-hidden="true"></i></div>
        <span class="pathway-badge badge-classic">Volunteer</span>
        <h3>Give Your Time</h3>
        <p>Join the Ladies' Auxiliary of Arlington and help organize Arlington's most beloved charity tradition. Open to all women in the community — no experience required.</p>
        <ul class="sidebar-list" style="margin-bottom:20px; text-align:left;">
          <li><i class="fas fa-check"></i> All-volunteer organization</li>
          <li><i class="fas fa-check"></i> Monthly meetings &amp; planning events</li>
          <li><i class="fas fa-check"></i> Meaningful community impact</li>
        </ul>
        <a href="/contact.php?subject=auxiliary" class="btn btn-outline-gold" style="margin-top:auto;">
          <i class="fas fa-heart"></i> Join the Auxiliary
        </a>
      </div>

    </div>

    <!-- Tax info note -->
    <p class="reveal" style="text-align:center; margin-top:28px; font-size:.82rem; color:var(--gray-400);">
      <i class="fas fa-shield-alt" aria-hidden="true"></i>
      &nbsp;Donations are tax-deductible. Ladies Auxiliary of Arlington, Inc. is a 501(c)(3) nonprofit. A receipt will be provided for your records.
    </p>
  </div>
</section>


<!-- ============================================================
     2027 EMAIL SIGNUP
     ============================================================ -->
<section style="background:var(--white); padding:80px 0;" aria-labelledby="signup-heading">
  <div class="container">
    <div class="signup-panel reveal">
      <i class="fas fa-bell" style="font-size:1.8rem; color:var(--gold-primary); margin-bottom:12px; display:block;" aria-hidden="true"></i>
      <h3 id="signup-heading">Be First to Know When 2027 Candidates Are Announced</h3>
      <p>The 2027 campaign opens in February. Sign up now and we'll notify you the moment donations open so you can support your favorite candidate from day one.</p>
      <form class="signup-form" action="mailto:cinderellacharityball@gmail.com" method="get" novalidate>
        <input type="email" name="subject" placeholder="Your email address" autocomplete="email" aria-label="Email for campaign notifications" required>
        <button type="submit"><i class="fas fa-paper-plane" aria-hidden="true"></i> Notify Me</button>
      </form>
      <p style="color:rgba(255,255,255,.35); font-size:.75rem; margin-top:12px;">No spam. One email when the campaign opens. Unsubscribe anytime.</p>
    </div>
  </div>
</section>


<!-- ============================================================
     FAQ
     ============================================================ -->
<section class="faq-section section-pad" aria-labelledby="faq-heading">
  <div class="container">
    <header class="section-header reveal">
      <div class="eyebrow" style="justify-content:center;">Common Questions</div>
      <h2 id="faq-heading">Frequently Asked Questions</h2>
    </header>

    <div class="faq-list" role="list">

      <p class="faq-category-label" style="padding-left:0;">For Donors</p>

      <div class="faq-item" role="listitem">
        <button class="faq-q" aria-expanded="false">
          Are donations to the Cinderella Charity Ball tax-deductible?
          <span class="faq-icon" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
        </button>
        <div class="faq-a" hidden>
          <p>Yes. The Ladies' Auxiliary of Arlington, Inc. is a registered 501(c)(3) nonprofit organization. All donations are fully tax-deductible to the extent permitted by law. You will receive a receipt for your records.</p>
        </div>
      </div>

      <div class="faq-item" role="listitem">
        <button class="faq-q" aria-expanded="false">
          How much of my donation actually reaches the Boys &amp; Girls Clubs?
          <span class="faq-icon" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
        </button>
        <div class="faq-a" hidden>
          <p>100% of all funds raised by candidates — after Ball event expenses are covered — go directly to Boys &amp; Girls Club programs, facilities, and scholarships in Arlington. There are no staff salaries in the Ladies' Auxiliary; it is entirely volunteer-run.</p>
        </div>
      </div>

      <div class="faq-item" role="listitem">
        <button class="faq-q" aria-expanded="false">
          Can I donate to a specific candidate?
          <span class="faq-icon" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
        </button>
        <div class="faq-a" hidden>
          <p>Yes! During the active campaign (February–April each year), you can donate directly to any individual candidate via their profile pages on this website. Checks can also be made out to <strong>Ladies Auxiliary of Arlington, Inc.</strong> with the candidate's name in the memo line. The 2027 campaign opens in February.</p>
        </div>
      </div>

      <div class="faq-item" role="listitem">
        <button class="faq-q" aria-expanded="false">
          What payment methods do you accept?
          <span class="faq-icon" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
        </button>
        <div class="faq-a" hidden>
          <p>We accept personal checks (payable to <em>Ladies Auxiliary of Arlington, Inc.</em>), Visa, and MasterCard during the active campaign season. Checks may be mailed year-round to PO Box 152336, Arlington, TX 76015.</p>
        </div>
      </div>

      <div class="faq-item" role="listitem">
        <button class="faq-q" aria-expanded="false">
          Can I donate in honor or memory of someone?
          <span class="faq-icon" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
        </button>
        <div class="faq-a" hidden>
          <p>Absolutely. If mailing a check, please include a note with the honoree's name and the name and address of anyone you'd like notified of your tribute gift. For online donations, use the comments field to share this information.</p>
        </div>
      </div>

      <p class="faq-category-label" style="padding-left:0; margin-top:8px;">For Prospective Candidates</p>

      <div class="faq-item" role="listitem">
        <button class="faq-q" aria-expanded="false">
          Who can apply to be a Cinderella Charity Ball candidate?
          <span class="faq-icon" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
        </button>
        <div class="faq-a" hidden>
          <p>We welcome applications from young women who are currently enrolled as a <strong>sophomore or junior in high school</strong> and either attend school within Arlington city limits <em>or</em> reside within Arlington city limits. No fundraising experience is required — the Ladies' Auxiliary provides full guidance and support.</p>
        </div>
      </div>

      <div class="faq-item" role="listitem">
        <button class="faq-q" aria-expanded="false">
          When are applications available and how are candidates selected?
          <span class="faq-icon" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
        </button>
        <div class="faq-a" hidden>
          <p>Applications are made available each fall (typically September–October). Selection is based on the entire application — academics, leadership, school and community activities, and parental involvement. The Ladies' Auxiliary selects a maximum of 20 candidates per year. Follow us on <a href="https://www.facebook.com/CinderellaCharityBall" target="_blank" rel="noopener">Facebook</a> and <a href="https://www.instagram.com/cinderellacharityball" target="_blank" rel="noopener">Instagram</a> for application announcements.</p>
        </div>
      </div>

      <p class="faq-category-label" style="padding-left:0; margin-top:8px;">For Ball Attendees</p>

      <div class="faq-item" role="listitem">
        <button class="faq-q" aria-expanded="false">
          How much are tickets and when do they go on sale?
          <span class="faq-icon" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
        </button>
        <div class="faq-a" hidden>
          <p>Tickets are <strong>$150 per person</strong>. The Ball historically sells out, so we recommend purchasing early when the campaign opens in February. Tables are also available — <a href="/contact.php">contact us</a> for table inquiries. The 2027 Ball is scheduled for April 10, 2027 at the Arlington Convention Center.</p>
        </div>
      </div>

      <div class="faq-item" role="listitem">
        <button class="faq-q" aria-expanded="false">
          What is the dress code for the Ball?
          <span class="faq-icon" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
        </button>
        <div class="faq-a" hidden>
          <p>The Cinderella Charity Ball is a <strong>formal event</strong>. Guests are encouraged to wear formal attire — floor-length gowns for women and black tie or formal suits for men. The Ball is a celebration of elegance, community, and generosity.</p>
        </div>
      </div>

    </div>

    <div class="reveal" style="text-align:center; margin-top:36px;">
      <p style="color:var(--gray-500); font-size:.9rem;">
        Still have questions? We're happy to help.
        <a href="/contact.php" style="color:var(--blue-primary); font-weight:600; margin-left:4px;">Contact Us →</a>
      </p>
    </div>

  </div>
</section>


<!-- ============================================================
     SPONSORSHIP OPPORTUNITIES
     ============================================================ -->
<section class="sponsorship-section section-pad" id="sponsorship" aria-labelledby="sponsor-heading">
  <div class="container">
    <header class="section-header reveal">
      <div class="eyebrow" style="justify-content:center;">Corporate Giving</div>
      <h2 id="sponsor-heading">Sponsorship Opportunities</h2>
      <p>Partner with Arlington's most beloved annual charity event and align your business with 65 years of community impact, elegance, and generosity.</p>
    </header>

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

      <div class="tier-card">
        <div class="tier-header presenting">
          <p class="tier-name"><i class="fas fa-crown" aria-hidden="true"></i> Presenting Sponsor</p>
          <p class="tier-amount">$25,000+</p>
        </div>
        <div class="tier-body">
          <ul>
            <li><i class="fas fa-check"></i> Naming rights on the event</li>
            <li><i class="fas fa-check"></i> Premium table for 10 guests</li>
            <li><i class="fas fa-check"></i> Full-page program advertisement</li>
            <li><i class="fas fa-check"></i> Logo on all printed materials &amp; website</li>
            <li><i class="fas fa-check"></i> Social media recognition &amp; posts</li>
            <li><i class="fas fa-check"></i> Speaking opportunity at the Ball</li>
          </ul>
        </div>
      </div>

      <div class="tier-card">
        <div class="tier-header gold">
          <p class="tier-name">Gold Sponsor</p>
          <p class="tier-amount">$10,000–$24,999</p>
        </div>
        <div class="tier-body">
          <ul>
            <li><i class="fas fa-check"></i> Reserved table for 10 guests</li>
            <li><i class="fas fa-check"></i> Half-page program advertisement</li>
            <li><i class="fas fa-check"></i> Logo on website homepage</li>
            <li><i class="fas fa-check"></i> Social media recognition</li>
            <li><i class="fas fa-check"></i> Recognition from the stage</li>
          </ul>
        </div>
      </div>

      <div class="tier-card">
        <div class="tier-header silver">
          <p class="tier-name">Silver Sponsor</p>
          <p class="tier-amount">$5,000–$9,999</p>
        </div>
        <div class="tier-body">
          <ul>
            <li><i class="fas fa-check"></i> Reserved table for 10 guests</li>
            <li><i class="fas fa-check"></i> Quarter-page program advertisement</li>
            <li><i class="fas fa-check"></i> Website recognition</li>
            <li><i class="fas fa-check"></i> Social media recognition</li>
          </ul>
        </div>
      </div>

      <div class="tier-card">
        <div class="tier-header bronze">
          <p class="tier-name">Bronze Sponsor</p>
          <p class="tier-amount">$1,000–$4,999</p>
        </div>
        <div class="tier-body">
          <ul>
            <li><i class="fas fa-check"></i> Program listing</li>
            <li><i class="fas fa-check"></i> Website recognition</li>
            <li><i class="fas fa-check"></i> Social media mention</li>
            <li><i class="fas fa-check"></i> Complimentary tickets</li>
          </ul>
        </div>
      </div>

    </div>

    <!-- In-Kind -->
    <div class="tier-inkind reveal">
      <i class="fas fa-gift" aria-hidden="true"></i>
      <div>
        <h4>In-Kind Sponsorship</h4>
        <p>We gratefully accept in-kind contributions including venue support, catering, photography, printing, floral arrangements, and other event services. In-kind sponsors receive program recognition and social media mentions proportionate to the value of their contribution.</p>
      </div>
    </div>

    <div class="reveal" style="text-align:center; margin-top:36px;">
      <a href="/contact.php?subject=Sponsorship" class="btn btn-blue">
        <i class="fas fa-handshake"></i> Inquire About Sponsorship
      </a>
    </div>

  </div>
</section>


<!-- ============================================================
     MEMBERSHIP DUES
     ============================================================ -->
<section class="membership-section" id="dues" aria-labelledby="membership-heading">
  <div class="container">
    <div class="membership-inner">

      <div class="membership-text reveal-left">
        <div class="eyebrow" style="margin-bottom:14px;">Ladies' Auxiliary</div>
        <h2 id="membership-heading">Join or Renew Your Membership</h2>
        <p>The Ladies' Auxiliary of Arlington is open to all women in the community. Annual membership dues support the organization's operations and keep the Ball running year after year.</p>
        <p>As a member, you'll be part of a passionate group of volunteers who have kept this 65-year tradition alive — planning, organizing, and hosting one of Arlington's most anticipated annual events.</p>
        <div class="membership-perks">
          <div class="perk-item"><i class="fas fa-star"></i> Help plan Arlington's premier annual charity gala</div>
          <div class="perk-item"><i class="fas fa-users"></i> Join ~60 dedicated community volunteers</div>
          <div class="perk-item"><i class="fas fa-heart"></i> Directly impact thousands of Arlington youth</div>
          <div class="perk-item"><i class="fas fa-calendar-alt"></i> Monthly meetings &amp; special planning events</div>
          <div class="perk-item"><i class="fas fa-ticket-alt"></i> Access to Ball events and behind-the-scenes</div>
        </div>
        <a href="/contact.php?subject=auxiliary" class="btn btn-blue">
          <i class="fas fa-user-plus"></i> Apply for Membership
        </a>
      </div>

      <div class="membership-card reveal-right">
        <i class="fas fa-crown" aria-hidden="true"></i>
        <h3>Annual Membership Dues</h3>
        <p>Dues are collected annually and help cover organizational expenses so that Ball proceeds can go entirely to the Boys &amp; Girls Clubs.</p>
        <a href="/contact.php?subject=Membership%20Dues" class="btn btn-primary" style="width:100%; justify-content:center;">
          <i class="fas fa-envelope"></i> Contact Us for Dues Info
        </a>
        <p style="color:rgba(255,255,255,.4); font-size:.75rem; margin-top:14px;">
          Current members can also contact us to renew by mail.
        </p>
      </div>

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

<!-- FAQ Accordion JS -->
<script>
document.querySelectorAll('.faq-q').forEach(btn => {
  btn.addEventListener('click', () => {
    const item   = btn.closest('.faq-item');
    const answer = item.querySelector('.faq-a');
    const isOpen = item.classList.contains('open');

    // Close all
    document.querySelectorAll('.faq-item.open').forEach(openItem => {
      openItem.classList.remove('open');
      openItem.querySelector('.faq-q').setAttribute('aria-expanded', 'false');
      openItem.querySelector('.faq-a').hidden = false; // keep in DOM for animation
    });

    if (!isOpen) {
      item.classList.add('open');
      btn.setAttribute('aria-expanded', 'true');
      answer.hidden = false;
    }
  });
});
</script>

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