blogs.php

<?php 
include 'includes/database.php';

// Set SEO page identifier for blogs page
$seo_page_identifier = 'blogs';

// Include header with SEO data
include 'includes/header.php';

// Pagination settings
$posts_per_page = 9;
$current_page = isset($_GET['page']) ? max(1, intval($_GET['page'])) : 1;
$offset = ($current_page - 1) * $posts_per_page;

// Get category filter
$category_filter = isset($_GET['category']) ? $_GET['category'] : '';

// Fetch featured posts (4 posts marked as featured and with blog categories)
$featured_query = "SELECT bp.*, bc.name as category_name, bc.slug as category_slug 
                   FROM blog_posts bp 
                   LEFT JOIN blog_categories bc ON bp.category_id = bc.id 
                   WHERE bp.featured = 1 AND bp.status = 'published' AND bc.type = 'blog'
                   ORDER BY bp.publish_date DESC 
                   LIMIT 4";
$featured_result = $conn->query($featured_query);
$featured_posts = [];
if ($featured_result) {
    while ($row = $featured_result->fetch_assoc()) {
        $featured_posts[] = $row;
    }
}

// Build WHERE clause for category filtering
$where_clause = "bp.status = 'published' AND bc.type = 'blog'";
if (!empty($category_filter) && $category_filter !== 'all') {
    $where_clause .= " AND bc.slug = '" . $conn->real_escape_string($category_filter) . "'";
}

// Count total posts for pagination
$count_query = "SELECT COUNT(*) as total 
                FROM blog_posts bp 
                LEFT JOIN blog_categories bc ON bp.category_id = bc.id 
                WHERE $where_clause";
$count_result = $conn->query($count_query);
$total_posts = $count_result->fetch_assoc()['total'];
$total_pages = ceil($total_posts / $posts_per_page);

// Fetch paginated blog posts
$latest_query = "SELECT bp.*, bc.name as category_name, bc.slug as category_slug 
                 FROM blog_posts bp 
                 LEFT JOIN blog_categories bc ON bp.category_id = bc.id 
                 WHERE $where_clause
                 ORDER BY bp.publish_date DESC 
                 LIMIT $posts_per_page OFFSET $offset";
$latest_result = $conn->query($latest_query);
$latest_posts = [];
if ($latest_result) {
    while ($row = $latest_result->fetch_assoc()) {
        $latest_posts[] = $row;
    }
}

// Fetch all blog categories for filter buttons
$categories_query = "SELECT * FROM blog_categories WHERE type = 'blog' ORDER BY name";
$categories_result = $conn->query($categories_query);
$categories = [];
if ($categories_result) {
    while ($row = $categories_result->fetch_assoc()) {
        $categories[] = $row;
    }
}
?>

<!-- Banner with background image -->
<section class="relative h-screen w-full overflow-hidden">
    <!-- Video or Image Background -->
    <div class="absolute inset-0 w-full h-full bg-brand-navy z-0">
        <div class="absolute inset-0 bg-gradient-to-b from-black/70 to-brand-navy/90 z-10"></div>
        <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Blog Banner" class="w-full h-full object-cover">
    </div>

    <!-- Content -->
    <div class="relative z-20 max-w-7xl mx-auto px-4 h-full flex flex-col justify-center items-center text-center">
        <div class="max-w-3xl w-full">
            <h1 class="font-bold text-white mb-6 leading-tight" style="font-size:2.5rem;">
                Build <span class="text-brand-orange">Smarter</span>. Market <span class="text-brand-orange">Better</span>.
            </h1>
            <p class="text-lg md:text-xl text-gray-200 mb-8 max-w-2xl mx-auto pt-4">
                Welcome to Stratnova Blog— Your Hub for Software & Digital Marketing Insights. Get expert perspectives from our top engineers and digital growth strategists, and stay ahead in an ever-evolving tech landscape.
            </p>
            <div class="flex flex-wrap gap-4 justify-center">
                <a href="#popular-posts" class="px-8 py-3 bg-brand-orange text-white rounded-full font-semibold hover:bg-opacity-90 transition-all duration-300 shadow-lg hover:shadow-xl">
                    Read Latest Posts
                </a>
                <a href="#contact" class="px-8 py-3 border-2 border-white text-white rounded-full font-semibold hover:bg-white hover:text-brand-navy transition-all duration-300">
                    Get in Touch
                </a>
            </div>
        </div>
    </div>

    <!-- Scroll Down Indicator -->
    <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-20 text-center">
        <p class="text-gray-300 text-sm mb-2">Scroll to explore</p>
        <div class="animate-bounce">
            <svg class="w-6 h-6 text-white mx-auto" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
            </svg>
        </div>
    </div>
