<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rosy's Photography</title>
    <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,300;0,400;0,500;1,300;1,400&family=EB+Garamond:wght@400;500;600&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --page-bg: #d8d3cc;
            --paper: #eae6e0;
            --paper-dark: #ddd8d0;
            --ink: #2c2825;
            --ink-light: #5a534d;
            --ink-faint: #8a847d;
            --accent: #7a6348;
            --shadow: rgba(44, 40, 37, 0.12);
            --shadow-deep: rgba(44, 40, 37, 0.25);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background: linear-gradient(135deg, #8b7355 0%, #5a4a3a 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            perspective: 2000px;
            overflow: hidden;
        }

        /* Book Container */
        .book {
            width: calc(100vw - 20px);
            max-width: none;
            height: calc(100vh - 20px);
            max-height: none;
            position: relative;
            transform-style: preserve-3d;
        }

        /* Individual Pages */
        .page {
            position: absolute;
            width: 100%;
            height: 100%;
            transform-origin: left center;
            transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
            transform-style: preserve-3d;
            cursor: pointer;
        }

        .page-front, .page-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 0 8px 8px 0;
            overflow: hidden;
            box-shadow: 5px 5px 30px var(--shadow-deep);
        }

        .page-front {
            background: var(--paper);
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            background-blend-mode: overlay;
            background-size: 150px 150px;
        }

        .page-back {
            background: var(--paper-dark);
            transform: rotateY(180deg);
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            background-blend-mode: overlay;
            background-size: 150px 150px;
        }

        /* Page flipped state */
        .page.flipped {
            transform: rotateY(-180deg);
        }

        /* Page stacking */
        .page:nth-child(1) { z-index: 4; }
        .page:nth-child(2) { z-index: 3; }
        .page:nth-child(3) { z-index: 2; }
        .page:nth-child(4) { z-index: 1; }

        .page.flipped:nth-child(1) { z-index: 1; }
        .page.flipped:nth-child(2) { z-index: 2; }
        .page.flipped:nth-child(3) { z-index: 3; }
        .page.flipped:nth-child(4) { z-index: 4; }

        /* Page edge effect */
        .page-front::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 100%;
            background: linear-gradient(to left, rgba(0,0,0,0.1), transparent);
            pointer-events: none;
        }

        .page-back::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 100%;
            background: linear-gradient(to right, rgba(0,0,0,0.15), transparent);
            pointer-events: none;
        }

        /* Book spine shadow */
        .book::before {
            content: '';
            position: absolute;
            left: -5px;
            top: 10px;
            bottom: 10px;
            width: 15px;
            background: linear-gradient(to right, rgba(0,0,0,0.3), transparent);
            border-radius: 5px 0 0 5px;
            z-index: 10;
        }

        /* Cover Page Styles */
        .cover-content {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
            position: relative;
            background: #f5f0eb;
            overflow: hidden;
        }

        .cover-title {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(3rem, 8vw, 5rem);
            font-weight: 300;
            font-style: italic;
            color: #5c524a;
            letter-spacing: 0.05em;
            overflow: hidden;
            border-right: 2px solid #5c524a;
            white-space: nowrap;
            width: 0;
            animation: typing 2.5s steps(12) 0.5s forwards, blink 0.7s step-end infinite;
        }

        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }

        @keyframes blink {
            50% { border-color: transparent; }
        }

        /* Chapter Page Styles */
        .chapter-content {
            height: 100%;
            padding: 30px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        .chapter-header {
            text-align: center;
            margin-bottom: 25px;
            flex-shrink: 0;
        }

        .chapter-number {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 0.75rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--ink-faint);
            margin-bottom: 8px;
        }

        .chapter-title {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            font-weight: 300;
            color: var(--ink);
            margin-bottom: 8px;
        }

        .chapter-description {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 0.95rem;
            font-style: italic;
            color: var(--ink-light);
            max-width: 400px;
            margin: 0 auto;
        }

        /* Photo Grid */
        .photo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 12px;
            flex: 1;
            overflow-y: auto;
            padding: 10px 0;
        }

        .photo-frame {
            aspect-ratio: 1;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            position: relative;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .photo-frame:hover {
            transform: scale(1.03);
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }

        .photo-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .photo-frame .photo-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px 8px 8px;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            opacity: 0;
            transition: opacity 0.3s;
        }

        .photo-frame:hover .photo-caption {
            opacity: 1;
        }

        .photo-caption h3 {
            font-size: 0.75rem;
            color: white;
            font-weight: 400;
        }

        .photo-caption p {
            font-size: 0.6rem;
            color: rgba(255,255,255,0.7);
        }

        /* Edit button */
        .photo-frame .edit-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(255,255,255,0.9);
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .photo-frame:hover .edit-btn {
            opacity: 1;
        }

        /* Page footer */
        .page-footer {
            text-align: left;
            padding-top: 15px;
            flex-shrink: 0;
            border-top: 1px solid rgba(0,0,0,0.05);
            margin-top: auto;
        }

        .page-number {
            font-size: 0.75rem;
            color: var(--ink-faint);
        }

        .page-number a {
            color: var(--accent);
            text-decoration: none;
        }

        .page-number a:hover {
            text-decoration: underline;
        }

        /* Empty state */
        .empty-message {
            text-align: center;
            padding: 40px 20px;
            color: var(--ink-faint);
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
        }

        .empty-message a {
            color: var(--accent);
        }

        /* Navigation arrows */
        .nav-arrows {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
            z-index: 100;
        }

        .nav-btn {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            color: var(--ink);
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            transition: transform 0.2s, background 0.2s;
        }

        .nav-btn:hover {
            transform: scale(1.1);
            background: white;
        }

        .nav-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            transform: none;
        }

        /* Page indicator */
        .page-indicator {
            position: fixed;
            bottom: 95px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }

        .indicator-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.4);
            cursor: pointer;
            transition: background 0.3s, transform 0.3s;
        }

        .indicator-dot:hover {
            transform: scale(1.2);
        }

        .indicator-dot.active {
            background: white;
        }

        /* Lightbox */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(20, 18, 16, 0.95);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .lightbox.active {
            display: flex;
        }

        .lightbox-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
        }

        .lightbox img {
            max-width: 100%;
            max-height: 85vh;
            object-fit: contain;
            border-radius: 4px;
        }

        .lightbox-caption {
            text-align: center;
            margin-top: 15px;
            color: rgba(255,255,255,0.7);
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
        }

        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 2rem;
            color: rgba(255,255,255,0.6);
            cursor: pointer;
            z-index: 1001;
        }

        .lightbox-close:hover {
            color: white;
        }

        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2rem;
            color: rgba(255,255,255,0.5);
            cursor: pointer;
            padding: 20px;
        }

        .lightbox-nav:hover {
            color: white;
        }

        .lightbox-prev { left: 20px; }
        .lightbox-next { right: 20px; }

        /* Edit modal */
        .edit-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }

        .edit-modal.active {
            display: flex;
        }

        .edit-modal-content {
            background: var(--paper);
            padding: 25px;
            border-radius: 12px;
            max-width: 350px;
            width: 90%;
        }

        .edit-modal h3 {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: var(--ink);
        }

        .edit-modal label {
            display: block;
            margin-bottom: 5px;
            color: var(--ink-light);
            font-size: 0.85rem;
        }

        .edit-modal input {
            width: 100%;
            padding: 8px;
            border: 1px solid var(--ink-faint);
            border-radius: 6px;
            margin-bottom: 12px;
            font-size: 0.9rem;
        }

        .edit-modal-buttons {
            display: flex;
            gap: 10px;
        }

        .edit-modal button {
            flex: 1;
            padding: 8px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85rem;
        }

        .edit-modal .save-btn {
            background: var(--accent);
            color: white;
        }

        .edit-modal .cancel-btn {
            background: var(--ink-faint);
            color: white;
        }

        .edit-modal .delete-btn {
            background: #c0392b;
            color: white;
            margin-top: 10px;
            width: 100%;
        }

        /* Responsive */
        @media (max-width: 600px) {
            body {
                padding: 5px;
            }

            .book {
                width: calc(100vw - 10px);
                height: calc(100vh - 10px);
            }

            .chapter-content {
                padding: 15px;
            }

            .photo-grid {
                grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
                gap: 8px;
            }

            .nav-btn {
                width: 40px;
                height: 40px;
            }

            .nav-arrows {
                bottom: 15px;
            }

            .page-indicator {
                bottom: 70px;
            }
        }
    </style>
