{% load static %}
{% load i18n %}

<footer class="bg-base-300 text-base-content">
    <div class="container mx-auto px-6 py-16">

        <div class="grid gap-12 md:grid-cols-2 lg:grid-cols-4">

            <!-- LOGO + COPYRIGHT -->
            <div>
                <div class="flex items-center gap-3 mb-6">
                    <img src="{% static 'images/logo.png' %}" alt="{% translate 'site.small-name' %}"
                        class="h-12 w-12" />
                    <span class="text-xl font-bold tracking-tight">
                        {% translate "site.small-name" %}
                    </span>
                </div>

                <p class="text-sm opacity-70 leading-relaxed">
                    © 2026 {% translate "site.name" %}.<br />
                    {% translate "footer.copyright" %}
                </p>
            </div>

            <!-- COMPANY -->
            <div>
                <h4 class="mb-4 text-sm font-semibold tracking-widest uppercase opacity-80">
                    {% translate "footer.company" %}
                </h4>
                <ul class="space-y-3 text-sm">
                    <li>
                        <a href="{% url 'contact_index' %}" class="link link-hover">
                            {% translate "menu.contact" %}
                        </a>
                    </li>
                </ul>
            </div>

            <!-- RESOURCES -->
            <div>
                <h4 class="mb-4 text-sm font-semibold tracking-widest uppercase opacity-80">
                    {% translate "footer.resources" %}
                </h4>
                <ul class="space-y-3 text-sm">
                    <li>
                        <a href="{% url 'content_by_tag' content_tag='terms-and-conditions' %}" class="link link-hover">
                            {% translate "site.terms" %}
                        </a>
                    </li>
                    <li>
                        <a href="{% url 'content_by_tag' content_tag='privacy-policy' %}" class="link link-hover">
                            {% translate "site.privacy" %}
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" class="link link-hover" data-cookie-action="openPreferences">
                            {% translate "site.cookie-settings" %}
                        </a>
                    </li>
                </ul>
            </div>

            <!-- FOLLOW US -->
            <div>
                <h4 class="mb-4 text-sm font-semibold tracking-widest uppercase opacity-80">
                    {% translate "footer.follow-us" %}
                </h4>

                <div class="flex items-center gap-5 text-xl">
                    <a href="https://x.com/paulocoutinhox" aria-label="X" class="hover:opacity-80 transition">
                        <i class="fa-brands fa-x-twitter"></i>
                    </a>

                    <a href="https://www.instagram.com/paulocoutinhox/" aria-label="Instagram"
                        class="hover:opacity-80 transition">
                        <i class="fa-brands fa-instagram"></i>
                    </a>

                    <a href="https://www.facebook.com/profile.php?id=61558143327222" aria-label="Facebook"
                        class="hover:opacity-80 transition">
                        <i class="fa-brands fa-facebook"></i>
                    </a>

                    <a href="https://www.linkedin.com/in/paulocoutinhox/" aria-label="LinkedIn"
                        class="hover:opacity-80 transition">
                        <i class="fa-brands fa-linkedin"></i>
                    </a>
                </div>
            </div>

        </div>
    </div>
</footer>
