<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Демонстрация компонентов - ViteKit Universal</title>
    <link rel="stylesheet" href="/src/styles/main.scss">
</head>
<body data-page="showcase">
    <header class="header">
        <div class="container">
            <nav class="nav">
                <div class="nav__brand">
                    <a href="/" class="nav__logo">ViteKit Universal</a>
                </div>
                <ul class="nav__menu">
                    <li class="nav__item">
                        <a href="/" class="nav__link">Главная</a>
                    </li>
                    <li class="nav__item">
                        <a href="/components-demo.html" class="nav__link nav__link--active">Компоненты</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="main">
        <div class="demo-header">
            <div class="container">
                <h1>Демонстрация компонентов</h1>
                <p>Интерактивные примеры всех доступных UI компонентов</p>
            </div>
        </div>

        <!-- Toast Уведомления -->
        <section class="showcase-section">
            <div class="container">
                <h2>Toast Уведомления</h2>
                <p>Современные всплывающие уведомления с автоматическим скрытием</p>
                
                <div class="demo-grid">
                    <button class="btn btn--primary" data-toast-trigger="success" 
                            data-toast-title="Успех!" data-toast-message="Операция выполнена успешно">
                        Показать Success
                    </button>
                    <button class="btn btn--danger" data-toast-trigger="error" 
                            data-toast-title="Ошибка!" data-toast-message="Что-то пошло не так">
                        Показать Error
                    </button>
                    <button class="btn btn--warning" data-toast-trigger="warning" 
                            data-toast-title="Внимание!" data-toast-message="Будьте осторожны">
                        Показать Warning
                    </button>
                    <button class="btn btn--info" data-toast-trigger="info" 
                            data-toast-title="Информация" data-toast-message="Полезная информация">
                        Показать Info
                    </button>
                </div>

                <div class="demo-code">
                    <pre><code>// Показать toast уведомление
ToastComponent.success('Операция успешна!', { 
  title: 'Готово!', 
  duration: 4000 
});

// Использование через data-атрибуты
&lt;button data-toast-trigger="success" 
        data-toast-title="Успех!" 
        data-toast-message="Операция выполнена"&gt;
  Показать уведомление
&lt;/button&gt;</code></pre>
                </div>
            </div>
        </section>

        <!-- Модальные окна -->
        <section class="showcase-section">
            <div class="container">
                <h2>Модальные окна</h2>
                <p>Доступные модальные окна с поддержкой клавиатуры и фокуса</p>
                
                <div class="demo-grid">
                    <button class="btn btn--primary" data-micromodal-trigger="modal-demo">
                        Открыть модальное окно
                    </button>
                </div>

                <div class="demo-code">
                    <pre><code>// Открыть модальное окно программно
MicroModal.show('modal-id');

// Использование через data-атрибуты  
&lt;button data-micromodal-trigger="modal-id"&gt;
  Открыть модал
&lt;/button&gt;</code></pre>
                </div>
            </div>
        </section>

        <!-- Табы -->
        <section class="showcase-section">
            <div class="container">
                <h2>Адаптивные табы</h2>
                <p>Табы, которые превращаются в аккордеон на мобильных устройствах</p>
                
                <div class="tabs" data-tabs>
                    <div class="tabs__nav">
                        <button class="tabs__tab tabs__tab--active" data-tab="demo-tab-1">Первая вкладка</button>
                        <button class="tabs__tab" data-tab="demo-tab-2">Вторая вкладка</button>
                        <button class="tabs__tab" data-tab="demo-tab-3">Третья вкладка</button>
                    </div>
                    <div class="tabs__content">
                        <div class="tabs__panel tabs__panel--active" id="demo-tab-1-panel" data-panel="demo-tab-1">
                            <p>Содержимое первой вкладки. Здесь может быть любой контент.</p>
                        </div>
                        <div class="tabs__panel" id="demo-tab-2-panel" data-panel="demo-tab-2">
                            <p>Содержимое второй вкладки с другой информацией.</p>
                        </div>
                        <div class="tabs__panel" id="demo-tab-3-panel" data-panel="demo-tab-3">
                            <p>Содержимое третьей вкладки для демонстрации функциональности.</p>
                        </div>
                    </div>
                </div>

                <div class="demo-code">
                    <pre><code>// HTML структура табов
