---
import '@fontsource/montserrat/400.css';
import '@fontsource/montserrat/500.css';
import '@fontsource/montserrat/600.css';
import '@fontsource/montserrat/700.css';
import '@fontsource/open-sans/400.css';
import '@fontsource/open-sans/600.css';
import '../styles/global.css';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';

interface Props { title: string; description?: string }
const { title, description = 'InsanityLab — Performance. Balance. Longevity. Allenamento personalizzato, piccoli gruppi e benessere a Bologna.' } = Astro.props;
---
<!doctype html>
<html lang="it">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title} — InsanityLab</title>
    <meta name="description" content={description} />
    <meta property="og:title" content={`${title} — InsanityLab`} />
    <meta property="og:description" content={description} />
    <meta property="og:type" content="website" />
    <meta property="og:image" content={new URL('/img/og.jpg', Astro.site)} />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <script is:inline>document.documentElement.classList.add('js');</script>
  </head>
  <body>
    <Header />
    <main><slot /></main>
    <Footer />
    <script>
      // Reveal allo scroll: trigger a -100px dal viewport come il template Prowess.
      const io = new IntersectionObserver((entries) => {
        for (const e of entries) {
          if (e.isIntersecting) {
            e.target.classList.add('is-inview');
            io.unobserve(e.target);
            // A reveal concluso l'attributo va tolto, così la transition del reveal
            // non rallenta gli hover su transform del componente.
            e.target.addEventListener('transitionend', () => {
              e.target.removeAttribute('data-reveal');
            }, { once: true });
          }
        }
      }, { rootMargin: '0px 0px -100px 0px' });
      document.querySelectorAll('[data-reveal], .section-heading').forEach((el) => io.observe(el));

      const parallaxEls = document.querySelectorAll<HTMLElement>('[data-parallax]');
      if (parallaxEls.length && matchMedia('(min-width: 992px)').matches
        && !matchMedia('(prefers-reduced-motion: reduce)').matches) {
        let raf = 0;
        const update = () => {
          raf = 0;
          for (const el of parallaxEls) {
            const r = el.getBoundingClientRect();
            // Clamp entro il margine di sfondo (inset -120px) per non scoprire i bordi
            const y = Math.max(-110, Math.min(110, (r.top + r.height / 2 - innerHeight / 2) * -0.3));
            el.style.setProperty('--parallax-y', `${y.toFixed(1)}px`);
          }
        };
        addEventListener('scroll', () => { if (!raf) raf = requestAnimationFrame(update); }, { passive: true });
        update();
      }
    </script>
  </body>
</html>
