<script lang="ts">
    import type { MediaItem } from '$lib/media.js';
    import Lightbox from '$lib/components/Lightbox.svelte';
    import GalleryFigure from '$lib/components/GalleryFigure.svelte';
    import SiteHeader from '$lib/components/SiteHeader.svelte';

    interface Props {
        data: { mediaItems: MediaItem[] };
    }

    let { data }: Props = $props();

    const title = '64 Armandine St #3 Boston, Massachusetts';
    const description =
        'An inviting blend of comfort and curated art—relaxation guaranteed.';
    const canonical = 'https://armandine.mifi.holdings/';
    const gaId = 'G-QZGFK4MDT4';

    const jsonLd = {
        '@context': 'https://schema.org',
        '@type': 'Place',
        name: title,
        description,
        address: {
            '@type': 'PostalAddress',
            streetAddress: '64 Armandine St #3',
            addressLocality: 'Boston',
            addressRegion: 'MA',
            addressCountry: 'US',
        },
    };
</script>

<svelte:head>
    <title>{title}</title>
    <meta name="description" content={description} />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="canonical" href={canonical} />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:type" content="website" />
    <meta property="og:url" content={canonical} />

    <link
        rel="icon"
        type="image/png"
        sizes="32x32"
        href="/assets/favicon-32x32.png"
    />
    <link
        rel="icon"
        type="image/png"
        sizes="16x16"
        href="/assets/favicon-16x16.png"
    />
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />

    <link rel="preload" href="/assets/js/script.js" as="script" />
    <script defer src="/assets/js/script.js"></script>

    <script
        async
        src="https://www.googletagmanager.com/gtag/js?id={gaId}"
    ></script>
    <script defer src="/assets/js/ga-init.js" data-ga-id={gaId}></script>
    <script
        defer
        src="https://analytics.mifi.holdings/script.js"
        data-website-id="753dc25e-84e9-48fa-b56c-a85ad6da8f87"
        data-performance="true"
    ></script>
    <script
        defer
        src="https://analytics.mifi.holdings/recorder.js"
        data-website-id="753dc25e-84e9-48fa-b56c-a85ad6da8f87"
    ></script>

    {@html `<script type="application/ld+json">${JSON.stringify(jsonLd)}</script>`}
</svelte:head>

<SiteHeader
    tourCaption={data.mediaItems.find((m) => m.name === 'tour')?.caption}
/>
<main>
    <section id="gallery" class="gallery-grid">
        {#each data.mediaItems as item, index (item.name)}
            <GalleryFigure {item} {index} />
        {/each}
    </section>
</main>
<Lightbox />
