---
import { COMPANY } from '@constants';

const sectionsLinks = [
    { label: 'Услуги', href: '/services' },
    { label: 'Кейсы', href: '/cases' },
    { label: 'Блог', href: '/blog' },
    { label: 'Контакты', href: '/contacts' },
];

const legalLinks = [
    { label: 'Политика конфиденциальности', href: '/privacy' },
    { label: 'Условия использования', href: '/terms' },
];

const otherLinks  = [
    { label: 'Часто задаваемые вопросы', href: '/faq' },
    { label: 'Правовые документы', href: '/documents' },
];

const currentYear = new Date().getFullYear().toString();

---

<footer class="footer">
    <div class="site-container footer-container">

        <!-- Верхняя часть футера (Колонки) -->
        <div class="footer-top">

            <!-- Колонка 1: Бренд и описание -->
            <div class="footer-col brand-col">
                <a href="/" class="footer-logo">Автоюрист086</a>
                <p class="brand-desc">
                    Специализированная юридическая помощь<br/>
                    для водителей в Сургуте и Ханты-<br/>
                    Мансийском автономном округе-Югры.
                </p>
            </div>

            <!-- Колонка 2: Разделы и Разное -->
            <div class="footer-col links-cols">
                <div class="footer-links-group">
                    <h4 class="col-title">Разделы</h4>
                    <ul class="footer-links">
                        {sectionsLinks.map(link => (
                                <li><a href={link.href}>{link.label}</a></li>
                        ))}
                    </ul>
                </div>
                <div class="footer-links-group">
                    <h4 class="col-title">Разное</h4>
                    <ul class="footer-links">
                        {otherLinks.map(link => (
                                <li><a href={link.href}>{link.label}</a></li>
                        ))}
                    </ul>
                </div>
            </div>

            <!-- Колонка 3: Контакты -->
            <div class="footer-col">
                <h4 class="col-title">Связь с нами</h4>
                <p class="address">{COMPANY.address}</p>
                <a href={`tel:${COMPANY.phoneClean}`} class="footer-phone">{COMPANY.phone}</a>

                <!-- Иконка "Поделиться" -->
                <button class="share-btn" aria-label="Share">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="18" cy="5" r="3"></circle>
                        <circle cx="6" cy="12" r="3"></circle>
                        <circle cx="18" cy="19" r="3"></circle>
                        <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                        <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
                    </svg>
                </button>
            </div>

        </div>

        <!-- Нижняя часть футера (Копирайт) -->
        <div class="footer-bottom">
            <p class="copyright">© {currentYear} Автоюрист086.ru Все права защищены.</p>
            <ul class="footer-bottom-links">
                {legalLinks.map(link => (
                        <li><a href={link.href}>{link.label}</a></li>
                ))}
            </ul>
        </div>

    </div>
</footer>

<style>
    /* Базовые стили футера */
    .footer {
        background-color: #031529; /* Темно-синий фон */
        color: #8c9bb0; /* Приглушенный серо-голубой цвет текста */
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        padding: 4rem 0 1.5rem 0;
    }

    /* Сетка для колонок */
    .footer-top {
        display: grid;
        /* Пропорции колонок: первая чуть шире, остальные равны */
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 2rem;
        margin-bottom: 4rem;
    }

    /* Колонка 1 */
    .footer-logo {
        display: inline-block;
        color: #ffffff;
        font-size: 1.3rem;
        font-weight: 700;
        text-decoration: none;
        margin-bottom: 1.5rem;
        letter-spacing: 0.5px;
    }

    .brand-desc {
        font-size: 0.85rem;
        line-height: 1.8;
        margin: 0;
    }

    /* Заголовки колонок (Золотой цвет) */
    .col-title {
        color: #d1b06b; /* Золотистый/бежевый */
        font-size: 0.95rem;
        font-weight: 600;
        margin: 0 0 1.5rem 0;
        letter-spacing: 0.5px;
    }

    /* Списки ссылок */
    .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-links li {
        margin-bottom: 0.8rem;
    }

    .footer-links a {
        color: #8c9bb0;
        text-decoration: none;
        font-size: 0.85rem;
        transition: color 0.2s ease;
    }

    .footer-links a:hover {
        color: #d1b06b; /* При наведении становятся золотыми */
    }

    /* Колонка Контактов */
    .address {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .footer-phone {
        display: block;
        color: #d1b06b;
        font-size: 1.1rem;
        font-weight: 700;
        text-decoration: none;
        margin-bottom: 1.5rem;
        font-family: system-ui, -apple-system, sans-serif; /* Цифры лучше читаются в sans-serif */
    }

    /* Кнопка "Поделиться" */
    .share-btn {
        background: transparent;
        border: 1px solid #2a3a50;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8c9bb0;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .share-btn:hover {
        border-color: #d1b06b;
        color: #d1b06b;
        background-color: rgba(209, 176, 107, 0.05);
    }

    /* Нижняя панель (Копирайт) */
    .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(140, 155, 176, 0.1); /* Тонкая полоска разделителя */
        font-size: 0.75rem;
    }

    .copyright, .developer {
        margin: 0;
    }

    .footer-bottom-links {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 1.5rem;
    }

    .footer-bottom-links a {
        color: #8c9bb0;
        text-decoration: none;
        font-size: 0.75rem;
        transition: color 0.2s ease;
    }

    .footer-bottom-links a:hover {
        color: #d1b06b;
    }

    /* Адаптивность для мобильных устройств */
    @media (max-width: 640px) {
        .footer {
            padding: 3rem 1.5rem 1rem 1.5rem;
        }

        .footer-top {
            grid-template-columns: 1fr; /* 1 колонка */
            gap: 2.5rem;
            text-align: center;
        }

        /* Разделы и Разное в одном ряду */
        .links-cols {
            display: flex;
            gap: 2rem;
            justify-content: center;
        }

        .footer-links-group {
            flex: 1;
        }

        /* Центрируем все элементы */
        .brand-col {
            text-align: center;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .footer-col:last-child {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .share-btn {
            margin: 0 auto;
        }

        .footer-bottom {
            flex-direction: column;
            gap: 1rem;
            text-align: center;
        }
    }

    /* Планшет - 2 колонки */
    @media (min-width: 641px) and (max-width: 767px) {
        .footer-top {
            grid-template-columns: 1fr 1fr;
            gap: 3rem 2rem;
        }

        .links-cols {
            display: block;
        }
    }

    /* Десктоп (md и выше) - 4 колонки в один ряд: Бренд | Разделы | Разное | Контакты */
    @media (min-width: 768px) {
        .footer-top {
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            gap: 2rem;
        }

        .links-cols {
            display: contents; /* Дочерние элементы становятся частью грида */
        }
    }
</style>