{% extends 'base.html' %}

{% block title %}Ivan Prpić — Wedding Photography{% endblock %}

{% block content %}
<div class="landing-editorial">
    <section class="editorial-hero-image reveal">
        <div class="hero-img-wrap">
            <img src="{{ url_for('static', filename='images/IVAN PRPIĆ VJENČANJA WEDDINGS ZADAR-LANDING.jpg') }}" alt="Wedding Cover">
        </div>
    </section>

    <section class="editorial-statement container reveal">
        <h1>Kažu da vrijeme <br> ne možemo zaustaviti.<br> Ja se ne bih baš složio.</h1>
    </section>

    <section class="gallery-editorial reveal">
        {% if images %}
        <div class="gallery-grid" id="landingGrid">
            <div class="grid-sizer"></div>
            {% for img in images %}
            <div class="grid-item">
                <a href="#" data-src="{{ url_for('static', filename=img) }}" data-index="{{ loop.index0 }}" class="gallery-link">
                    <img src="{{ url_for('static', filename=img) }}" alt="Landing Photo" loading="lazy">
                </a>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </section>

    <section class="editorial-text-block container reveal">
        <h2>Cilj mi je zabilježiti vas u najboljem i najautentičnijem izdanju.</h2>
        <p>Kombiniram umjetnički i dokumentarni pristup kako bih zabilježio vaše trenutke na prirodan i autentičan način, stvarajući fotografije koje će i godinama kasnije pričati vašu priču.</p>
    </section>

    <section class="editorial-cta-dark reveal">
        <div class="cta-inner container">
            <h2>STVORIMO ZAJEDNO NEŠTO BEZVREMENSKO I JEDINSTVENO.</h2>
            <p>Javite mi se putem kontakt obrasca i ispričajte mi svoju priču.</p>
            <a href="{{ url_for('contact') }}" class="cta-link">KONTAKTIRAJTE ME</a>
        </div>
    </section>
</div>

<div id="lightbox" class="lightbox hidden" aria-hidden="true">
    <button id="lb-close" class="lb-btn lb-close" aria-label="Close">×</button>
    <button id="lb-prev" class="lb-btn lb-prev" aria-label="Previous">‹</button>
    <div class="lb-inner">
        <img id="lb-img" src="" alt="Enlarged view">
    </div>
    <button id="lb-next" class="lb-btn lb-next" aria-label="Next">›</button>
    <div id="lb-counter" class="lb-counter" aria-hidden="true"></div>
</div>

<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const links = Array.from(document.querySelectorAll('.gallery-link'));
        const images = links.map(link => link.dataset.src);
        const lightbox = document.getElementById('lightbox');
        const lbImg = document.getElementById('lb-img');
        const lbCounter = document.getElementById('lb-counter');
        const lbClose = document.getElementById('lb-close');
        const lbPrev = document.getElementById('lb-prev');
        const lbNext = document.getElementById('lb-next');
        let current = 0;

        function show(index) {
            if (images.length === 0) return;
            if (index < 0) index = images.length - 1;
            if (index >= images.length) index = 0;
            current = index;
            lbImg.src = images[current];
            if (lbCounter) lbCounter.textContent = (current + 1) + ' / ' + images.length;
            lightbox.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        function hide() {
            lightbox.classList.add('hidden');
            lbImg.src = '';
            document.body.style.overflow = '';
        }

        links.forEach((link, idx) => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                show(idx);
            });
        });

        if (lbClose) lbClose.addEventListener('click', hide);
        if (lightbox) lightbox.addEventListener('click', (e) => { if (e.target === lightbox) hide(); });
        if (lbPrev) lbPrev.addEventListener('click', (e) => { e.stopPropagation(); show(current - 1); });
        if (lbNext) lbNext.addEventListener('click', (e) => { e.stopPropagation(); show(current + 1); });

        document.addEventListener('keydown', (e) => {
            if (lightbox && lightbox.classList.contains('hidden')) return;
            if (e.key === 'Escape') hide();
            if (e.key === 'ArrowLeft') show(current - 1);
            if (e.key === 'ArrowRight') show(current + 1);
        });

        const grid = document.querySelector('#landingGrid');
        if (grid) {
            imagesLoaded(grid, function () {
                new Masonry(grid, {
                    itemSelector: '.grid-item',
                    columnWidth: '.grid-sizer',
                    percentPosition: true,
                    gutter: 16
                });
            });
        }
    });
</script>
{% endblock %}