{% extends "layout.twig" %}

{% block content %}
<div class="container">
  <section role="region" aria-label="Programs">
    <div class="block block--hero block--size-default block--full-width block--blue block--media-video dimple dimple--none">
      <div class="container">
        <div class="block__content">
          <h1 class="block__title">Why Chance Fore Golf?</h1>
          <div class="block__copy">
            <p>
              Experiences are our greatest teacher. We believe in developing programs that are just as fun as they are meaningful,
              where kids feel excited to grow, safe to fail, and better equipped for whatever comes next.
            </p>
          </div>
        </div>

        <div class="block__media">
          <div class="block__video">
            {# Replace this with your real YouTube embed if you have one #}
            <iframe title="About Chance Fore Golf"
                    width="640" height="360"
                    src="https://www.youtube.com/embed/_KgbYrKopYs"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div id="primary" class="content-area">
    <main id="main" class="site-main">
      <article class="page type-page status-publish hentry">
        <div class="entry-content">

          <div class="wp-block-columns is-layout-flex wp-block-columns-is-layout-flex">
            <div class="wp-block-column" style="flex-basis:15%"></div>
            <div class="wp-block-column" style="flex-basis:70%">
              <h2 class="wp-block-heading has-text-align-center" id="h-advancing-through-program">Advancing through the Program</h2>
              <p class="has-text-align-center">
                At each age group, participants focus on character-building and fundamentals while having fun and growing their confidence.
              </p>
            </div>
            <div class="wp-block-column" style="flex-basis:15%"></div>
          </div>

          <div class="tabs">
            <div role="tablist" class="automatic">
              <button id="tab-core-programs" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-core-programs">
                Core Programs
              </button>
              <button id="tab-teen-opportunities" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-teen-opportunities" tabindex="-1">
                Teen Opportunities
              </button>
              <button id="tab-alumni" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-alumni" tabindex="-1">
                Alumni
              </button>
            </div>

            <div class="tabs__content dimple dimple--bg-blue">
              <div class="acf-innerblocks-container">

                <div id="tabpanel-core-programs" role="tabpanel" aria-labelledby="tab-core-programs">
                  <div class="acf-innerblocks-container">
                    <div class="block block--card-carousel">
                      <div class="card-carousel" data-total="4">
                        <div class="card-carousel__item">
                          <img loading="lazy" src="/css/RG3_5957-scaled.jpg" alt="">
                          <div class="card-carousel__body">
                            <h3>Age 7-9</h3>
                            <p>Learn fundamentals and have fun with peers in a safe and encouraging environment.</p>
                          </div>
                        </div>

                        <div class="card-carousel__item">
                          <img loading="lazy" src="/css/RG1_0371.jpg" alt="">
                          <div class="card-carousel__body">
                            <h3>Age 10-11</h3>
                            <p>Develop skills and enthusiasm while reinforcing positive habits on and off the course.</p>
                          </div>
                        </div>

                        <div class="card-carousel__item">
                          <img loading="lazy" src="/css/RG1_8531-scaled.jpg" alt="">
                          <div class="card-carousel__body">
                            <h3>Age 12-13</h3>
                            <p>Explore skills and commitments in a fun, supportive peer environment.</p>
                          </div>
                        </div>

                        <div class="card-carousel__item">
                          <img loading="lazy" src="/css/RG6_3521.jpg" alt="">
                          <div class="card-carousel__body">
                            <h3>Age 14+</h3>
                            <p>Plan for the future, reflect, and apply life and golf skills to new situations.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div id="tabpanel-teen-opportunities" role="tabpanel" aria-labelledby="tab-teen-opportunities" class="is-hidden">
                  <div class="acf-innerblocks-container">
                    <div class="block block--card-carousel">
                      <div class="card-carousel" data-total="3">
                        <div class="card-carousel__item">
                          <img loading="lazy" src="/css/ABC_0341-scaled.jpg" alt="">
                          <div class="card-carousel__body">
                            <h3>Leadership</h3>
                            <p>Teen leadership opportunities to grow confidence and community impact.</p>
                          </div>
                        </div>
                        <div class="card-carousel__item">
                          <img loading="lazy" src="/css/2023-Leadership-Summit_Wk-10034-scaled.jpg" alt="">
                          <div class="card-carousel__body">
                            <h3>Events</h3>
                            <p>Regional and national events that bring teens together through golf and service.</p>
                          </div>
                        </div>
                        <div class="card-carousel__item">
                          <img loading="lazy" src="/css/12-scaled.jpg" alt="">
                          <div class="card-carousel__body">
                            <h3>Scholarships</h3>
                            <p>Guidance and support for continuing education and growth beyond the program.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div id="tabpanel-alumni" role="tabpanel" aria-labelledby="tab-alumni" class="is-hidden">
                  <div class="acf-innerblocks-container">
                    <div class="block block--card-carousel">
                      <div class="card-carousel" data-total="3">
                        <div class="card-carousel__item">
                          <img loading="lazy" src="/css/Alumni-Mixer-8.jpg" alt="">
                          <div class="card-carousel__body">
                            <h3>Join the Network</h3>
                            <p>Stay connected through alumni networking, mentorship, and opportunities.</p>
                          </div>
                        </div>
                        <div class="card-carousel__item">
                          <img loading="lazy" src="/css/DSC_4989.jpg" alt="">
                          <div class="card-carousel__body">
                            <h3>Events</h3>
                            <p>Alumni events supporting networking and professional development.</p>
                          </div>
                        </div>
                        <div class="card-carousel__item">
                          <img loading="lazy" src="/css/0793_mb2092.jpg" alt="">
                          <div class="card-carousel__body">
                            <h3>Volunteer</h3>
                            <p>Give back by helping current participants and supporting program events.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

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

          <h2 class="wp-block-heading has-text-align-center" id="h-building">Building Game Changers</h2>
          <p class="has-text-align-center">We empower kids and teens to be the best version of themselves.</p>

          <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>

          <div class="wp-block-columns is-layout-flex wp-block-columns-is-layout-flex">
            <div class="wp-block-column">
              <div class="wp-block-image is-style-rounded">
                <figure class="aligncenter size-full is-resized">
                  <img loading="lazy" src="/css/globe-2.svg" alt="" style="object-fit:contain;width:150px;height:150px">
                </figure>
              </div>
              <h3 class="wp-block-heading has-text-align-center"><strong>Locations</strong></h3>
              <p class="has-text-align-center">Find a location near you to get started.</p>
              <div class="block block--button block--align-center">
                <a class="btn btn--transparent btn--green-arrow" href="/locations">Find a location near you</a>
              </div>
            </div>

            <div class="wp-block-column">
              <div class="wp-block-image is-style-rounded">
                <figure class="aligncenter size-full is-resized">
                  <img loading="lazy" src="/css/tee-2.svg" alt="" style="object-fit:contain;width:150px;height:150px">
                </figure>
              </div>
              <h3 class="wp-block-heading has-text-align-center"><strong>Expert Coaching</strong></h3>
              <p class="has-text-align-center">Trained coaches create a safe, supportive, and empowering environment.</p>
              <div class="block block--button block--align-center">
                <a class="btn btn--transparent btn--green-arrow" href="/get-involved">Learn more</a>
              </div>
            </div>

            <div class="wp-block-column">
              <div class="wp-block-image is-style-rounded">
                <figure class="aligncenter size-full is-resized">
                  <img loading="lazy" src="/css/shield-2.svg" alt="" style="object-fit:contain;width:150px;height:150px">
                </figure>
              </div>
              <h3 class="wp-block-heading has-text-align-center"><strong>Safe Community</strong></h3>
              <p class="has-text-align-center">Committed to a safe and welcoming environment for all participants.</p>
              <div class="block block--button block--align-center">
                <a class="btn btn--transparent btn--green-arrow" href="/about">View our safety policy</a>
              </div>
            </div>
          </div>

          <div class="block block--cta block--cta-blue">
            <div class="block__content">
              <h2 class="block__title">Additional Programs</h2>
              <div class="block__copy">
                <p>We also offer programs in the community and schools to bring our curriculum to more kids.</p>
              </div>
              <a class="btn btn--navy-bg btn--green-arrow" href="/programs">Learn More</a>
            </div>
          </div>

        </div>
      </article>
    </main>
  </div>
</div>

{# Minimal tabs toggle script (so your tab buttons work without WP/extra JS) #}
<script>
  (function () {
    const tabs = [
      {btn: 'tab-core-programs', panel: 'tabpanel-core-programs'},
      {btn: 'tab-teen-opportunities', panel: 'tabpanel-teen-opportunities'},
      {btn: 'tab-alumni', panel: 'tabpanel-alumni'},
    ];

    function activate(id) {
      tabs.forEach(t => {
        const b = document.getElementById(t.btn);
        const p = document.getElementById(t.panel);
        const active = (t.btn === id);
        if (b) {
          b.setAttribute('aria-selected', active ? 'true' : 'false');
          b.tabIndex = active ? 0 : -1;
        }
        if (p) {
          if (active) p.classList.remove('is-hidden');
          else p.classList.add('is-hidden');
        }
      });
    }

    tabs.forEach(t => {
      const b = document.getElementById(t.btn);
      if (b) b.addEventListener('click', () => activate(t.btn));
    });
  })();
</script>
{% endblock %}