<!-- ============================================================
SCROLLYIMAGESWITCHER
A button-based image and text switcher.

TO USE:
1. Paste ScrollyCore once near the top of the Squarespace page.
2. Paste this block where you want the switcher.
3. Replace the image URLs.
4. Change the button labels.
5. Update the titles and body text.
6. Add or remove switcher panels as needed.

GOOD FOR:
- comparing ideas
- before/after
- multiple perspectives
- timelines
- alternate futures
- systems layers
- showing variations without huge scroll length

BEGINNER KNOBS:
- data-switcher-item links each button to matching text and image panels
- each button, text panel, and image panel must share the same number
- exactly one button, one text panel, and one image panel should start with class="active"
- aria-pressed should be true only on the active button
============================================================ -->

<section class="section">
  <div
    class="section-inner switcher"
    data-switcher
  >

    <!-- ============================================================
    LEFT SIDE: TEXT + BUTTONS
    ============================================================ -->

    <div class="text-card fade-in">

      <div class="section-label">
        Compare views
      </div>

      <h2>
        Use imageSwitcher to let readers explore alternatives.
      </h2>

      <p>
        This pattern swaps images and text without leaving the page.
      </p>

      <!-- BUTTONS -->

      <div class="switcher-buttons" role="group" aria-label="Choose a view">

        <button
          class="switcher-button active"
          type="button"
          data-switcher-item="1"
          aria-pressed="true"
        >
          First view
        </button>

        <button
          class="switcher-button"
          type="button"
          data-switcher-item="2"
          aria-pressed="false"
        >
          Second view
        </button>

        <button
          class="switcher-button"
          type="button"
          data-switcher-item="3"
          aria-pressed="false"
        >
          Third view
        </button>

      </div>

      <!-- IMPORTANT: text panel numbers must match button numbers -->

      <!-- ============================================================
      TEXT PANELS
      ============================================================ -->

      <div
        class="switcher-panel active"
        data-switcher-panel="1"
      >

        <h3>
          First perspective
        </h3>

        <p>
          This text appears when the first button is selected.
        </p>

      </div>

      <div
        class="switcher-panel"
        data-switcher-panel="2"
      >

        <h3>
          Second perspective
        </h3>

        <p>
          This text appears when the second button is selected.
        </p>

      </div>

      <div
        class="switcher-panel"
        data-switcher-panel="3"
      >

        <h3>
          Third perspective
        </h3>

        <p>
          This text appears when the third button is selected.
        </p>

      </div>

    </div>

    <!-- IMPORTANT: image panel numbers must match button numbers -->

    <!-- ============================================================
    RIGHT SIDE: IMAGES
    ============================================================ -->

    <div class="switcher-media fade-in" aria-live="polite">

      <figure
        class="switcher-panel active"
        data-switcher-media="1"
      >

        <img
          src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1600&q=80"
          alt="Describe first image"
        />

        <figcaption class="caption">
          Optional first caption
        </figcaption>

      </figure>

      <figure
        class="switcher-panel"
        data-switcher-media="2"
      >

        <img
          src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?auto=format&fit=crop&w=1600&q=80"
          alt="Describe second image"
        />

        <figcaption class="caption">
          Optional second caption
        </figcaption>

      </figure>

      <figure
        class="switcher-panel"
        data-switcher-media="3"
      >

        <img
          src="https://images.unsplash.com/photo-1511884642898-4c92249e20b6?auto=format&fit=crop&w=1600&q=80"
          alt="Describe third image"
        />

        <figcaption class="caption">
          Optional third caption
        </figcaption>

      </figure>

    </div>

  </div>
</section>