<?php
/**
 * Page 2 - Slideshow Page (page2.php)
 * Memory slideshow with romantic music and captions
 */

require_once 'config.php';
global $slideshow_data;
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Our Memories 💕</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .slideshow-wrapper {
            width: 100%;
            max-width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .slideshow-container {
            width: 100%;
            max-width: 100%;
        }

        .slide {
            display: none;
            width: 100%;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: auto;
            padding: 0;
            box-sizing: border-box;
        }

        .slide.active {
            display: flex;
            gap: 15px;
        }

        .slide img {
            width: 100%;
            max-width: 100%;
            height: auto;
            max-height: 55vh;
            aspect-ratio: 4/3;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .slide-caption {
            font-family: 'Dancing Script', cursive;
            font-size: clamp(1rem, 4vw, 1.5rem);
            color: var(--color-rose);
            margin-top: 12px;
            text-align: center;
            animation: fadeInUp 0.8s ease 0.3s both;
            padding: 0 10px;
            box-sizing: border-box;
        }

        .slideshow-controls {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 20px;
            padding: 0 10px;
            box-sizing: border-box;
            flex-wrap: wrap;
        }

        .slideshow-controls button {
            font-size: clamp(0.85rem, 3vw, 1rem);
            padding: 10px 16px;
            min-height: 44px;
            flex: 1;
            min-width: 120px;
            max-width: 150px;
        }

        .slide-progress {
            display: flex;
            gap: 8px;
            justify-content: center;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .progress-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 77, 109, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
            touch-action: manipulation;
        }

        .progress-dot.active {
            background: var(--color-rose);
            transform: scale(1.3);
        }

        .slideshow-message {
            margin-top: 20px;
            text-align: center;
            animation: fadeInUp 1s ease 0.5s both;
            padding: 0 15px;
            box-sizing: border-box;
        }

        .slideshow-message h2 {
            font-family: 'Dancing Script', cursive;
            font-size: clamp(1.2rem, 4vw, 1.8rem);
            color: var(--color-rose);
            margin-bottom: 15px;
            line-height: 1.2;
        }

        .slideshow-message p {
            font-size: clamp(0.9rem, 3.5vw, 1rem);
            color: #666;
            margin-top: 12px;
        }

        /* Mobile adjustments */
        @media (max-width: 480px) {
            .slideshow-wrapper {
                padding: 0 12px;
            }

            .slide.active {
                gap: 12px;
            }

            .slide img {
                max-height: 50vh;
                border-radius: 10px;
            }

            .slide-caption {
                font-size: 1rem;
                margin-top: 10px;
            }

            .slideshow-controls {
                gap: 10px;
                margin-top: 18px;
                padding: 0 8px;
            }

            .slideshow-controls button {
                font-size: 0.85rem;
                padding: 9px 14px;
                min-width: 100px;
                max-width: 140px;
            }

            .slide-progress {
                gap: 6px;
                margin-top: 12px;
            }

            .progress-dot {
                width: 8px;
                height: 8px;
            }

            .slideshow-message {
                margin-top: 18px;
                padding: 0 12px;
            }

            .slideshow-message h2 {
                font-size: 1.2rem;
            }

            .slideshow-message p {
                font-size: 0.9rem;
            }
        }

        /* iPhone 8 specific (375px width) */
        @media (max-width: 375px) {
            .slideshow-wrapper {
                padding: 0 10px;
            }

            .slide.active {
                gap: 10px;
            }

            .slide img {
                max-height: 48vh;
                border-radius: 9px;
            }

            .slide-caption {
                font-size: 0.95rem;
                margin-top: 8px;
            }

            .slideshow-controls {
                gap: 8px;
                margin-top: 15px;
                padding: 0;
            }

            .slideshow-controls button {
                font-size: 0.8rem;
                padding: 8px 12px;
                min-width: 90px;
                max-width: 130px;
            }

            .slide-progress {
                gap: 5px;
                margin-top: 10px;
            }

            .progress-dot {
                width: 8px;
                height: 8px;
            }

            .slideshow-message {
                margin-top: 15px;
                padding: 0 10px;
            }

            .slideshow-message h2 {
                font-size: 1.1rem;
                margin-bottom: 12px;
            }

            .slideshow-message p {
                font-size: 0.85rem;
                margin-top: 10px;
            }
        }

        /* Landscape mode */
        @media (max-height: 500px) {
            .slide img {
                max-height: 40vh;
            }

            .slide-caption {
                margin-top: 8px;
                font-size: 0.95rem;
            }

            .slideshow-controls {
                margin-top: 12px;
                gap: 8px;
            }

            .slideshow-message {
                margin-top: 12px;
            }

            .slideshow-message h2 {
                font-size: 1.2rem;
                margin-bottom: 8px;
            }

            .slideshow-message p {
                font-size: 0.85rem;
                margin-top: 8px;
            }
        }

        /* iPhone Safe Area */
        @supports (padding: max(0px)) {
            .page {
                padding-top: max(15px, env(safe-area-inset-top));
                padding-left: max(0, env(safe-area-inset-left));
                padding-right: max(0, env(safe-area-inset-right));
                padding-bottom: max(15px, env(safe-area-inset-bottom));
            }
        }
    </style>
</head>
<body>
    <div class="animated-bg"></div>
    <div class="hearts-container"></div>
    
    <audio id="musicSlideshow" loop muted>
        <source src="<?php echo MUSIC_SLIDESHOW; ?>" type="audio/mpeg">
    </audio>
    
    <div class="page">
        <div class="slideshow-wrapper">
            <div class="slideshow-container">
                <!-- Slides -->
                <?php foreach ($slideshow_data as $index => $memory): ?>
                    <div class="slide <?php echo $index === 0 ? 'active' : ''; ?>">
                        <img src="<?php echo $memory['image']; ?>" 
                             alt="Memory <?php echo $index + 1; ?>"
                             onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22300%22%3E%3Crect fill=%22%23ffb6c1%22 width=%22400%22 height=%22300%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 font-size=%2224%22 text-anchor=%22middle%22 dy=%22.3em%22 fill=%22%23ff4d6d%22%3EMemory <?php echo $index + 1; ?>%3C/text%3E%3C/svg%3E'">
                        <div class="slide-caption"><?php echo $memory['caption']; ?></div>
                    </div>
                <?php endforeach; ?>
                
                <!-- Slideshow Message -->
                <div class="slideshow-message" style="display: none;">
                    <h2>Every moment with you feels like magic…</h2>
                    <p>💕</p>
                </div>
            </div>
            
            <!-- Controls -->
            <div class="slideshow-controls">
                <button class="btn-secondary" id="prevSlideBtn">⬅ Previous</button>
                <button class="btn-primary" id="nextSlideBtn">Next ➡</button>
            </div>
            
            <!-- Progress Dots -->
            <div class="slide-progress">
                <?php foreach ($slideshow_data as $index => $memory): ?>
                    <div class="progress-dot <?php echo $index === 0 ? 'active' : ''; ?>"></div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            initSlideshow();
            
            // Play music
            const audio = document.getElementById('musicSlideshow');
            if (audio) {
                const playAudio = () => {
                    audio.muted = false;
                    audio.play().catch(e => console.log('Audio prevented:', e));
                    document.removeEventListener('click', playAudio);
                    document.removeEventListener('touchstart', playAudio);
                };
                document.addEventListener('click', playAudio);
                document.addEventListener('touchstart', playAudio);
            }

            // Prevent zoom on double tap
            let lastTouchEnd = 0;
            document.addEventListener('touchend', function(event) {
                let now = new Date().getTime();
                if (now - lastTouchEnd <= 300) {
                    event.preventDefault();
                }
                lastTouchEnd = now;
            }, false);
        });
    </script>
</body>
</html>