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

import directus from '@lib/directus';
import BaseLayout from '@layouts/BaseLayout.astro';
import HeroSection from '@components/sections/HeroSection.astro';
import FeaturesSection from '@components/sections/FeaturesSection.astro';
import WeatherSection from '@components/sections/WeatherSection.astro';
import LatestPostsSection from '@components/sections/LatestPostsSection.astro';
import GiteaSection from '@components/sections/GiteaSection.astro';

import homeImg from '@images/autumn_mountain.png';

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

<BaseLayout
  title="Home"
  description={global.about_description}
  structuredData={{
    '@context': 'https://schema.org',
    '@type': 'WebPage',
    inLanguage: 'en-US',
    '@id': Astro.url.href,
    url: Astro.url.href,
    name: `Home | ${global.name}`,
    description: global.about_description,
    isPartOf: {
      '@type': 'WebSite',
      url: global.site_url,
      name: global.name,
      description: global.about,
    },
  }}
>
  <HeroSection
    title={`Hello, I'm <span class="text-steel dark:text-steel">Alex Lebens</span>`}
    subTitle={global.about_description}
    primaryBtn="About Me"
    primaryBtnURL="/about"
    src={homeImg}
    alt={global.home_image_alt}
  />

  <FeaturesSection />

  <WeatherSection
    server:defer
    latitude={weather.latitude} 
    longitude={weather.longitude} 
    cityName={weather.location}
    timezone={weather.timezone}
  >
  </WeatherSection>

  <LatestPostsSection />

  <GiteaSection
    title="Follow me on Gitea"
    subTitle="I love open source and have my code availabile on my Gitea server."
    url="https://gitea.alexlebens.dev"
  />
</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 * 250
        );
      });

      // Animate topic cards with staggered delay
      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
      smoothRevealCards.forEach((el, index) => {
        setTimeout(
          () => {
            el.classList.add('animate-reveal');
          },
          400 + 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();

    const observer = new MutationObserver(() => {
      animateContent();
    });

    observer.observe(document.body, { childList: true, subtree: true });
  });
</script>