{"status":"ok"}<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    <title>Gallery – American Legion Riders</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600;700&display=swap');

        body { font-family: 'Inter', system-ui, sans-serif; }
        .heading-font { font-family: 'Playfair Display', serif; }

        .gallery-hero-bg {
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.65)),
                        url('https://i.ibb.co/dJ55DqMT/file-00000000dee471f885aecf772be9284f.png') center 30%/cover no-repeat;
        }

        .nav-link {
            position: relative;
        }
        .nav-link:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #ffd700;
            transition: all 0.3s ease;
        }
        .nav-link:hover:after,
        .nav-link.active:after { width: 100%; }

        /* ── FILTER BAR ── */
        .filter-bar {
            background: white;
            padding: 1rem 1.5rem;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            position: sticky;
            top: 0;
            z-index: 50;
        }
        .filter-btn {
            background: #f0f0f0;
            border: 2px solid transparent;
            color: #333;
            padding: 0.4rem 1.1rem;
            border-radius: 40px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s ease;
            touch-action: manipulation;
        }
        .filter-btn:hover,
        .filter-btn.active {
            background: #002868;
            color: white;
            border-color: #002868;
        }

        /* ── GALLERY GRID ── */
        .gallery-wrap {
            max-width: 1300px;
            margin: 2rem auto;
            padding: 0 1rem 3rem;
        }
        .gallery-grid {
            columns: 4 240px;
            column-gap: 0.8rem;
        }
        .gallery-item {
            break-inside: avoid;
            margin-bottom: 0.8rem;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .gallery-item:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 40, 104, 0.2); }
        .gallery-item img { width: 100%; display: block; }
        .gallery-item .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 55%);
            display: flex;
            align-items: flex-end;
            padding: 0.8rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .gallery-item:hover .overlay { opacity: 1; }
        @media (hover: none) { .gallery-item .overlay { opacity: 1; } }
        .overlay-caption {
            color: white;
            font-size: 0.85rem;
            font-weight: 600;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
        }
        .overlay-category {
            display: inline-block;
            background: #bf0a30;
            color: white;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 20px;
            margin-bottom: 0.25rem;
        }
        .gallery-item.hidden { display: none; }
        .empty-state { text-align: center; padding: 4rem 2rem; color: #888; }
        .empty-state p { font-size: 1.1rem; margin-top: 0.5rem; }

        /* ── LIGHTBOX ── */
        .lightbox {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.93);
            z-index: 2000;
            justify-content: center;
            align-items: center;
            padding: 1rem;
        }
        .lightbox.open { display: flex; }
        .lightbox-inner {
            position: relative;
            max-width: 900px;
            width: 100%;
        }
        .lightbox-inner img {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
            display: block;
            max-height: 80vh;
            object-fit: contain;
        }
        .lightbox-caption {
            color: white;
            text-align: center;
            margin-top: 0.8rem;
            font-size: 0.95rem;
            opacity: 0.85;
        }
        .lightbox-close {
            position: absolute;
            top: -2.8rem;
            right: 0;
            background: none;
            border: none;
            color: white;
            font-size: 2.2rem;
            cursor: pointer;
            line-height: 1;
            opacity: 0.8;
            touch-action: manipulation;
        }
        .lightbox-close:hover { opacity: 1; }
        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.18);
            border: none;
            color: white;
            font-size: 1.8rem;
            width: 44px; height: 44px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .lightbox-nav:hover { background: rgba(255, 255, 255, 0.35); }
        .lightbox-prev { left: -3rem; }
        .lightbox-next { right: -3rem; }

        /* ── RESPONSIVE ── */
        @media (max-width: 768px) {
            .gallery-grid { columns: 2 150px; }
            .lightbox-prev { left: 0.2rem; }
            .lightbox-next { right: 0.2rem; }
            .lightbox-inner { padding: 0 3rem; }
        }
        @media (max-width: 480px) {
            .gallery-grid { columns: 2 130px; column-gap: 0.5rem; }
            .gallery-wrap { padding: 0 0.5rem 2rem; }
            .filter-bar { padding: 0.7rem 0.5rem; }
            .filter-btn { font-size: 0.78rem; padding: 0.35rem 0.8rem; }
        }
    </style>
