// 1. Check input (ID or SEO Slug)
if(isset($_GET['id']) || isset($_GET['slug'])){

    // Detect if we are looking up by ID (Old way) or Slug (SEO way)
    if(isset($_GET['slug'])){
        $slug = $conn->real_escape_string($_GET['slug']);
        $sql = "SELECT * FROM news WHERE seo_url = '$slug'";
    } else {
        $id = intval($_GET['id']);
        $sql = "SELECT * FROM news WHERE id = $id";
    }

    $result = $conn->query($sql);
    
    if($result->num_rows > 0){
        $news = $result->fetch_assoc();

        // --- 2. MAP DATABASE TO VARIABLES (The Critical Step) ---
        
        // A. META TITLE
        // Logic: If admin entered a Meta Title, use it. Else, use the Article Headline.
        $page_title = !empty($news['meta_title']) ? $news['meta_title'] : $news['title'];

        // B. META DESCRIPTION
        // Logic: If admin entered Meta Desc, use it. Else, cut the Short Description to 160 chars.
        $clean_desc = strip_tags($news['short_desc']); // Remove HTML tags
        $page_desc = !empty($news['meta_description']) ? $news['meta_description'] : substr($clean_desc, 0, 160);
        
        $page_category = !empty($news['category']) ? $news['category'] : "Automotive News";

        // C. KEYWORDS (Primary + Secondary)
        // Logic: Combine them into one comma-separated string
        $keys = [];
        if(!empty($news['primary_keyword'])) $keys[] = $news['primary_keyword'];
        if(!empty($news['secondary_keywords'])) $keys[] = $news['secondary_keywords'];
        // Fallback: If empty, use category
        if(empty($keys)) $keys[] = $news['category'];
        $page_keywords = implode(', ', $keys);

        // D. IMAGE URL (For Social Sharing / Open Graph)
        // Logic: Create an absolute path (https://...) so Facebook/LinkedIn can see it.
        $base_url = "https://www.globalautoinsight.com/"; // CHANGE THIS to your actual domain
        if(!empty($news['image_url'])) {
            // If you have a specific external image URL field
            $page_image = $news['image_url'];
        } else {
            // Use the uploaded image
            $page_image = $base_url . "images/" . $news['image'];
        }

        // E. CANONICAL URL (SEO URL)
        // Logic: Tell Google the "Real" link is the SEO friendly one
        if(!empty($news['seo_url'])){
            $page_url = $base_url . "news/" . $news['seo_url'];
        } else {
            $page_url = $base_url . "read_news.php?id=" . $news['id'];
        }

        // F. IMAGE ALT TEXT (For the Body)
        $img_alt_text = !empty($news['image_alt_text']) ? $news['image_alt_text'] : $news['title'];

        $current_page = "news";

    } else {
        // News not found
        header("HTTP/1.0 404 Not Found");
        include('404.php');
        exit();
    }
} else {
    header("Location: index.php");
    exit();
}    


// 3. INCLUDE HEADER (Now the header has access to the variables above)
include 'includes/header.php'; 



// --- 1. Handle Review Submission ---
if(isset($_POST['submit_review'])){
    $n_id = $_POST['news_id'];
    $name = $conn->real_escape_string($_POST['reviewer_name']);
    $msg = $conn->real_escape_string($_POST['review_message']);
    
    // Insert into DB
    $conn->query("INSERT INTO feedback (news_id, user_name, message) VALUES ('$n_id', '$name', '$msg')");
    echo "<meta http-equiv='refresh' content='0'>";
}

