<!DOCTYPE html>
<html lang="{{ site.language }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="{{ site.meta.viewport }}">
    <meta name="robots" content="{{ site.meta.robots }}">
    <meta name="theme-color" content="{{ site.meta.theme_color }}">
    
    <title>{% block title %}{{ site.title }}{% endblock %}</title>
    <meta name="description" content="{% block description %}{{ site.description }}{% endblock %}">
    
    <!-- Preload critical resources -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Styles -->
    <link rel="stylesheet" href="/src/styles/main.scss">
    
    {% block head %}{% endblock %}
</head>
<body class="{% block body_class %}{% endblock %}">
    <!-- Header -->
    {% block header %}
        <header class="header">
            <div class="container">
                <nav class="nav">
                    <div class="nav__brand">
                        <a href="/" class="nav__logo">{{ site.title }}</a>
                    </div>
                    <ul class="nav__menu">
                        {% for item in site.navigation %}
                            <li class="nav__item">
                                <a href="{{ item.url }}" class="nav__link{% if item.active %} nav__link--active{% endif %}">
                                    {{ item.title }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </nav>
            </div>
        </header>
    {% endblock %}

    <!-- Main Content -->
    <main class="main">
        {% block content %}{% endblock %}
    </main>

    <!-- Footer -->
    {% block footer %}
        <footer class="footer">
            <div class="container">
                <div class="footer__content">
                    <p>&copy; 2024 {{ site.title }}. Все права защищены.</p>
                </div>
            </div>
        </footer>
    {% endblock %}

    <!-- Scripts -->
    <script type="module" src="/src/scripts/main.js"></script>
    {% block scripts %}{% endblock %}
</body>
</html>