---
import BaseLayout from '../layouts/BaseLayout.astro';
import DynamicIcon from '../utils/DynamicIcon.tsx';

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

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

const skills = await directus.request(
  readItems('skills', {
    fields: ['*'],
  })
);
---

<BaseLayout title="About Me" description={global.description}>
  <div
    class="theme-transition-all mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-12 md:py-16"
    transition:animate="slide"
  >
    <!-- Hero Section -->
    <div class="relative mb-12 sm:mb-16 md:mb-20">
      <div class="relative grid grid-cols-1 items-center gap-8 md:grid-cols-2 md:gap-12">
        <div class="hero-text order-2 text-center md:order-1 md:text-left">
          <h1
            class="theme-transition-color hero-text mb-4 text-3xl font-bold tracking-tight text-zinc-900 sm:mb-6 sm:text-4xl md:text-5xl dark:text-zinc-100"
          >
            Hello, I'm <span
              class="theme-transition-all bg-gradient-to-r from-zinc-500 to-zinc-900 bg-clip-text text-transparent dark:from-zinc-300 dark:to-zinc-100"
              >{global.name}</span
            >
          </h1>

          <p
            class="theme-transition-color hero-text mb-6 text-lg leading-relaxed text-zinc-600 sm:mb-8 sm:text-xl dark:text-zinc-400"
          >
            {about.background}
          </p>

          <div
            class="social-links-container theme-transition-children flex flex-wrap justify-center gap-4 md:justify-start"
          >
            <!-- Social links remain the same -->
          </div>
        </div>

        <div class="relative order-1 md:order-2">
          <div
            class="theme-transition-all mx-auto aspect-square w-full max-w-[280px] overflow-hidden rounded-3xl border-4 border-white shadow-xl sm:max-w-[320px] sm:border-8 sm:shadow-2xl md:max-w-md dark:border-zinc-800"
          >
            <img
              src=`${process.env.DIRECTUS_URL ?? "https://directus.alexlebens.dev"}/assets/${global.portrait}`
              alt={global.portrait_alt}
              class="h-full w-full object-cover"
              loading="eager"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- About Section -->
    <div class="theme-transition-all mb-16 sm:mb-20 md:mb-24">
      <div class="mx-auto max-w-3xl">
        <h2
          class="theme-transition-color mb-6 flex items-center justify-center text-2xl font-bold text-zinc-900 sm:mb-8 sm:text-3xl md:justify-start dark:text-zinc-100"
        >
          <span
            class="theme-transition-bg mr-4 hidden h-1 w-8 bg-zinc-300 sm:inline-block sm:w-12 dark:bg-zinc-700"
          ></span>
          About Me
          <span
            class="theme-transition-bg ml-4 hidden h-1 w-8 bg-zinc-300 sm:inline-block sm:w-12 dark:bg-zinc-700"
          ></span>
        </h2>

        <div class="theme-transition-all hero-text prose prose-zinc dark:prose-invert max-w-none">
          <p
            class="theme-transition-color hero-text mb-4 text-base leading-relaxed sm:mb-6 sm:text-lg"
          >
            {about.experience}
          </p>

          <p
            class="theme-transition-color hero-text mb-4 text-base leading-relaxed sm:mb-6 sm:text-lg"
          >
            {about.education}
          </p>

          <p
            class="theme-transition-color hero-text mb-4 text-base leading-relaxed sm:mb-6 sm:text-lg"
          >
            {about.certifications}
          </p>
        </div>
      </div>
    </div>

    <!-- Skills Section -->
    <div class="theme-transition-all mb-16 sm:mb-20 md:mb-24">
      <h2
        class="theme-transition-color mb-8 text-center text-2xl font-bold text-zinc-900 sm:mb-12 sm:text-3xl dark:text-zinc-100"
      >
        Tech Stack
      </h2>

      <div class="tech-stack-slider relative overflow-hidden py-4 sm:py-8">
        <!-- Main slider container -->
        <div class="slider-track animate-slide flex">
          {
            [...skills, ...skills, ...skills].map((skill, index) => (
              <div
                key={`${skill.title}-${index}`}
                class="skill-card theme-transition-element mx-2 min-w-[220px] transform rounded-xl border border-zinc-200 bg-white transition-all duration-300 hover:-translate-y-2 hover:scale-105 hover:border-zinc-300 hover:shadow-xl sm:mx-4 sm:min-w-[280px] dark:border-zinc-700 dark:bg-zinc-800/50 dark:hover:border-zinc-600"
              >
                <div class="p-4 sm:p-6">
                  <div class="mb-4 flex items-center justify-between sm:mb-6">
                    <div class="flex items-center gap-2 sm:gap-4">
                      <div class="theme-transition-bg theme-transition-color flex h-8 w-8 transform items-center justify-center rounded-lg bg-zinc-100 text-zinc-800 transition-transform group-hover:rotate-12 sm:h-12 sm:w-12 dark:bg-zinc-800 dark:text-zinc-200">
                        <DynamicIcon name={skill.icon} />
                      </div>
                      <h3 class="theme-transition-color text-base font-semibold text-zinc-900 sm:text-xl dark:text-zinc-100">
                        {skill.title}
                      </h3>
                    </div>
                    <span class="theme-transition-all rounded-full bg-zinc-100 px-2 py-0.5 font-mono text-xs text-zinc-600 sm:px-2.5 sm:py-1 sm:text-sm dark:bg-zinc-800 dark:text-zinc-400">
                      {skill.level}%
                    </span>
                  </div>

                  <div class="theme-transition-bg relative h-1.5 w-full overflow-hidden rounded-full bg-zinc-100 sm:h-2 dark:bg-zinc-700">
                    <div
                      class="progress-bar-animate theme-transition-bg absolute top-0 left-0 h-full rounded-full bg-gradient-to-r from-zinc-700 via-zinc-600 to-zinc-800 transition-all duration-1000 dark:from-zinc-300 dark:via-zinc-400 dark:to-zinc-200"
                      style={`width: ${skill.level}%`}
                    />
                  </div>

                  <div class="theme-transition-color mt-1 flex justify-between font-mono text-[10px] text-zinc-400 sm:mt-2 sm:text-xs dark:text-zinc-500">
                    <span>Beginner</span>
                    <span>Advanced</span>
                  </div>
                </div>
              </div>
            ))
          }
        </div>

        <!-- Gradient overlays for smooth fade effect -->
        <div
          class="theme-transition-bg absolute top-0 bottom-0 left-0 z-10 w-12 bg-gradient-to-r from-white to-transparent sm:w-24 dark:from-zinc-900"
        >
        </div>
        <div
          class="theme-transition-bg absolute top-0 right-0 bottom-0 z-10 w-12 bg-gradient-to-l from-white to-transparent sm:w-24 dark:from-zinc-900"
        >
        </div>
      </div>
    </div>
    <!-- Contact Section -->
    <div class="theme-transition-all mx-auto max-w-3xl text-center">
      <h2
        class="theme-transition-color mb-4 text-2xl font-bold text-zinc-900 sm:mb-6 sm:text-3xl dark:text-zinc-100"
      >
        Get in Touch
      </h2>
      <p
        class="theme-transition-color mb-6 text-base text-zinc-600 sm:mb-8 sm:text-lg dark:text-zinc-400"
      >
        I'm always open to new opportunities and collaborations. If you'd like to work together or
        just say hello, feel free to reach out.
      </p>
      <div class="group">
        <a
          href=`mailto:${global.email}`
          class="theme-transition-all inline-flex items-center justify-center rounded-lg bg-zinc-900 px-6 py-3 text-base font-medium text-zinc-100 transition-colors group-hover:bg-blue-600 group-hover:text-zinc-100 sm:px-8 sm:py-4 sm:text-lg dark:bg-zinc-100 dark:text-zinc-900 dark:group-hover:bg-blue-600 dark:group-hover:text-zinc-100"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="mr-2 h-4 w-4 sm:h-5 sm:w-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
            ></path>
          </svg>
          <span class="relative inline-block overflow-hidden">
            <span class="relative z-10">Say Hello</span>
            <span
              class="absolute bottom-0 left-0 h-0.5 w-0 bg-zinc-100 transition-all duration-300 group-hover:w-full"
            ></span>
          </span>
        </a>
      </div>
    </div>
  </div>
