<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - Rockville Tolland SDA Church</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link rel="stylesheet" href="/css/custom.css">
    <meta name="description" content="Rockville Tolland SDA Church - Proclaiming the Three Angels' Messages with Love and Hope">
</head>
<body>
    <!-- Modern 2025 Navigation -->
    <nav class="nav-2025">
        <div class="nav-container">
            <a href="/" class="nav-brand">
                <i class="fas fa-church"></i>
                Rockville Tolland SDA
            </a>
            
            <ul class="nav-menu" id="nav-menu">
                <li><a href="/" class="nav-link">Home</a></li>
                <li><a href="/about" class="nav-link">About</a></li>
                <li><a href="/ministries" class="nav-link">Ministries</a></li>
                <li><a href="/sermons" class="nav-link">Sermons</a></li>
                <li><a href="/events" class="nav-link">Events</a></li>
                <li><a href="/bulletins" class="nav-link">Bulletins</a></li>
                <li><a href="/contact" class="nav-link">Contact</a></li>
                <li><a href="https://stream.rockvilletollandsda.church" target="_blank" class="nav-link" style="color: var(--soft-gold);">
                    <i class="fas fa-video" style="margin-right: 0.5rem;"></i>Live Stream
                </a></li>
                <li><a href="https://adventistgiving.org/donate/AN4MJG" target="_blank" class="nav-link" style="background: var(--gradient-gold); color: var(--midnight); border-radius: 8px;">
                    <i class="fas fa-heart" style="margin-right: 0.5rem;"></i>Online Giving
                </a></li>
            </ul>
            
            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle menu">
                <span class="hamburger"></span>
                <span class="hamburger"></span>
                <span class="hamburger"></span>
            </button>
        </div>
    </nav>

    <!-- Main Content -->
    <main>
        {% block content %}{% endblock %}
    </main>

    <!-- Modern Footer -->
    <footer class="footer-2025">
        <div class="container-2025">
            <div style="text-align: center; position: relative; z-index: 2;">
                <h3 class="serif" style="font-size: 2rem; color: var(--soft-gold); margin-bottom: 1rem;">
                    Rockville Tolland SDA Church
                </h3>
                <p style="font-size: 1.1rem; margin-bottom: 2rem; opacity: 0.9;">
                    Proclaiming the Three Angels' Messages with Love and Hope
                </p>
                
                <div style="display: flex; justify-content: center; gap: 3rem; margin-bottom: 3rem; flex-wrap: wrap;">
                    <div style="text-align: center;">
                        <div style="width: 60px; height: 60px; background: var(--gradient-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: var(--midnight); font-size: 1.5rem;">
                            <i class="fas fa-cross"></i>
                        </div>
                        <h4 style="color: var(--soft-gold); margin-bottom: 0.5rem;">Faith</h4>
                        <p style="opacity: 0.8; font-size: 0.9rem;">Grounded in Scripture</p>
                    </div>
                    
                    <div style="text-align: center;">
                        <div style="width: 60px; height: 60px; background: var(--gradient-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: var(--midnight); font-size: 1.5rem;">
                            <i class="fas fa-heart"></i>
                        </div>
                        <h4 style="color: var(--soft-gold); margin-bottom: 0.5rem;">Hope</h4>
                        <p style="opacity: 0.8; font-size: 0.9rem;">In Christ's Return</p>
                    </div>
                    
                    <div style="text-align: center;">
                        <div style="width: 60px; height: 60px; background: var(--gradient-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: var(--midnight); font-size: 1.5rem;">
                            <i class="fas fa-hands-helping"></i>
                        </div>
                        <h4 style="color: var(--soft-gold); margin-bottom: 0.5rem;">Love</h4>
                        <p style="opacity: 0.8; font-size: 0.9rem;">Through Service</p>
                    </div>
                </div>
                
                <div style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; opacity: 0.7;">
                    <p>&copy; 2025 Rockville Tolland SDA Church. All rights reserved.</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Modern JavaScript -->
    <script>
        // Scroll reveal animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('revealed');
                }
            });
        }, observerOptions);

        document.addEventListener('DOMContentLoaded', () => {
            // Observe scroll reveal elements
            document.querySelectorAll('.scroll-reveal').forEach(el => {
                observer.observe(el);
            });

            // Navbar scroll effect
            const nav = document.querySelector('.nav-2025');
            window.addEventListener('scroll', () => {
                if (window.scrollY > 100) {
                    nav.style.background = 'rgba(10, 10, 15, 0.98)';
                } else {
                    nav.style.background = 'rgba(10, 10, 15, 0.95)';
                }
            });

            // Mobile menu toggle
            const navToggle = document.getElementById('nav-toggle');
            const navMenu = document.getElementById('nav-menu');
            
            navToggle.addEventListener('click', () => {
                navMenu.classList.toggle('active');
                navToggle.classList.toggle('active');
            });

            // Close mobile menu when clicking outside
            document.addEventListener('click', (e) => {
                if (!nav.contains(e.target)) {
                    navMenu.classList.remove('active');
                    navToggle.classList.remove('active');
                }
            });

            // Close mobile menu when clicking nav links
            document.querySelectorAll('.nav-link').forEach(link => {
                link.addEventListener('click', () => {
                    navMenu.classList.remove('active');
                    navToggle.classList.remove('active');
                });
            });
        });
    </script>
    <script src="/js/main.js"></script>
</body>
</html>