<script lang="ts">
    import Navigation from '$lib/components/Navigation.svelte';
    import { termsOfService } from '$lib/data/terms-of-service';

    const navItems = [{ label: 'Home', href: '/', umamiEventLabel: 'home' }];
</script>

<Navigation items={navItems} page="terms-of-service" />

<main id="main" class="legal-page">
    <div class="container narrow">
        <header id="header" class="legal-header">
            <h1>{termsOfService.title}</h1>
            <p class="legal-last-updated">Last updated: {termsOfService.lastUpdated}</p>
        </header>

        <div class="legal-content">
            {#each termsOfService.intro as para}
                <p>{para}</p>
            {/each}

            {#each termsOfService.sections as section (section.id)}
                <section
                    id={section.id}
                    class="legal-section"
                    aria-labelledby={`${section.id}-heading`}
                >
                    <h2 id={`${section.id}-heading`}>{section.heading}</h2>
                    {#each section.body as para}
                        <p>
                            {#if section.id === 'contact' && para === 'legal@mifi.ventures'}
                                <a href="mailto:legal@mifi.ventures"
                                    >legal@mifi.ventures</a
                                >
                            {:else if section.id === 'contact' && para === 'https://mifi.ventures'}
                                <a href="https://mifi.ventures" rel="noopener noreferrer"
                                    >https://mifi.ventures</a
                                >
                            {:else}
                                {para}
                            {/if}
                        </p>
                    {/each}
                    {#if section.list}
                        <ul>
                            {#each section.list as item}
                                <li>{item}</li>
                            {/each}
                        </ul>
                    {/if}
                </section>
            {/each}
        </div>

        <nav class="legal-cross-links" aria-label="Related legal pages">
            <a href="/privacy-policy">Privacy Policy</a>
        </nav>
    </div>
</main>

<style>
    .legal-page {
        padding: var(--space-xxl) 0;
        background-color: var(--color-bg);
    }

    .narrow {
        max-width: var(--max-narrow-width);
        margin: 0 auto;
        padding: 0 var(--space-md);
    }

    .legal-header {
        margin-bottom: var(--space-xl);
    }

    .legal-header h1 {
        font-family: var(--font-family-heading);
        font-size: var(--font-size-xxl);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-heading);
        color: var(--color-text);
        margin: 0 0 var(--space-sm) 0;
    }

    .legal-last-updated {
        font-size: var(--font-size-medium);
        color: var(--color-text-tertiary);
        margin: 0;
    }

    .legal-content {
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);
        color: var(--color-text);
    }

    .legal-content p {
        margin: 0 0 var(--space-md) 0;
    }

    .legal-section {
        margin-bottom: var(--space-xl);
    }

    .legal-section h2 {
        font-family: var(--font-family-heading);
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-tight);
        color: var(--color-text);
        margin: 0 0 var(--space-md) 0;
    }

    .legal-section ul {
        margin: 0 0 var(--space-md) 0;
        padding-left: var(--space-lg);
    }

    .legal-section li {
        margin-bottom: var(--space-xs);
    }

    .legal-cross-links {
        margin-top: var(--space-xxl);
        padding-top: var(--space-xl);
        border-top: 1px solid var(--color-border);
    }

    .legal-cross-links a {
        color: var(--color-primary);
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    .legal-cross-links a:hover {
        color: var(--color-primary-hover);
    }
</style>
