---
import { Image } from 'astro:assets';
import release from '../data/release.json';
import slideStable from '../assets/slides/slide-vicibox-12.png';
import slideBeta from '../assets/slides/slide-vicibox-13-beta.png';
import slideDocs from '../assets/slides/slide-docs.png';
import slideCluster from '../assets/slides/slide-cluster.png';

// Unlike VICIdial/VICIhost (which rotate their latest blog posts), ViciBox has
// only a handful of posts, so the slides are a fixed list. Banners are 930x354
// in the same style as the other sites: artwork on the left, text box on the right.
const slides = [
  {
    title: `ViciBox Server v.${release.stable.version}`,
    text: 'The official installation ISO for the VICIdial Contact Center Suite. Download the standard or MD Software RAID1 installer and have VICIdial running in no time.',
    href: '/server',
    image: slideStable,
  },
  {
    title: `ViciBox v.${release.beta.version} available for testing`,
    text: 'The next major ViciBox release is in beta. Help us test it on non-production systems and report what you find on the forum.',
    href: release.beta.post,
    image: slideBeta,
  },
  {
    title: 'Installation Manual',
    text: 'Step-by-step instructions for express single-server installs, multi-server clusters, and everything in between.',
    href: 'https://docs.vicibox.com/',
    image: slideDocs,
  },
  {
    title: 'Multi-Server Clusters',
    text: 'ViciBox automatically configures new servers into a VICIdial cluster, so scaling from a few agents to hundreds is straightforward.',
    href: '/server',
    image: slideCluster,
  },
];
---

<div id="slider">
  <div id="slideshow" class="splide">
    <div class="splide__track">
      <ul class="splide__list">
        {slides.map((slide) => (
          <li class="splide__slide">
            <a href={slide.href}>
              <Image src={slide.image} alt={slide.title} width={930} height={354} />
              <div class="post-slide">
                <h2>{slide.title}</h2>
                <p>{slide.text}<span class="read-more">Read More...</span></p>
              </div>
            </a>
          </li>
        ))}
      </ul>
    </div>
  </div>
</div>

<script>
  import Splide from '@splidejs/splide';

  document.addEventListener('DOMContentLoaded', () => {
    const el = document.getElementById('slideshow');
    if (el) {
      new Splide(el, {
        type: 'loop',
        autoplay: true,
        interval: 5000,
        arrows: true,
        pagination: true,
        height: 354,
      }).mount();
    }
  });
</script>

<style>
  #slideshow img {
    width: 100%;
    height: 354px;
    object-fit: cover;
  }
</style>