<script lang="ts">
    import LinkedInIcon from './Icon/LinkedIn.svelte';
    import GithubIcon from './Icon/Github.svelte';
    import ExternalLinkIcon from './Icon/ExternalLink.svelte';
</script>

<footer class="footer">
    <div class="container">
        <p class="copyright">
            © <span id="copyright-year">2026</span> mifi Ventures, LLC. All rights reserved.
        </p>
        <nav class="footer-links footer-links-wrap" aria-label="Footer links">
            <a
                class="link"
                href="https://linkedin.com/in/the-mifi"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="LinkedIn profile (opens in new tab)"
                data-umami-event="footer link"
                data-umami-event-label="linkedin"
            >
                <LinkedInIcon size={15} />
                LinkedIn
                <ExternalLinkIcon aria-label="Opens in new tab" size={15} />
            </a>
            <a
                class="link"
                href="https://github.com/the-mifi"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="GitHub profile (opens in new tab)"
                data-umami-event="footer link"
                data-umami-event-label="github"
            >
                <GithubIcon size={15} />
                GitHub
                <ExternalLinkIcon aria-label="Opens in new tab" size={15} />
            </a>
            <a
                class="link"
                href="/privacy-policy"
                data-umami-event="footer link"
                data-umami-event-label="privacy-policy"
            >
                Privacy Policy
            </a>
            <a
                class="link"
                href="/terms-of-service"
                data-umami-event="footer link"
                data-umami-event-label="terms-of-service"
            >
                Terms of Service
            </a>
        </nav>
        <p class="legal-notice">
            We improve our products and advertising by using Google Analytics and
            Microsoft Clarity to see how you use our website. By using our site, you agree
            that we and Microsoft can collect and use this data. Our <a
                href="/privacy-policy">privacy policy</a
            > has more details.
        </p>
    </div>
</footer>

<style>
    .footer {
        padding: var(--space-xxl) 0 var(--space-xl) 0;
        text-align: center;
        background-color: var(--color-bg);
        border-top: 1px solid var(--color-border);
    }

    .copyright {
        margin-bottom: var(--space-md);
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight-normal);
        color: var(--color-text-tertiary);
        max-width: 100%;
    }

    .footer-links-wrap {
        flex-wrap: wrap;
    }

    .link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
    }

    .legal-notice {
        margin-top: var(--space-md);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-normal);
        color: var(--color-text-tertiary);
        max-width: 100%;
    }

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

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