</section>

<!-- Popular Posts Section -->
<section class="py-20 bg-white" id="popular-posts">
    <div class="max-w-7xl mx-auto px-4">
        <div class="text-center mb-16">
            <div class="inline-block bg-brand-orange/10 text-brand-orange px-4 py-2 rounded-full text-sm font-semibold mb-4">
                POPULAR POSTS
            </div>
            <h2 class="font-bold text-brand-navy mb-6" style="font-size:2.5rem;">
                Popular <span class="text-brand-orange">Posts</span>
            </h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Discover our most read and shared articles from industry experts
            </p>
        </div>

        <!-- 2x2 Flex Grid for Popular Posts -->
        <div class="flex flex-wrap justify-center gap-8 max-w-6xl mx-auto">
            <?php 
            // Display up to 4 featured posts in a 2x2 flex grid
            for ($i = 0; $i < min(4, count($featured_posts)); $i++): 
                $post = $featured_posts[$i];
            ?>
            <div class="w-full sm:w-[calc(50%-1rem)] md:w-[calc(50%-1rem)] lg:w-[calc(50%-1rem)] xl:w-[calc(50%-1rem)] bg-white rounded-2xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-500 hover:shadow-2xl flex flex-col">
                <div class="relative h-80 overflow-hidden rounded-t-2xl">
                    <img src="<?php echo htmlspecialchars($post['featured_image']); ?>" 
                         alt="<?php echo htmlspecialchars($post['title']); ?>" 
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    <div class="absolute top-4 left-4">
                        <span class="bg-brand-orange text-white text-xs font-semibold px-3 py-1 rounded-full">
                            <?php echo htmlspecialchars($post['category_name']); ?>
                        </span>
                    </div>
                </div>
                <div class="p-6 flex flex-col flex-1">
                    <h3 class="text-xl font-bold text-brand-navy mb-3"><?php echo htmlspecialchars($post['title']); ?></h3>
                    <div class="mt-4">
                        <a href="<?php echo generateBlogUrl($post); ?>" class="inline-block bg-brand-orange text-white px-6 py-2 rounded-full font-semibold hover:bg-brand-navy transition-all duration-300 text-sm">
                            Read Article
                        </a>
                    </div>
                    <div class="flex items-center gap-3 mt-4">
                        <img src="<?php echo htmlspecialchars($post['author_image']); ?>" 
                             alt="<?php echo htmlspecialchars($post['author']); ?>" 
                             class="w-8 h-8 rounded-full object-cover">
                        <p class="text-sm text-gray-600">By <?php echo htmlspecialchars($post['author']); ?></p>
                    </div>
                </div>
            </div>
            <?php endfor; ?>
        </div>
    </div>
</section>

<!-- Newsletter Section - CTA Style -->
<section class="bg-gradient-to-r from-brand-navy to-brand-blue text-white">
    <div class="max-w-7xl mx-auto px-4 grid md:grid-cols-2 gap-x-16 items-center">
        <!-- Left Side - Content -->
        <div class="text-left">
            <h2 class="font-bold mb-6" style="font-size:2.5rem;">
                Join Our Innovation <span class="text-brand-orange">Newsletter!</span>
            </h2>
            <p class="text-lg mb-8 leading-relaxed">
                Get the latest in digital innovation, AI trends, and exclusive Stratnova insights delivered to
                your inbox. <span class="font-semibold text-brand-orange">Stay ahead of the curve!</span>
            </p>
            <form class="w-full max-w-md flex flex-col sm:flex-row gap-3" autocomplete="off">
                <input type="email" required placeholder="Enter your email"
                    class="flex-1 px-5 py-3 rounded-full border border-gray-300  text-base transition-all text-gray-900">
                <button type="submit"
                    class="bg-brand-orange text-white hover:bg-brand-orange hover:text-white transition-all duration-300 font-bold px-8 py-3 rounded-full shadow-lg flex items-center justify-center gap-2">
                    <i class="fas fa-paper-plane"></i>
                    Subscribe
                </button>
            </form>
            <p class="text-xs text-gray-300 mt-3">
                No spam. Unsubscribe anytime. <span class="text-brand-orange font-semibold">Exclusive offers
                    inside!</span>
            </p>
        </div>

                    <!-- Right Side - Image -->
            <div class="hidden md:flex justify-center self-end relative mt-[-8rem] z-10">
                <img src="<?php echo getBaseURL(); ?>assets/cta.png" alt="Newsletter Illustration" class="w-full max-w-sm lg:max-w-md h-auto object-contain">
            </div>
    </div>
