{% extends "base.html" %}

{% block content %}
<!-- Hero -->
<section class="hero" style="background-image: {% if config.extra.hero_image %}url('{{ config.extra.hero_image }}'){% else %}var(--hero-gradient){% endif %}">
    <div class="hero__overlay"></div>
    <div class="hero__content">
        <p class="hero__invite">{{ config.extra.hero_invite }}</p>
        <h1 class="hero__names">{{ config.extra.bride }} <span>&</span> {{ config.extra.groom }}</h1>
        <div class="hero__divider"></div>
        <p class="hero__date">{{ config.extra.wedding_date }}</p>
        <p class="hero__venue">{{ config.extra.venue_name }}</p>
    </div>
    <div class="hero__scroll">
        <a href="#about">&#8595;</a>
    </div>
</section>

<!-- About -->
<section class="section section--about" id="about">
    <div class="container">
        <h2 class="section__title">{{ config.extra.about_title }}</h2>
        <div class="section__divider"></div>
        <div class="about">
            <div class="about__photo about__photo--bride">
                {% if config.extra.bride_photo %}
                <img src="{{ config.extra.bride_photo }}" alt="{{ config.extra.bride }}">
                {% else %}
                <div class="about__photo-placeholder">Фото невесты</div>
                {% endif %}
                <p class="about__name">{{ config.extra.bride }}</p>
            </div>
            <div class="about__story">
                {% for paragraph in config.extra.about_text %}
                <p>{{ paragraph }}</p>
                {% endfor %}
            </div>
            <div class="about__photo about__photo--groom">
                {% if config.extra.groom_photo %}
                <img src="{{ config.extra.groom_photo }}" alt="{{ config.extra.groom }}">
                {% else %}
                <div class="about__photo-placeholder">Фото жениха</div>
                {% endif %}
                <p class="about__name">{{ config.extra.groom }}</p>
            </div>
        </div>
    </div>
</section>

<!-- Countdown -->
<section class="section section--countdown" id="countdown">
    <div class="container">
        <h2 class="section__title">До нашей свадьбы</h2>
        <div class="section__divider"></div>
        <div class="countdown" id="countdown-timer">
            <div class="countdown__item">
                <span class="countdown__number" id="days">0</span>
                <span class="countdown__label">дней</span>
            </div>
            <div class="countdown__item">
                <span class="countdown__number" id="hours">0</span>
                <span class="countdown__label">часов</span>
            </div>
            <div class="countdown__item">
                <span class="countdown__number" id="minutes">0</span>
                <span class="countdown__label">минут</span>
            </div>
            <div class="countdown__item">
                <span class="countdown__number" id="seconds">0</span>
                <span class="countdown__label">секунд</span>
            </div>
        </div>
    </div>
</section>

<!-- Schedule -->
<section class="section section--schedule" id="schedule">
    <div class="container">
        <h2 class="section__title">Программа</h2>
        <div class="section__divider"></div>
        <div class="schedule-days">
            {% for day in config.extra.schedule %}
            <div class="schedule-day">
                <div class="schedule-day__header">
                    <span class="schedule-day__date">{{ day.day }}</span>
                    <span class="schedule-day__label">{{ day.label }}</span>
                </div>
                <div class="timeline">
                    {% for item in day.items %}
                    <div class="timeline__item">
                        <div class="timeline__time">{{ item.time }}</div>
                        <div class="timeline__content">
                            <h3>{{ item.title }}</h3>
                            <p>{{ item.description }}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Location -->
<section class="section section--location" id="location">
    <div class="container">
        <h2 class="section__title">Место проведения</h2>
        <div class="section__divider"></div>
        <div class="location">
            <div class="location__info">
                <h3>{{ config.extra.venue_name }}</h3>
                <p class="location__address">{{ config.extra.venue_address }}</p>
                <div class="location__details">
                    <p><strong>Дата:</strong> {{ config.extra.wedding_date }}</p>
                    <p><strong>Начало:</strong> {{ config.extra.wedding_time }}</p>
                    <p><strong>Дресс-код:</strong> {{ config.extra.dress_code }}</p>
                </div>
                <a href="{{ config.extra.venue_map_url }}" class="btn btn--outline">Открыть карту</a>
            </div>
            <div class="location__map">
                {% if config.extra.venue_map_embed %}
                <iframe src="{{ config.extra.venue_map_embed }}" width="100%" height="400" frameborder="0" allowfullscreen></iframe>
                {% else %}
                <div class="location__map-placeholder">
                    <p>Карта</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>

<!-- Details -->
<section class="section section--details" id="details">
    <div class="container">
        <h2 class="section__title">Важные детали</h2>
        <div class="section__divider"></div>
        <div class="details">
            {% for card in config.extra.details %}
            <div class="details__card">
                <div class="details__icon">{{ card.icon | safe }}</div>
                <h3>{{ card.title }}</h3>
                <p>{{ card.description }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Palette -->
<section class="section section--palette" id="palette">
    <div class="container">
        <h2 class="section__title">Палитра мероприятия</h2>
        <div class="section__divider"></div>
        <div class="palette">
            {% for swatch in config.extra.palette %}
            <div class="palette__item">
                <div class="palette__circle" style="--swatch-color: {{ swatch.color }}; background-color: {{ swatch.color }}"></div>
                <span class="palette__name">{{ swatch.name }}</span>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- RSVP -->
<section class="section section--rsvp" id="rsvp">
    <div class="container">
        <h2 class="section__title">{{ config.extra.rsvp_title }}</h2>
        <div class="section__divider"></div>
        <p class="section__subtitle">Пожалуйста, сообщите о вашем присутствии до {{ config.extra.rsvp_deadline }}</p>
        <div style="text-align: center;">
            <a href="{{ config.extra.rsvp_url }}" target="_blank" class="btn btn--primary" style="display: inline-block; width: auto;">{{ config.extra.rsvp_button }}</a>
        </div>
    </div>
</section>

<script>
// Countdown
(function() {
    const weddingDate = new Date('{{ config.extra.wedding_datetime_iso }}');
    function update() {
        const now = new Date();
        const diff = weddingDate - now;
        if (diff <= 0) return;
        document.getElementById('days').textContent = Math.floor(diff / 86400000);
        document.getElementById('hours').textContent = Math.floor((diff % 86400000) / 3600000);
        document.getElementById('minutes').textContent = Math.floor((diff % 3600000) / 60000);
        document.getElementById('seconds').textContent = Math.floor((diff % 60000) / 1000);
    }
    update();
    setInterval(update, 1000);
})();

</script>
{% endblock %}