// --- 2. Fetch News Data ---
if(isset($_GET['id'])){
    $id = intval($_GET['id']);
    $sql = "SELECT * FROM news WHERE id = $id";
    $result = $conn->query($sql);
    
    if($result->num_rows > 0){
        $news = $result->fetch_assoc();
        // Calculate read time
        $word_count = str_word_count($news['content']);
        $read_time = ceil($word_count / 200); 
    } else {
        header("Location: index.php");
        exit();
    }
} else {
    header("Location: index.php");
    exit();
}
?>

    <style>
        :root {
            --accent-color: #e74c3c; 
            --bg-color: #f8f9fa;      
            --card-bg: #ffffff;
            --text-main: #222222;
            --text-light: #666666;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            /* Footer Sticky Fix */
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* --- NAVIGATION --- */
        .navbar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid #eaeaea;
            padding: 15px 0;
        }

        /* --- MAIN LAYOUT CONTAINER --- */
        .main-article-wrapper {
            max-width: 1250px; 
            margin: 50px auto;
            background: var(--card-bg);
            padding: 0 0 0 0; /* Padding handled by children */
            border-radius: 12px;
            box-shadow: 0 15px 45px rgba(0,0,0,0.08); 
            overflow: hidden;
            /* Flex grow to push footer down if content is short */
            flex: 1; 
        }

        /* --- HEADER --- */
        .article-header {
            padding: 60px 80px 10px 80px; 
            text-align: center;
        }

        .category-badge {
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--accent-color);
            margin-bottom: 20px;
            display: inline-block;
            border-bottom: 3px solid var(--accent-color);
            padding-bottom: 5px;
        }

        .article-title {
            font-family: 'Cambria', sans-serif;
            font-weight: 900;
            font-size: 2.5rem; 
            line-height: 1.1;
            color: #111;
            margin-bottom: 25px;
            letter-spacing: -1.5px;
        }

        .article-meta {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 25px;
            color: var(--text-light);
            font-size: 1rem;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            padding: 20px 0;
            margin-top: 30px;
            max-width: 800px; 
            margin-left: auto;
            margin-right: auto;
        }

        /* --- IMAGES --- */
        .featured-image-container {
            width: 100%;
            max-width: 1100px; /* Limit width for large screens */
            height: 500px;     /* Fixed height to prevent page jumping */
            margin: 30px auto; 
            
            /* PLAIN BACKGROUND (Removes the blurry image effect) */
            background-color: #ffffff; 
            
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: 8px;
            border: 1px solid #f0f0f0; /* Optional: subtle border */
        }
    
        /* --- 2. The Slider Item --- */
        .carousel-item {
            width: 100%;
            height: 500px; /* Must match container height */
            background-color: #ffffff; /* Ensure white background */
        }
        
        /* Container to hold the image and text */
        .static-overlay-container {
            position: relative;
            width: 100%;
            max-width: 700px; /* Constrains the whole block */
            margin: auto;
            overflow: hidden;
        }
        
        /* The Overlay Box */
        .static-text-overlay {
            position: absolute;
            top: 55%; /* Adjusted to sit in the white space */
            left: 50%;
            transform: translate(-50%, -50%);
            
            /* CRITICAL CHANGES BELOW */
            width: 75%;       /* Reduced from 85% to keep text away from edges */
            max-width: 700px; /* Prevents text from spreading too wide on big screens */
            text-align: center;
            z-index: 10;
            pointer-events: none;
        }
        
        /* Category Pill */
        .overlay-category {
            background: #333;
            color: #fff;
            padding: 5px 18px;
            border-radius: 20px;
            display: inline-block;
            margin-bottom: 12px;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 1px;
        }
        
        /* Title Styling */
        .overlay-title {
            font-family: 'Playfair Display', serif; /* Or your preferred bold serif */
            font-weight: 800;
            
            /* FONT SIZE ADJUSTMENT */
            font-size: 1.8rem; /* Reduced from 2.2rem to ensure it fits */
            
            color: #1a1a1a;
            line-height: 1.0;
            margin: 0;
            word-wrap: break-word; /* Ensures long words don't break the layout */
        }
        
        /* Mobile Responsive Adjustments */
        @media (max-width: 768px) {
            .static-text-overlay { width: 85%; }
            .overlay-title { font-size: 1.2rem; }
            .overlay-category { font-size: 0.6rem; padding: 3px 12px; }
        }
    
        /* --- 3. The Image Itself --- */
        .featured-image {
            width: 100%;
            height: 80%;
            object-fit: contain; 
            object-position: center;
            display: block;
        }
        
        /* Remove any shadows/filters from the image */
        .carousel-item img {
            box-shadow: none;
            filter: none;
        }

        /* --- ARTICLE BODY --- */
        .article-body {
            padding: 20px 80px 40px 80px; 
        }
        
        /* Fix for no-image gap */
        .article-body.no-image-gap {
            padding-top: 0 !important;
            margin-top: -20px;
        }

        /* Summary Box */
        .summary-card {
            background-color: #fcfcfc;
            border: 1px solid #eee;
            border-radius: 12px;
            padding: 40px;
            margin-bottom: 50px;
            position: relative;
        }
        .summary-card::before {
            content: ''; position: absolute;
            left: 0; top: 30px; bottom: 30px;
            width: 5px; background: var(--accent-color);
            border-radius: 0 4px 4px 0;
        }
        .summary-title {
            font-weight: 800; font-size: 1rem;
            text-transform: uppercase; color: #333;
            margin-bottom: 20px; display: flex; align-items: center;
        }
        .summary-list li {
            font-family: 'Cambria', sans-serif; font-size: 1.1rem;
            color: #444; margin-bottom: 15px; line-height: 1.6;
        }

        /* Content Text */
        .content-text {
            font-family: 'Cambria', serif;
            font-size: 1.15rem; line-height: 1.9;
            color: #2c2c2c; text-align: justify;
        }
        .content-text p { margin-bottom: 2em; }

        /* Tag Hover */
        .tag-link:hover {
            background-color: var(--accent-color) !important;
            color: white !important;
            border-color: var(--accent-color) !important;
            transition: 0.3s;
        }

        /* --- REVIEWS --- */
        .review-wrapper {
            background: #fafafa;
            border-top: 1px solid #eee;
            padding: 60px 100px;
        }
        .review-bubble {
            background: white; border: 1px solid #eee;
            border-radius: 12px; padding: 25px;
            margin-bottom: 25px; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        }

        /* --- FOOTER FIX --- */
        footer {
            width: 100%;
            margin-top: auto; /* Pushes footer to bottom */
        }

        /* Responsive */
        @media (max-width: 992px) {
            .main-article-wrapper { width: 95%; margin: 20px auto; }
            .article-header { padding: 40px 20px; }
            .article-body, .review-wrapper { padding: 30px 20px; }
            .article-title { font-size: 2rem; }
            .featured-image-container { width: 100%; }
        }
    </style>