</section>

<!-- Latest Blogs Section -->
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4">
        <div class="text-center mb-16">
            <div class="inline-block bg-brand-orange/10 text-brand-orange px-4 py-2 rounded-full text-sm font-semibold mb-4">
                LATEST BLOGS
            </div>
            <h2 class="font-bold text-brand-navy mb-6" style="font-size:2.5rem;">
                Latest <span class="text-brand-orange">Blogs</span>
            </h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Stay updated with our latest insights, tutorials, and industry trends
            </p>
        </div>
            
            <!-- Blog Category Filters -->
            <div class="flex justify-center mb-12">
                <div class="bg-white rounded-full p-2 shadow-lg border border-gray-100 max-w-full overflow-x-auto blog-tabs-container cursor-grab" id="blogTabsContainer">
                    <div class="flex gap-2 md:gap-3 px-1 min-w-max">
                        <button class="category-filter active bg-brand-orange text-white px-4 md:px-6 py-2 md:py-3 rounded-full font-semibold transition-all duration-300 text-sm md:text-base whitespace-nowrap" data-category="all">
                            All Blogs
                        </button>
                        <?php foreach ($categories as $category): ?>
                        <button class="category-filter bg-transparent text-brand-navy px-4 md:px-6 py-2 md:py-3 rounded-full font-semibold hover:bg-brand-orange hover:text-white transition-all duration-300 text-sm md:text-base whitespace-nowrap" data-category="<?php echo htmlspecialchars($category['slug']); ?>">
                            <?php echo htmlspecialchars($category['name']); ?>
                        </button>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Blog Grid - 3x3 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto" id="blog-grid">
            <?php foreach ($latest_posts as $post): ?>
            <div class="blog-card bg-white rounded-2xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-500 hover:shadow-2xl" data-category="<?php echo htmlspecialchars($post['category_slug']); ?>">
                <div class="relative h-48 overflow-hidden">
                    <img src="<?php echo htmlspecialchars($post['featured_image']); ?>" 
                         alt="<?php echo htmlspecialchars($post['title']); ?>" 
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-6">
                    <span class="text-brand-orange text-sm font-semibold"><?php echo htmlspecialchars($post['category_name']); ?></span>
                    <h3 class="text-xl font-bold text-brand-navy my-3"><?php echo htmlspecialchars($post['title']); ?></h3>
                    <p class="text-gray-600 text-sm mb-4"><?php echo htmlspecialchars($post['excerpt']); ?></p>
                    <a href="<?php echo generateBlogUrl($post); ?>" class="text-brand-orange hover:text-brand-blue font-medium text-sm transition-colors flex items-center">
                        Read More <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                    <div class="flex items-center gap-3 mt-4 pt-4 border-t border-gray-100">
                        <img src="<?php echo htmlspecialchars($post['author_image'] ?? 'assets/avatar-placeholder.svg'); ?>" 
                             alt="<?php echo htmlspecialchars($post['author'] ?? 'Author'); ?>" 
                             class="w-8 h-8 rounded-full object-cover">
                        <p class="text-sm text-gray-600">By <?php echo htmlspecialchars($post['author'] ?? 'Stratnova Team'); ?></p>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>

        <!-- Pagination -->
        <?php if ($total_pages > 1): ?>
        <div class="flex justify-center mt-12 gap-2 max-w-6xl mx-auto">
            <!-- Previous button -->
            <?php if ($current_page > 1): ?>
            <a href="?page=<?php echo ($current_page - 1); ?><?php echo !empty($category_filter) ? '&category=' . urlencode($category_filter) : ''; ?>" 
               class="w-10 h-10 rounded-full bg-white border border-gray-200 text-gray-600 hover:bg-brand-orange hover:text-white hover:border-brand-orange transition-all duration-300 flex items-center justify-center">
                <i class="fas fa-chevron-left"></i>
            </a>
            <?php endif; ?>

            <!-- Page numbers -->
            <?php
            $start_page = max(1, $current_page - 2);
            $end_page = min($total_pages, $current_page + 2);
            
            for ($i = $start_page; $i <= $end_page; $i++):
            ?>
            <a href="?page=<?php echo $i; ?><?php echo !empty($category_filter) ? '&category=' . urlencode($category_filter) : ''; ?>" 
               class="w-10 h-10 rounded-full <?php echo ($i == $current_page) ? 'bg-brand-orange text-white border-brand-orange' : 'bg-white border-gray-200 text-gray-600 hover:bg-brand-orange hover:text-white hover:border-brand-orange'; ?> border transition-all duration-300 flex items-center justify-center">
                <?php echo $i; ?>
            </a>
            <?php endfor; ?>

            <!-- Next button -->
            <?php if ($current_page < $total_pages): ?>
            <a href="?page=<?php echo ($current_page + 1); ?><?php echo !empty($category_filter) ? '&category=' . urlencode($category_filter) : ''; ?>" 
               class="w-10 h-10 rounded-full bg-white border border-gray-200 text-gray-600 hover:bg-brand-orange hover:text-white hover:border-brand-orange transition-all duration-300 flex items-center justify-center">
                <i class="fas fa-chevron-right"></i>
            </a>
            <?php endif; ?>
        </div>
        <?php endif; ?>
    </div>
