<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Components Showcase - ViteKit Universal</title>
    <link rel="stylesheet" href="src/styles/main.scss">
    <style>
        /* Showcase specific styles */
        .showcase-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 4rem 0;
            text-align: center;
        }
        
        .showcase-section {
            padding: 3rem 0;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .showcase-section:last-child {
            border-bottom: none;
        }
        
        .component-demo {
            background: #f9fafb;
            padding: 2rem;
            border-radius: 8px;
            margin-bottom: 2rem;
        }
        
        .demo-controls {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }
        
        .demo-code {
            background: #1f2937;
            color: #e5e7eb;
            padding: 1rem;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
            overflow-x: auto;
            margin-top: 1rem;
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }
        
        .feature-card {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .interactive-demo {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin: 2rem 0;
        }
        
        @media (max-width: 768px) {
            .interactive-demo {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <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="index.html" class="nav__link">Главная</a>
                    </li>
                    <li class="nav__item">
                        <a href="showcase.html" class="nav__link nav__link--active">Showcase</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Showcase Header -->
    <div class="showcase-header">
        <div class="container">
            <h1>Components Showcase</h1>
            <p>Интерактивная демонстрация всех компонентов ViteKit Universal</p>
        </div>
    </div>

    <main class="main">
        <!-- Toast Notifications -->
        <section class="showcase-section">
            <div class="container">
                <h2>Toast Уведомления</h2>
                <p>Всплывающие уведомления с автоматическим скрытием и анимациями</p>
                
                <div class="component-demo">
                    <h3>Типы уведомлений</h3>
                    <div class="demo-controls">
                        <button class="btn btn--success" data-toast-trigger="success" 
                                data-toast-title="Успешно!" data-toast-message="Операция выполнена успешно">
                            Success Toast
                        </button>
                        <button class="btn btn--error" data-toast-trigger="error" 
                                data-toast-title="Ошибка!" data-toast-message="Произошла ошибка при выполнении операции">
                            Error Toast
                        </button>
                        <button class="btn btn--warning" data-toast-trigger="warning" 
                                data-toast-title="Предупреждение!" data-toast-message="Проверьте введенные данные">
                            Warning Toast
                        </button>
                        <button class="btn btn--secondary" data-toast-trigger="info" 
                                data-toast-title="Информация" data-toast-message="Новая версия доступна для скачивания">
                            Info Toast
                        </button>
                    </div>
                    
                    <div class="demo-code">
// JavaScript API
ToastComponent.success('Операция выполнена!');
ToastComponent.error('Произошла ошибка!');
ToastComponent.warning('Внимание!');
ToastComponent.info('Новая информация');

// HTML атрибуты
&lt;button data-toast-trigger="success" 
        data-toast-title="Заголовок" 
        data-toast-message="Сообщение"&gt;
    Показать уведомление
&lt;/button&gt;
                    </div>
                </div>

                <div class="feature-grid">
                    <div class="feature-card">
                        <h4>✨ Автоматическое скрытие</h4>
                        <p>Уведомления автоматически исчезают через 4 секунды</p>
                    </div>
                    <div class="feature-card">
                        <h4>📱 Адаптивность</h4>
                        <p>Корректное отображение на всех устройствах</p>
                    </div>
                    <div class="feature-card">
                        <h4>🎨 Типизация</h4>
                        <p>4 типа: success, error, warning, info</p>
                    </div>
                    <div class="feature-card">
                        <h4>🔧 API</h4>
                        <p>Простой JavaScript API и HTML атрибуты</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Modal Windows -->
        <section class="showcase-section">
            <div class="container">
                <h2>Модальные окна</h2>
                <p>Доступные модальные окна с поддержкой ARIA и клавиатурной навигации</p>
                
                <div class="component-demo">
                    <h3>Типы модальных окон</h3>
                    <div class="demo-controls">
                        <button class="btn btn--primary" data-micromodal-trigger="modal-basic">
                            Базовое модальное окно
                        </button>
                        <button class="btn btn--secondary" data-micromodal-trigger="modal-form">
                            Модальное окно с формой
                        </button>
                        <button class="btn btn--outline" data-micromodal-trigger="modal-confirmation">
                            Окно подтверждения
                        </button>
                    </div>
                    
                    <div class="demo-code">
// JavaScript API
MicroModal.show('modal-id');
MicroModal.close('modal-id');

// HTML разметка
&lt;div class="modal micromodal-slide" id="modal-id"&gt;
  &lt;div class="modal__overlay" data-micromodal-close&gt;
    &lt;div class="modal__container"&gt;
      &lt;header class="modal__header"&gt;
        &lt;h2 class="modal__title"&gt;Заголовок&lt;/h2&gt;
        &lt;button class="modal__close" data-micromodal-close&gt;&lt;/button&gt;
      &lt;/header&gt;
      &lt;main class="modal__content"&gt;Содержимое&lt;/main&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
                    </div>
                </div>

                <div class="feature-grid">
                    <div class="feature-card">
                        <h4>♿ Доступность</h4>
                        <p>Полная поддержка ARIA и скрин-ридеров</p>
                    </div>
                    <div class="feature-card">
                        <h4>⌨️ Клавиатура</h4>
                        <p>Навигация через Tab, Enter, Escape</p>
                    </div>
                    <div class="feature-card">
                        <h4>🎬 Анимации</h4>
                        <p>Плавные анимации открытия и закрытия</p>
                    </div>
                    <div class="feature-card">
                        <h4>🔒 Фокус</h4>
                        <p>Автоматическое управление фокусом</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Tabs -->
        <section class="showcase-section">
            <div class="container">
                <h2>Система табов</h2>
                <p>Адаптивные табы с поддержкой клавиатурной навигации</p>
                
                <div class="component-demo">
                    <h3>Интерактивные табы</h3>
                    <div class="tabs" data-tabs>
                        <div class="tabs__nav">
                            <button class="tabs__tab tabs__tab--active" data-tab="features">Возможности</button>
                            <button class="tabs__tab" data-tab="usage">Использование</button>
                            <button class="tabs__tab" data-tab="examples">Примеры</button>
                            <button class="tabs__tab" data-tab="api">API</button>
                        </div>
                        <div class="tabs__content">
                            <div class="tabs__panel tabs__panel--active" data-panel="features">
                                <h4>Основные возможности</h4>
                                <ul>
                                    <li>📱 <strong>Адаптивность:</strong> Автоматическое превращение в аккордеон на мобильных</li>
                                    <li>⌨️ <strong>Клавиатурная навигация:</strong> Arrow keys, Home, End</li>
                                    <li>🎨 <strong>Кастомизация:</strong> Легко настраиваемые стили</li>
                                    <li>🚀 <strong>Производительность:</strong> Минимальный overhead</li>
                                </ul>
                            </div>
                            <div class="tabs__panel" data-panel="usage">
                                <h4>Как использовать</h4>
                                <p>Создайте HTML структуру с нужными классами и добавьте атрибут <code>data-tabs</code>:</p>
                                <div class="demo-code">
&lt;div class="tabs" data-tabs&gt;
  &lt;div class="tabs__nav"&gt;
    &lt;button class="tabs__tab tabs__tab--active"&gt;Вкладка 1&lt;/button&gt;
    &lt;button class="tabs__tab"&gt;Вкладка 2&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="tabs__content"&gt;
    &lt;div class="tabs__panel tabs__panel--active"&gt;Содержимое 1&lt;/div&gt;
    &lt;div class="tabs__panel"&gt;Содержимое 2&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
                                </div>
                            </div>
                            <div class="tabs__panel" data-panel="examples">
                                <h4>Примеры использования</h4>
                                <p>Табы отлично подходят для:</p>
                                <ul>
                                    <li>Навигации по разделам контента</li>
                                    <li>Организации форм по шагам</li>
                                    <li>Переключения между видами данных</li>
                                    <li>Фильтрации контента по категориям</li>
                                </ul>
                            </div>
                            <div class="tabs__panel" data-panel="api">
                                <h4>JavaScript API</h4>
                                <div class="demo-code">
// Создание экземпляра
const tabs = new TabsComponent(element, options);

// Методы
tabs.next();     // Следующая вкладка
tabs.prev();     // Предыдущая вкладка
tabs.goTo(2);    // Перейти к вкладке по индексу

// События
element.addEventListener('tabchange', (e) => {
  console.log('Активна вкладка:', e.detail.index);
});
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Accordion -->
        <section class="showcase-section">
            <div class="container">
                <h2>Аккордеон</h2>
                <p>Сворачиваемые панели для экономии места с плавными анимациями</p>
                
                <div class="interactive-demo">
                    <div>
                        <h3>Интерактивный аккордеон</h3>
                        <div class="accordion" data-accordion>
                            <div class="accordion__item">
                                <button class="accordion__header" data-accordion-trigger="acc-features" aria-expanded="false">
                                    <span>🚀 Возможности аккордеона</span>
                                    <span class="accordion__icon"></span>
                                </button>
                                <div class="accordion__content" data-accordion-content="acc-features" aria-hidden="true">
                                    <div class="accordion__body">
                                        <ul>
                                            <li><strong>Плавные анимации:</strong> CSS transitions для smooth UX</li>
                                            <li><strong>Множественное раскрытие:</strong> Настраиваемое поведение</li>
                                            <li><strong>Клавиатурная навигация:</strong> Полная поддержка a11y</li>
                                            <li><strong>Автоматические ARIA атрибуты:</strong> Доступность из коробки</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion__item">
                                <button class="accordion__header" data-accordion-trigger="acc-usage" aria-expanded="false">
                                    <span>💡 Использование в проектах</span>
                                    <span class="accordion__icon"></span>
                                </button>
                                <div class="accordion__content" data-accordion-content="acc-usage" aria-hidden="true">
                                    <div class="accordion__body">
                                        <p>Аккордеон идеален для:</p>
                                        <ul>
                                            <li>FAQ секций</li>
                                            <li>Списков продуктов с детальной информацией</li>
                                            <li>Документации с разворачиваемыми разделами</li>
                                            <li>Фильтров в боковых панелях</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion__item">
                                <button class="accordion__header" data-accordion-trigger="acc-config" aria-expanded="false">
                                    <span>⚙️ Настройки и конфигурация</span>
                                    <span class="accordion__icon"></span>
                                </button>
                                <div class="accordion__content" data-accordion-content="acc-config" aria-hidden="true">
                                    <div class="accordion__body">
                                        <div class="demo-code">
// Опции конфигурации
const accordion = new AccordionComponent(element, {
  allowMultiple: false,     // Разрешить открытие нескольких панелей
  animationDuration: 300,   // Длительность анимации в мс
  autoClose: true,          // Автозакрытие других панелей
  keyboardNavigation: true  // Клавиатурная навигация
});

// API методы
accordion.open(0);        // Открыть панель по индексу
accordion.close(1);       // Закрыть панель
accordion.toggle(2);      // Переключить панель
accordion.closeAll();     // Закрыть все панели
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h3>Особенности реализации</h3>
                        <div class="feature-grid" style="grid-template-columns: 1fr;">
                            <div class="feature-card">
                                <h4>🎭 Анимации</h4>
                                <p>Плавные CSS transitions с автоматическим расчетом высоты контента</p>
                            </div>
                            <div class="feature-card">
                                <h4>♿ Доступность</h4>
                                <p>Полная поддержка ARIA атрибутов и клавиатурной навигации</p>
                            </div>
                            <div class="feature-card">
                                <h4>📐 Гибкость</h4>
                                <p>Настраиваемое поведение: единичное или множественное раскрытие</p>
                            </div>
                            <div class="feature-card">
                                <h4>🎨 Стилизация</h4>
                                <p>Легко настраиваемые стили через CSS переменные и модификаторы</p>
                            </div>
                        </div>
                        
                        <h4>События</h4>
                        <div class="demo-code">
// Слушаем события аккордеона
element.addEventListener('accordionopen', (e) => {
  console.log('Открыта панель:', e.detail.index);
});

element.addEventListener('accordionclose', (e) => {
  console.log('Закрыта панель:', e.detail.index);
});
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Modals -->
    <div class="modal micromodal-slide" id="modal-basic" 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>Это базовое модальное окно с минимальным содержимым. Оно демонстрирует:</p>
                    <ul>
                        <li>Правильную структуру HTML</li>
                        <li>ARIA атрибуты для доступности</li>
                        <li>Анимации открытия и закрытия</li>
                        <li>Управление фокусом</li>
                    </ul>
                    <p>Закрыть окно можно кликом на overlay, кнопку закрытия или нажатием Escape.</p>
                </main>
                <footer class="modal__footer">
                    <button class="btn btn--secondary" data-micromodal-close>Закрыть</button>
                    <button class="btn btn--primary">Понятно</button>
                </footer>
            </div>
        </div>
    </div>

    <div class="modal micromodal-slide" id="modal-form" 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">
                    <form class="modal-form">
                        <div class="form-group">
                            <label for="modal-name" class="form-label">Имя</label>
                            <input type="text" id="modal-name" class="form-control" placeholder="Введите ваше имя">
                        </div>
                        <div class="form-group">
                            <label for="modal-email" class="form-label">Email</label>
                            <input type="email" id="modal-email" class="form-control" placeholder="example@email.com">
                        </div>
                        <div class="form-group">
                            <label for="modal-message" class="form-label">Сообщение</label>
                            <textarea id="modal-message" class="form-control" rows="3" placeholder="Ваше сообщение"></textarea>
                        </div>
                    </form>
                </main>
                <footer class="modal__footer">
                    <button class="btn btn--secondary" data-micromodal-close>Отмена</button>
                    <button class="btn btn--primary">Отправить</button>
                </footer>
            </div>
        </div>
    </div>

    <div class="modal micromodal-slide" id="modal-confirmation" 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>Вы уверены, что хотите выполнить это действие?</p>
                    <p><strong>Внимание:</strong> Это действие нельзя будет отменить.</p>
                </main>
                <footer class="modal__footer">
                    <button class="btn btn--secondary" data-micromodal-close>Отмена</button>
                    <button class="btn btn--error">Подтвердить</button>
                </footer>
            </div>
        </div>
    </div>

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