<!--</head>
<body>-->



<!-- Navbar -->
<!--<nav class="navbar navbar-expand-lg sticky-top">
    <div class="container">
        <div class="ms-auto">
            <a href="NewsWorldwide.php" class="text-decoration-none text-muted fw-bold small">
                <i class="fas fa-chevron-left me-1"></i> BACK TO NEWS
            </a>
        </div>
    </div>
</nav>-->

<!-- ================= MAIN LAYOUT ================= -->
<div class="main-article-wrapper">
    <!-- 1. HEADER -->
    <header class="article-header">
        <h1 class="article-title">Mitsubishi Fuso eCanter Electric Truck Launched in UAE</h1>
        
        <div class="article-meta">
            <span><i class="far fa-calendar me-2"></i>January 20, 2026</span>
            <span>&bull;</span>
            <span><i class="far fa-clock me-2"></i> min read</span>
            <span>&bull;</span>
            <span><i class="far fa-user me-2"></i>Editorial Team</span>
        </div>

        <div class="article-meta d-flex flex-wrap justify-content-center align-items-center gap-2 mt-4" style="border:none; margin-top:0; padding-top:0;">
            <span class="text-muted small fw-bold text-uppercase"><i class="fas fa-tags me-1"></i> Tags:</span>
                                    <a href="search.php?tag=Electrification" class="text-decoration-none">
                            <span class="badge bg-light text-dark border px-3 py-2 tag-link">Electrification</span>
                        </a>
                                    <a href="search.php?tag=EV" class="text-decoration-none">
                            <span class="badge bg-light text-dark border px-3 py-2 tag-link">EV</span>
                        </a>
                                    <a href="search.php?tag=Commercial+Vehicles" class="text-decoration-none">
                            <span class="badge bg-light text-dark border px-3 py-2 tag-link">Commercial Vehicles</span>
                        </a>
                                    <a href="search.php?tag=Mitsubishi+Fuso+Truck+and+Bus+Corporation" class="text-decoration-none">
                            <span class="badge bg-light text-dark border px-3 py-2 tag-link">Mitsubishi Fuso Truck and Bus Corporation</span>
                        </a>
                                    <a href="search.php?tag=Al+Habtoor+Motors" class="text-decoration-none">
                            <span class="badge bg-light text-dark border px-3 py-2 tag-link">Al Habtoor Motors</span>
                        </a>
                                    <a href="search.php?tag=UAE" class="text-decoration-none">
                            <span class="badge bg-light text-dark border px-3 py-2 tag-link">UAE</span>
                        </a>
                    </div>
    </header>

    <!-- 2. IMAGE LOGIC -->
    
    <!--Found Images: 2 
    Gallery Data: mitsubishi-fuso-ecanter-electric-truck-uae-1768928997-0.png,mitsubishi-fuso-ecanter-electric-truck-uae-1768928997-1.png 
    Main Image: mitsubishi-fuso-ecanter-electric-truck-uae-1768928997-0.png -->
    
            <div class="featured-image-container shadow-sm border rounded-4 overflow-hidden mb-5">
            
                            <!-- A. CAROUSEL (For Multiple Real Images) -->
                <div id="newsGalleryCarousel" class="carousel slide carousel-dark w-100 h-100" data-bs-ride="carousel">
                    <div class="carousel-inner h-100">
                                                    <div class="carousel-item h-100 active">
                                <img src="image/mitsubishi-fuso-ecanter-electric-truck-uae-1768928997-0.png" class="featured-image d-block w-100" style="height: 500px; object-fit: contain;">
                            </div>
                                                    <div class="carousel-item h-100 ">
                                <img src="image/mitsubishi-fuso-ecanter-electric-truck-uae-1768928997-1.png" class="featured-image d-block w-100" style="height: 500px; object-fit: contain;">
                            </div>
                                            </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#newsGalleryCarousel" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button>
                    <button class="carousel-control-next" type="button" data-bs-target="#newsGalleryCarousel" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button>
                </div>
    
                    </div>
    
    <!-- 3. ARTICLE CONTENT -->
    <div class="article-body ">
        
        <!-- Summary -->
        <div class="summary-card">
            <div class="summary-title"><i class="fas fa-bolt text-warning me-2"></i> Quick Takeaways</div>
            <ul class="summary-list list-unstyled m-0">
                <li><i class='fas fa-check text-success me-2 small'></i>Mitsubishi Fuso eCanter electric truck strengthens zero-emission commercial mobility in the UAE.</li><li><i class='fas fa-check text-success me-2 small'></i>The launch expands electric options for urban logistics and last-mile delivery operators.</li>            </ul>
        </div>

        <!-- Full Text -->
        <div class="content-text">
            On January 19, Mitsubishi Fuso Truck and Bus Corporation introduced the Mitsubishi Fuso eCanter electric truck in the UAE. The launch event was held in Dubai in collaboration with Al Habtoor Motors, the brand’s official distributor in the country, marking a key step in expanding electric commercial vehicle adoption in the region.<br />