</section>

<!-- Project CTA Section -->
<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4">
        <div class="max-w-4xl mx-auto bg-brand-navy rounded-2xl shadow-lg p-12 text-center">
            <h2 class="font-bold text-white mb-6" style="font-size:2.5rem;">
                Have a <span class="text-brand-orange">Project</span> in Mind?
            </h2>
            <p class="text-xl text-white/80 mb-8">Let's bring your vision to life with a powerful and engaging digital presence.</p>
            <a href="#" class="inline-block bg-brand-orange text-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:text-brand-navy transition-all duration-300 shadow-lg hover:shadow-xl">
                Book Free Consultation
            </a>
        </div>
    </div>
</section>

<!-- Newsletter Popup - Add JavaScript to control this -->
<div id="newsletter-popup" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
    <!-- Click outside to close area -->
    <div id="newsletter-popup-backdrop" class="absolute inset-0"></div>
    <!-- Newsletter Section - CTA Style -->
    <section class="relative bg-gradient-to-r from-brand-navy to-brand-blue text-white mt-12 rounded-2xl shadow-xl p-0 z-10">
        <!-- Close Button -->
        <button id="close-popup" aria-label="Close Newsletter Popup"
            class="absolute top-4 right-4 md:top-6 md:right-6 bg-white bg-opacity-80 hover:bg-opacity-100 text-brand-navy rounded-full w-10 h-10 flex items-center justify-center shadow transition-all duration-200 z-20">
            <span class="sr-only">Close</span>
            <i class="fas fa-times text-xl"></i>
        </button>
        <div class="max-w-7xl mx-auto px-4 md:px-6 lg:px-8">
            <div class="grid md:grid-cols-2 gap-8 md:gap-x-16 items-center">
                <!-- Left Side - Content -->
                <div class="text-center md:text-left">
                    <h2 class="font-bold mb-6" style="font-size:2.5rem;">
                        Join Our Innovation <span class="text-brand-orange">Newsletter!</span>
                    </h2>
                    <p class="text-base md:text-lg mb-6 md:mb-8 leading-relaxed">
                        Get the latest in digital innovation, AI trends, and exclusive Stratnova insights delivered to
                        your inbox. <span class="font-semibold text-brand-orange">Stay ahead of the curve!</span>
                    </p>
                    <form id="newsletterForm" class="w-full max-w-md mx-auto md:mx-0 flex flex-col sm:flex-row gap-3" autocomplete="off">
                        <input type="email" name="email" required placeholder="Enter your email"
                            class="flex-1 px-4 md:px-5 py-3 md:py-3 rounded-full border border-gray-300    text-sm md:text-base transition-all text-gray-900">
                        <button type="submit"
                            class="bg-brand-orange text-white hover:bg-brand-orange hover:text-white transition-all duration-300 font-bold px-6 md:px-8 py-3 rounded-full shadow-lg flex items-center justify-center gap-2 text-sm md:text-base">
                            <i class="fas fa-paper-plane"></i>
                            Subscribe
                        </button>
                    </form>
                    <script>
                        document.getElementById('newsletterForm').addEventListener('submit', function(e) {
                            e.preventDefault();
                            const button = this.querySelector('button');
                            const originalHTML = button.innerHTML;
                            const formData = new FormData(this);
                            // Show loading state
                            button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Subscribing...';
                            button.disabled = true;
                            // Submit form
                            fetch('<?php echo getBaseURL(); ?>process-newsletter.php', {
                                method: 'POST',
                                body: formData
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    // Success
                                    button.innerHTML = '<i class="fas fa-check"></i> Subscribed!';
                                    button.classList.add('bg-green-500');
                                    this.reset();
                                } else {
                                    // Error
                                    button.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Error';
                                    button.classList.add('bg-red-500');
                                    alert(data.message);
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                button.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Error';
                                button.classList.add('bg-red-500');
                                alert('There was an error subscribing. Please try again.');
                            })
                            .finally(() => {
                                // Reset button after delay
                                setTimeout(() => {
                                    button.innerHTML = originalHTML;
                                    button.disabled = false;
                                    button.classList.remove('bg-green-500', 'bg-red-500');
                                }, 3000);
                            });
                        });
                    </script>
                    <p class="text-xs text-gray-300 mt-3">
                        No spam. Unsubscribe anytime. <span class="text-brand-orange font-semibold">Exclusive offers
                            inside!</span>
                    </p>
                </div>
                <!-- Right Side - Image -->
                <div class="hidden md:flex justify-center self-end relative mt-[-8rem] z-10">
                    <img src="<?php echo getBaseURL(); ?>assets/cta.png" alt="Newsletter Illustration" class="w-full max-w-sm lg:max-w-md h-auto object-contain">
                </div>
            </div>
        </div>
    </section>
