---
import { Image } from 'astro:assets';
import BaseLayout from '../layouts/BaseLayout.astro';
import Slideshow from '../components/Slideshow.astro';
import FeaturedBox from '../components/FeaturedBox.astro';
import { getCollection } from 'astro:content';

const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
---

<BaseLayout title="VICIhost.com | Hosted Contact Center Solution">
  <Slideshow />

  <h1 id="heading">Dedicated Contact Center Hosting</h1>

  <FeaturedBox />

  {posts.map((post) => (
  <Fragment key={post.id}>
    <div class="post hentry" id={`post-${post.id}`}>
      <a href={`/blog/${post.data.slug}`}>
        <h2 class="post-title">{post.data.title}</h2>
        {/* 210x150 cropped from left-top, matching the theme's set_post_thumbnail_size().
            The featured images are 930x354 slide banners, so a centre crop would cut off
            the subject, which sits in the left portion. */}
        {post.data.featuredImage && <Image class="attachment-thumbnail" src={post.data.featuredImage} alt={post.data.title} width={210} height={150} fit="cover" position="left top" />}
      </a>
      <p>{post.data.excerpt}<a href={`/blog/${post.data.slug}`} class="read-more">Read the Rest...</a></p>
    </div>
    <br />
    <div class="clear"> </div>
  </Fragment>
  ))}

  <div class="content-ver-sep"> </div>
  <div id="customers-comment">
    <blockquote>Have your Call Center hosted on dedicated hardware in our private cloud of hundreds of servers</blockquote>
  </div>
</BaseLayout>