// Данные для фактов (ключи переводов)
const factsData = [
    { icon: "🏖️", key: "fact1" },
    { icon: "🌊", key: "fact2" },
    { icon: "☀️", key: "fact3" },
    { icon: "🍷", key: "fact4" }
];

// Генерация HTML для about
function generateAboutHTML(lang) {
    const title = window.translations[lang].about_title;
    const subtitle = window.translations[lang].about_subtitle;
    const mainText = window.translations[lang].about_text;
    const extraText = window.translations[lang].about_extra || "";

    // Генерируем карточки фактов на основе переводов
    const factsHTML = factsData.map(fact => `
        <div class="fact-card">
            <div class="fact-icon">${fact.icon}</div>
            <div class="fact-text">${window.translations[lang][fact.key]}</div>
        </div>
    `).join('');

    return `
        <h2 class="section-title animate" data-i18n="about_title">${title}</h2>
        <div class="about-grid modern-about">
            <div class="about-text animate delay-1">
                <h3>${subtitle}</h3>
                <p class="main-description">${mainText}</p>
                <div class="extra-description">
                    <p>${extraText}</p>
                </div>
                <div class="facts-grid">
                    ${factsHTML}
                </div>
            </div>
            <div class="about-image-wrapper animate delay-2">
                <img src="img/beach.webp" alt="Пляж в Мгудзырхуа" class="about-img" loading="lazy">
            </div>
        </div>
    `;
}

// Рендер секции about
function renderAbout(lang) {
    const aboutSection = document.getElementById('about');
    if (!aboutSection) return;

    aboutSection.innerHTML = generateAboutHTML(lang);

    // Повторно запускаем анимации для новых .animate
    document.querySelectorAll('.animate').forEach(el => {
        if (el.style.animationPlayState !== 'running') {
            el.style.animationPlayState = 'paused';
            const obs = new IntersectionObserver(entries => {
                entries.forEach(en => { if(en.isIntersecting) en.target.style.animationPlayState = 'running'; });
            });
            obs.observe(el);
        }
    });
}

// Обновление текстов без перерисовки (если нужно)
function updateAboutTexts(lang) {
    const aboutSection = document.getElementById('about');
    if (!aboutSection || !aboutSection.innerHTML.trim()) return;

    const title = aboutSection.querySelector('.section-title');
    if (title) title.innerHTML = window.translations[lang].about_title;

    const subtitle = aboutSection.querySelector('.about-text h3');
    if (subtitle) subtitle.innerHTML = window.translations[lang].about_subtitle;

    const mainDesc = aboutSection.querySelector('.main-description');
    if (mainDesc) mainDesc.innerHTML = window.translations[lang].about_text;

    const extraDesc = aboutSection.querySelector('.extra-description p');
    if (extraDesc && window.translations[lang].about_extra) extraDesc.innerHTML = window.translations[lang].about_extra;

    const factCards = aboutSection.querySelectorAll('.fact-card');
    factCards.forEach((card, idx) => {
        if (factsData[idx]) {
            const textDiv = card.querySelector('.fact-text');
            if (textDiv) textDiv.innerHTML = window.translations[lang][factsData[idx].key];
        }
    });
}

// Функция для вызова из scripts.js при смене языка
function updateAboutLanguage(lang) {
    if (document.getElementById('about').innerHTML.trim() !== '') {
        updateAboutTexts(lang);
    } else {
        renderAbout(lang);
    }
}

window.updateAboutLanguage = updateAboutLanguage;

// Инициализация
document.addEventListener("DOMContentLoaded", () => {
    const currentLang = localStorage.getItem('siteLang') || 'ru';
    renderAbout(currentLang);
});