---
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';
import { getDb } from '../lib/db';
import { getSessionUser, SESSION_COOKIE } from '../lib/auth';

interface Props { title: string; description?: string }
const { title, description = 'InsanityLab — Performance. Balance. Longevity. Allenamento personalizzato, piccoli gruppi e benessere a Bologna.' } = Astro.props;

// Overlay annotate: badge coi tag contenuto, solo per utenti loggati con ?annotate=1.
let annotate = false;
if (Astro.url.searchParams.get('annotate') === '1') {
  const tok = Astro.cookies.get(SESSION_COOKIE)?.value;
  annotate = Boolean(tok && getSessionUser(getDb(), tok));
}
---
<!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.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>
    {annotate && (
      <style is:global>
        [data-tag] { outline: 1px dashed #b8a98c; outline-offset: 2px; }
        .tag-badge { position: absolute; z-index: 9999; background: #3a2929; color: #fff;
          font: 600 10px/1.6 monospace; padding: 0 6px; text-decoration: none; opacity: .85; }
        .tag-badge:hover { opacity: 1; background: #9c8b70; }
      </style>
      <script is:inline>
        document.querySelectorAll('[data-tag]').forEach((el) => {
          const a = document.createElement('a');
          a.className = 'tag-badge';
          a.textContent = el.dataset.tag;
          a.href = '/admin/content#' + encodeURIComponent(el.dataset.tag);
          a.target = '_blank';
          document.body.appendChild(a);
          const place = () => {
            const r = el.getBoundingClientRect();
            a.style.top = window.scrollY + r.top - 14 + 'px';
            a.style.left = window.scrollX + r.left + 'px';
          };
          place();
          addEventListener('scroll', place, { passive: true });
          addEventListener('resize', place);
        });
      </script>
    )}
  </body>
</html>
