<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{{ config.title }}{% endblock %}</title>
    <meta name="description" content="{{ config.description }}">
    <link rel="stylesheet" href="{{ get_url(path='style.css') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
    {% if config.extra.colors %}
    <style>
        :root {
            --color-primary: {{ config.extra.colors.primary }};
            --color-primary-light: {{ config.extra.colors.primary_light }};
            --color-accent: {{ config.extra.colors.accent }};
            --color-text: {{ config.extra.colors.text }};
            --color-text-light: {{ config.extra.colors.text_light }};
            --color-bg: {{ config.extra.colors.background }};
            --color-bg-alt: {{ config.extra.colors.background_alt }};
            --color-white: {{ config.extra.colors.white }};
            --color-border: {{ config.extra.colors.border }};
            --hero-gradient: {{ config.extra.colors.hero_gradient }};
        }
    </style>
    {% endif %}
</head>
<body>
    <nav class="nav" id="nav">
        <div class="nav__inner">
            <a href="{{ get_url(path='@/_index.md') }}" class="nav__logo">{{ config.extra.bride }} & {{ config.extra.groom }}</a>
            <button class="nav__toggle" aria-label="Меню" onclick="document.getElementById('nav').classList.toggle('nav--open')">
                <span></span><span></span><span></span>
            </button>
            <ul class="nav__links">
                <li><a href="#about">О нас</a></li>
                <li><a href="#schedule">Программа</a></li>
                <li><a href="#location">Место</a></li>
                <li><a href="#details">Детали</a></li>
                <li><a href="#rsvp">RSVP</a></li>
            </ul>
        </div>
    </nav>

    {% block content %}{% endblock %}

    <footer class="footer">
        <div class="container">
            <p class="footer__names">{{ config.extra.bride }} & {{ config.extra.groom }}</p>
            <p class="footer__date">{{ config.extra.wedding_date }}</p>
        </div>
    </footer>

    <script>
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth' });
                    document.getElementById('nav').classList.remove('nav--open');
                }
            });
        });

        window.addEventListener('scroll', () => {
            const nav = document.getElementById('nav');
            if (window.scrollY > 50) {
                nav.classList.add('nav--scrolled');
            } else {
                nav.classList.remove('nav--scrolled');
            }
        });
    </script>
</body>
</html>
