{{- $logoMobile := resources.Get "images/logo-full-mobile.svg" -}}
{{- $logoDesk := resources.Get "images/logo-full.svg" -}}
<footer class="bg-brand-dark text-white">
    <div class="max-w-7xl mx-auto px-6 md:px-12 lg:px-20 py-12 lg:py-16">
        <div class="flex flex-col lg:flex-row justify-between items-start gap-8">
            <div>
                <a href="/">
                    <img class="md:hidden h-7" src="{{ $logoMobile.RelPermalink }}" alt="Anthias" />
                    <img class="hidden md:block h-7" src="{{ $logoDesk.RelPermalink }}" alt="Anthias" />
                </a>
                <p class="text-white/40 text-sm mt-3 max-w-xs">Open source digital signage for Raspberry Pi and PC. Built by <a class="text-white/70 no-underline hover:text-white transition-colors" href="https://screenly.io" target="_blank" rel="noopener">Screenly</a> &mdash; the secure digital signage company.</p>
            </div>

            <div class="flex flex-wrap gap-12 lg:gap-16">
                <div>
                    <h3 class="text-xs font-semibold uppercase tracking-wider text-white/50 mb-3">Product</h3>
                    <ul class="list-none m-0 p-0 flex flex-col gap-2">
                        <li><a class="text-white/70 no-underline text-sm hover:text-white transition-colors" href="/features/">Features</a></li>
                        <li><a class="text-white/70 no-underline text-sm hover:text-white transition-colors" href="/get-started/">Get Started</a></li>
                        <li><a class="text-white/70 no-underline text-sm hover:text-white transition-colors" href="/faq/">FAQ</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xs font-semibold uppercase tracking-wider text-white/50 mb-3">Resources</h3>
                    <ul class="list-none m-0 p-0 flex flex-col gap-2">
                        <li><a class="text-white/70 no-underline text-sm hover:text-white transition-colors" href="https://github.com/Screenly/Anthias" target="_blank" rel="noopener">GitHub</a></li>
                        <li><a class="text-white/70 no-underline text-sm hover:text-white transition-colors" href="https://forums.screenly.io" target="_blank" rel="noopener">Forum</a></li>
                        <li><a class="text-white/70 no-underline text-sm hover:text-white transition-colors" href="/docs/">Docs</a></li>
                        <li><a class="text-white/70 no-underline text-sm hover:text-white transition-colors" href="/api/">API Reference</a></li>
                        <li><a class="inline-flex items-center gap-1.5 text-white/70 no-underline text-sm hover:text-white transition-colors" href="https://github.com/sponsors/Screenly" target="_blank" rel="noopener">{{ partial "icon.html" (dict "name" "heart" "size" "0.875rem" "class" "text-[#ea4aaa]") }}Sponsor</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xs font-semibold uppercase tracking-wider text-white/50 mb-3">Social</h3>
                    <div class="flex gap-4">
                        <a href="https://www.linkedin.com/company/screenly-inc/" target="_blank" rel="noopener" aria-label="LinkedIn" class="text-white/40 hover:text-white transition-colors">{{ partial "icon.html" (dict "name" "linkedin" "size" "1.25rem") }}</a>
                        <a href="https://www.youtube.com/c/screenlydigitalsignage" target="_blank" rel="noopener" aria-label="YouTube" class="text-white/40 hover:text-white transition-colors">{{ partial "icon.html" (dict "name" "youtube" "size" "1.25rem") }}</a>
                        <a href="https://github.com/Screenly" target="_blank" rel="noopener" aria-label="GitHub" class="text-white/40 hover:text-white transition-colors">{{ partial "icon.html" (dict "name" "github" "size" "1.25rem") }}</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-white/30 border-t border-white/10 mt-12 pt-6 text-sm">
            &copy; 2012&ndash;{{ now.Year }} Screenly, Inc.
        </div>
    </div>
</footer>