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

import directus from '@lib/directus';
import BaseLayout from '@layouts/BaseLayout.astro';
import HeroSection from '@components/sections/HeroSection.astro';
import ExperienceSection from '@components/sections/ExperienceSection.astro';
import EducationSection from '@components/sections/EducationSection.astro';
import ProjectSection from '@components/sections/ProjectSection.astro';
import SkillsSliderSection from '@components/sections/SkillsSliderSection.astro';

import portraitImg from '@images/portrait.avif';

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

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

  <HeroSection
    title="About Me"
    subTitle={global.about}
    src={portraitImg}
    alt={global.portrait_alt}
    rounded={true}
  />

  <section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
    <div class="flex flex-col gap-y-24 md:gap-y-32">
      <ExperienceSection className="smooth-reveal" />
      <EducationSection className="smooth-reveal" />
      <ProjectSection className="smooth-reveal" />
      <SkillsSliderSection className="smooth-reveal" />
    </div>
  </section>

</BaseLayout>

<script>
  // Add smooth reveal animations for content after loading
  document.addEventListener('astro:page-load', () => {
    const animateContent = () => {
      const smoothReveal = document.querySelectorAll('.smooth-reveal');
      smoothReveal.forEach((el, index) => {
        setTimeout(
          () => {
            el.classList.add('animate-reveal');
          },
          50 + 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>