</head>
<body class="bg-zinc-50">

    <!-- HEADER -->
    <header class="gallery-hero-bg flex flex-col text-white" style="min-height:50vh;">
        <nav class="bg-black/70 backdrop-blur-md">
            <div class="max-w-7xl mx-auto px-6 py-5 flex justify-between items-center">
                <div class="flex items-center gap-3">
                    <img src="https://alr359.org/logos/file-00000000d40071fdb2a9d346ff6bceda-removebg-preview.png"
                         alt="Logo" class="h-14">
                </div>

                <div class="hidden md:flex items-center gap-8 text-sm font-medium">
                    <a href="index.php" class="nav-link">Home</a>
                    <a href="about.php" class="nav-link">About</a>
                    <a href="events.php" class="nav-link">Events</a>
                    <a href="memorial.php" class="nav-link">Memorial</a>
                    <a href="contact.php" class="nav-link">Contact</a>
                                            <button onclick="openMembersLogin()"
                                class="bg-red-600 hover:bg-red-700 px-5 py-2.5 rounded-full font-semibold flex items-center gap-2 transition-colors">
                            <i class="fas fa-lock text-xs"></i> Members Login
                        </button>
                                    </div>

                <button class="md:hidden text-3xl focus:outline-none" id="hamburgerBtn" aria-label="Toggle menu">
                    <i class="fas fa-bars" id="hamburgerIcon"></i>
                </button>
            </div>

            <!-- Mobile slide-down menu -->
            <div id="mobileNav" class="md:hidden hidden flex-col bg-black/90 backdrop-blur-md border-t border-white/10">
                <a href="index.php"   class="px-6 py-4 text-sm font-medium border-b border-white/10 hover:bg-white/10 transition-colors">Home</a>
                <a href="about.php"   class="px-6 py-4 text-sm font-medium border-b border-white/10 hover:bg-white/10 transition-colors">About</a>
                <a href="events.php"  class="px-6 py-4 text-sm font-medium border-b border-white/10 hover:bg-white/10 transition-colors">Events</a>
                <a href="memorial.php" class="px-6 py-4 text-sm font-medium border-b border-white/10 hover:bg-white/10 transition-colors">Memorial</a>
                <a href="contact.php" class="px-6 py-4 text-sm font-medium border-b border-white/10 hover:bg-white/10 transition-colors">Contact</a>
                <div class="px-6 py-4">
                                            <button onclick="openMembersLogin(); closeMobileNav();"
                                class="w-full bg-red-600 hover:bg-red-700 px-6 py-3 rounded-full font-semibold flex items-center justify-center gap-2 transition-colors">
                            <i class="fas fa-lock"></i> Members Login
                        </button>
                                    </div>
            </div>
        </nav>

        <div class="flex-1 flex items-center justify-center text-center px-6 py-16">
            <div>
                <h1 class="heading-font text-5xl md:text-6xl font-bold tracking-tighter mb-3">Photo Gallery</h1>
                <p class="text-xl text-yellow-300 font-light">Memories from the road — rides, events &amp; brotherhood</p>
            </div>
        </div>
    </header>

<div class="filter-bar">
            <button class="filter-btn active"
                data-filter="All">
            All        </button>
    </div>

<main class="gallery-wrap">
            <div class="empty-state">
            <div style="font-size:3rem;">📷</div>
            <p>No photos yet. Add some from the Admin panel.</p>
        </div>
    </main>

<div class="lightbox" id="lightbox">
    <div class="lightbox-inner">
        <button class="lightbox-close" onclick="closeLightbox()">&times;</button>
        <button class="lightbox-nav lightbox-prev" onclick="shiftLightbox(-1)">&#8249;</button>
        <button class="lightbox-nav lightbox-next" onclick="shiftLightbox(1)">&#8250;</button>
        <img id="lbImg" src="" alt="">
        <div class="lightbox-caption" id="lbCaption"></div>
    </div>
</div>

    <!-- FOOTER -->
    <footer class="bg-zinc-900 text-zinc-400">
        <div class="max-w-7xl mx-auto px-6 py-16 grid md:grid-cols-3 gap-10">
            <div>
                <h4 class="text-white text-xl font-bold mb-4">American Legion Riders</h4>
                <p>Chapter 359 • Norwalk, California<br>Riding with Honor • Serving with Pride</p>
            </div>
            <div>
                <h4 class="text-white mb-4">Contact Information</h4>
                <p>11986 Front Street<br>Norwalk, CA 90650</p>
                <p class="mt-3">
                    <a href="tel:+15624741977" class="hover:text-white">(562) 474-1977</a>
                </p>
            </div>
            <div>
                <h4 class="text-white mb-4">Connect With Us</h4>
                <div class="flex gap-6 text-3xl">
                    <a href="https://www.facebook.com/profile.php?id=61560756104936&mibextid=ZbWKwL" target="_blank" rel="noopener noreferrer" class="hover:text-yellow-400"><i class="fab fa-facebook"></i></a>
                    <a href="#" class="hover:text-yellow-400"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
        <div class="text-center py-6 border-t border-zinc-800 text-sm">
            © 2026 American Legion Riders — Chapter 359 • <span class="text-red-500">For God &amp; Country</span>
        </div>
    </footer>

    <!-- Members Login Modal -->
    <div id="membersModal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-50">
        <div class="bg-white rounded-3xl p-10 max-w-md w-full mx-4">
            <button onclick="closeMembersLogin()" class="float-right text-4xl leading-none text-zinc-300 hover:text-zinc-600">&times;</button>

            <div class="text-center mb-8">
                <img src="https://alr359.org/logos/file-00000000d40071fdb2a9d346ff6bceda-removebg-preview.png"
                     alt="Logo" class="h-20 mx-auto">
                <h2 class="text-2xl font-bold mt-6 text-zinc-900">Members Login</h2>
            </div>

            <form id="membersLoginForm" class="space-y-6">
                <div>
                    <label class="block text-sm font-medium text-zinc-600 mb-2">Member ID</label>
                    <input type="text" id="member_id" class="w-full px-5 py-4 border border-zinc-300 rounded-2xl focus:outline-none focus:border-red-600" placeholder="Enter your Member ID">
                </div>
                <button type="submit"
                        class="w-full bg-red-600 hover:bg-red-700 text-white py-4 rounded-2xl font-semibold text-lg transition-colors">
                    Sign In
                </button>
                <div id="membersLoginError" class="text-red-600 text-center text-sm hidden"></div>
            </form>
        </div>
    </div>