<strong>Mitsubishi Fuso eCanter Electric Truck for Urban Operations</strong><br />
Built on FUSO’s established light-duty platform, the Mitsubishi Fuso eCanter electric truck is engineered for smooth driving, easy maneuverability in dense city traffic, and a comfortable experience for daily commercial use. Its design focuses on practicality and reliability for operators managing frequent urban routes.<br />
<strong>Safety, Efficiency, and Zero Emissions</strong><br />
The truck produces no local emissions and operates quietly, making it well suited for city logistics, municipal operations, and last-mile delivery. It is equipped with advanced safety and driver-assistance systems while offering multiple battery and body configurations to meet diverse operational requirements and help reduce overall operating costs.        </div>

        <!-- Link Button -->
                    <div class="mt-5 mb-5">
                <div class="d-grid gap-2 col-md-8 mx-auto">
                    <a href="https://www.mitsubishi-fuso.com/en/news/" target="_blank" class="btn btn-lg btn-outline-dark rounded-pill py-3 fw-bold shadow-sm">
                        <i class="fas fa-external-link-alt me-2 text-danger"></i>
                        Company Press Release                    </a>
                    <p class="text-center text-muted small mt-1">
                        <i class="fas fa-info-circle me-1"></i> Click above to visit the official source.
                    </p>
                </div>
            </div>
        
        <!-- Share -->
        <div class="d-flex justify-content-between align-items-center mt-5 pt-4 border-top">
            <div>
                <span class="fw-bold small me-2 text-uppercase">Share:</span>
            </div>
            <div>
                <button class="btn btn-outline-dark rounded-circle me-1" style="width:40px; height:40px;"><i class="fab fa-twitter"></i></button>
                <button class="btn btn-outline-dark rounded-circle me-1" style="width:40px; height:40px;"><i class="fab fa-facebook-f"></i></button>
                <button class="btn btn-outline-dark rounded-circle" style="width:40px; height:40px;"><i class="fas fa-share-alt"></i></button>
            </div>
        </div>
    </div> <!-- Close Article Body -->

    <!-- 4. REVIEWS -->
    <div class="review-wrapper">
        <div class="d-flex justify-content-between align-items-center mb-5">
            <div>
                <h3 class="fw-bold mb-1">Discussion</h3>
                <p class="text-muted mb-0">Join the conversation.</p>
            </div>
            <button class="btn-action" data-bs-toggle="modal" data-bs-target="#reviewModal">
                <i class="fas fa-comment-alt me-2"></i> Add Comment
            </button>
        </div>

        <div class="review-list">
                            <div class="review-bubble">
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded-circle bg-dark text-white d-flex align-items-center justify-content-center fw-bold me-3" 
                             style="width: 45px; height: 45px; font-size: 1rem;">
                            D                        </div>
                        <div>
                            <h6 class="fw-bold mb-0 text-dark">DavidJouby</h6>
                            <small class="text-muted" style="font-size: 0.8rem;">
                                March 26, 2026                            </small>
                        </div>
                    </div>
                    <p class="mb-0 text-secondary" style="font-size: 1.1rem; line-height: 1.6;">
                        Good morning! globalautoinsight.com, 
