---
import Layout from '@layouts/Layout.astro'
import Hero from '@components/home/Hero.astro'
import FeaturedPostCard from '@components/blog/FeaturedPost.astro';
import Separator from '@components/home/Separator.astro'
import { pb } from '@lib/pocketbase';

const title = 'Redi: Портфолио веб-разработчика | Проекты и статьи'
const description =
  'Портфолио веб-разработчика Redi. Изучите мои проекты, читайте статьи о современных веб-технологиях и свяжитесь со мной для сотрудничества.'

// Получаем избранный пост
import type { Post } from '@globalInterfaces';

let featuredPost: Post | null = null;
try {
  const rawPost = await pb.collection('posts').getFirstListItem('isActive = true && isFeatured = true', {
    sort: '-publishDate',
  });

  featuredPost = {
    id: rawPost.id,
    title: rawPost.title,
    slug: rawPost.slug,
    description: rawPost.description,
    publishDate: rawPost.publishDate,
    tags: rawPost.tags || [],
    content: rawPost.content,
    image: rawPost.image || rawPost.coverImage,
    isFeatured: rawPost.isFeatured,
    isActive: rawPost.isActive
  };
} catch (error) {
  console.log('Нет доступных избранных постов');
}
---

<Layout title={title} description={description} canonicalLink="/">
  <!-- Основной контейнер для всего контента страницы -->
  <div class="relative z-20 mx-auto mt-16 w-full max-w-4xl px-7 md:mt-24 lg:mt-32 xl:px-0">

    <!-- Hero-секция: двухколоночный макет на десктопе -->
    <Hero />
  </div>

  <Separator text="Check out my projects" />
  {featuredPost && (
    <div class="max-w-2xl mx-auto px-7 lg:px-0 mb-16">
      <FeaturedPostCard post={featuredPost} />
    </div>
  )}
</Layout>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const animatedElements = document.querySelectorAll('.animate-on-scroll');

    if (animatedElements.length > 0) {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('is-visible');
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.1 });

      animatedElements.forEach(element => {
        observer.observe(element);
      });
    }
  });
</script>