---
import '../styles/global.css'

export interface Props {
  title?: string
  description?: string
  lang?: string
}

const {
  title = 'Talk Pro - One User. Multiple Worlds.',
  description = 'Talk Pro is a modern messaging app for private chats, group conversations, channels, voice and video calls.',
  lang = 'en',
} = Astro.props
---

<!doctype html>
<html lang={lang}>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description} />
    <title>{title}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  </head>
  <body class="bg-surface font-sans overflow-x-hidden">
    <slot />
    <script src="/site-links-client.js" defer></script>
    <script>
      (() => {
        const header = document.getElementById('site-header');
        const getOffset = () => header ? header.offsetHeight : 0;
        let activeScrollAnimation = 0;

        const easeInOutCubic = (t: number) => (
          t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
        );

        const animateScrollTo = (targetTop: number) => {
          const startTop = window.scrollY;
          const distance = targetTop - startTop;

          if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            window.scrollTo(0, targetTop);
            return;
          }

          if (activeScrollAnimation) {
            cancelAnimationFrame(activeScrollAnimation);
          }

          const duration = Math.min(1300, Math.max(650, Math.abs(distance) * 0.7));
          const startTime = performance.now();

          const step = (now: number) => {
            const elapsed = now - startTime;
            const progress = Math.min(elapsed / duration, 1);
            const easedProgress = easeInOutCubic(progress);

            window.scrollTo(0, startTop + distance * easedProgress);

            if (progress < 1) {
              activeScrollAnimation = requestAnimationFrame(step);
            } else {
              activeScrollAnimation = 0;
            }
          };

          activeScrollAnimation = requestAnimationFrame(step);
        };

        document.querySelectorAll('a[href^="#"]').forEach(link => {
          link.addEventListener('click', e => {
            const href = link.getAttribute('href');
            if (!href || href === '#') return;
            const target = document.querySelector(href);
            if (!target) return;
            e.preventDefault();
            const top = target.getBoundingClientRect().top + window.scrollY - getOffset();
            animateScrollTo(top);
            history.pushState(null, '', href);
          });
        });

        const navLinks = document.querySelectorAll('[data-nav-link]');
        const sections = Array.from(navLinks)
          .map(l => document.querySelector(l.getAttribute('href') ?? ''))
          .filter(Boolean) as Element[];

        if ('IntersectionObserver' in window && sections.length) {
          const observer = new IntersectionObserver(entries => {
            const visible = entries
              .filter(e => e.isIntersecting)
              .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
            if (!visible) return;
            navLinks.forEach(link => {
              const active = link.getAttribute('href') === `#${visible.target.id}`;
              link.classList.toggle('is-active', active);
            });
          }, { rootMargin: '-30% 0px -60% 0px', threshold: 0 });
          sections.forEach(s => observer.observe(s));
        }
      })();
    </script>
  </body>
</html>