&lt;div class="tabs" data-tabs&gt;
  &lt;div class="tabs__nav"&gt;
    &lt;button class="tabs__tab tabs__tab--active" data-tab="tab-1"&gt;
      Первая вкладка
    &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="tabs__content"&gt;
    &lt;div class="tabs__panel tabs__panel--active" data-panel="tab-1"&gt;
      Содержимое вкладки
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>
        </section>

        <!-- Аккордеон -->
        <section class="showcase-section">
            <div class="container">
                <h2>Аккордеон</h2>
                <p>Складывающиеся секции с плавными анимациями</p>
                
                <div class="accordion" data-accordion>
                    <div class="accordion__item">
                        <button class="accordion__header" data-accordion-trigger="demo-acc-1" aria-expanded="false">
                            <span>Что такое ViteKit Universal?</span>
                            <span class="accordion__icon"></span>
                        </button>
                        <div class="accordion__content" id="demo-acc-1-content" data-accordion-content="demo-acc-1" aria-hidden="true">
                            <div class="accordion__body">
                                <p>ViteKit Universal - это современный универсальный сборщик проектов, который объединяет Vite, Twig, SCSS и готовые UI компоненты для быстрой разработки.</p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion__item">
                        <button class="accordion__header" data-accordion-trigger="demo-acc-2" aria-expanded="false">
                            <span>Какие компоненты включены?</span>
                            <span class="accordion__icon"></span>
                        </button>
                        <div class="accordion__content" id="demo-acc-2-content" data-accordion-content="demo-acc-2" aria-hidden="true">
                            <div class="accordion__body">
                                <p>В комплект входят: модальные окна, табы, аккордеон, toast уведомления, формы, кнопки и многое другое.</p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion__item">
                        <button class="accordion__header" data-accordion-trigger="demo-acc-3" aria-expanded="false">
                            <span>Как начать использовать?</span>
                            <span class="accordion__icon"></span>
                        </button>
                        <div class="accordion__content" id="demo-acc-3-content" data-accordion-content="demo-acc-3" aria-hidden="true">
                            <div class="accordion__body">
                                <p>Просто клонируйте репозиторий, установите зависимости командой <code>npm install</code> и запустите <code>npm run dev</code>.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="demo-code">
                    <pre><code>// HTML структура аккордеона
&lt;div class="accordion" data-accordion&gt;
  &lt;div class="accordion__item"&gt;
    &lt;button class="accordion__header" data-accordion-trigger="acc-1"&gt;
      &lt;span&gt;Заголовок&lt;/span&gt;
      &lt;span class="accordion__icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="accordion__content" data-accordion-content="acc-1"&gt;
      &lt;div class="accordion__body"&gt;
        Содержимое аккордеона
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>
        </section>
    </main>

    <!-- Модальное окно для демонстрации -->
    <div class="modal micromodal-slide" id="modal-demo" aria-hidden="true">
        <div class="modal__overlay" tabindex="-1" data-micromodal-close>
            <div class="modal__container" role="dialog" aria-modal="true">
                <header class="modal__header">
                    <h2 class="modal__title">Демонстрационное модальное окно</h2>
                    <button class="modal__close" aria-label="Закрыть" data-micromodal-close></button>
                </header>
                <main class="modal__content">
                    <p>Это пример модального окна с полной поддержкой accessibility:</p>
                    <ul>
                        <li>✅ Управление клавиатурой (Tab, Esc)</li>
                        <li>✅ Фокус и ARIA атрибуты</li>
                        <li>✅ Плавные анимации</li>
                        <li>✅ Закрытие по клику вне окна</li>
                    </ul>
                </main>
                <footer class="modal__footer">
                    <button class="btn btn--secondary" data-micromodal-close>Закрыть</button>
                    <button class="btn btn--primary">Действие</button>
                </footer>
            </div>
        </div>
    </div>

    <script type="module" src="/src/scripts/main.js"></script>
</body>
</html>