{% if page.layout == "home-infographic" %}

{%- comment -%}
Carousel Banner: rotates through random collection items
Always shows starlacoll033 first, then shuffles other items
{%- endcomment -%}

{%- assign carousel_items = "" | split: "" -%}

{%- comment -%} Get specific items in order {%- endcomment -%}
{%- assign wanted_ids = "starlacoll033,garycoll009,garycoll005,starlacoll019,starlacoll008,tishacoll006" | split: "," -%}

{%- for wanted_id in wanted_ids -%}
  {%- for item in site.data[site.metadata] -%}
    {%- if item.objectid == wanted_id -%}
      {%- assign carousel_items = carousel_items | push: item -%}
      {%- break -%}
    {%- endif -%}
  {%- endfor -%}
{%- endfor -%}

<style>
#home-banner-carousel {
  position: relative;
  min-height: 380px;
  max-height: 580px;
  background-color: #000;
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 800ms ease-in-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.carousel-slide.active {
  opacity: 1;
  z-index: 1;
}

#home-title-box {
  position: relative;
  z-index: 2;
  padding-top: {{ site.data.theme.home-title-y-padding | default: '5em' }};
  padding-bottom: {{ site.data.theme.home-title-y-padding | default: '5em' }};
}

@media screen and (max-width: 576px) {
  #home-title-box {
    padding-top: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
    padding-bottom: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
  }
}

.carousel-controls {
  position: absolute;
  top: 1rem;
  left: 1.25rem;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.carousel-btn {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.85);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
  font-size: 0.7rem;
  font-weight: 600;
}

.carousel-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.75);
}

.carousel-btn svg {
  width: 14px;
  height: 14px;
}

.carousel-dots {
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 200ms ease;
}

.carousel-dot:hover {
  background: rgba(255, 255, 255, 0.65);
}

.carousel-dot.active {
  background: #ffffff;
  width: 18px;
  border-radius: 3px;
}

@media (max-width: 575px) {
  .carousel-controls {
    top: auto;
    bottom: 0.75rem;
    left: 0.75rem;
    gap: 0.35rem;
  }
  
  .carousel-btn {
    width: 26px;
    height: 26px;
  }
  
  .carousel-btn svg {
    width: 11px;
    height: 11px;
  }
  
  .carousel-dots {
    padding: 0.25rem 0.45rem;
  }
  
  .carousel-dot {
    width: 5px;
    height: 5px;
  }
  
  .carousel-dot.active {
    width: 15px;
  }
}

.featured-image-label {
  position: absolute;
  bottom: 1rem;
  right: 1.25rem;
  z-index: 10;
  padding: 0.35rem 0.6rem;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  transition: all 200ms ease;
}

.featured-image-label:hover {
  border-color: rgba(255, 255, 255, 0.75);
}

.featured-image-label a {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
  display: block;
}

.featured-image-label:hover a {
  color: #ffffff !important;
}

@media (max-width: 575px) {
  .featured-image-label {
    bottom: 0.75rem;
    right: 0.75rem;
    padding: 0.3rem 0.5rem;
  }
  
  .featured-image-label a {
    font-size: 0.65rem;
  }
}
</style>

<div id="home-banner-carousel" class="container-fluid mb-0 p-0">
  <a class="portfolio-site-link"
     href="https://1800nasi.net/category/bqkc/"
     title="Main domain to view exhibitions, programs and media features of {B/qKC}">
    VIEW THE ARCHIVE IN PRACTICE →
  </a>

  {%- comment -%} Carousel slides {%- endcomment -%}
  {%- for item in carousel_items -%}
    <div class="carousel-slide{% if forloop.first %} active{% endif %}"
         data-slide="{{ forloop.index0 }}"
         style="background-image: url('{{ item.image_small | relative_url }}');">
    </div>
  {%- endfor -%}

  <div id="home-title-box" class="position-relative">
    <div class="p-2 text-white bg-dark bg-opacity-75 d-inline-block">
      {% if site.organization-logo-nav %}
        <a class="d-none d-md-block" href="{{ site.organization-link }}">
          <img id="home-banner-logo" src="{{ site.organization-logo-nav | relative_url }}" alt="{{ site.organization-name | escape }} home">
        </a>
      {% endif %}
      <h1 class="display-4 m-0">{{ site.title }}</h1>
      {% if site.tagline %}<p class="mb-0">{{ site.tagline }}</p>{% endif %}
    </div>
  </div>

  {%- comment -%} Carousel controls {%- endcomment -%}
  <div class="carousel-controls">
    <button class="carousel-btn" id="carousel-prev" aria-label="Previous slide">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
    </button>
    
    <div class="carousel-dots">
      {%- for item in carousel_items -%}
        <div class="carousel-dot{% if forloop.first %} active{% endif %}" data-slide="{{ forloop.index0 }}"></div>
      {%- endfor -%}
    </div>

    <button class="carousel-btn" id="carousel-next" aria-label="Next slide">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </button>
  </div>

  {%- comment -%} Featured image label (for current slide) {%- endcomment -%}
  <div class="featured-image-label">
    <a href="#" id="carousel-item-link" title="">Featured Image</a>
  </div>
