<script>
  /* eslint-disable svelte/no-at-html-tags -- JSON-LD is serialized and script-safe */
  import { page } from '$app/state';
  import { locale } from '$lib/translations';

  /**
   * @typedef {Object} Props
   * @property {string} title Document `<title>` and primary SEO title.
   * @property {string} description Meta description (search snippets).
   * @property {string} keywords Comma-separated keywords (legacy / some crawlers).
   * @property {string} ogTitle Open Graph title (share cards).
   * @property {string} ogDescription Open Graph description.
   * @property {string} ogImage Absolute URL to preview image (HTTPS recommended).
   * @property {string} [twitterDescription] Twitter description; falls back to `ogDescription` when omitted.
   * @property {'website' | 'article'} [ogType] `og:type` for Facebook / LinkedIn previews.
   * @property {string} [ogImageAlt] Descriptive alt text for the preview image.
   * @property {string} [robots] Robots directive; default index, follow.
   * @property {string} [author] Author meta and `article:author` when `ogType` is `article`.
   * @property {string | null} [jsonLd] Serialized JSON-LD (`JSON.stringify`); injected as `application/ld+json`.
   */

  /** @type {Props} */
  let {
    title,
    description,
    keywords,
    ogTitle,
    ogDescription,
    ogImage,
    twitterDescription: twitterDescriptionProp,
    ogType = 'website',
    ogImageAlt = '',
    robots = 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
    author = 'Leonardo Murça',
    jsonLd = null,
  } = $props();

  const twitterDescription = $derived(
    twitterDescriptionProp ?? ogDescription,
  );

  const siteName = 'Leonardo Murça';

  const canonicalUrl = $derived(
    `${page.url.origin}${page.url.pathname || '/'}`,
  );

  const ogLocale = $derived(
    $locale === 'pt-BR' ? 'pt_BR' : 'en_US',
  );

  const alternateLocale = $derived(
    $locale === 'pt-BR' ? 'en_US' : 'pt_BR',
  );

  const imageAlt = $derived(ogImageAlt || ogTitle);
</script>

<svelte:head>
  <title>{title}</title>

  <link rel="canonical" href={canonicalUrl} />

  <meta name="description" content={description} />
  <meta name="keywords" content={keywords} />
  <meta name="author" content={author} />
  <meta name="robots" content={robots} />
  <meta name="googlebot" content={robots} />

  <meta property="og:site_name" content={siteName} />
  <meta property="og:title" content={ogTitle} />
  <meta property="og:description" content={ogDescription} />
  <meta property="og:url" content={canonicalUrl} />
  <meta property="og:type" content={ogType} />
  <meta property="og:locale" content={ogLocale} />
  <meta property="og:locale:alternate" content={alternateLocale} />

  <meta property="og:image" content={ogImage} />
  <meta property="og:image:secure_url" content={ogImage} />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content={imageAlt} />

  {#if ogType === 'article'}
    <meta property="article:author" content={author} />
  {/if}

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

  {#if jsonLd}
    {@html `<script type="application/ld+json">${jsonLd.replace(/</g, '\\u003c')}</script>`}
  {/if}
</svelte:head>
