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

import HeroSection from '@components/sections/HeroSection.astro';
import CategorySection from '@components/sections/CategorySection.astro';
import BaseLayout from '@layouts/BaseLayout.astro';
import directus from '@lib/directus';

import categoryImg from '@images/autumn_bench.png';

const global = await directus.request(readSingleton('site_global'));
---

<BaseLayout
  title="All Categories"
  description={global.about_categories}
  structuredData={{
    '@context': 'https://schema.org',
    '@type': 'WebPage',
    inLanguage: 'en-US',
    '@id': Astro.url.href,
    url: Astro.url.href,
    name: `All Categories | ${global.name}`,
    description: global.about_categories,
    isPartOf: {
      '@type': 'WebSite',
      url: global.site_url,
      name: global.name,
      description: global.about,
    },
  }}
>

  <HeroSection
    title="Categories"
    subTitle={global.about_categories}
    src={categoryImg}
    alt={global.categories_image_alt}
  />

  <CategorySection />

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