{% load static %}
{% load docs_tags %}

<c-vars
    class=""
/>

<footer class="border-t border-base-300 bg-base-100 {{ class }}">
    <div class="w-full px-6 lg:px-10 py-10">

        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-6">

            {# Brand #}
            <div class="col-span-2 md:col-span-1">
                <div class="flex items-center gap-2 mb-3">
                    <c-lbdocs.ui.logo height="28" />
                </div>
                <p class="text-xs text-base-content/60 leading-relaxed max-w-xs">
                    UI component library for Django. Accessible components with HTML-like syntax, Tailwind CSS, and daisyUI.
                </p>
                <div class="flex items-center gap-3 mt-4">
                    <a href="https://twitter.com/labbhq" target="_blank" rel="noopener noreferrer me" class="link link-hover" aria-label="labb on Twitter" title="Follow labb on Twitter">
                        <c-lbi n="rmx.twitter" w="1.25em" h="1.25em" />
                    </a>
                    <a href="https://github.com/labbhq/labb" target="_blank" rel="noopener noreferrer me" class="link link-hover" aria-label="labb on GitHub" title="labb source code on GitHub">
                        <c-lbi n="rmx.github" w="1.25em" h="1.25em" />
                    </a>
                </div>
                <p class="text-xs text-base-content/60 mt-6">
                    © {% now "Y" %} labb
                </p>
            </div>

            {# Product #}
            <nav aria-label="Product" class="flex flex-col gap-2">
                <h2 class="text-xs font-semibold uppercase tracking-wider text-base-content/70 mb-1">Product</h2>
                <a href="{% url 'guide_docs' %}" class="link link-hover text-sm" title="Django UI library getting started guide">Getting Started</a>
                <a href="{% url 'ui_docs' %}" class="link link-hover text-sm" title="Browse all Django UI components">All Components</a>
                <a href="{% url 'icons_docs' %}" class="link link-hover text-sm" title="Django icon library — Remix icons">Icons</a>
                <a href="{% doc_url '2_concepts/2_theming.md' 'guide' %}" class="link link-hover text-sm" title="Theming and design tokens for Django apps">Theming</a>
                <a href="{% url 'blog_docs' %}" class="link link-hover text-sm" title="labb blog — Django UI tips and updates">Blog</a>
            </nav>

            {# Popular components (SEO anchor text) #}
            <nav aria-label="Popular components" class="flex flex-col gap-2">
                <h2 class="text-xs font-semibold uppercase tracking-wider text-base-content/70 mb-1">Popular Components</h2>
                <a href="{% doc_url '1_actions/button.md' 'ui' %}" class="link link-hover text-sm" title="Django Button Component">Django Button Component</a>
                <a href="{% doc_url '1_actions/modal.md' 'ui' %}" class="link link-hover text-sm" title="Django Modal Component">Django Modal Component</a>
                <a href="{% doc_url '2_data_display/table.md' 'ui' %}" class="link link-hover text-sm" title="Django Table Component">Django Table Component</a>
                <a href="{% doc_url '2_data_display/card.md' 'ui' %}" class="link link-hover text-sm" title="Django Card Component">Django Card Component</a>
                <a href="{% doc_url '8_charts/0_charts.md' 'ui' %}" class="link link-hover text-sm" title="Django Charts Component">Django Charts Component</a>
                <a href="{% doc_url '5_data_input/input.md' 'ui' %}" class="link link-hover text-sm" title="Django Form Input Component">Django Form Inputs</a>
            </nav>

            {# Resources #}
            <nav aria-label="Resources" class="flex flex-col gap-2">
                <h2 class="text-xs font-semibold uppercase tracking-wider text-base-content/70 mb-1">Resources</h2>
                <a href="{% doc_url '1_getting_started/2_installation.md' 'guide' %}" class="link link-hover text-sm" title="Install labb in your Django project">Installation</a>
                <a href="{% doc_url '1_getting_started/3_changelog.md' 'guide' %}" class="link link-hover text-sm" title="labb changelog and release notes">Changelog</a>
                <a href="{% doc_url '1_getting_started/4_roadmap.md' 'guide' %}" class="link link-hover text-sm" title="labb roadmap — upcoming features">Roadmap</a>
                <a href="{% doc_url '1_getting_started/5_credits.md' 'guide' %}" class="link link-hover text-sm" title="Credits and acknowledgements">Credits</a>
                <a href="https://github.com/labbhq/labb" target="_blank" rel="noopener noreferrer" class="link link-hover text-sm" title="labb on GitHub">GitHub</a>
            </nav>

        </div>

    </div>
</footer>