improve it and upgrade the whole page everything every piece of it and provide the me the complete full adjusted upgraded code 

code to upgrade :

<?php
declare(strict_types=1);
session_start();

// Set Content-Type to HTML initially
header('Content-Type: text/html; charset=utf-8');

// Content Security Policy to enhance security
header("Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com 'unsafe-inline'; style-src 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com 'unsafe-inline'; img-src 'self' https://source.unsplash.com data:; font-src 'self' https://cdnjs.cloudflare.com;");

// CSRF Token Generation
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

// Handle AJAX POST Request for Contact Form Submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'submit_contact') {
    header('Content-Type: application/json; charset=utf-8');

    // Initialize Response Array
    $response = ['success' => false, 'message' => 'Invalid request.'];

    // CSRF Token Validation
    if (!isset($_POST['csrf_token']) || !hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'])) {
        $response['message'] = 'Invalid CSRF token.';
        echo json_encode($response);
        exit;
    }

    // Input Validation and Sanitization
    $name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
    $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
    $message = filter_input(INPUT_POST, 'message', FILTER_SANITIZE_FULL_SPECIAL_CHARS);

    if (!$name || !$email || !$message) {
        $response['message'] = 'All fields are required and must be valid.';
        echo json_encode($response);
        exit;
    }

    // Function to send email using PHP's mail()
    function send_contact_email(string $name, string $email, string $message): bool {
        $to = 'info@skypulse.uk'; // Replace with your email
        $subject = 'New Contact Message from ' . $name;
        $body = "Name: {$name}\nEmail: {$email}\n\nMessage:\n{$message}";
        $headers = "From: {$email}\r\nReply-To: {$email}\r\n";
        $headers .= "Content-Type: text/plain; charset=UTF-8\r\n";

        // Attempt to send the email
        return mail($to, $subject, $body, $headers);
    }

    // Send Email
    if (send_contact_email($name, $email, $message)) {
        $response['success'] = true;
        $response['message'] = 'Your message has been sent successfully!';
    } else {
        $response['message'] = 'Failed to send your message. Please try again later.';
    }

    echo json_encode($response);
    exit;
}