</BaseLayout>

<script>
  document.addEventListener('astro:page-load', () => {
    // Add smooth reveal animations for content after loading
    const animateContent = () => {
      const heroElements = document.querySelectorAll(
        '.hero-text ~ div, .hero-text h1, .hero-text span, .hero-text p'
      );
      heroElements.forEach((el, index) => {
        setTimeout(
          () => {
            el.classList.add('animate-reveal');
          },
          100 + index * 150
        );
      });
    };

    animateContent();

    // Create seamless infinite scrolling effect
    const sliderTrack = document.querySelector('.slider-track');
    function setupInfiniteScroll() {
      const cards = document.querySelectorAll('.skill-card');
      if (!cards.length) return;

      // Set proper animation based on screen size
      function updateScrollAnimation() {
        if (window.innerWidth >= 640) {
          sliderTrack.style.animation = 'scroll 60s linear infinite';
        } else {
          sliderTrack.style.animation = 'scroll 40s linear infinite';
        }
      }

      updateScrollAnimation();
      window.addEventListener('resize', updateScrollAnimation);
    }

    setupInfiniteScroll();

    // Pause animation on hover/touch
    sliderTrack?.addEventListener('mouseenter', () => {
      sliderTrack.style.animationPlayState = 'paused';
    });

    sliderTrack?.addEventListener('touchstart', () => {
      sliderTrack.style.animationPlayState = 'paused';
    });

    sliderTrack?.addEventListener('mouseleave', () => {
      sliderTrack.style.animationPlayState = 'running';
    });

    sliderTrack?.addEventListener('touchend', () => {
      setTimeout(() => {
        sliderTrack.style.animationPlayState = 'running';
      }, 1000); // Delay resuming animation after touch
    });

    // Add hover effects to cards - only on non-touch devices
    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    const cards = document.querySelectorAll('.skill-card');

    if (!isTouchDevice) {
      cards.forEach((card) => {
        card.addEventListener('mousemove', (e) => {
          const rect = card.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;

          const centerX = rect.width / 2;
          const centerY = rect.height / 2;

          const angleX = (y - centerY) / 15;
          const angleY = (centerX - x) / 15;

          card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.08) translateZ(20px)`;

          // Dynamic shadow based on tilt
          const shadowX = (x - centerX) / 25;
          const shadowY = (y - centerY) / 25;
          card.style.boxShadow = `
            ${shadowX}px ${shadowY}px 20px rgba(0, 0, 0, 0.1),
            0 10px 20px rgba(0, 0, 0, 0.05)
          `;
        });

        card.addEventListener('mouseleave', () => {
          card.style.transform = '';
          card.style.boxShadow = '';
        });
      });
    } else {
      // Simpler effects for touch devices
      cards.forEach((card) => {
        card.addEventListener('touchstart', () => {
          card.classList.add('is-touched');
        });

        card.addEventListener('touchend', () => {
          setTimeout(() => {
            card.classList.remove('is-touched');
          }, 300);
        });
      });
    }

    // Handle theme transition
    document.addEventListener('themeChange', () => {
      cards.forEach((card, index) => {
        setTimeout(() => {
          card.classList.add('theme-changing');
          setTimeout(() => {
            card.classList.remove('theme-changing');
          }, 600);
        }, index * 50);
      });
    });
  });
</script>

<style>
  /* Tech Stack Slider */
  .slider-track {
    width: fit-content;
    animation: scroll 40s linear infinite;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-220px * 6 - 16px * 6)); /* Card width + margin for mobile */
    }
  }

  @media (min-width: 640px) {
    .slider-track {
      animation: scroll 60s linear infinite;
    }

    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(calc(-280px * 6 - 32px * 6)); /* Card width + margin for desktop */
      }
    }
  }

  .tech-stack-slider:hover .slider-track {
    animation-play-state: paused;
  }

  .skill-card {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
  }

  .skill-card:hover {
    z-index: 10;
  }

  /* Reduce animation complexity on mobile */
  @media (max-width: 640px) {
    .skill-card {
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    }

    .skill-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    }
  }

  .skill-card:before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 70%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
  }

  .skill-card:hover:before {
    opacity: 1;
  }

  .progress-bar-animate {
    position: relative;
    overflow: hidden;
  }

  .progress-bar-animate:after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: progress-shine 2s infinite;
  }

  @keyframes progress-shine {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
  }

  /* Touch targets for mobile */
  @media (max-width: 640px) {
    a,
    button {
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    .social-link {
      min-width: 44px;
      min-height: 44px;
    }
  }

  /* Content reveal animations */
  .hero-text h1,
  .hero-text span,
  .hero-text p,
  .hero-text ~ div {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.8s ease,
      transform 0.8s ease;
  }

  .animate-reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Theme transition effect */
  :global(.theme-switching) .theme-transition-element {
    animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Smooth card transition during theme switch */
  .skill-card.theme-transition-element {
    transition:
      background-color var(--theme-transition),
      border-color var(--theme-transition),
      color var(--theme-transition),
      box-shadow var(--theme-transition),
      transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
</style>