<!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: #f7f5f2;
            --paper: #fffefa;
            --ink: #2c2825;
            --ink-light: #6b635c;
            --ink-faint: #a39d96;
            --accent: #8b7355;
            --shadow: rgba(44, 40, 37, 0.08);
            --shadow-deep: rgba(44, 40, 37, 0.15);
        }

        * {
            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 */
        .cover {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: var(--paper);
            position: relative;
            padding: 60px 40px;
            box-shadow: 0 0 60px var(--shadow);
        }

        .cover::before {
            content: '';
            position: absolute;
            top: 30px;
            left: 30px;
            right: 30px;
            bottom: 30px;
            border: 1px solid var(--ink-faint);
            pointer-events: none;
        }

        .cover-title {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(3rem, 8vw, 6rem);
            font-weight: 300;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--ink);
            margin-bottom: 20px;
        }

        .cover-subtitle {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.3rem;
            font-weight: 300;
            font-style: italic;
            color: var(--ink-light);
            letter-spacing: 0.05em;
            margin-bottom: 60px;
        }

        .cover-line {
            width: 80px;
            height: 1px;
            background: var(--accent);
            margin-bottom: 60px;
        }

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

        .cover-nav a {
            font-size: 0.8rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--ink-light);
            text-decoration: none;
            padding: 10px 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 {
            position: absolute;
            bottom: 40px;
            font-size: 0.7rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--ink-faint);
            animation: float 2s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(5px); }
        }

        /* 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(300px, 1fr));
            gap: 25px;
        }

        .photo-grid .photo-frame {
            aspect-ratio: auto;
        }

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

        /* 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>
    <!-- Cover Page -->
    <section class="cover">
        <h1 class="cover-title">Rosy</h1>
        <p class="cover-subtitle">A Collection of Photographs</p>
        <div class="cover-line"></div>
        <nav class="cover-nav">
            <a href="#landscapes">Landscapes</a>
            <a href="#historic">Historic Sites</a>
            <a href="#about">About</a>
        </nav>
        <span class="scroll-hint">Scroll to explore</span>
    </section>

    <!-- 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>

    <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();
            if (e.key === 'ArrowRight') nextImage();
            if (e.key === 'ArrowLeft') prevImage();
        });

        // 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';

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

            const caption = document.createElement('div');
            caption.className = 'photo-caption';
            caption.innerHTML = `<h3>${formatTitle(photo.filename)}</h3><p>${new Date(photo.uploaded).toLocaleDateString()}</p>`;

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

            // Add to lightbox array
            const title = formatTitle(photo.filename);
            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');
                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.innerHTML = '';
                    landscapesGallery.appendChild(grid);
                    document.getElementById('landscapes-page-number').textContent = `${photos.landscapes.length} photo${photos.landscapes.length !== 1 ? 's' : ''}`;
                } else {
                    landscapesGallery.innerHTML = '<p class="empty-message">No landscape photos yet. <a href="/photography/upload.html">Upload your first photo</a></p>';
                }

                // Render historic
                const historicGallery = document.getElementById('historic-gallery');
                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.innerHTML = '';
                    historicGallery.appendChild(grid);
                    document.getElementById('historic-page-number').textContent = `${photos.historic.length} photo${photos.historic.length !== 1 ? 's' : ''}`;
                } else {
                    historicGallery.innerHTML = '<p class="empty-message">No historic site photos yet. <a href="/photography/upload.html">Upload your first photo</a></p>';
                }

            } 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>
