// Additional CSS/JS for profile page
$additional_css = [
    'https://unpkg.com/aos@2.3.1/dist/aos.css',
    'https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css'
];

$additional_js = [
    'https://unpkg.com/aos@2.3.1/dist/aos.js',
    'https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js'
];

// Structured Data JSON
$structured_data = [
    "@context" => "https://schema.org",
    "@type" => "Person",
    "name" => $profile['name'],
    "description" => $meta_description,
    "image" => $profile_image,
    "url" => BASE_URL . 'penpal/' . urlencode($slug),
];

if ($profile['age']) {
    $structured_data['age'] = (int)$profile['age'];
}
if ($profile['gender']) {
    $structured_data['gender'] = $profile['gender'];
}
$structured_data['address'] = [
    "@type" => "PostalAddress",
    "addressCountry" => "US"
];
if ($profile['state']) {
    $structured_data['address']['addressRegion'] = $profile['state'];
}

include 'includes/header.php';
?>

<script type="application/ld+json">
<br />
<b>Warning</b>:  Undefined variable $structured_data in <b>/home/contwdpm/writeacon.com/profile.php</b> on line <b>129</b><br />
null</script>
    
    <style>
        :root {
            --primary-color: #667eea;
            --secondary-color: #764ba2;
            --accent-color: #f093fb;
            --text-dark: #2d3748;
            --text-light: #718096;
            --bg-light: #f7fafc;
            --border-color: #e2e8f0;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
            --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
            --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
            --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            background: var(--bg-light);
        }
        
        /* Header */
        .header {
            background: var(--gradient-primary);
            color: white;
            padding: 1rem 0;
            box-shadow: var(--shadow-md);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .breadcrumb {
            background: transparent;
            padding: 0;
            margin: 0;
        }
        
        .breadcrumb-item a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
        }
        
        .breadcrumb-item.active {
            color: white;
        }
        
        /* Profile Hero Section */
        .profile-hero {
            background: white;
            border-radius: 0 0 2rem 2rem;
            margin-top: -1rem;
            position: relative;
            overflow: hidden;
        }
        
        .profile-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 200px;
            background: var(--gradient-primary);
            opacity: 0.1;
        }
        
        .profile-header {
            position: relative;
            z-index: 2;
            padding: 3rem 0 2rem;
        }
        
        .profile-avatar {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            object-fit: cover;
            border: 6px solid white;
            box-shadow: var(--shadow-lg);
            margin: 0 auto 2rem;
            display: block;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        
        .profile-avatar:hover {
            transform: scale(1.05);
        }
        
        .no-avatar {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 4rem;
            margin: 0 auto 2rem;
            border: 6px solid white;
            box-shadow: var(--shadow-lg);
        }
        
        .profile-name {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .profile-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            justify-content: center;
            margin-bottom: 2rem;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-light);
            font-weight: 500;
        }
        
        .meta-item i {
            color: var(--primary-color);
            width: 20px;
        }
        
        /* Quick Actions */
        .quick-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .btn-primary-gradient {
            background: var(--gradient-primary);
            border: none;
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 2rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-sm);
        }
        
        .btn-primary-gradient:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
            color: white;
        }
        
        .btn-outline-gradient {
            background: transparent;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            padding: 0.75rem 2rem;
            border-radius: 2rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .btn-outline-gradient:hover {
            background: var(--gradient-primary);
            color: white;
            text-decoration: none;
        }
        
        .favorite-btn.favorited {
            background: var(--gradient-primary);
            color: white;
            border-color: var(--primary-color);
        }
        
        .favorite-btn.favorited:hover {
            background: var(--primary-dark);
        }
        
        .verification-badge {
            margin-top: var(--space-4);
        }
        
        /* Content Sections */
        .content-section {
            background: white;
            border-radius: 1rem;
            box-shadow: var(--shadow-sm);
            margin: 2rem 0;
            overflow: hidden;
            transition: box-shadow 0.3s ease;
        }
        
        .content-section:hover {
            box-shadow: var(--shadow-md);
        }
        
        .section-header {
            background: var(--gradient-primary);
            color: white;
            padding: 1.5rem;
            font-size: 1.25rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .section-content {
            padding: 2rem;
        }
        
        /* Photo Gallery */
        .photo-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .photo-item {
            position: relative;
            border-radius: 1rem;
            overflow: hidden;
            aspect-ratio: 1;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        
        .photo-item:hover {
            transform: translateY(-5px);
        }
        
        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .photo-item:hover img {
            transform: scale(1.1);
        }
        
        .photo-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .photo-item:hover .photo-overlay {
            opacity: 1;
        }
        
        .photo-overlay i {
            color: white;
            font-size: 2rem;
        }
        
        /* Profile Text */
        .profile-text {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-dark);
        }
        
        .profile-text p {
            margin-bottom: 1.5rem;
        }
        
        /* Contact Info */
        .contact-card {
            background: var(--bg-light);
            border-radius: 1rem;
            padding: 2rem;
            border: 2px dashed var(--border-color);
            text-align: center;
        }
        
        .contact-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            color: white;
            font-size: 2rem;
        }
        
        .contact-address {
            font-family: 'Courier New', monospace;
            background: white;
            padding: 1rem;
            border-radius: 0.5rem;
            border: 1px solid var(--border-color);
            white-space: pre-line;
            line-height: 1.6;
        }
        
        /* Related Profiles */
        .related-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-top: 1rem;
        }
        
        .related-card {
            background: white;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: all 0.3s ease;
            text-decoration: none;
            color: inherit;
        }
        
        .related-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            text-decoration: none;
            color: inherit;
        }
        
        .related-photo {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .related-no-photo {
            width: 100%;
            height: 200px;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3rem;
        }
        
        .related-info {
            padding: 1.5rem;
        }
        
        .related-name {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .related-meta {
            color: var(--text-light);
            font-size: 0.9rem;
        }
        
        /* Social Share */
        .social-share {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin: 2rem 0;
        }
        
        .share-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: transform 0.3s ease;
            font-size: 1.2rem;
        }
        
        .share-btn:hover {
            transform: translateY(-3px);
            color: white;
            text-decoration: none;
        }
        
        .share-facebook { background: #1877f2; }
        .share-twitter { background: #1da1f2; }
        .share-email { background: #ea4335; }
        .share-copy { background: var(--primary-color); }
        
        /* Loading Spinner */
        .loading-spinner {
            display: none;
            text-align: center;
            padding: 2rem;
        }
        
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid var(--border-color);
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .profile-name {
                font-size: 2rem;
            }
            
            .profile-meta {
                flex-direction: column;
                align-items: center;
                gap: 1rem;
            }
            
            .quick-actions {
                flex-direction: column;
                align-items: center;
            }
            
            .btn-primary-gradient,
            .btn-outline-gradient {
                width: 100%;
                max-width: 300px;
            }
            
            .photo-gallery {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            }
            
            .section-content {
                padding: 1.5rem;
            }
            
            .related-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 480px) {
            .profile-avatar,
            .no-avatar {
                width: 150px;
                height: 150px;
            }
            
            .profile-name {
                font-size: 1.8rem;
            }
            
            .photo-gallery {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* Print Styles */
        @media print {
            .header,
            .quick-actions,
            .social-share {
                display: none !important;
            }
            
            .content-section {
                break-inside: avoid;
                box-shadow: none;
                border: 1px solid #ccc;
            }
        }
    </style>
    
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-9R7VX9E6BG"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-9R7VX9E6BG');
    </script>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="/" data-ajax="true">
                            <i class="fas fa-home"></i> Home
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="/?state=AZ" data-ajax="true">
                            AZ Pen Pals
                        </a>
                    </li>
                    <li class="breadcrumb-item active">
                        Ruben Isaac                    </li>
                </ol>
            </nav>
        </div>
    </header>

    <!-- Profile Hero -->
    <section class="profile-hero">
        <div class="container">
            <div class="profile-header text-center" data-aos="fade-up">
                                    <img src="/uploads/inmate_31_687dbc1b51e36.jpeg" 
                         alt="Ruben Isaac" 
                         class="profile-avatar"
                         data-gallery="profile"
                         loading="lazy">
                                
                <h1 class="profile-name">Ruben Isaac</h1>
                
                <div class="profile-meta">
                                            <div class="meta-item">
                            <i class="fas fa-birthday-cake"></i>
                            <span>48 years old</span>
                        </div>
                                        
                                            <div class="meta-item">
                            <i class="fas fa-venus-mars"></i>
                            <span>Male</span>
                        </div>
                                        
                                            <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>AZ</span>
                        </div>
                                        
                                        
                    <div class="meta-item">
                        <i class="fas fa-id-card"></i>
                        <span>#57061177</span>
                    </div>
                </div>
                
                <div class="quick-actions">
                    <a href="#contact-info" class="btn-primary-gradient smooth-scroll">
                        <i class="fas fa-envelope"></i> Write to Ruben                    </a>
                    <a href="#photos" class="btn-outline-gradient smooth-scroll">
                        <i class="fas fa-images"></i> View Photos (4)
                    </a>
                                            <a href="/auth/login.php?redirect=%2Fpenpal%2Fruben-isaac" class="btn-outline-gradient">
                            <i class="fas fa-heart"></i> Login to Favorite
                        </a>
                                    </div>
                
                <!-- Verification Badge -->
                <div class="verification-badge" style="margin-top: var(--space-4); text-align: center;">
                    <span class="badge badge-success">
                        <i class="fas fa-check-circle"></i> Verified Profile
                    </span>
                </div>
            </div>
        </div>
    </section>

    <div class="container">
        <!-- Profile Story -->
        <div class="content-section" data-aos="fade-up" data-aos-delay="100">
            <div class="section-header">
                <i class="fas fa-user-circle"></i>
                About Ruben            </div>
            <div class="section-content">
                <div class="profile-text">
                    <p>Sup  world...my name is Ruben Isaac . I am currently incarcerated in Federal Prison and i have about 2 years left to do.I am 48 years young ,i&amp;#039;m from Dallas,Tx..and I am looking to meet (females) only. Someone I can get to know and maybe even build som e t hing more with. Im into working out,sports,reading..I am a pretty laid back person. Oh yea and I am a HUGE DALLAS COWBOYS FAN! lol..here is my mailing address ..you can also reach me on my text(only) number <br />
Ruben Isaac #57061177<br />
po box 23811<br />
Tucson,Az 85734<br />
You can reach me through my text service  (424) 453-3284</p>                </div>
            </div>
        </div>

        <!-- Photo Gallery -->
                <div class="content-section" data-aos="fade-up" data-aos-delay="200" id="photos">
            <div class="section-header">
                <i class="fas fa-camera"></i>
                Photo Gallery
            </div>
            <div class="section-content">
                <div class="photo-gallery" id="photoGallery">
                                            <div class="photo-item" data-aos="zoom-in" data-aos-delay="300">
                            <img src="/uploads/inmate_31_687dbc1b51e36.jpeg" 
                                 alt="Photo of Ruben Isaac"
                                 data-gallery="profile"
                                 loading="lazy">
                            <div class="photo-overlay">
                                <i class="fas fa-search-plus"></i>
                            </div>
                        </div>
                                            <div class="photo-item" data-aos="zoom-in" data-aos-delay="400">
                            <img src="/uploads/inmate_31_687dbc1b52c4f.jpeg" 
                                 alt="Photo of Ruben Isaac"
                                 data-gallery="profile"
                                 loading="lazy">
                            <div class="photo-overlay">
                                <i class="fas fa-search-plus"></i>
                            </div>
                        </div>
                                            <div class="photo-item" data-aos="zoom-in" data-aos-delay="500">
                            <img src="/uploads/inmate_31_687dbc1b5395a.jpeg" 
                                 alt="Photo of Ruben Isaac"
                                 data-gallery="profile"
                                 loading="lazy">
                            <div class="photo-overlay">
                                <i class="fas fa-search-plus"></i>
                            </div>
                        </div>
                                            <div class="photo-item" data-aos="zoom-in" data-aos-delay="600">
                            <img src="/uploads/inmate_31_687dbc1b546d4.jpeg" 
                                 alt="Photo of Ruben Isaac"
                                 data-gallery="profile"
                                 loading="lazy">
                            <div class="photo-overlay">
                                <i class="fas fa-search-plus"></i>
                            </div>
                        </div>
                                    </div>
            </div>
        </div>
        
        <!-- Contact Information -->
        <div class="content-section" data-aos="fade-up" data-aos-delay="300" id="contact-info">
            <div class="section-header">
                <i class="fas fa-mail-bulk"></i>
                How to Write to Ruben            </div>
            <div class="section-content">
                <div class="contact-card">
                    <div class="contact-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <h4>Mailing Address</h4>
                    <p class="mb-3">Send your letter to this address:</p>
                    <div class="contact-address">
TUCSON FCI, P.O. BOX 23811, TUCSON, PIMA, AZ 85734.0                    </div>
                    <div class="mt-4">
                        <small class="text-muted">
                            <i class="fas fa-info-circle"></i>
                            Please include the full name and registration number on your envelope
                        </small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Share Profile -->
        <div class="social-share" data-aos="fade-up" data-aos-delay="400">
            <a href="#" class="share-btn share-facebook" onclick="shareProfile('facebook')" title="Share on Facebook">
                <i class="fab fa-facebook-f"></i>
            </a>
            <a href="#" class="share-btn share-twitter" onclick="shareProfile('twitter')" title="Share on Twitter">
                <i class="fab fa-twitter"></i>
            </a>
            <a href="#" class="share-btn share-email" onclick="shareProfile('email')" title="Share via Email">
                <i class="fas fa-envelope"></i>
            </a>
            <a href="#" class="share-btn share-copy" onclick="copyLink()" title="Copy Link">
                <i class="fas fa-link"></i>
            </a>
        </div>

        <!-- Related Profiles -->
                <div class="content-section" data-aos="fade-up" data-aos-delay="500">
            <div class="section-header">
                <i class="fas fa-users"></i>
                You Might Also Like
            </div>
            <div class="section-content">
                <div class="related-grid" id="relatedProfiles">
                    <!-- Related profiles will be loaded via AJAX -->
                </div>
                <div class="loading-spinner" id="relatedLoading">
                    <div class="spinner"></div>
                    <p>Loading similar profiles...</p>
                </div>
            </div>
        </div>
            </div>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>

    <script>
        // Initialize AOS (Animate On Scroll)
        AOS.init({
            duration: 800,
            once: true,
            offset: 100
        });

        // Initialize GLightbox for photo gallery
        const lightbox = GLightbox({
            selector: '[data-gallery="profile"]',
            touchNavigation: true,
            loop: true,
            autoplayVideos: true,
            skin: 'modern'
        });

        // Smooth scrolling for internal links
        $('.smooth-scroll').on('click', function(e) {
            e.preventDefault();
            const target = $(this.getAttribute('href'));
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top - 80
                }, 800);
            }
        });

        // Load related profiles via AJAX
        function loadRelatedProfiles() {
            $('#relatedLoading').show();
            
            $.ajax({
                url: '/api/related-profiles.php',
                method: 'GET',
                data: {
                    id: 31,
                    state: 'AZ',
                    age: 48                },
                success: function(response) {
                    $('#relatedLoading').hide();
                    $('#relatedProfiles').html(response);
                    
                    // Animate new content
                    $('#relatedProfiles .related-card').each(function(index) {
                        $(this).hide().delay(index * 100).fadeIn(500);
                    });
                },
                error: function() {
                    $('#relatedLoading').hide();
                    $('#relatedProfiles').html(`
                        <div class="col-12 text-center">
                            <p class="text-muted">Unable to load related profiles at this time.</p>
                        </div>
                    `);
                }
            });
        }

        // Social sharing functions
        function shareProfile(platform) {
            const url = encodeURIComponent(window.location.href);
            const title = encodeURIComponent(document.title);
            const description = encodeURIComponent($('meta[name="description"]').attr('content'));
            
            let shareUrl = '';
            
            switch(platform) {
                case 'facebook':
                    shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
                    break;
                case 'twitter':
                    shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=${title}`;
                    break;
                case 'email':
                    shareUrl = `mailto:?subject=${title}&body=${description}%0A%0A${url}`;
                    break;
            }
            
            if (shareUrl) {
                if (platform === 'email') {
                    window.location.href = shareUrl;
                } else {
                    window.open(shareUrl, '_blank', 'width=600,height=400');
                }
            }
        }

        // Copy link to clipboard
        function copyLink() {
            navigator.clipboard.writeText(window.location.href).then(function() {
                // Show toast notification
                showToast('Link copied to clipboard!', 'success');
            }).catch(function() {
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = window.location.href;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                showToast('Link copied to clipboard!', 'success');
            });
        }

        // Show toast notification
        function showToast(message, type = 'info') {
            const toast = $(`
                <div class="toast-notification ${type}" style="
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    background: ${type === 'success' ? '#28a745' : '#17a2b8'};
                    color: white;
                    padding: 15px 20px;
                    border-radius: 8px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                    z-index: 9999;
                    transform: translateX(100%);
                    transition: transform 0.3s ease;
                ">
                    <i class="fas fa-${type === 'success' ? 'check' : 'info'}-circle"></i>
                    ${message}
                </div>
            `);
            
            $('body').append(toast);
            
            setTimeout(() => {
                toast.css('transform', 'translateX(0)');
            }, 100);
            
            setTimeout(() => {
                toast.css('transform', 'translateX(100%)');
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }

        // AJAX page navigation
        $('[data-ajax="true"]').on('click', function(e) {
            e.preventDefault();
            const url = $(this).attr('href');
            
            // Add loading indicator
            $('body').append('<div class="page-loading" style="position:fixed;top:0;left:0;width:100%;height:3px;background:var(--primary-color);z-index:9999;animation:loading 2s infinite;"></div>');
            
            // Navigate after short delay for UX
            setTimeout(() => {
                window.location.href = url;
            }, 300);
        });

        // Lazy load images with intersection observer
        if ('IntersectionObserver' in window) {
            const imageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src || img.src;
                        img.classList.remove('lazy');
                        imageObserver.unobserve(img);
                    }
                });
            });

            document.querySelectorAll('img[loading="lazy"]').forEach(img => {
                imageObserver.observe(img);
            });
        }

        // Favorite button functionality
        $('.favorite-btn').on('click', function() {
            const btn = $(this);
            const inmateId = btn.data('inmate-id');
            const isFavorited = btn.data('favorited') === 'true';
            const action = isFavorited ? 'remove' : 'add';
            
            fetch('/api/favorites.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    action: action,
                    inmate_id: inmateId
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    btn.data('favorited', !isFavorited);
                    if (isFavorited) {
                        btn.removeClass('favorited');
                        btn.find('.favorite-text').text('Add to Favorites');
                    } else {
                        btn.addClass('favorited');
                        btn.find('.favorite-text').text('Favorited');
                    }
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred. Please try again.');
            });
        });
        
        // Load related profiles when page loads
        $(document).ready(function() {
                        setTimeout(loadRelatedProfiles, 1000);
                    });

        // Loading animation keyframes
        $('<style>').text(`
            @keyframes loading {
                0% { transform: translateX(-100%); }
                50% { transform: translateX(0%); }
                100% { transform: translateX(100%); }
            }
        `).appendTo('head');
    </script>

<footer class="footer" role="contentinfo">
    <div class="container">
        <div class="footer-content">
            <!-- Company Info -->
            <div class="footer-column">
                <h4 class="footer-title">
                    <i class="fas fa-envelope-open-text"></i>
                    WriteACon
                </h4>
                <p class="footer-description">
                    Connecting inmates with pen pals since 2026. 
                    A trusted platform for meaningful correspondence and friendship.
                </p>
                <div class="social-links">
                    <a href="#" aria-label="Facebook" class="social-link"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" aria-label="Twitter" class="social-link"><i class="fab fa-twitter"></i></a>
                    <a href="#" aria-label="Instagram" class="social-link"><i class="fab fa-instagram"></i></a>
                    <a href="#" aria-label="LinkedIn" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            
            <!-- Quick Links -->
            <div class="footer-column">
                <h5 class="footer-heading">Quick Links</h5>
                <ul class="footer-links">
                    <li><a href="/">Browse Profiles</a></li>
                    <li><a href="/pages/how-it-works.php">How It Works</a></li>
                    <li><a href="/pages/about.php">About Us</a></li>
                    <li><a href="/pages/faq.php">FAQ</a></li>
                    <li><a href="/signup.php">Create Profile</a></li>
                </ul>
            </div>
            
            <!-- Browse -->
            <div class="footer-column">
                <h5 class="footer-heading">Browse</h5>
                <ul class="footer-links">
                    <li><a href="/?gender=male">Male Inmates</a></li>
                    <li><a href="/?gender=female">Female Inmates</a></li>
                    <li><a href="/?sort=newest">Newest Profiles</a></li>
                    <li><a href="/?sort=release_soon">Releasing Soon</a></li>
                    <li><a href="/sitemap.xml.php">Sitemap</a></li>
                </ul>
            </div>
            
            <!-- Legal & Support -->
            <div class="footer-column">
                <h5 class="footer-heading">Legal & Support</h5>
                <ul class="footer-links">
                    <li><a href="/pages/privacy.php">Privacy Policy</a></li>
                    <li><a href="/pages/terms.php">Terms of Service</a></li>
                    <li><a href="/pages/contact.php">Contact Us</a></li>
                    <li><a href="/pages/safety.php">Safety Guidelines</a></li>
                    <li><a href="/robots.txt">Robots.txt</a></li>
                </ul>
            </div>
            
            <!-- Newsletter -->
            <div class="footer-column">
                <h5 class="footer-heading">Stay Updated</h5>
                <p class="footer-text">Get notified about new profiles and updates.</p>
                <form class="newsletter-form" method="POST" action="/api/newsletter.php">
                    <div class="input-group">
                        <input type="email" 
                               name="email" 
                               class="form-control" 
                               placeholder="Your email address" 
                               required>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </form>
                <p class="footer-small">We respect your privacy. Unsubscribe anytime.</p>
            </div>
        </div>
        
        <!-- Trust Badges -->
        <div class="footer-trust">
            <div class="trust-badges">
                <div class="trust-badge">
                    <i class="fas fa-shield-alt"></i>
                    <span>SSL Secured</span>
                </div>
                <div class="trust-badge">
                    <i class="fas fa-lock"></i>
                    <span>Privacy Protected</span>
                </div>
                <div class="trust-badge">
                    <i class="fas fa-credit-card"></i>
                    <span>Secure Payments</span>
                </div>
                <div class="trust-badge">
                    <i class="fas fa-check-circle"></i>
                    <span>Verified Profiles</span>
                </div>
            </div>
        </div>
        
        <!-- Copyright -->
        <div class="footer-bottom">
            <div class="footer-copyright">
                <p>&copy; 2026 WriteACon. All rights reserved.</p>
            </div>
            <div class="footer-payment">
                <span class="payment-text">We accept:</span>
                <div class="payment-methods">
                    <i class="fab fa-cc-visa" title="Visa"></i>
                    <i class="fab fa-cc-mastercard" title="Mastercard"></i>
                    <i class="fab fa-cc-amex" title="American Express"></i>
                    <i class="fab fa-cc-discover" title="Discover"></i>
                </div>
            </div>
        </div>
    </div>
</footer>

<style>
/* Footer Styles */
.footer {
    background: var(--text-dark);
    color: var(--bg-lighter);
    padding: var(--space-16) 0 var(--space-8);
    margin-top: var(--space-20);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: white;
    margin-bottom: var(--space-4);
}

.footer-title i {
    color: var(--primary-color);
}

.footer-heading {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: white;
    margin-bottom: var(--space-4);
}

.footer-description {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.footer-text {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.footer-small {
    color: var(--text-muted);
    font-size: var(--text-xs);
    margin-top: var(--space-2);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--space-2);
}

.footer-links a {
    color: var(--text-muted);
    transition: color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.footer-links a:hover {
    color: var(--primary-color);
    padding-left: var(--space-1);
}

/* Social Links */
.social-links {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    color: var(--bg-lighter);
    transition: all var(--transition-base);
}

.social-link:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

/* Newsletter */
.newsletter-form {
    margin-top: var(--space-4);
}

.newsletter-form .input-group {
    display: flex;
    gap: var(--space-2);
}

.newsletter-form .form-control {
    flex: 1;
}

.newsletter-form .btn {
    padding: var(--space-3);
    min-width: auto;
}

/* Trust Badges */
.footer-trust {
    padding: var(--space-8) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin: var(--space-8) 0;
}

.trust-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.trust-badge i {
    color: var(--primary-color);
    font-size: var(--text-lg);
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer-copyright {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.footer-payment {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.payment-text {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.payment-methods {
    display: flex;
    gap: var(--space-2);
}

.payment-methods i {
    font-size: var(--text-2xl);
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.payment-methods i:hover {
    color: var(--primary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
    
    .trust-badges {
        gap: var(--space-4);
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .trust-badges {
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>

<!-- Main JavaScript -->
<script src="/assets/js/main.js"></script>


</body>
</html>