{% extends "layout.twig" %}

{% block content %}
<section role="region" aria-label="Homepage">
  <div class="block block--hero block--size-hero block--full-width block--blue block--media-image dimple dimple--hero">
    <div class="container">
      <div class="block__content">
        <h1 class="block__title">Building Game Changers</h1>
        <div class="block__copy">
          <p>We’re empowering kids and teens through the game of golf.</p>
        </div>

        {# ZIP SEARCH (keeps your CSS classes) #}
        <form class="location__search-form" method="get" action="/locations">
          <span class="facetwp-input-wrap">
            <i class="facetwp-icon locate-me"></i>
            <input type="text" name="zip" class="location-finder-address in-hero" value="" placeholder="Enter your ZIP code" inputmode="numeric" pattern="[0-9]{5}" required>
          </span>
          <button class="btn btn--navy-bg btn--location-finder in-hero" aria-label="Search" type="submit"></button>
        </form>
      </div>

      <div class="block__media">
        <img width="640" height="659" src="/css/Homepage-Female-994x1024.webp" class="block__img" alt="">
      </div>
    </div>
  </div>
</section>

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

        <!-- WHAT'S HAPPENING -->
        <div class="block block--sort-articles block--full-width">
          <div class="container">
            <div class="block__content">
              <div class="block__header">
                <div class="inner__header">
                  <h2 class="block__title h3__mimic">What's Happening</h2>
                </div>
              </div>

              <div class="cards cards--archive cards--news cards--row-four dimple dimple--bg-blue">
                {% for a in articles %}
                  <div class="card card--archive">
                    <a class="card__link" href="/stories/{{ a.slug }}">
                      <div class="card__media">
                        <img loading="lazy" width="400" height="300" src="{{ a.image_url }}" class="card__img" alt="">
                      </div>
                      <div class="card__content">
                        <h3 class="card__title h6__mimic">{{ a.title }}</h3>
                      </div>
                    </a>
                  </div>
                {% else %}
                  <div style="padding:14px;color:#fff;">No articles yet.</div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>

        <!-- WELCOME -->
        <div class="block block--text-media block--img-align-left">
          <div class="block__media border border--blue">
            <img width="640" height="428" src="/css/RG1_6532.jpg" class="attachment-large size-large" alt="" loading="lazy">
          </div>

          <div class="block__content">
            <h2 class="block__title">Welcome to Chance Fore Golf</h2>
            <div class="block__copy">
              <p>Chance Fore Golf is a youth development organization that helps kids build character, confidence, and resilience through golf and life skills.</p>
            </div>
            <a class="btn btn--navy-bg" href="/about" target="_self">Learn More</a>
          </div>
        </div>

        <!-- PROGRAMS -->
        <div class="block block--text-media block--img-align-right">
          <div class="block__media border border--green">
            <img width="640" height="428" src="/css/RG1_0371-1024x684.jpg" class="attachment-large size-large" alt="" loading="lazy">
          </div>

          <div class="block__content">
            <h2 class="block__title">Our Programs</h2>
            <div class="block__copy">
              <p>Experiences are our greatest teacher. Our programs are fun, meaningful, and designed to help kids grow on and off the course.</p>
            </div>
            <a class="btn btn--navy-bg" href="/programs" target="_self">Learn More</a>
          </div>
        </div>

        <!-- CTA -->
        <div class="block block--cta block--cta-blue">
          <div class="block__content">
            <h2 class="block__title">Get Involved</h2>
            <div class="block__copy">
              <p>Your involvement can directly impact the kids we serve. Get involved today and help give kids tools that last a lifetime.</p>
            </div>
            <a class="btn btn--navy-bg btn--green-arrow" href="/get-involved" target="_self">Learn More</a>
          </div>
        </div>

      </div>
    </article>
  </main>
</div>
{% endblock %}