---
import { readItems, readSingleton } from '@directus/sdk';

import type { Post } from '@lib/directusTypes';

import directus from '@lib/directus';
import BaseLayout from '@layouts/BaseLayout.astro';
import BlogSelectedArticles from '@components/blog/BlogSelectedArticles.astro';
import BlogRecentArticles from '@components/blog/BlogRecentArticles.astro';
import HeroSection from '@components/ui/sections/HeroSection.astro';
import blogImg from '@images/autumn_tree.png';

const global = await directus.request(readSingleton('site_global'));
const posts = await directus.request(
  readItems('posts', {
    filter: { published: { _eq: true } },
    fields: ['*'],
    sort: ['-published_date'],
  })
);
const selectedPosts: Post[] = posts.filter((p) => p.selected).slice(0, 4);
const recentPosts: Post[] = posts.filter(
  (p) => !selectedPosts.some((selected) => selected.slug === p.slug)
).slice(0, 6);
---

<BaseLayout
  title="Blog"
  description={global.about_blog}
  structuredData={{
    '@context': 'https://schema.org',
    '@type': 'WebPage',
    inLanguage: 'en-US',
    '@id': Astro.url.href,
    url: Astro.url.href,
    name: `Blog | ${global.name}`,
    description: global.about_blog,
    isPartOf: {
      '@type': 'WebSite',
      url: global.site_url,
      name: global.name,
      description: global.about,
    },
  }}
>
  <HeroSection title="Blog" subTitle={global.about_blog} src={blogImg} alt={global.blog_image_alt} />

  <BlogSelectedArticles posts={selectedPosts} />
  <BlogRecentArticles posts={recentPosts} />
</BaseLayout>

<script>
  // Add smooth reveal animations for content after loading
  document.addEventListener('astro:page-load', () => {
    const animateContent = () => {
      // Animate group 1
      const smoothReveal = document.querySelectorAll('.smooth-reveal');
      smoothReveal.forEach((el, index) => {
        setTimeout(
          () => {
            el.classList.add('animate-reveal');
          },
          200 + index * 300
        );
      });

      // Animate group 2
      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
      smoothReveal2.forEach((el, index) => {
        setTimeout(
          () => {
            el.classList.add('animate-reveal');
          },
          500 + index * 100
        );
      });

      // Animate topic cards with staggered delay
      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
      smoothRevealCards.forEach((el, index) => {
        setTimeout(
          () => {
            el.classList.add('animate-reveal');
          },
          1000 + index * 250
        );
      });

      // Animate with just fade in with staggered delay
      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
      smoothRevealFade.forEach((el, index) => {
        setTimeout(
          () => {
            el.classList.add('animate-reveal-fade');
          },
          100 + index * 250
        );
      });
    };

    animateContent();
  });
</script>