{% set viewAll = paragraph.field_view_all_link.0 ? paragraph.field_view_all_link.0.url.toString : '' %}

<section id="gallery-section" class="bg-cream py-20 border-b border-gray-200">
  <div class="max-w-container mx-auto px-6 md:px-10">

    <div class="flex items-center justify-between mb-10 pb-6 border-b border-gray-200">
      <div>
        {% if paragraph.field_eyebrow.value %}
          <div class="flex items-center gap-3 mb-2">
            <div class="w-6 h-px bg-teal"></div>
            <span class="section-label text-gray-400">{{ paragraph.field_eyebrow.value }}</span>
          </div>
        {% endif %}
        <h2 class="text-2xl md:text-3xl font-bold text-navy m-0">{{ paragraph.field_title.value }}</h2>
      </div>
      {% if viewAll and paragraph.field_view_all_label.value %}
        <a href="{{ viewAll }}" class="text-[11px] font-bold text-navy/50 hover:text-teal tracking-[0.3em] uppercase transition-colors no-underline">{{ paragraph.field_view_all_label.value }}</a>
      {% endif %}
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">

      {# ---------- Left: events ---------- #}
      <div class="lg:col-span-5 flex flex-col justify-between space-y-4">
        <h3 class="text-lg font-bold text-navy flex items-center gap-2 mb-2 mt-0">
          <span class="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse"></span>
          <span>{{ paragraph.field_events_heading.value }}</span>
        </h3>

        {% if events %}
          {% set featured = events|first %}
          <a href="{{ featured.url }}"
             class="relative rounded-2xl overflow-hidden group hover:shadow-2xl border border-gray-200/90 hover:border-teal/40 transition-all duration-300 flex-1 min-h-[220px] block no-underline">
            {% if featured.image %}
              <img src="{{ featured.image.url }}" alt="{{ featured.image.alt }}" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
            {% endif %}
            <div class="absolute inset-0 bg-gradient-to-t from-navy/95 via-navy/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            {% if featured.live %}
              <span class="absolute top-4 left-4 px-3 py-1 bg-teal text-navy text-[10px] font-bold uppercase tracking-widest rounded-full shadow">{{ 'Live Stream Available'|t }}</span>
            {% endif %}
            <div class="absolute bottom-0 left-0 p-6 text-white">
              <span class="text-[10px] font-bold uppercase tracking-widest text-teal mb-1 block">{{ featured.date }}{% if featured.venue %} • {{ featured.venue }}{% endif %}</span>
              <h4 class="font-bold text-white text-lg leading-snug group-hover:text-teal transition-colors m-0">{{ featured.title }}</h4>
              {% if featured.summary %}<p class="text-xs text-white/70 mt-1 mb-0 line-clamp-2">{{ featured.summary }}</p>{% endif %}
            </div>
          </a>

          {% if events|length > 1 %}
            <div class="space-y-3">
              {% for e in events|slice(1) %}
                <a href="{{ e.url }}" class="flex items-center gap-4 p-4 rounded-xl bg-gray-50/80 border border-gray-200/80 hover:bg-white hover:border-teal/40 hover:shadow-md transition-all duration-300 group no-underline">
                  <div class="flex-shrink-0 w-12 h-14 bg-navy text-white rounded-lg flex flex-col items-center justify-center group-hover:bg-teal group-hover:text-navy transition-colors group-hover:shadow-sm">
                    <span class="text-base font-bold leading-none">{{ e.day }}</span>
                    <span class="text-[9px] font-bold uppercase tracking-widest mt-0.5">{{ e.month }}</span>
                  </div>
                  <div>
                    <h5 class="font-bold text-navy text-sm group-hover:text-teal transition-colors leading-snug m-0">{{ e.title }}</h5>
                    <p class="text-xs text-gray-500 mt-0.5 mb-0">{{ e.venue }}{% if e.venue and e.time %} • {% endif %}{{ e.time }}</p>
                  </div>
                </a>
              {% endfor %}
            </div>
          {% endif %}
        {% else %}
          <p class="text-sm text-gray-500">{{ 'No upcoming events.'|t }}</p>
        {% endif %}
      </div>

      {# ---------- Right: gallery ---------- #}
      <div class="lg:col-span-7 flex flex-col justify-between">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
            <span class="material-symbols-outlined text-teal text-xl">photo_library</span>
            <span>{{ paragraph.field_gallery_heading.value }}</span>
          </h3>
          {% if gallery %}
            <span class="text-xs text-gray-400 font-semibold">{{ gallery|length }} {{ paragraph.field_gallery_count_label.value }}</span>
          {% endif %}
        </div>

        <div class="grid grid-cols-2 md:grid-cols-3 gap-3 flex-1">
          {% for g in gallery %}
            <button type="button"
                    data-lightbox-src="{{ g.large }}"
                    data-lightbox-caption="{{ g.title }}{% if g.location %} — {{ g.location }}{% endif %}"
                    aria-label="{{ g.title }}"
                    class="{{ loop.first ? 'col-span-2 h-52 md:h-auto' : 'h-48 md:h-auto' }} relative rounded-2xl overflow-hidden group shadow-md hover:shadow-xl border border-gray-200/90 hover:border-teal/40 transition-all duration-300 cursor-pointer p-0 bg-transparent text-left">
              <img src="{{ g.thumb }}" alt="{{ g.alt }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
              <div class="absolute inset-0 bg-gradient-to-t from-navy/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-4">
                <div class="text-white">
                  <p class="text-xs font-bold leading-snug m-0">{{ g.title }}</p>
                  {% if g.location %}<p class="text-[10px] text-teal uppercase tracking-widest mt-0.5 mb-0">{{ g.location }}</p>{% endif %}
                </div>
              </div>
              <div class="absolute top-3 right-3 bg-black/40 backdrop-blur text-white p-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
                <span class="material-symbols-outlined text-base">zoom_in</span>
              </div>
            </button>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  {# ---------- Lightbox ---------- #}
  <div data-lightbox-modal role="dialog" aria-modal="true" aria-label="{{ paragraph.field_gallery_heading.value }}"
       class="fixed inset-0 z-[60] bg-black/90 backdrop-blur-md hidden items-center justify-center p-4 md:p-10">
    <button type="button" data-lightbox-close aria-label="{{ 'Close'|t }}"
            class="absolute top-6 right-6 text-white/80 hover:text-white p-2.5 rounded-full bg-white/10 hover:bg-white/20 transition-colors cursor-pointer border-0">
      <span class="material-symbols-outlined text-2xl">close</span>
    </button>
    <button type="button" data-lightbox-prev aria-label="{{ 'Previous'|t }}"
            class="absolute left-4 md:left-8 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2.5 rounded-full bg-white/10 hover:bg-white/20 transition-colors cursor-pointer border-0">
      <span class="material-symbols-outlined text-2xl">chevron_left</span>
    </button>
    <button type="button" data-lightbox-next aria-label="{{ 'Next'|t }}"
            class="absolute right-4 md:right-8 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2.5 rounded-full bg-white/10 hover:bg-white/20 transition-colors cursor-pointer border-0">
      <span class="material-symbols-outlined text-2xl">chevron_right</span>
    </button>
    <div class="max-w-4xl w-full flex flex-col items-center">
      <img data-lightbox-img src="" alt="" class="max-h-[75vh] w-auto rounded-2xl shadow-2xl object-contain border border-white/10">
      <p data-lightbox-caption class="text-white text-base font-semibold mt-4 text-center px-4 mb-0"></p>
    </div>
  </div>
</section>