</head>
<body>
    <!-- The Book -->
    <div class="book" id="book">
        <!-- Page 1: Cover -->
        <div class="page" id="page-1">
            <div class="page-front">
                <div class="cover-content">
                    <h1 class="cover-title">Thru My Lens</h1>
                </div>
            </div>
            <div class="page-back">
                <div class="chapter-content" style="display: flex; align-items: center; justify-content: center;">
                    <p style="font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--ink-light);">
                        A collection of moments<br>captured through my lens
                    </p>
                </div>
            </div>
        </div>

        <!-- Page 2: Nature -->
        <div class="page" id="page-2">
            <div class="page-front">
                <div class="chapter-content">
                    <div class="chapter-header">
                        <span class="chapter-number">Chapter One</span>
                        <h2 class="chapter-title">Nature</h2>
                        <p class="chapter-description">Moments of stillness found in nature</p>
                    </div>
                    <div id="nature-gallery" class="photo-grid">
                        <div class="empty-message">Loading...</div>
                    </div>
                    <div class="page-footer">
                        <p class="page-number" id="nature-count"></p>
                    </div>
                </div>
            </div>
            <div class="page-back">
                <div class="chapter-content" style="display: flex; align-items: center; justify-content: center;">
                    <p style="font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--ink-light); text-align: center;">
                        "In every walk with nature,<br>one receives far more than he seeks."<br><span style="font-size: 0.8em;">— John Muir</span>
                    </p>
                </div>
            </div>
        </div>

        <!-- Page 3: City -->
        <div class="page" id="page-3">
            <div class="page-front">
                <div class="chapter-content">
                    <div class="chapter-header">
                        <span class="chapter-number">Chapter Two</span>
                        <h2 class="chapter-title">City</h2>
                        <p class="chapter-description">Urban stories and street moments</p>
                    </div>
                    <div id="city-gallery" class="photo-grid">
                        <div class="empty-message">Loading...</div>
                    </div>
                    <div class="page-footer">
                        <p class="page-number" id="city-count"></p>
                    </div>
                </div>
            </div>
            <div class="page-back">
                <div class="chapter-content" style="display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px;">
                    <p style="font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--ink);">Thank you for viewing</p>
                    <p style="font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--ink-light);">— Rosy</p>
                    <a href="/photography/upload.html" style="color: var(--accent); font-size: 0.85rem;">Upload Photos</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <div class="page-indicator">
        <div class="indicator-dot active" data-page="0"></div>
        <div class="indicator-dot" data-page="1"></div>
        <div class="indicator-dot" data-page="2"></div>
        <div class="indicator-dot" data-page="3"></div>
    </div>

    <div class="nav-arrows">
        <button class="nav-btn" id="prevBtn" disabled>←</button>
        <button class="nav-btn" id="nextBtn">→</button>
    </div>

    <!-- Lightbox -->
    <div class="lightbox" id="lightbox">
        <span class="lightbox-close" onclick="closeLightbox()">×</span>
        <span class="lightbox-nav lightbox-prev" onclick="prevImage()">‹</span>
        <span class="lightbox-nav lightbox-next" onclick="nextImage()">›</span>
        <div class="lightbox-content">
            <img src="" alt="Full size" id="lightbox-img">
            <p class="lightbox-caption" id="lightbox-caption"></p>
        </div>
    </div>

    <!-- Edit Modal -->
    <div class="edit-modal" id="editModal">
        <div class="edit-modal-content">
            <h3>Edit Photo</h3>
            <label for="editTitle">Title</label>
            <input type="text" id="editTitle" placeholder="Photo title">
            <label for="editPassword">Password</label>
            <input type="password" id="editPassword" placeholder="Enter password">
            <div class="edit-modal-buttons">
                <button class="cancel-btn" onclick="closeEditModal()">Cancel</button>
                <button class="save-btn" onclick="saveEdit()">Save</button>
            </div>
            <button class="delete-btn" onclick="deletePhoto()">Delete Photo</button>
            <input type="hidden" id="editFilename">
            <input type="hidden" id="editCategory">
        </div>
    </div>

    <script>
        // Book page flipping
        let currentPage = 0;
        const totalPages = 4; // Cover front, cover back, nature front/back, city front/back, end
        const pages = document.querySelectorAll('.page');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const indicators = document.querySelectorAll('.indicator-dot');

        function updateButtons() {
            prevBtn.disabled = currentPage === 0;
            nextBtn.disabled = currentPage >= pages.length;

            indicators.forEach((dot, i) => {
                dot.classList.toggle('active', i === currentPage);
            });
        }

        function flipTo(pageIndex) {
            pages.forEach((page, i) => {
                if (i < pageIndex) {
                    page.classList.add('flipped');
                } else {
                    page.classList.remove('flipped');
                }
            });
            currentPage = pageIndex;
            updateButtons();
        }

        function nextPage() {
            if (currentPage < pages.length) {
                flipTo(currentPage + 1);
            }
        }

        function prevPage() {
            if (currentPage > 0) {
                flipTo(currentPage - 1);
            }
        }

        nextBtn.addEventListener('click', nextPage);
        prevBtn.addEventListener('click', prevPage);

        // Click on page to flip
        pages.forEach((page, i) => {
            page.addEventListener('click', (e) => {
                // Don't flip if clicking on photo or edit button
                if (e.target.closest('.photo-frame') || e.target.closest('.edit-btn')) return;

                if (page.classList.contains('flipped')) {
                    flipTo(i);
                } else {
                    flipTo(i + 1);
                }
            });
        });

        // Indicator dots
        indicators.forEach(dot => {
            dot.addEventListener('click', () => {
                flipTo(parseInt(dot.dataset.page));
            });
        });

        // Keyboard navigation
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight') nextPage();
            if (e.key === 'ArrowLeft') prevPage();
        });

        // Lightbox
        let currentImageIndex = 0;
        let images = [];

        function openLightbox(src, caption, index) {
            document.getElementById('lightbox-img').src = src;
            document.getElementById('lightbox-caption').textContent = caption || '';
            document.getElementById('lightbox').classList.add('active');
            currentImageIndex = index;
        }

        function closeLightbox() {
            document.getElementById('lightbox').classList.remove('active');
        }

        function nextImage() {
            if (images.length === 0) return;
            currentImageIndex = (currentImageIndex + 1) % images.length;
            document.getElementById('lightbox-img').src = images[currentImageIndex].src;
            document.getElementById('lightbox-caption').textContent = images[currentImageIndex].caption;
        }

        function prevImage() {
            if (images.length === 0) return;
            currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
            document.getElementById('lightbox-img').src = images[currentImageIndex].src;
            document.getElementById('lightbox-caption').textContent = images[currentImageIndex].caption;
        }

        document.getElementById('lightbox').addEventListener('click', (e) => {
            if (e.target.id === 'lightbox') closeLightbox();
        });

        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                closeLightbox();
                closeEditModal();
            }
        });

        // Edit modal
        function openEditModal(filename, category, currentTitle) {
            document.getElementById('editFilename').value = filename;
            document.getElementById('editCategory').value = category;
            document.getElementById('editTitle').value = currentTitle;
            document.getElementById('editPassword').value = '';
            document.getElementById('editModal').classList.add('active');
        }

        function closeEditModal() {
            document.getElementById('editModal').classList.remove('active');
        }

        async function saveEdit() {
            const filename = document.getElementById('editFilename').value;
            const category = document.getElementById('editCategory').value;
            const title = document.getElementById('editTitle').value;
            const password = document.getElementById('editPassword').value;

            if (!password) { alert('Please enter the password'); return; }

            try {
                const response = await fetch('/upload-api/edit', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ filename, category, title, password })
                });
                const result = await response.json();
                if (result.success) {
                    closeEditModal();
                    loadPhotos();
                } else {
                    alert(result.error || 'Failed to save');
                }
            } catch (err) {
                alert('Connection error');
            }
        }

        async function deletePhoto() {
            if (!confirm('Delete this photo?')) return;

            const filename = document.getElementById('editFilename').value;
            const category = document.getElementById('editCategory').value;
            const password = document.getElementById('editPassword').value;

            if (!password) { alert('Please enter the password'); return; }

            try {
                const response = await fetch('/upload-api/delete', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ filename, category, password })
                });
                const result = await response.json();
                if (result.success) {
                    closeEditModal();
                    loadPhotos();
                } else {
                    alert(result.error || 'Failed to delete');
                }
            } catch (err) {
                alert('Connection error');
            }
        }

        // Format filename to title
        function formatTitle(filename) {
            let name = filename.replace(/\.[^.]+$/, '');
            name = name.replace(/_\d{13}_[a-f0-9]+$/, '');
            name = name.replace(/_/g, ' ');
            return name.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
        }

        // Create photo frame
        function createPhotoFrame(photo, index) {
            const frame = document.createElement('div');
            frame.className = 'photo-frame';

            const title = photo.title || formatTitle(photo.filename);

            const img = document.createElement('img');
            img.src = photo.path;
            img.alt = title;
            img.loading = 'lazy';

            const caption = document.createElement('div');
            caption.className = 'photo-caption';
            caption.innerHTML = `<h3>${title}</h3>`;

            const editBtn = document.createElement('button');
            editBtn.className = 'edit-btn';
            editBtn.innerHTML = '✎';
            editBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                openEditModal(photo.filename, photo.category, title);
            });

            frame.appendChild(img);
            frame.appendChild(caption);
            frame.appendChild(editBtn);

            images.push({ src: photo.path, caption: title });
            img.addEventListener('click', (e) => {
                e.stopPropagation();
                openLightbox(photo.path, title, index);
            });

            return frame;
        }

        // Load photos
        async function loadPhotos() {
            try {
                const response = await fetch('/upload-api/photos');
                const photos = await response.json();
                images = [];
                let globalIndex = 0;

                // Nature gallery
                const natureGallery = document.getElementById('nature-gallery');
                natureGallery.innerHTML = '';
                if (photos.landscapes && photos.landscapes.length > 0) {
                    photos.landscapes.forEach(photo => {
                        natureGallery.appendChild(createPhotoFrame(photo, globalIndex++));
                    });
                    document.getElementById('nature-count').innerHTML =
                        `${photos.landscapes.length} photo${photos.landscapes.length !== 1 ? 's' : ''} · <a href="/photography/upload.html?category=landscapes">Add more</a>`;
                } else {
                    natureGallery.innerHTML = '<p class="empty-message">No photos yet. <a href="/photography/upload.html?category=landscapes">Upload first photo</a></p>';
                }

                // City gallery
                const cityGallery = document.getElementById('city-gallery');
                cityGallery.innerHTML = '';
                if (photos.historic && photos.historic.length > 0) {
                    photos.historic.forEach(photo => {
                        cityGallery.appendChild(createPhotoFrame(photo, globalIndex++));
                    });
                    document.getElementById('city-count').innerHTML =
                        `${photos.historic.length} photo${photos.historic.length !== 1 ? 's' : ''} · <a href="/photography/upload.html?category=historic">Add more</a>`;
                } else {
                    cityGallery.innerHTML = '<p class="empty-message">No photos yet. <a href="/photography/upload.html?category=historic">Upload first photo</a></p>';
                }

            } catch (err) {
                console.error('Failed to load photos:', err);
            }
        }

        loadPhotos();
    </script>
</body>
</html>