// Page Content Variables
$title = "SkyPulse IT Services";
$description = "Leading the way in IT solutions with innovation and excellence. Offering remote support, hardware repair, system architecture, and more.";
$aboutContent = "At SkyPulse.uk, we transform the way businesses operate by providing cutting-edge IT solutions focused on customer satisfaction and tailored to meet your unique needs.";
$services = [
    ["icon" => "headset", "title" => "Remote Customer Support", "description" => "Efficient remote support via ticketing systems and professional emails for seamless customer assistance."],
    ["icon" => "tools", "title" => "Computer Hardware Repair & Upgrade", "description" => "Expert computer hardware repair and upgrades for optimal performance."],
    ["icon" => "diagnoses", "title" => "BSOD Diagnosis & Repair", "description" => "Specialized BSOD diagnosis and swift repair solutions for system stability."],
    ["icon" => "network-wired", "title" => "Windows System Architect", "description" => "Strategic architect optimizing Windows environments with Active Directory, RDP, and VPN."],
    ["icon" => "project-diagram", "title" => "Network Infrastructure Specialist", "description" => "Experienced in TCP/IP, LAN/WLAN, Wi-Fi, VPN, DHCP, Port Forwarding, Switching, and Routing."],
    ["icon" => "clone", "title" => "Digital Duplication", "description" => "Cloning and Resilient Backup & Recovery Mastery."]
];
$contactDescription = "Whether you have questions or need assistance, feel free to contact us. We're here to support your IT journey.";
?>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8'); ?></title>
    <meta name="description" content="<?= htmlspecialchars($description, ENT_QUOTES, 'UTF-8'); ?>">
    <meta name="keywords" content="IT Services, Remote Support, Hardware Repair, System Architecture, Network Specialist, Digital Duplication">
    <meta name="author" content="SkyPulse.uk">
    <meta name="csrf-token" content="<?= $_SESSION['csrf_token']; ?>">

    <!-- Bootstrap 5.3 CSS (Latest) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-..." crossorigin="anonymous">

    <!-- Font Awesome 6.4.0 (Latest) -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Roboto:wght@400;700&display=swap" rel="stylesheet">

    <!-- Custom Styles -->
    <style>
        :root {
            --primary-color: #1a73e8;
            --accent-color: #d1e3fd;
            --background-color-light: #ffffff;
            --background-color-dark: #121212;
            --text-color-light: #343a40;
            --text-color-dark: #e5e5e5;
            --card-bg-color-light: #f9f9f9;
            --card-bg-color-dark: #1e1e1e;

            --font-family: 'Roboto', sans-serif;
            --heading-font: 'Montserrat', sans-serif;
            --transition-speed: 0.3s;
        }

        [data-theme="light"] {
            --background-color: var(--background-color-light);
            --card-bg-color: var(--card-bg-color-light);
            --text-color: var(--text-color-light);
        }

        [data-theme="dark"] {
            --background-color: var(--background-color-dark);
            --card-bg-color: var(--card-bg-color-dark);
            --text-color: var(--text-color-dark);
        }

        body {
            font-family: var(--font-family);
            color: var(--text-color);
            background-color: var(--background-color);
            transition: background-color var(--transition-speed), color var(--transition-speed);
            padding-top: 80px;
        }

        .navbar {
            background: var(--background-color-dark) !important;
            backdrop-filter: blur(10px);
            transition: background var(--transition-speed);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .navbar-brand {
            font-family: var(--heading-font), sans-serif;
            font-weight: 600;
            font-size: 1.8rem;
            color: var(--primary-color);
            transition: color var(--transition-speed);
        }

        .navbar-brand:hover, .nav-link:hover {
            color: var(--accent-color) !important;
        }

        .jumbotron {
            position: relative;
            background-image: url('https://source.unsplash.com/1600x900/?technology,futuristic');
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--text-color);
            overflow: hidden;
            border-bottom: 5px solid var(--primary-color);
        }

        .jumbotron::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(18, 18, 18, 0.7);
            z-index: 1;
        }

        .jumbotron .container {
            position: relative;
            z-index: 2;
        }

        .jumbotron h1 {
            font-family: var(--heading-font), sans-serif;
            font-size: 3.5rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            animation: slideInDown 1s ease-out;
        }

        .jumbotron p {
            font-size: 1.25rem;
            margin-bottom: 30px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            animation: slideInUp 1s ease-out;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border: none;
            padding: 0.75rem 1.5rem;
            font-size: 1.1rem;
            border-radius: 50px;
            box-shadow: 0 8px 15px rgba(26, 115, 232, 0.4);
            font-family: var(--heading-font), sans-serif;
            transition: transform var(--transition-speed), box-shadow var(--transition-speed);
        }

        .btn-primary:hover {
            background-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 12px 20px rgba(26, 115, 232, 0.6);
        }

        .service-icon {
            font-size: 4rem;
            color: var(--primary-color);
            margin-bottom: 20px;
            transition: transform var(--transition-speed), color var(--transition-speed);
        }

        .service-icon:hover {
            transform: rotate(10deg) scale(1.1);
            color: var(--accent-color);
        }

        .card {
            background-color: var(--card-bg-color);
            border: none;
            border-radius: 15px;
            transition: transform var(--transition-speed), box-shadow var(--transition-speed);
        }

        .card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 15px 25px rgba(26, 115, 232, 0.5);
        }

        .card-title {
            color: var(--primary-color);
            font-family: var(--heading-font), sans-serif;
        }

        footer {
            background-color: var(--background-color-dark);
            padding: 30px 0;
            color: var(--text-color);
            text-align: center;
            transition: background-color var(--transition-speed);
        }

        .footer-links a {
            color: var(--text-color);
            text-decoration: none;
        }

        .footer-links a:hover {
            color: var(--primary-color);
            text-decoration: underline;
        }

        .modal {
            z-index: 1050;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.25);
        }

        .adsense-placeholder {
            border: 2px dashed #ccc;
            border-radius: 10px;
            background-color: #f8f9fa;
            color: #6c757d;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 90px;
            margin-top: 20px;
        }

        @keyframes slideInDown {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideInUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .benefits-section i {
            color: var(--primary-color);
            transition: color var(--transition-speed);
        }

        .benefits-section i:hover {
            color: var(--accent-color);
        }

        .benefits-section {
            padding: 60px 0;
        }
    </style>
</head>
<body>
    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top shadow-lg">
        <div class="container">
            <a class="navbar-brand" href="#"><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8'); ?></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" 
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav me-3">
                    <li class="nav-item"><a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#aboutModal">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#servicesModal">Services</a></li>
                    <li class="nav-item"><a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#contactModal">Contact</a></li>
                    <li class="nav-item"><a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#privacyModal">Privacy Policy</a></li>
                </ul>
                <!-- Theme Toggle Switch -->
                <div class="form-check form-switch text-nowrap">
                    <input class="form-check-input" type="checkbox" id="themeSwitch" aria-label="Toggle Light/Dark Mode">
                    <label class="form-check-label" for="themeSwitch">
                        <i class="fas fa-sun"></i>
                        <i class="fas fa-moon"></i>
                    </label>
                </div>
            </div>
        </div>
    </nav>

    <!-- Jumbotron Section with Parallax -->
    <section class="jumbotron text-center">
        <div class="container">
            <h1 class="display-4"><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8'); ?></h1>
            <p class="lead"><?= htmlspecialchars($description, ENT_QUOTES, 'UTF-8'); ?></p>
            <a href="#" class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#contactModal">Get Started</a>
        </div>
    </section>

    <!-- About Modal -->
    <div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content bg-dark text-white">
                <div class="modal-header">
                    <h5 class="modal-title" id="aboutModalLabel">About Us</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p><?= nl2br(htmlspecialchars($aboutContent, ENT_QUOTES, 'UTF-8')); ?></p>
                    <hr>
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <i class="fas fa-award fa-3x mb-3"></i>
                            <h5>Quality Services</h5>
                            <p>We ensure top-notch services tailored to your business needs.</p>
                        </div>
                        <div class="col-md-4 text-center">
                            <i class="fas fa-users fa-3x mb-3"></i>
                            <h5>Expert Team</h5>
                            <p>Our team consists of industry experts with years of experience.</p>
                        </div>
                        <div class="col-md-4 text-center">
                            <i class="fas fa-headset fa-3x mb-3"></i>
                            <h5>24/7 Support</h5>
                            <p>We provide round-the-clock support to assist you whenever you need.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Services Modal -->
    <div class="modal fade" id="servicesModal" tabindex="-1" aria-labelledby="servicesModalLabel" 
         aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content bg-dark text-white">
                <div class="modal-header">
                    <h5 class="modal-title" id="servicesModalLabel">Our Services</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <?php foreach ($services as $service): ?>
                                <div class="col-md-4 mb-4">
                                    <div class="text-center">
                                        <i class="fas fa-<?= htmlspecialchars($service["icon"], ENT_QUOTES, 'UTF-8'); ?> service-icon"></i>
                                        <h4 class="mt-3"><?= htmlspecialchars($service["title"], ENT_QUOTES, 'UTF-8'); ?></h4>
                                        <p><?= htmlspecialchars($service["description"], ENT_QUOTES, 'UTF-8'); ?></p>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        <!-- Google AdSense Placeholder Inside Modal -->
                        <div class="row mt-4">
                            <div class="col-12 text-center">
                                <!-- Replace the below div with your actual AdSense ad unit -->
                                <div class="adsense-placeholder">
                                    <span>Ad Space - Replace with Google AdSense Code</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         </div>
    </div>

    <!-- Contact Modal -->
    <div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" 
         aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content bg-dark text-white">
                <div class="modal-header">
                    <h5 class="modal-title" id="contactModalLabel">Get in Touch</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p><?= htmlspecialchars($contactDescription, ENT_QUOTES, 'UTF-8'); ?></p>
                    <form id="contactForm" method="post" novalidate>
                        <input type="hidden" name="action" value="submit_contact">
                        <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token']; ?>">
                        <div class="mb-3">
                            <label for="name" class="form-label">Name<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" 
                                   placeholder="Your Name" required>
                            <div class="invalid-feedback">
                                Please enter your name.
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email<span class="text-danger">*</span></label>
                            <input type="email" class="form-control" id="email" name="email" 
                                   placeholder="you@example.com" required>
                            <div class="invalid-feedback">
                                Please enter a valid email address.
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">Message<span class="text-danger">*</span></label>
                            <textarea class="form-control" id="message" name="message" 
                                      rows="5" placeholder="Your Message" required></textarea>
                            <div class="invalid-feedback">
                                Please enter your message.
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">Send Message</button>
                    </form>
                    <div id="formFeedback" class="mt-3"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Privacy Policy Modal -->
    <div class="modal fade" id="privacyModal" tabindex="-1" aria-labelledby="privacyModalLabel" 
         aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content bg-dark text-white">
                <div class="modal-header">
                    <h5 class="modal-title">Privacy Policy</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" 
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h6>Introduction</h6>
                    <p>At SkyPulse IT Services, we are committed to protecting your privacy. This Privacy Policy outlines how we collect, use, and safeguard your personal information.</p>
                    <h6>Information Collection</h6>
                    <p>We collect information that you provide to us directly, such as your name, email address, and message content when you contact us.</p>
                    <h6>Use of Information</h6>
                    <p>Your information is used solely to respond to your inquiries and improve our services. We do not sell or rent your personal information to third parties.</p>
                    <h6>Data Security</h6>
                    <p>We implement industry-standard security measures to protect your data from unauthorized access, alteration, or disclosure.</p>
                    <h6>Cookies</h6>
                    <p>Our website may use cookies to enhance your browsing experience. You can adjust your browser settings to refuse cookies if you prefer.</p>
                    <h6>Third-Party Services</h6>
                    <p>We may use third-party services, such as Google Analytics, to help us understand how visitors use our site. These services may collect information sent by your browser as part of your visits to our website.</p>
                    <h6>Advertising</h6>
                    <p>We use Google AdSense to display advertisements on our website. AdSense uses cookies to serve ads based on your prior visits to our site and other websites.</p>
                    <h6>Changes to This Policy</h6>
                    <p>We may update our Privacy Policy from time to time. Any changes will be posted on this page.</p>
                    <h6>Contact Us</h6>
                    <p>If you have any questions or concerns about this Privacy Policy, please contact us at <a href="mailto:info@skypulse.uk" class="text-primary">info@skypulse.uk</a>.</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Services Section -->
    <section class="py-5 bg-dark">
        <div class="container">
            <h2 class="text-center mb-4 text-primary">Our Services</h2>
            <div class="row">
                <?php foreach ($services as $service): ?>
                    <div class="col-md-4 mb-4">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <i class="fas fa-<?= htmlspecialchars($service["icon"], ENT_QUOTES, 'UTF-8'); ?> service-icon"></i>
                                <h5 class="card-title"><?= htmlspecialchars($service["title"], ENT_QUOTES, 'UTF-8'); ?></h5>
                                <p class="card-text"><?= htmlspecialchars($service["description"], ENT_QUOTES, 'UTF-8'); ?></p>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            <!-- Google AdSense Placeholder -->
            <div class="row mt-4">
                <div class="col-12 text-center">
                    <!-- Replace the below div with your actual AdSense ad unit -->
                    <div class="adsense-placeholder">
                        <span>Ad Space - Replace with Google AdSense Code</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Benefits Section -->
    <section class="py-5 bg-primary text-white benefits-section">
        <div class="container">
            <h2 class="text-center mb-4">Why Choose SkyPulse?</h2>
            <div class="row text-center">
                <div class="col-md-4 mb-4">
                    <i class="fas fa-shield-alt fa-3x mb-3"></i>
                    <h5>Security</h5>
                    <p>We prioritize the security of your systems with robust solutions and proactive monitoring.</p>
                </div>
                <div class="col-md-4 mb-4">
                    <i class="fas fa-cogs fa-3x mb-3"></i>
                    <h5>Customization</h5>
                    <p>Our services are tailored to meet the unique needs of your business.</p>
                </div>
                <div class="col-md-4 mb-4">
                    <i class="fas fa-heart fa-3x mb-3"></i>
                    <h5>Customer-Centric</h5>
                    <p>We focus on delivering exceptional customer service and support.</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="mb-3 footer-links">
                <a href="#" data-bs-toggle="modal" data-bs-target="#aboutModal">About</a> |
                <a href="#" data-bs-toggle="modal" data-bs-target="#servicesModal">Services</a> |
                <a href="#" data-bs-toggle="modal" data-bs-target="#contactModal">Contact</a> |
                <a href="#" data-bs-toggle="modal" data-bs-target="#privacyModal">Privacy Policy</a>
            </div>
            <p>&copy; <?= date("Y"); ?> SkyPulse.uk. All Rights Reserved.</p>
            <!-- Google AdSense Placeholder -->
            <div class="adsense-placeholder">
                <span>Ad Space - Replace with Google AdSense Code</span>
            </div>
        </div>
    </footer>
    
    <!-- Bootstrap 5.3 JS Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-..." crossorigin="anonymous"></script>
    
    <!-- Custom JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Theme Toggle Functionality
            const themeSwitch = document.getElementById('themeSwitch');
            const currentTheme = localStorage.getItem('theme') || 'dark';

            // Apply the saved theme or default
            document.documentElement.setAttribute('data-theme', currentTheme);

            // Set the toggle state based on the current theme
            themeSwitch.checked = currentTheme === 'light';

            // Event listener for theme toggle
            themeSwitch.addEventListener('change', () => {
                const theme = themeSwitch.checked ? 'light' : 'dark';
                document.documentElement.setAttribute('data-theme', theme);
                localStorage.setItem('theme', theme);
            });

            // Form Submission with Fetch API
            const contactForm = document.getElementById('contactForm');
            const formFeedback = document.getElementById('formFeedback');

            contactForm.addEventListener('submit', async (event) => {
                event.preventDefault();
                event.stopPropagation();

                if (!contactForm.checkValidity()) {
                    contactForm.classList.add('was-validated');
                    return;
                }

                // Prepare Form Data
                const formData = new FormData(contactForm);

                try {
                    const response = await fetch('', { // Submitting to the same page
                        method: 'POST',
                        body: formData,
                        headers: {
                            'Accept': 'application/json'
                        }
                    });

                    const result = await response.json();

                    if (response.ok && result.success) {
                        formFeedback.innerHTML = '<div class="alert alert-success">Your message has been sent successfully!</div>';
                        contactForm.reset();
                        contactForm.classList.remove('was-validated');
                    } else {
                        formFeedback.innerHTML = `<div class="alert alert-danger">${result.message || 'There was an error sending your message. Please try again later.'}</div>`;
                    }
                } catch (error) {
                    formFeedback.innerHTML = '<div class="alert alert-danger">There was an error processing your request. Please try again later.</div>';
                    console.error('Error:', error);
                }
            });

            // Remove feedback on input change
            ['input', 'textarea'].forEach(tag => {
                contactForm.querySelectorAll(tag).forEach(element => {
                    element.addEventListener('input', () => {
                        formFeedback.innerHTML = '';
                    });
                }); 
            });
        });
    </script>
</body>
</html>