<script lang="ts">
    import { page } from '$app/state';
    import type { FaqList } from '$lib/types/faq';

    const BASE = 'https://mifi.ventures';
    const PAGE_URL = `${BASE}${page.url?.pathname ?? '/'}`;

    const {
        faqList,
        title = 'FAQ',
    }: {
        faqList: FaqList;
        title?: string;
    } = $props();

    const faqPageJsonLd = $derived(
        JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'FAQPage',
            '@id': `${PAGE_URL}#faq`,
            mainEntity: faqList.map((item) => ({
                '@type': 'Question',
                name: item.question,
                acceptedAnswer: {
                    '@type': 'Answer',
                    text: item.answer,
                },
            })),
        }),
    );

    const jsonLdHtml = $derived(
        faqPageJsonLd
            ? '<scr' +
                  'ipt type="application/ld+json">' +
                  faqPageJsonLd +
                  '</scr' +
                  'ipt>'
            : '',
    );
</script>

<section id="faq" class="section faq" aria-labelledby="faq-heading">
    <div class="container narrow">
        <h2 id="faq-heading">{title}</h2>
        <dl class="faq-list">
            {#each faqList as { question, answer }, index (index)}
                <dt>{question}</dt>
                <dd>{answer}</dd>
            {/each}
        </dl>
    </div>
    {#if jsonLdHtml}
        <!-- eslint-disable-next-line svelte/no-at-html-tags -- static trusted JSON-LD -->
        {@html jsonLdHtml}
    {/if}
</section>

<style>
    .faq {
        background-color: var(--color-bg-alt);
    }

    .faq-list {
        margin: 0;

        & dt {
            font-weight: var(--font-weight-semibold);
            color: var(--color-text);
            margin-top: var(--space-xl);
            margin-bottom: var(--space-sm);

            &:first-child {
                margin-top: 0;
            }
        }

        & dd {
            margin: 0 0 0 var(--space-md);
            color: var(--color-text-secondary);
            line-height: var(--line-height-relaxed);
            max-width: var(--max-text-width);
        }
    }
</style>