I recently found globalautoinsight.com online. 
We help companies reach new partners through website contact pages. 
This approach helps companies find partners and customers. 
  
  
You can try our service without paying anything. 
 
Thanks for taking a moment to read this. 
Contact us. 
Telegram - https://t.me/FeedbackFormEU 
WhatsApp - +375259112693 
WhatsApp  https://wa.me/+375259112693                    </p>
                </div>
                            <div class="review-bubble">
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded-circle bg-dark text-white d-flex align-items-center justify-content-center fw-bold me-3" 
                             style="width: 45px; height: 45px; font-size: 1rem;">
                            A                        </div>
                        <div>
                            <h6 class="fw-bold mb-0 text-dark">Andrewtisse</h6>
                            <small class="text-muted" style="font-size: 0.8rem;">
                                February 20, 2026                            </small>
                        </div>
                    </div>
                    <p class="mb-0 text-secondary" style="font-size: 1.1rem; line-height: 1.6;">
                        Howdy-doody! globalautoinsight.com 
 
Did you know that it is possible to send messages completely lawfully? 
When such proposals are submitted, no personal information is utilized, and messages are routed to forms specifically configured to receive messages and appeals securely. Messages through Feedback Forms are highly unlikely to be labeled as spam, since they are deemed important. 
Trу out our service without paying a dіme! 
We can transmit a maximum of 50,000 messages for you. 
 
The cost of sending one million messages is $59. 
 
This offer is automatically generated. 
 