</div>
<script>
    // Show popup after 5 seconds
    setTimeout(function() {
        document.getElementById('newsletter-popup').classList.remove('hidden');
    }, 5000);

    // Close popup when clicking the close button
    document.getElementById('close-popup').addEventListener('click', function() {
        document.getElementById('newsletter-popup').classList.add('hidden');
    });

    // Close popup when clicking outside the modal (on the backdrop)
    document.getElementById('newsletter-popup-backdrop').addEventListener('click', function(e) {
        document.getElementById('newsletter-popup').classList.add('hidden');
    });

    // Optional: Close popup on ESC key
    document.addEventListener('keydown', function(e) {
        if (e.key === "Escape") {
            document.getElementById('newsletter-popup').classList.add('hidden');
        }
    });
</script>

<!-- Add JavaScript for Newsletter Popup and Category Filtering -->
<script>
    // Show popup after 5 seconds
    setTimeout(function() {
        document.getElementById('newsletter-popup').classList.remove('hidden');
    }, 5000);
    
    // Close popup when clicking the close button
    document.getElementById('close-popup').addEventListener('click', function() {
        document.getElementById('newsletter-popup').classList.add('hidden');
    });

    // Category filtering functionality with drag scrolling
    document.addEventListener('DOMContentLoaded', function() {
        const categoryFilters = document.querySelectorAll('.category-filter');
        const blogCards = document.querySelectorAll('.blog-card');
        const tabsContainer = document.getElementById('blogTabsContainer');
        
        let isDown = false;
        let startX;
        let scrollLeft;
        let hasDragged = false;

        // Set active tab based on current URL parameter
        const urlParams = new URLSearchParams(window.location.search);
        const currentCategory = urlParams.get('category') || 'all';
        
        categoryFilters.forEach(filter => {
            const filterCategory = filter.getAttribute('data-category');
            if (filterCategory === currentCategory) {
                updateActiveTab(filter);
            }
        });

        // Update active tab styling
        function updateActiveTab(activeTab) {
            categoryFilters.forEach(tab => {
                tab.classList.remove('bg-brand-orange', 'text-white', 'active');
                tab.classList.add('bg-transparent', 'text-brand-navy');
            });
            
            if (activeTab) {
                activeTab.classList.add('bg-brand-orange', 'text-white', 'active');
                activeTab.classList.remove('bg-transparent', 'text-brand-navy');
            }
        }

        // Tab click handling
        categoryFilters.forEach(filter => {
            filter.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                if (hasDragged) {
                    hasDragged = false;
                    return;
                }

                const selectedCategory = this.getAttribute('data-category');
                
                // Update active filter button
                updateActiveTab(this);

                // Navigate to filtered page
                const currentUrl = new URL(window.location.href);
                if (selectedCategory === 'all') {
                    currentUrl.searchParams.delete('category');
                } else {
                    currentUrl.searchParams.set('category', selectedCategory);
                }
                currentUrl.searchParams.delete('page'); // Reset to page 1 when filtering
                // Add hash to scroll to category selector
                currentUrl.hash = '#blogTabsContainer';
                window.location.href = currentUrl.toString();
            });
        });

        // Scroll to category selector when page loads with category parameter
        document.addEventListener('DOMContentLoaded', function() {
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.has('category')) {
                setTimeout(() => {
                    const categorySection = document.querySelector('#blogTabsContainer');
                    if (categorySection) {
                        categorySection.scrollIntoView({ 
                            behavior: 'smooth', 
                            block: 'center' 
                        });
                    }
                }, 500);
            }
        });

        // Handle hash-based scrolling
        if (window.location.hash === '#blogTabsContainer') {
            setTimeout(() => {
                const categorySection = document.querySelector('#blogTabsContainer');
                if (categorySection) {
                    categorySection.scrollIntoView({ 
                        behavior: 'smooth', 
                        block: 'center' 
                    });
                }
            }, 500);
        }

        // Drag scrolling functionality
        tabsContainer.addEventListener('mousedown', (e) => {
            isDown = true;
            hasDragged = false;
            tabsContainer.classList.add('cursor-grabbing');
            tabsContainer.classList.remove('cursor-grab');
            startX = e.pageX - tabsContainer.offsetLeft;
            scrollLeft = tabsContainer.scrollLeft;
        });

        tabsContainer.addEventListener('mouseleave', () => {
            isDown = false;
            tabsContainer.classList.remove('cursor-grabbing');
            tabsContainer.classList.add('cursor-grab');
        });

        tabsContainer.addEventListener('mouseup', () => {
            isDown = false;
            tabsContainer.classList.remove('cursor-grabbing');
            tabsContainer.classList.add('cursor-grab');
        });

        tabsContainer.addEventListener('mousemove', (e) => {
            if (!isDown) return;
            e.preventDefault();
            hasDragged = true;
            const x = e.pageX - tabsContainer.offsetLeft;
            const walk = (x - startX) * 2;
            tabsContainer.scrollLeft = scrollLeft - walk;
        });

        // Touch events for mobile
        tabsContainer.addEventListener('touchstart', (e) => {
            isDown = true;
            hasDragged = false;
            startX = e.touches[0].pageX - tabsContainer.offsetLeft;
            scrollLeft = tabsContainer.scrollLeft;
        });

        tabsContainer.addEventListener('touchend', () => {
            isDown = false;
        });

        tabsContainer.addEventListener('touchmove', (e) => {
            if (!isDown) return;
            e.preventDefault();
            hasDragged = true;
            const x = e.touches[0].pageX - tabsContainer.offsetLeft;
            const walk = (x - startX) * 2;
            tabsContainer.scrollLeft = scrollLeft - walk;
        });
    });
</script>

<?php include 'includes/contact-form.php'; ?> 
<?php include 'includes/footer.php'; ?>