<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ViteKit Universal - Test</title>
    <link rel="stylesheet" href="src/styles/main.scss">
</head>
<body>
    <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 nav__link--active">Главная</a>
                    </li>
                    <li class="nav__item">
                        <a href="/components-demo.html" class="nav__link">Компоненты</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="main">
        <div class="hero">
            <div class="container">
                <div class="hero__content">
                    <h1 class="hero__title">ViteKit Universal</h1>
                    <p class="hero__subtitle">
                        Современный универсальный сборщик проектов с Vite + Twig + компонентами
                    </p>
                    <div class="hero__actions">
                        <button class="btn btn--primary btn--lg" data-micromodal-trigger="modal-basic">
                            Открыть модал
                        </button>
                        <button class="btn btn--outline btn--lg" data-toast-trigger="success" 
                                data-toast-title="Успех!" data-toast-message="Тест уведомления">
                            Показать уведомление
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <section id="components" style="padding: 4rem 0;">
            <div class="container">
                <h2>Тестирование компонентов</h2>
                
                <!-- Табы -->
                <div class="tabs" data-tabs style="margin-bottom: 2rem;">
                    <div class="tabs__nav">
                        <button class="tabs__tab tabs__tab--active" data-tab="tab-1">Первая вкладка</button>
                        <button class="tabs__tab" data-tab="tab-2">Вторая вкладка</button>
                        <button class="tabs__tab" data-tab="tab-3">Третья вкладка</button>
                    </div>
                    <div class="tabs__content">
                        <div class="tabs__panel tabs__panel--active" id="tab-1-panel" data-panel="tab-1">
                            <p>Содержимое первой вкладки</p>
                        </div>
                        <div class="tabs__panel" id="tab-2-panel" data-panel="tab-2">
                            <p>Содержимое второй вкладки</p>
                        </div>
                        <div class="tabs__panel" id="tab-3-panel" data-panel="tab-3">
                            <p>Содержимое третьей вкладки</p>
                        </div>
                    </div>
                </div>

                <!-- Аккордеон -->
                <div class="accordion" data-accordion>
                    <div class="accordion__item">
                        <button class="accordion__header" data-accordion-trigger="acc-1" aria-expanded="false">
                            <span>Что такое ViteKit?</span>
                            <span class="accordion__icon"></span>
                        </button>
                        <div class="accordion__content" id="acc-1-content" data-accordion-content="acc-1" aria-hidden="true">
                            <div class="accordion__body">
                                <p>ViteKit - это современный сборщик проектов.</p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion__item">
                        <button class="accordion__header" data-accordion-trigger="acc-2" aria-expanded="false">
                            <span>Как использовать?</span>
                            <span class="accordion__icon"></span>
                        </button>
                        <div class="accordion__content" id="acc-2-content" data-accordion-content="acc-2" aria-hidden="true">
                            <div class="accordion__body">
                                <p>Просто установите зависимости и запустите сервер разработки.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Модальное окно -->
    <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>
                </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>