Contact us. 
Telegram - https://t.me/FeedbackFormEU 
WhatsApp - +375259112693 
WhatsApp  https://wa.me/+375259112693 
We only use chat for communication.                    </p>
                </div>
                            <div class="review-bubble">
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded-circle bg-dark text-white d-flex align-items-center justify-content-center fw-bold me-3" 
                             style="width: 45px; height: 45px; font-size: 1rem;">
                            D                        </div>
                        <div>
                            <h6 class="fw-bold mb-0 text-dark">Davidsok</h6>
                            <small class="text-muted" style="font-size: 0.8rem;">
                                February 14, 2026                            </small>
                        </div>
                    </div>
                    <p class="mb-0 text-secondary" style="font-size: 1.1rem; line-height: 1.6;">
                        Good day! globalautoinsight.com 
 
Did you know that it is possible to send messages in a completely legitimate way? 
When such commercial offers are sent, no personal data is used and messages are sent to forms specifically designed to receive messages and appeals efficiently. Messages that are sent with the help of Feedback Forms are not viewed as spam since they are seen as important. 
Try our service out – it’s free of charge! 
We can send up to 50,000 messages on your behalf. 
 
The cost of sending one million messages is $59. 
 
This message was automatically generated. 
 
Contact us. 
Telegram - https://t.me/FeedbackFormEU 
Skype  live:contactform_18 
WhatsApp - +375259112693 
WhatsApp  https://wa.me/+375259112693 
We only use chat for communication.                    </p>
                </div>
                    </div>
    </div>

</div> <!-- End Main Wrapper -->

<!-- ================= MODAL ================= -->
<div class="modal fade" id="reviewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 12px;">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold ms-2 mt-2">Join the Discussion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST">
                <div class="modal-body p-4">
                    <input type="hidden" name="news_id" value="175">
                    <div class="form-floating mb-3">
                        <input type="text" name="reviewer_name" class="form-control rounded-3" id="floatingInput" placeholder="Name" required>
                        <label for="floatingInput">Your Name</label>
                    </div>
                    <div class="form-floating">
                        <textarea name="review_message" class="form-control rounded-3" placeholder="Comment" id="floatingTextarea" style="height: 120px" required></textarea>
                        <label for="floatingTextarea">What are your thoughts?</label>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0 pe-4 pb-4">
                    <button type="button" class="btn btn-link text-muted text-decoration-none" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" name="submit_review" class="btn btn-dark rounded-pill px-4 fw-bold">Post Comment</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- 2. THEN Include Footer -->
<!-- Footer -->
<footer class="mt-5 bg-dark">
    <div class="container pb-5 pt-5">
        <div class="row">
            <div class="col-md-4">
                <h3 class="fw-bold text-white">GLOBAL AUTO</h3>
                <p class="text-secondary">We bring you the latest automotive news, reviews, and insights from around the globe.</p>
            </div>
            <div class="col-md-4">
                <h5 class="text-white">Quick Links</h5>
                <a href="index.php" class="text-secondary text-decoration-none d-block mb-2">Home</a>
                <a href="admin_login.php" class="text-secondary text-decoration-none d-block mb-2">Admin Login</a>
                <a href="contact.php" class="text-secondary text-decoration-none d-block">Contact Us</a>
            </div>
            <div class="col-md-4">
                <h5 class="text-white">Newsletter</h5>
                <div class="input-group mt-3">
                    <input type="email" class="form-control" placeholder="Email Address">
                    <button class="btn btn-danger">Subscribe</button>
                </div>
            </div>
        </div>
        <hr class="mt-4 border-secondary">
        <p class="text-center mb-0 text-secondary">&copy; 2026 Global Auto Insight. All rights reserved.</p>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Optional: Allow pages to inject specific JS scripts -->


<script>
    // Scroll Progress
    window.onscroll = function() {
        // Safety Check: Ensure progress bar exists before running logic
        var bar = document.getElementById("progressBar");
        if(bar){
            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            var scrolled = (winScroll / height) * 100;
            bar.style.width = scrolled + "%";
        }
    };

    // Force Carousel Autoplay
    // NOTICE: Switched single quotes to double quotes below to fix PHP error
    document.addEventListener("DOMContentLoaded", function () {
        var myCarousel = document.querySelector("#newsGalleryCarousel");
        if(myCarousel) {
            var carousel = new bootstrap.Carousel(myCarousel, {
                interval: 3000, 
                ride: "carousel",
                wrap: true
            });
        }
    });
</script>

</body>
</html>