<?php
require_once 'config.php';

// Get categories
$stmt = $pdo->query("SELECT * FROM categories ORDER BY name");
$categories = $stmt->fetchAll();

// Get featured equipment
$stmt = $pdo->query("
    SELECT e.*, c.name as category_name 
    FROM equipment e 
    JOIN categories c ON e.category_id = c.id 
    WHERE e.stock_quantity > 0
    ORDER BY e.id DESC 
    LIMIT 8
");
$featured_equipment = $stmt->fetchAll();

// Get best sellers (top ordered items)
$stmt = $pdo->query("
    SELECT e.*, c.name as category_name, COALESCE(SUM(oi.quantity), 0) as total_sold
    FROM equipment e
    JOIN categories c ON e.category_id = c.id
    LEFT JOIN order_items oi ON e.id = oi.equipment_id
    GROUP BY e.id
    ORDER BY total_sold DESC
    LIMIT 8
");
$best_sellers = $stmt->fetchAll();

// Get stats
$stmt = $pdo->query("SELECT COUNT(*) as total FROM equipment WHERE stock_quantity > 0");
$products_count = $stmt->fetch()['total'];

$stmt = $pdo->query("SELECT COUNT(*) as total FROM customers");
$customers_count = $stmt->fetch()['total'];

$stmt = $pdo->query("SELECT COALESCE(SUM(total_amount), 0) as total FROM orders WHERE payment_status = 'paid'");
$revenue = $stmt->fetch()['total'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>MoonDant | Premium Equipment Marketplace</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Floating Cart Button for Mobile -->
<a href="cart.php" class="floating-cart-mobile" id="floatingCartMobile">
    <i class="fas fa-shopping-cart"></i>
    <span class="cart-count-mobile" id="floatingCartCount"><?php echo getCartCount($pdo); ?></span>
</a>
<!-- Loading Overlay -->
<div id="loadingOverlay" class="loading-overlay">
    <div class="loader-container">
        <div class="loader"></div>
        <p>Loading...</p>
    </div>
</div>

<!-- Toast Container -->
<div id="toastContainer" class="toast-container"></div>

<!-- WhatsApp Float Button -->
<a href="https://wa.me/15551234567" class="whatsapp-float" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
    <div class="container">
        <a class="navbar-brand" href="index.php">
            <div class="logo-icon">
                <i class="fas fa-microchip"></i>
            </div>
            <span>Elite<span class="text-warning">Equip</span></span>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#categories">Categories</a></li>
                <li class="nav-item"><a class="nav-link" href="#featured">Featured</a></li>
                <li class="nav-item"><a class="nav-link" href="#bestsellers">Best Sellers</a></li>
                <li class="nav-item"><a class="nav-link" href="#whyus">Why Us</a></li>
                <li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
            </ul>
            <div class="cart-icon-wrapper">
                <a href="cart.php" class="cart-icon">
                    <i class="fas fa-shopping-cart"></i>
                    <span class="cart-count" id="cartCount"><?php echo getCartCount($pdo); ?></span>
                </a>
            </div>
        </div>
    </div>
</nav>

<!-- Hero Section -->
<section id="home" class="hero">
    <div class="hero-slider">
        <div class="hero-slide active" style="background: linear-gradient(135deg, #0f1535 0%, #1a2352 100%);">
            <div class="container">
                <div class="row align-items-center min-vh-100">
                    <div class="col-lg-7 hero-content" data-aos="fade-up">
                        <div class="hero-badge">Since 2024 • Trusted Worldwide</div>
                        <h1 class="hero-title">
                            Premium Industrial<br>
                            <span class="text-gradient">Equipment Solutions</span>
                        </h1>
                        <p class="hero-text">
                            Supplying world-class equipment for medical, engineering, agricultural, 
                            construction, and oil & gas industries worldwide.
                        </p>
                        <div class="hero-stats">
                            <div class="stat" data-aos="fade-up" data-aos-delay="100">
                                <h3><?php echo $products_count; ?>+</h3>
                                <p>Equipment Types</p>
                            </div>
                            <div class="stat" data-aos="fade-up" data-aos-delay="200">
                                <h3>50+</h3>
                                <p>Countries Served</p>
                            </div>
                            <div class="stat" data-aos="fade-up" data-aos-delay="300">
                                <h3><?php echo $customers_count; ?>K+</h3>
                                <p>Happy Clients</p>
                            </div>
                        </div>
                        <div class="hero-buttons" data-aos="fade-up" data-aos-delay="400">
                            <a href="#featured" class="btn btn-primary btn-lg">Shop Now</a>
                            <a href="#contact" class="btn btn-outline-light btn-lg">Contact Sales</a>
                        </div>
                    </div>
                    <div class="col-lg-5 hero-visual" data-aos="fade-left">
                        <div class="floating-card card-1">
                            <i class="fas fa-microscope"></i>
                            <span>Medical</span>
                        </div>
                        <div class="floating-card card-2">
                            <i class="fas fa-hard-hat"></i>
                            <span>Construction</span>
                        </div>
                        <div class="floating-card card-3">
                            <i class="fas fa-tractor"></i>
                            <span>Agricultural</span>
                        </div>
                        <div class="floating-card card-4">
                            <i class="fas fa-oil-can"></i>
                            <span>Oil & Gas</span>
                        </div>
                        <div class="floating-card card-5">
                            <i class="fas fa-drafting-compass"></i>
                            <span>Engineering</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="hero-wave">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="#ffffff" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,170,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        </svg>
    </div>
</section>

<!-- Categories Section -->
<section id="categories" class="categories section-padding">
    <div class="container">
        <div class="section-header text-center" data-aos="fade-up">
            <span class="section-subtitle">Our Categories</span>
            <h2 class="section-title">Explore Equipment By Industry</h2>
            <p class="section-desc">Discover our extensive range of industrial equipment across various sectors</p>
        </div>
        <div class="row g-4">
            <?php 
            $icons = [
                'Medical Equipment' => 'fa-microscope',
                'Engineering Equipment' => 'fa-drafting-compass',
                'Agricultural Equipment' => 'fa-tractor',
                'Construction Equipment' => 'fa-hard-hat',
                'Oil and Gas Equipment' => 'fa-oil-can'
            ];
            $colors = ['#ff6b35', '#00d4ff', '#10b981', '#f59e0b', '#ef4444'];
            $counter = 0;
            foreach ($categories as $cat): 
            ?>
            <div class="col-lg-2 col-md-4 col-6" data-aos="fade-up" data-aos-delay="<?php echo $counter * 100; ?>">
                <div class="category-card" data-category="<?php echo $cat['id']; ?>">
                    <div class="category-icon" style="background: linear-gradient(135deg, <?php echo $colors[$counter % count($colors)]; ?>20, <?php echo $colors[$counter % count($colors)]; ?>10);">
                        <i class="fas <?php echo $icons[$cat['name']] ?? 'fa-industry'; ?>" style="color: <?php echo $colors[$counter % count($colors)]; ?>;"></i>
                    </div>
                    <h4><?php echo htmlspecialchars($cat['name']); ?></h4>
                    <p><?php echo htmlspecialchars($cat['description']); ?></p>
                    <div class="category-hover"></div>
                </div>
            </div>
            <?php $counter++; endforeach; ?>
        </div>
    </div>
</section>

<!-- Featured Products Section - UPDATE THIS SECTION -->
<section id="featured" class="products section-padding bg-light">
    <div class="container">
        <div class="section-header text-center" data-aos="fade-up">
            <span class="section-subtitle">Featured Products</span>
            <h2 class="section-title">Premium Equipment Collection</h2>
            <p class="section-desc">High-quality industrial equipment from trusted manufacturers</p>
        </div>
        <div class="products-grid" id="featuredGrid">
            <?php 
            $productCounter = 0;
            foreach ($featured_equipment as $item): 
                // Get image path
                $imagePath = !empty($item['image_url']) ? $item['image_url'] : null;
                $hasImage = $imagePath && file_exists($imagePath);
            ?>
            <div class="product-card" data-aos="fade-up" data-aos-delay="<?php echo $productCounter * 100; ?>">
    <div class="product-badge"><?php echo htmlspecialchars($item['category_name']); ?></div>
    <div class="product-image">
        <?php 
        $imagePath = !empty($item['image_url']) ? $item['image_url'] : null;
        $hasImage = $imagePath && file_exists($imagePath);
        ?>
        <?php if ($hasImage): ?>
            <img src="<?php echo $imagePath; ?>" alt="<?php echo htmlspecialchars($item['name']); ?>" style="width: 100%; height: 100%; object-fit: cover;">
        <?php else: ?>
            <i class="fas fa-cogs"></i>
        <?php endif; ?>
        <div class="product-actions">
            <button class="action-btn quick-view" onclick="showProductModal(<?php echo $item['id']; ?>)">
                <i class="fas fa-eye"></i>
            </button>
        </div>
    </div>
    <div class="product-info">
        <h3><?php echo htmlspecialchars($item['name']); ?></h3>
        <p><?php echo substr(htmlspecialchars($item['description']), 0, 60) . '...'; ?></p>
        <div class="product-price">
            $<?php echo number_format($item['price'], 2); ?>
            <small>/ unit</small>
        </div>
        <div class="product-quantity-control" style="display: none;" id="qty-control-<?php echo $item['id']; ?>">
            <button class="qty-btn qty-minus" onclick="updateCartQuantity(<?php echo $item['id']; ?>, -1)">-</button>
            <span class="qty-value" id="qty-value-<?php echo $item['id']; ?>">1</span>
            <button class="qty-btn qty-plus" onclick="updateCartQuantity(<?php echo $item['id']; ?>, 1)">+</button>
        </div>
        <button class="btn-add-cart" id="add-btn-<?php echo $item['id']; ?>" onclick="addToCartWithQuantity(<?php echo $item['id']; ?>)">
            <i class="fas fa-shopping-cart"></i> Add to Cart
        </button>
    </div>
</div>
            <?php $productCounter++; endforeach; ?>
        </div>
        <div class="text-center mt-5" data-aos="fade-up">
            <a href="#" class="btn btn-outline-primary btn-lg" onclick="loadAllProducts(); return false;">View All Products <i class="fas fa-arrow-right ms-2"></i></a>
        </div>
    </div>
</section>

<!-- Best Sellers Section - UPDATE THIS SECTION -->
<section id="bestsellers" class="products section-padding">
    <div class="container">
        <div class="section-header text-center" data-aos="fade-up">
            <span class="section-subtitle">Best Sellers</span>
            <h2 class="section-title">Most Popular Equipment</h2>
            <p class="section-desc">Our customers' top choices - trusted and proven</p>
        </div>
        <div class="products-grid">
            <?php foreach ($best_sellers as $item): if($item['total_sold'] > 0): 
                $imagePath = !empty($item['image_url']) ? $item['image_url'] : null;
                $hasImage = $imagePath && file_exists($imagePath);
            ?>
            <div class="product-card" data-aos="fade-up">
                <div class="product-badge best-seller">🔥 Best Seller</div>
                <div class="product-image">
                    <?php if ($hasImage): ?>
                        <img src="<?php echo $imagePath; ?>" alt="<?php echo htmlspecialchars($item['name']); ?>" style="width: 100%; height: 100%; object-fit: cover;">
                    <?php else: ?>
                        <i class="fas fa-trophy"></i>
                    <?php endif; ?>
                    <div class="product-actions">
                        <button class="action-btn quick-view" onclick="showProductModal(<?php echo $item['id']; ?>)">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                <div class="product-info">
                    <h3><?php echo htmlspecialchars($item['name']); ?></h3>
                    <p><?php echo substr(htmlspecialchars($item['description']), 0, 60) . '...'; ?></p>
                    <div class="product-price">
                        $<?php echo number_format($item['price'], 2); ?>
                        <small>/ unit</small>
                    </div>
                    <button class="btn-add-cart" onclick="addToCart(<?php echo $item['id']; ?>)">
                        <i class="fas fa-shopping-cart"></i> Add to Cart
                    </button>
                </div>
            </div>
            <?php endif; endforeach; ?>
        </div>
    </div>
</section>


<!-- Why Choose Us Section -->
<section id="whyus" class="whyus section-padding bg-light">
    <div class="container">
        <div class="section-header text-center" data-aos="fade-up">
            <span class="section-subtitle">Why Choose Us</span>
            <h2 class="section-title">Why WestWrench Stands Out</h2>
            <p class="section-desc">Experience excellence with our premium services</p>
        </div>
        <div class="row g-4">
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-truck-fast"></i>
                    </div>
                    <h4>Fast Delivery</h4>
                    <p>Free shipping worldwide on orders over $1000. Express delivery available.</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h4>Premium Quality</h4>
                    <p>All equipment certified and tested for maximum reliability and performance.</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h4>24/7 Support</h4>
                    <p>Dedicated customer support team available around the clock.</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-money-bill-wave"></i>
                    </div>
                    <h4>Best Price Guarantee</h4>
                    <p>Competitive pricing with manufacturer direct sourcing.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats Counter Section -->
<section class="stats-counter">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6" data-aos="fade-up">
                <div class="counter-item">
                    <i class="fas fa-boxes"></i>
                    <h3><span class="counter-num" data-target="<?php echo $products_count; ?>">0</span>+</h3>
                    <p>Products Available</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="counter-item">
                    <i class="fas fa-users"></i>
                    <h3><span class="counter-num" data-target="<?php echo $customers_count; ?>">0</span>K+</h3>
                    <p>Happy Customers</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="counter-item">
                    <i class="fas fa-globe"></i>
                    <h3><span class="counter-num" data-target="50">0</span>+</h3>
                    <p>Countries Served</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div class="counter-item">
                    <i class="fas fa-dollar-sign"></i>
                    <h3>$<span class="counter-num" data-target="184">0</span>M+</h3>
                    <p>Revenue Generated</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<section id="testimonials" class="testimonials section-padding">
    <div class="container">
        <div class="section-header text-center" data-aos="fade-up">
            <span class="section-subtitle">Testimonials</span>
            <h2 class="section-title">What Our Clients Say</h2>
            <p class="section-desc">Trusted by industry leaders worldwide</p>
        </div>
        <div class="testimonial-slider">
            <div class="testimonial-card" data-aos="fade-up">
                <div class="testimonial-content">
                    <i class="fas fa-quote-left"></i>
                    <p>Excellent quality equipment and outstanding customer service. Highly recommend WestWrench for industrial needs.</p>
                </div>
                <div class="testimonial-author">
                    <div class="author-info">
                        <h4>John Smith</h4>
                        <p>Construction Manager</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-card" data-aos="fade-up" data-aos-delay="100">
                <div class="testimonial-content">
                    <i class="fas fa-quote-left"></i>
                    <p>The medical equipment we purchased exceeded our expectations. Fast delivery and great support.</p>
                </div>
                <div class="testimonial-author">
                    <div class="author-info">
                        <h4>Dr. Sarah Johnson</h4>
                        <p>Hospital Director</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-card" data-aos="fade-up" data-aos-delay="200">
                <div class="testimonial-content">
                    <i class="fas fa-quote-left"></i>
                    <p>Best agricultural equipment supplier we've worked with. Reliable and affordable.</p>
                </div>
                <div class="testimonial-author">
                    <div class="author-info">
                        <h4>Mike Anderson</h4>
                        <p>Farm Owner</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="contact section-padding bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6" data-aos="fade-right">
                <div class="contact-info">
                    <span class="section-subtitle">Get In Touch</span>
                    <h2>Ready to Discuss Your Equipment Needs?</h2>
                    <p>Our team of experts is ready to help you find the perfect equipment solutions for your business.</p>
                    <div class="contact-details">
                        <div class="contact-item">
                            <i class="fas fa-phone-alt"></i>
                            <div>
                                <h4>Phone</h4>
                                <p>+1 (555) 123-4567</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <div>
                                <h4>Email</h4>
                                <p>email@westwrench.com</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <div>
                                <h4>Address</h4>
                                <p>123 Industrial Avenue, New York, NY 10001</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6" data-aos="fade-left">
                <div class="contact-form-wrapper">
                    <form id="contactForm" class="contact-form">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <input type="text" class="form-control" placeholder="Your Name" required>
                            </div>
                            <div class="col-md-6">
                                <input type="email" class="form-control" placeholder="Your Email" required>
                            </div>
                            <div class="col-12">
                                <input type="text" class="form-control" placeholder="Subject">
                            </div>
                            <div class="col-12">
                                <textarea class="form-control" rows="5" placeholder="Your Message"></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary w-100">Send Message <i class="fas fa-paper-plane ms-2"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Newsletter Section -->
<section class="newsletter">
    <div class="container">
        <div class="newsletter-wrapper" data-aos="fade-up">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h3>Subscribe to Our Newsletter</h3>
                    <p>Get latest updates on new equipment and special offers</p>
                </div>
                <div class="col-lg-6">
                    <form class="newsletter-form">
                        <input type="email" placeholder="Enter your email address" required>
                        <button type="submit">Subscribe <i class="fas fa-arrow-right"></i></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="footer-logo">
                    <i class="fas fa-microchip"></i>
                    <span>Elite<span class="text-warning">Equip</span></span>
                </div>
                <p>Providing premium industrial equipment solutions since 2024. Trusted by industry leaders worldwide.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
            <div class="col-lg-2">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#categories">Categories</a></li>
                    <li><a href="#featured">Products</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <div class="col-lg-3">
                <h4>Categories</h4>
                <ul>
                    <?php foreach ($categories as $cat): ?>
                    <li><a href="#" data-category="<?php echo $cat['id']; ?>"><?php echo htmlspecialchars($cat['name']); ?></a></li>
                    <?php endforeach; ?>
                </ul>
            </div>
            <div class="col-lg-3">
                <h4>Contact Info</h4>
                <ul class="contact-info">
                    <li><i class="fas fa-map-marker-alt"></i> New York, USA</li>
                    <li><i class="fas fa-phone"></i> +1 (555) 123-4567</li>
                    <li><i class="fas fa-envelope"></i> email@westwrench.com</li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2026 WestWrench. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
        </div>
    </div>
</footer>

<!-- Product Modal -->
<div class="modal fade" id="productModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Product Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="modalBody">
                <div class="text-center">
                    <div class="spinner-border text-primary"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="script.js"></script>
<script>
AOS.init({
    duration: 1000,
    once: true,
    offset: 100
});

// Counter animation
function animateCounter() {
    const counters = document.querySelectorAll('.counter-num');
    counters.forEach(counter => {
        const target = parseInt(counter.getAttribute('data-target'));
        let current = 0;
        const increment = target / 50;
        const updateCounter = () => {
            if (current < target) {
                current += increment;
                counter.textContent = Math.ceil(current);
                setTimeout(updateCounter, 20);
            } else {
                counter.textContent = target;
            }
        };
        updateCounter();
    });
}

// Trigger counter when in viewport
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            animateCounter();
            observer.unobserve(entry.target);
        }
    });
});

const statsSection = document.querySelector('.stats-counter');
if (statsSection) observer.observe(statsSection);
</script>
</body>
</html>