---
import '../styles/global.css';
import { SITE, CONTACT, SOCIALS, GENRES } from '../data/site';

interface Props {
  title?: string;
  description?: string;
}

const { title = SITE.title, description = SITE.description } = Astro.props;

const canonical = new URL(Astro.url.pathname, Astro.site ?? SITE.url).href;
const ogImage = new URL('/og-image.jpg', Astro.site ?? SITE.url).href;

const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'MusicGroup',
  name: SITE.name,
  url: SITE.url,
  image: ogImage,
  description: SITE.description,
  genre: GENRES.map((g) => g.name),
  email: CONTACT.email,
  address: {
    '@type': 'PostalAddress',
    addressCountry: 'AT',
  },
  sameAs: SOCIALS.filter((s) => s.url).map((s) => s.url),
};
---

<!doctype html>
<html lang="de-AT" class="scheme-dark">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <meta name="description" content={description} />
    <link rel="canonical" href={canonical} />

    <meta name="theme-color" content="#05070f" />
    <meta name="color-scheme" content="dark" />

    <link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png" />
    <link rel="icon" href="/favicon-192.png" sizes="192x192" type="image/png" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="sitemap" href="/sitemap-index.xml" />

    <meta property="og:type" content="website" />
    <meta property="og:site_name" content={SITE.name} />
    <meta property="og:locale" content="de_AT" />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={canonical} />
    <meta property="og:image" content={ogImage} />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content={`${SITE.name} - Hardstyle, Techno, House, Commerce`} />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={ogImage} />

    <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} is:inline />
  </head>

  <body class="min-h-screen antialiased">
    <a
      href="#about"
      class="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-100 focus:rounded-lg focus:bg-gold-400 focus:px-4 focus:py-2 focus:font-semibold focus:text-ink-950"
    >
      Zum Inhalt springen
    </a>
    <slot />

    <script>
      // Sanftes Einblenden beim Scrollen. Laeuft nur, wenn JS aktiv ist und der
      // Nutzer keine reduzierte Bewegung angefordert hat - ohne das Skript
      // bleibt der Inhalt schlicht sofort sichtbar.
      const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      const targets = document.querySelectorAll<HTMLElement>('[data-reveal]');

      if (!reduced && targets.length > 0 && 'IntersectionObserver' in window) {
        const observer = new IntersectionObserver(
          (entries) => {
            for (const entry of entries) {
              if (!entry.isIntersecting) continue;
              const el = entry.target as HTMLElement;
              const delay = Number(el.dataset.revealDelay ?? 0);
              window.setTimeout(() => (el.dataset.reveal = 'shown'), delay);
              observer.unobserve(el);
            }
          },
          { rootMargin: '0px 0px -12% 0px', threshold: 0.1 },
        );

        for (const el of targets) {
          el.dataset.reveal = 'pending';
          observer.observe(el);
        }
      }
    </script>
  </body>
</html>
