<!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=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --page-bg: #d8d3cc;
            --paper: #eae6e0;
            --ink: #2c2825;
            --ink-light: #5a534d;
            --ink-faint: #8a847d;
            --accent: #7a6348;
            --shadow: rgba(44, 40, 37, 0.12);
            --shadow-deep: rgba(44, 40, 37, 0.2);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--page-bg);
            color: var(--ink);
            line-height: 1.6;
            font-weight: 300;
        }

        /* Book Cover - Compact header */
        .cover {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            background: var(--paper);
            padding: 15px 30px;
            box-shadow: 0 2px 10px var(--shadow);
        }

        .cover::before {
            display: none;
        }

        .cover-brand {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .cover-title {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.4rem;
            font-weight: 400;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--ink);
            margin: 0;
        }

        .cover-subtitle {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 0.85rem;
            font-weight: 300;
            font-style: italic;
            color: var(--ink-light);
            margin: 0;
        }

        .cover-line {
            display: none;
        }

        .cover-nav {
            display: flex;
            gap: 30px;
        }

        .cover-nav a {
            font-size: 0.75rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--ink-light);
            text-decoration: none;
            padding: 5px 0;
            position: relative;
            transition: color 0.3s;
        }

        .cover-nav a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--accent);
            transition: width 0.3s;
        }

        .cover-nav a:hover {
            color: var(--ink);
        }

        .cover-nav a:hover::after {
            width: 100%;
        }

        .scroll-hint {
            display: none;
        }

        /* Chapter/Section Pages */
        .chapter {
            min-height: 100vh;
            background: var(--paper);
            margin: 40px auto;
            max-width: 1400px;
            padding: 80px 60px;
            box-shadow: 0 4px 40px var(--shadow);
            position: relative;
        }

        .chapter::before {
            content: '';
            position: absolute;
            top: 40px;
            left: 40px;
            right: 40px;
            bottom: 40px;
            border: 1px solid rgba(139, 115, 85, 0.1);
            pointer-events: none;
        }

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

        .chapter-title {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 300;
            color: var(--ink);
            margin-bottom: 15px;
            letter-spacing: 0.05em;
        }

        .chapter-description {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.15rem;
            font-style: italic;
            color: var(--ink-light);
            max-width: 600px;
            margin-bottom: 60px;
        }

        /* Photobook Gallery - Magazine Spread Style */
        .spread {
            display: grid;
            gap: 30px;
            margin-bottom: 50px;
        }

        /* Full page spread */
        .spread.full {
            grid-template-columns: 1fr;
        }

        /* Two-page spread */
        .spread.duo {
            grid-template-columns: 1fr 1fr;
        }

        /* Asymmetric spread */
        .spread.asymmetric {
            grid-template-columns: 2fr 1fr;
        }

        .spread.asymmetric-reverse {
            grid-template-columns: 1fr 2fr;
        }

        /* Triple spread */
        .spread.triple {
            grid-template-columns: 1fr 1fr 1fr;
        }

        .photo-frame {
            position: relative;
            overflow: hidden;
            background: var(--page-bg);
            cursor: pointer;
        }

        .photo-frame.portrait {
            aspect-ratio: 3/4;
        }

        .photo-frame.landscape {
            aspect-ratio: 4/3;
        }

        .photo-frame.wide {
            aspect-ratio: 16/9;
        }

        .photo-frame.square {
            aspect-ratio: 1/1;
        }

        .photo-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .photo-frame:hover img {
            transform: scale(1.03);
        }

        /* Placeholder for empty frames */
        .photo-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f0ece6 0%, #e8e4de 100%);
            color: var(--ink-faint);
        }

        .photo-placeholder-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            opacity: 0.4;
        }

        .photo-placeholder-text {
            font-size: 0.75rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        /* Photo caption - book style */
        .photo-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 30px 25px 25px;
            background: linear-gradient(transparent, rgba(255,254,250,0.95));
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.4s ease;
        }

        .photo-frame:hover .photo-caption {
            opacity: 1;
            transform: translateY(0);
        }

        .photo-caption h3 {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.1rem;
            font-weight: 400;
            color: var(--ink);
            margin-bottom: 3px;
        }

        .photo-caption p {
            font-size: 0.75rem;
            color: var(--ink-light);
            letter-spacing: 0.05em;
        }

        /* Page number style */
        .page-number {
            text-align: center;
            padding: 40px 0 20px;
            font-size: 0.8rem;
            color: var(--ink-faint);
            letter-spacing: 0.1em;
        }

        /* About section - like an afterword */
        .afterword {
            max-width: 700px;
            margin: 0 auto;
            padding: 60px 40px;
            text-align: center;
        }

        .afterword-title {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.8rem;
            font-weight: 300;
            color: var(--ink);
            margin-bottom: 30px;
        }

        .afterword p {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.15rem;
            line-height: 1.9;
            color: var(--ink-light);
            margin-bottom: 20px;
        }

        /* Back cover / Footer */
        .back-cover {
            background: var(--ink);
            color: var(--paper);
            text-align: center;
            padding: 80px 40px;
            margin-top: 40px;
        }

        .back-cover-title {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 2rem;
            font-weight: 300;
            letter-spacing: 0.1em;
            margin-bottom: 20px;
        }

        .back-cover p {
            font-size: 0.8rem;
            opacity: 0.6;
            letter-spacing: 0.1em;
        }

        .back-cover a {
            color: var(--accent);
            text-decoration: none;
        }

        .back-cover a:hover {
            text-decoration: underline;
        }

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

        .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;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }

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

        .lightbox-close {
            position: absolute;
            top: 30px;
            right: 30px;
            font-size: 1.5rem;
            color: rgba(255,255,255,0.6);
            cursor: pointer;
            transition: color 0.3s;
            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;
            transition: color 0.3s;
        }

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

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

        /* Dynamic gallery */
        .dynamic-gallery {
            min-height: 200px;
        }

        .loading-message, .empty-message {
            text-align: center;
            padding: 60px 20px;
            color: var(--ink-faint);
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
            font-size: 1.1rem;
        }

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

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

        .photo-grid .photo-frame:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

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

        .photo-grid .photo-caption {
            padding: 15px 10px 10px;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
        }

        .photo-grid .photo-caption h3 {
            font-size: 0.9rem;
            color: white;
        }

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

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

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

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

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

        .photo-frame .edit-btn:hover {
            background: white;
        }

        /* 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: 30px;
            border-radius: 12px;
            max-width: 400px;
            width: 90%;
        }

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

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

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

        .edit-modal input:focus {
            outline: none;
            border-color: var(--accent);
        }

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

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

        .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: 15px;
            width: 100%;
        }

        /* Responsive */
        @media (max-width: 900px) {
            .spread.duo,
            .spread.asymmetric,
            .spread.asymmetric-reverse,
            .spread.triple {
                grid-template-columns: 1fr;
            }

            .chapter {
                margin: 20px 10px;
                padding: 50px 30px;
            }

            .chapter::before {
                top: 20px;
                left: 20px;
                right: 20px;
                bottom: 20px;
            }

            .cover::before {
                top: 15px;
                left: 15px;
                right: 15px;
                bottom: 15px;
            }

            .cover-nav {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }
        }

        @media (max-width: 600px) {
            .cover-title {
                letter-spacing: 0.08em;
            }

            .chapter {
                padding: 40px 20px;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="cover">
        <div class="cover-brand">
            <h1 class="cover-title">Rosy</h1>
            <p class="cover-subtitle">Photography</p>
        </div>
        <nav class="cover-nav">
            <a href="#landscapes">Landscapes</a>
            <a href="#historic">Historic Sites</a>
            <a href="#about">About</a>
        </nav>
    </header>

    <!-- Chapter 1: Landscapes -->
    <section class="chapter" id="landscapes">
        <span class="chapter-number">Chapter One</span>
        <h2 class="chapter-title">Landscapes</h2>
        <p class="chapter-description">
            Moments of stillness found in nature - where mountains meet sky
            and light paints the world in golden hues.
        </p>

        <!-- Photos loaded dynamically -->
        <div id="landscapes-gallery" class="dynamic-gallery">
            <div class="loading-message">Loading photos...</div>
        </div>

        <div class="page-number" id="landscapes-page-number"></div>
    </section>

    <!-- Chapter 2: Historic Sites -->
    <section class="chapter" id="historic">
        <span class="chapter-number">Chapter Two</span>
        <h2 class="chapter-title">Historic Sites</h2>
        <p class="chapter-description">
            Ancient stones and weathered walls - places where time has left its mark
            and history whispers through the ages.
        </p>

        <!-- Photos loaded dynamically -->
        <div id="historic-gallery" class="dynamic-gallery">
            <div class="loading-message">Loading photos...</div>
        </div>

        <div class="page-number" id="historic-page-number"></div>
    </section>

    <!-- Afterword / About -->
    <section class="chapter" id="about">
        <div class="afterword">
            <h2 class="afterword-title">Afterword</h2>
            <p>
                Every photograph in this collection is a moment I wanted to hold onto -
                a pause in time where light, place, and feeling came together.
            </p>
            <p>
                I'm drawn to the quiet corners of the world: landscapes that breathe
                with ancient rhythms, and historic places where stories linger in the stones.
                Through my lens, I try to capture not just what I see, but what I feel.
            </p>
            <p>
                <em>Thank you for taking this journey with me.</em>
            </p>
        </div>
        <div class="page-number">12</div>
    </section>

    <!-- Back Cover -->
    <footer class="back-cover">
        <p class="back-cover-title">Rosy</p>
        <p>&copy; 2024 &middot; All photographs by Rosy</p>
        <p style="margin-top: 20px;"><a href="/">Return Home</a> &middot; <a href="/photography/upload.html">Upload Photos</a></p>
    </footer>

    <!-- Lightbox -->
    <div class="lightbox" id="lightbox">
        <span class="lightbox-close" onclick="closeLightbox()">&times;</span>
        <span class="lightbox-nav lightbox-prev" onclick="prevImage()">&#8249;</span>
        <span class="lightbox-nav lightbox-next" onclick="nextImage()">&#8250;</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 (required)</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>
        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');
            document.body.style.overflow = 'hidden';
            currentImageIndex = index;
        }

        function closeLightbox() {
            document.getElementById('lightbox').classList.remove('active');
            document.body.style.overflow = '';
        }

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

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

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

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeLightbox();
                closeEditModal();
            }
            if (e.key === 'ArrowRight') nextImage();
            if (e.key === 'ArrowLeft') prevImage();
        });

        // Edit modal functions
        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(); // Refresh gallery
                } else {
                    alert(result.error || 'Failed to save');
                }
            } catch (err) {
                alert('Connection error');
            }
        }

        async function deletePhoto() {
            if (!confirm('Are you sure you want to 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(); // Refresh gallery
                } else {
                    alert(result.error || 'Failed to delete');
                }
            } catch (err) {
                alert('Connection error');
            }
        }

        // Format filename to readable title
        function formatTitle(filename) {
            // Remove extension and timestamp/random suffix
            let name = filename.replace(/\.[^.]+$/, ''); // remove extension
            name = name.replace(/_\d{13}_[a-f0-9]+$/, ''); // remove timestamp_random
            name = name.replace(/_/g, ' '); // underscores to spaces
            // Capitalize words
            return name.split(' ')
                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                .join(' ');
        }

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

            // Use custom title if available, otherwise format from filename
            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><p>${new Date(photo.uploaded).toLocaleDateString()}</p>`;

            // Edit button
            const editBtn = document.createElement('button');
            editBtn.className = 'edit-btn';
            editBtn.innerHTML = '&#9998;'; // pencil icon
            editBtn.title = 'Edit photo';
            editBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                openEditModal(photo.filename, photo.category, title);
            });

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

            // Add to lightbox array
            images.push({ src: photo.path, caption: title });

            img.addEventListener('click', () => openLightbox(photo.path, title, index));

            return frame;
        }

        // Load and display photos
        async function loadPhotos() {
            try {
                const response = await fetch('/upload-api/photos');
                const photos = await response.json();

                // Reset images array
                images = [];
                let globalIndex = 0;

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

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

            } catch (err) {
                console.error('Failed to load photos:', err);
                document.getElementById('landscapes-gallery').innerHTML = '<p class="empty-message">Could not load photos</p>';
                document.getElementById('historic-gallery').innerHTML = '<p class="empty-message">Could not load photos</p>';
            }
        }

        // Load photos when page loads
        loadPhotos();
    </script>
</body>
</html>