</div>

<script>
(function() {
  const slides = document.querySelectorAll('.carousel-slide');
  const dots = document.querySelectorAll('.carousel-dot');
  const prevBtn = document.getElementById('carousel-prev');
  const nextBtn = document.getElementById('carousel-next');
  const itemLink = document.getElementById('carousel-item-link');
  
  let currentSlide = 0;
  let autoplayInterval;
  
  let itemData = [
    {%- for item in carousel_items -%}
    {
      objectid: "{{ item.objectid }}",
      title: "{{ item.title | escape }}",
      image: "{{ item.image_small | relative_url }}"
    }{% unless forloop.last %},{% endunless %}
    {%- endfor -%}
  ];
  
  // Shuffle function
  function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }
  
  // Shuffle the data on load
  itemData = shuffle(itemData);
  
  // Apply shuffled images to slides
  slides.forEach((slide, index) => {
    if (itemData[index]) {
      slide.style.backgroundImage = `url('${itemData[index].image}')`;
    }
  });
  
  function showSlide(index) {
    slides.forEach(s => s.classList.remove('active'));
    dots.forEach(d => d.classList.remove('active'));
    
    currentSlide = (index + slides.length) % slides.length;
    
    slides[currentSlide].classList.add('active');
    dots[currentSlide].classList.add('active');
    
    // Update featured image link
    const baseUrl = '{{ "/" | relative_url }}';
    itemLink.href = baseUrl + 'items/' + itemData[currentSlide].objectid + '.html';
    itemLink.title = itemData[currentSlide].title;
  }
  
  function nextSlide() {
    showSlide(currentSlide + 1);
  }
  
  function prevSlide() {
    showSlide(currentSlide - 1);
  }
  
  function startAutoplay() {
    autoplayInterval = setInterval(nextSlide, 5000); // 5 seconds
  }
  
  function stopAutoplay() {
    clearInterval(autoplayInterval);
  }
  
  // Event listeners
  prevBtn.addEventListener('click', () => {
    stopAutoplay();
    prevSlide();
    startAutoplay();
  });
  
  nextBtn.addEventListener('click', () => {
    stopAutoplay();
    nextSlide();
    startAutoplay();
  });
  
  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      stopAutoplay();
      showSlide(index);
      startAutoplay();
    });
  });
  
  // Initialize
  showSlide(0);
  startAutoplay();
})();
</script>

{%- else -%}
{%- comment -%} Non-carousel version for other pages {%- endcomment -%}
<div class="container">
  <div class="container position-relative">
    <a class="portfolio-site-link"
       href="https://1800nasi.net/category/bqkc/"
       title="Main domain to view exhibitions, programs and media features of {B/qKC}">
      ARCHIVE IN PRACTICE →
    </a>
    <div class="row align-items-center">
      <div id="title" class="{% if site.organization-logo-banner %}col-md-9{% else %}col-12{% endif %}">
        <h1 class="mt-2"><a class="text-dark" href="{{ '/' | relative_url }}">{{ site.title }}</a></h1>
        {% if site.tagline %}<p>{{ site.tagline }}</p>{% endif %}
      </div>
      {% if site.organization-logo-banner %}
        <div class="col-md-3 d-none d-lg-block text-end">
          <a class="btn btn-outline-light" href="{{ site.organization-link }}">
            <img class="img-fluid" src="{{ site.organization-logo-banner | relative_url }}" title="{{ site.organization-name }}" alt="{{ site.organization-name | escape }} home">
          </a>
        </div>
      {% endif %}
    </div>
  </div>
</div>
{%- endif -%}