<style>
body {
    margin: 0;
}

.container {
    display: flex;
    height: 100vh; /* Занимает всю высоту окна */
}

.image-container {
    display: flex;
    position: relative;
    width: 100%;
    height: 75%;
    transition: width 0.3s ease, left 0.3s ease; /* Плавное изменение ширины и левого края */
    margin: 0;
    left: 0; /* Закрепляем левый край */
}

.main-image {
    width: 100%;
    height: auto;
}

.diagram {
    width: 100%;
    height: auto;
}

.point {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    cursor: pointer;
    transition: .3s;
}

.point.active {
    transform: scale(1.5);
    background-color: #00b3e3;
}

.description {
    position: relative;
    font-family: sans-serif;
    width: 40%; /* Ширина блока с описанием */
    max-height: 75%;  
    background-color: white;
    padding: 10px;
    box-sizing: border-box; /* Учитываем отступы в ширине */
  border: 5px solid #00b3e3;
  border-left: none;
  transition: 2s;
}

.description.hidden {
    display: none; /* Скрываем блок с описанием по умолчанию */
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.control-button {
    border: none;
    background-color: #00b3e3;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.control-button:hover {
    background-color: #1f61ed;
}

.showAllButton {
  color: #fff;
  background-color: #00b3e3;
  padding: 2%;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: .2s;
  display: block;
  margin: 50px auto;
}

.showAllButton:hover {
  background-color: #1f61ed;
}
</style>

<div class="container">
    <div class="image-container" id="image-container">
        <img class="main-image" src="https://storage.googleapis.com/bd-kz-01/buildings-v2/840x630/37133.jpg" alt="Схема" class="diagram" id="diagram">
    </div>
    <div class="description hidden" id="description">
        <!-- Элементы управления и описание добавляются динамически -->
    </div>
</div>

<script>
const showAllButton = '<button class="showAllButton">Показать все системы</button>';

document.addEventListener('DOMContentLoaded', function () {
    const points = [
        { id: '1', x: '51%', y: '15%', description: `<h2 class="descriptio-title">Виброшумоизоляция</h2><p>Lorem ipsum dolor sit amet.</p>${showAllButton}` },
        { id: '2', x: '75.45%', y: '42.5%', description: `<h2 class="descriptio-title">Гидроизоляция</h2><p>Lorem ipsum dolor sit amet.</p>${showAllButton}` },
        { id: '3', x: '63.5%', y: '69%', description: `<h2 class="descriptio-title">Теплоизоляция</h2><p>Lorem ipsum dolor sit amet.</p>${showAllButton}` },
        { id: '4', x: '81%', y: '85%', description: `<h2 class="descriptio-title">Изоляция инженерных систем</h2><p>Lorem ipsum dolor sit amet.</p>${showAllButton}` },
    ];
  
  document.addEventListener('keydown', function (event) {
        const activePoint = document.querySelector('.point.active');
        if (!activePoint && event.key !== 'Escape') return;

        const currentId = activePoint ? parseInt(activePoint.dataset.node) : null;
        const maxId = Math.max(...points.map(point => parseInt(point.id)));
        const minId = Math.min(...points.map(point => parseInt(point.id)));

        if (event.key === 'ArrowLeft') {
            const prevId = currentId > minId ? currentId - 1 : maxId;
            document.querySelector(`.point[data-node="${prevId}"]`).click();
        } else if (event.key === 'ArrowRight') {
            const nextId = currentId < maxId ? currentId + 1 : minId;
            document.querySelector(`.point[data-node="${nextId}"]`).click();
        } else if (event.key === 'Escape') {
            closeDescription();
        }
    });

    const imageContainer = document.getElementById('image-container');
    const description = document.getElementById('description');
    const diagram = document.getElementById('diagram');

    let activePointIndex = -1;

    // Функция обновления описания
    function updateDescription(index) {
        // Убираем активный класс у всех точек
        document.querySelectorAll('.point').forEach(p => p.classList.remove('active'));
        // Находим новую активную точку
        const point = document.querySelector(`.point[data-node="${points[index].id}"]`);
        if (point) {
            point.classList.add('active');
        }

        // Обновляем описание
        description.innerHTML = `
            <div class="controls">
                <button id="prev" class="control-button">←</button>
                <button id="next" class="control-button">→</button>
                <div>
                <button id="close" class="control-button">✖</button>
                </div>
            </div>
            ${points[index].description}
        `;
        description.classList.remove('hidden');
        imageContainer.style.width = '60%';
        activePointIndex = index;

        // Назначаем события для кнопок управления
        document.getElementById('prev').addEventListener('click', function () {
            const newIndex = (activePointIndex - 1 + points.length) % points.length;
            updateDescription(newIndex);
        });

        document.getElementById('next').addEventListener('click', function () {
            const newIndex = (activePointIndex + 1) % points.length;
            updateDescription(newIndex);
        });

        document.getElementById('close').addEventListener('click', closeDescription);
    }

    // Функция закрытия описания
    function closeDescription() {
    description.classList.add('hidden');
    imageContainer.style.width = '100%';
    imageContainer.style.left = '0'; // Убедитесь, что контейнер остается привязанным к левому краю
    document.querySelectorAll('.point').forEach(p => p.classList.remove('active'));
    activePointIndex = -1;
}

    // Создаем точки на изображении
    points.forEach((point, index) => {
        const pointElement = document.createElement('div');
        pointElement.classList.add('point');
        pointElement.style.left = point.x;
        pointElement.style.top = point.y;
        pointElement.dataset.node = point.id;

        pointElement.addEventListener('click', function () {
            updateDescription(index);
        });

        diagram.parentNode.insertBefore(pointElement, diagram);
    });
});

</script>