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

import HeaderSection from '@components/sections/HeaderSection.astro';
import BlogCard from '@components/cards/BlogCard.astro';
import BaseLayout from '@layouts/BaseLayout.astro';
import directus from '@lib/directus';

const global = await directus.request(readSingleton('site_global'));
const posts = await directus.request(
  readItems('posts', {
    filter: { published: { _eq: true } },
    fields: ['*', { category: ['*'] }],
    sort: ['-published_date'],
  })
);
---

<BaseLayout
  title="All Posts"
  description="Browse all articles from every category."
  structuredData={{
    '@context': 'https://schema.org',
    '@type': 'WebPage',
    inLanguage: 'en-US',
    '@id': Astro.url.href,
    url: Astro.url.href,
    name: `All Posts | ${global.name}`,
    description: "Browse all articles from every category.",
    isPartOf: {
      url: `${global.site_url}`,
      name: global.name,
      description: global.about,
    },
  }}
>

  <HeaderSection
    title="All Posts"
    subTitle="Browse all posts from every category."
    btnExists
    btnTitle="To Categories"
    btnURL="/categories"
  />

  <section class="max-w-340 2xl:max-w-full mb-10 px-4 sm:px-6 lg:px-8 py-8 mx-auto mt-10">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {posts.map((b) => 
      <BlogCard post={b} />
      )}
    </div>
  </section>

</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');
          },
          50 + index * 100
        );
      });

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

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

      // 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>