<script>
    const allPhotos = [];

    let visibleIndexes = allPhotos.map((_, i) => i);
    let currentLbPos = 0;

    // Hamburger Menu
    const hamburgerBtn  = document.getElementById('hamburgerBtn');
    const hamburgerIcon = document.getElementById('hamburgerIcon');
    const mobileNav     = document.getElementById('mobileNav');

    function closeMobileNav() {
        mobileNav.classList.add('hidden');
        mobileNav.classList.remove('flex');
        hamburgerIcon.className = 'fas fa-bars';
    }

    hamburgerBtn.addEventListener('click', () => {
        const isOpen = !mobileNav.classList.contains('hidden');
        if (isOpen) {
            closeMobileNav();
        } else {
            mobileNav.classList.remove('hidden');
            mobileNav.classList.add('flex');
            hamburgerIcon.className = 'fas fa-times';
        }
    });

    // Members Login Modal
    function openMembersLogin() {
        document.getElementById('membersModal').classList.remove('hidden');
    }
    function closeMembersLogin() {
        document.getElementById('membersModal').classList.add('hidden');
        document.getElementById('membersLoginError').classList.add('hidden');
    }

    // Form submission
    document.getElementById('membersLoginForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        const btn = this.querySelector('button[type="submit"]');
        const errorEl = document.getElementById('membersLoginError');
        const memberId = document.getElementById('member_id').value.trim();

        btn.textContent = 'Verifying...';
        btn.disabled = true;
        errorEl.classList.add('hidden');

        try {
            const res = await fetch('auth.php', {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: new URLSearchParams({ member_id: memberId })
            });
            const data = await res.json();
            if (data.success) {
                window.location.href = 'members/index.php';
            } else {
                errorEl.textContent = data.message || 'Invalid credentials';
                errorEl.classList.remove('hidden');
            }
        } catch (err) {
            errorEl.textContent = 'Connection error. Please try again.';
            errorEl.classList.remove('hidden');
        }

        btn.textContent = 'Sign In';
        btn.disabled = false;
    });

    // Filter
    document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            const filter = this.dataset.filter;
            visibleIndexes = [];
            document.querySelectorAll('.gallery-item').forEach(item => {
                const match = filter === 'All' || item.dataset.category === filter;
                item.classList.toggle('hidden', !match);
                if (match) visibleIndexes.push(parseInt(item.dataset.index));
            });
        });
    });

    // Lightbox
    function openLightbox(index) {
        currentLbPos = visibleIndexes.indexOf(index);
        if (currentLbPos === -1) currentLbPos = 0;
        showLightboxPhoto();
        document.getElementById('lightbox').classList.add('open');
        document.body.style.overflow = 'hidden';
    }
    function showLightboxPhoto() {
        const photo = allPhotos[visibleIndexes[currentLbPos]];
        document.getElementById('lbImg').src = photo.url;
        document.getElementById('lbCaption').textContent = photo.caption || '';
    }
    function shiftLightbox(dir) {
        currentLbPos = (currentLbPos + dir + visibleIndexes.length) % visibleIndexes.length;
        showLightboxPhoto();
    }
    function closeLightbox() {
        document.getElementById('lightbox').classList.remove('open');
        document.body.style.overflow = '';
    }

    document.getElementById('lightbox').addEventListener('click', function(e) {
        if (e.target === this) closeLightbox();
    });

    // Swipe support
    let touchStartX = 0;
    document.getElementById('lightbox').addEventListener('touchstart', e => {
        touchStartX = e.touches[0].clientX;
    }, { passive: true });
    document.getElementById('lightbox').addEventListener('touchend', e => {
        const diff = touchStartX - e.changedTouches[0].clientX;
        if (Math.abs(diff) > 50) shiftLightbox(diff > 0 ? 1 : -1);
    });

    // Keyboard navigation
    document.addEventListener('keydown', function(e) {
        if (!document.getElementById('lightbox').classList.contains('open')) return;
        if (e.key === 'ArrowRight') shiftLightbox(1);
        if (e.key === 'ArrowLeft')  shiftLightbox(-1);
        if (e.key === 'Escape')     closeLightbox();
    });
</script>
</body>
</html>
