<script lang="ts">
  import HeroLogo from '$lib/components/HeroLogo.svelte';
  import IntroText from '$lib/components/IntroText.svelte';
  import VideoCard from '$lib/components/VideoCard.svelte';
  import logo from '$lib/assets/squiggleverse-logo.webp';

  let scrollY = $state(0);

  const description =
    'Squiggleverse is a modular, multi-platform, game-based stealth learning system that teaches grammar, usage, and style through whimsical gameplay.';

  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'Organization',
    name: 'Squiggleverse',
    url: 'https://squiggleverse.com/',
    description,
    sameAs: []
  };
</script>

<svelte:head>
  <title>Squiggleverse | Game-Based Grammar, Usage, and Style Learning</title>
  <meta name="description" content={description} />
  <link rel="canonical" href="https://squiggleverse.com/" />

  <meta property="og:type" content="website" />
  <meta property="og:title" content="Squiggleverse" />
  <meta property="og:description" content="A whimsical game-based learning system for grammar, usage, and style." />
  <meta property="og:image" content="https://squiggleverse.com/og-image.webp" />
  <meta property="og:url" content="https://squiggleverse.com/" />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Squiggleverse" />
  <meta name="twitter:description" content="A whimsical game-based learning system for grammar, usage, and style." />
  <meta name="twitter:image" content="https://squiggleverse.com/og-image.webp" />

  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="icon" href="/favicon.png" type="image/png" />
  <link rel="apple-touch-icon" href="/icons/squiggleverse-icon-192.png" />
  <link rel="manifest" href="/site.webmanifest" />
  <meta name="theme-color" content="#160030" />
  <link rel="preload" as="image" href={logo} type="image/webp" />
  {@html `<script type="application/ld+json">${JSON.stringify(structuredData)}</script>`}
</svelte:head>

<svelte:window bind:scrollY />

<main class="landing-page" style={`--parallax-y: ${Math.min(scrollY, 1200)}px;`}>
  <div class="space-backdrop" aria-hidden="true">
    <div class="star-layer star-layer-dust"></div>
    <div class="star-layer star-layer-far"></div>
    <div class="star-layer star-layer-near"></div>
  </div>

  <h1 class="sr-only">Squiggleverse</h1>

  <section class="hero" aria-label="Squiggleverse landing page">
    <HeroLogo />
    <VideoCard />
    <IntroText />
  </section>

  <footer class="site-footer">
    <p>&copy; 2026 Squiggleverse. All rights reserved.</p>
  </footer>
</main>
