---
layout: page
title: "Feedback & Suggestions"
description: "Share your feedback to help us improve our veterans claims assistance platform. Your input helps us serve veterans better."
---

<div class="feedback-container">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="feedback-intro text-center mb-5">
                    <h1 class="page-title">We Value Your Feedback</h1>
                    <p class="lead">Your experience matters to us. Help us improve our platform to better serve veterans like you.</p>
                </div>

                <!-- Feedback Type Selector -->
                <div class="feedback-types mb-4">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="feedback-type-card active" data-type="general" onclick="selectFeedbackType('general')">
                                <i class="fas fa-comments"></i>
                                <h5>General Feedback</h5>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="feedback-type-card" data-type="bug" onclick="selectFeedbackType('bug')">
                                <i class="fas fa-bug"></i>
                                <h5>Report a Bug</h5>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="feedback-type-card" data-type="feature" onclick="selectFeedbackType('feature')">
                                <i class="fas fa-lightbulb"></i>
                                <h5>Feature Request</h5>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Main Feedback Form -->
                <div class="feedback-form-section">
                    <div class="card">
                        <div class="card-header">
                            <h2 class="mb-0">
                                <span id="formTitle">Share Your General Feedback</span>
                            </h2>
                        </div>
                        <div class="card-body">
                            <form id="feedbackForm" class="feedback-form">
                                <!-- User Information -->
                                <div class="row g-3 mb-4">
                                    <div class="col-md-6">
                                        <label for="name" class="form-label">Name (Optional)</label>
                                        <input type="text" class="form-control" id="name" name="name">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="email" class="form-label">Email Address</label>
                                        <input type="email" class="form-control" id="email" name="email" required>
                                        <div class="form-text">We'll only use this to follow up if needed</div>
                                    </div>
                                </div>

                                <!-- Feedback Type Specific Fields -->
                                <div id="generalFields" class="feedback-section">
                                    <div class="row g-3 mb-4">
                                        <div class="col-md-6">
                                            <label for="userType" class="form-label">I am a...</label>
                                            <select class="form-select" id="userType" name="userType">
                                                <option value="">Select your status</option>
                                                <option value="veteran">Veteran</option>
                                                <option value="active-duty">Active Duty Service Member</option>
                                                <option value="family">Family Member/Caregiver</option>
                                                <option value="advocate">Veterans Advocate</option>
                                                <option value="other">Other</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="overallRating" class="form-label">Overall Experience</label>
                                            <div class="rating-stars" id="overallRating">
                                                <span class="star" data-rating="1">★</span>
                                                <span class="star" data-rating="2">★</span>
                                                <span class="star" data-rating="3">★</span>
                                                <span class="star" data-rating="4">★</span>
                                                <span class="star" data-rating="5">★</span>
                                            </div>
                                            <input type="hidden" id="ratingValue" name="rating" value="">
                                        </div>
                                    </div>
                                </div>

                                <div id="bugFields" class="feedback-section" style="display: none;">
                                    <div class="row g-3 mb-4">
                                        <div class="col-md-6">
                                            <label for="bugPage" class="form-label">Where did this occur?</label>
                                            <select class="form-select" id="bugPage" name="bugPage">
                                                <option value="">Select page/section</option>
                                                <option value="dashboard">Dashboard</option>
                                                <option value="claim-form">Claim Form</option>
                                                <option value="document-center">Document Center</option>
                                                <option value="claim-tracker">Claim Tracker</option>
                                                <option value="profile">Profile</option>
                                                <option value="other">Other</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="bugSeverity" class="form-label">How severe is this issue?</label>
                                            <select class="form-select" id="bugSeverity" name="bugSeverity">
                                                <option value="">Select severity</option>
                                                <option value="low">Low - Minor inconvenience</option>
                                                <option value="medium">Medium - Affects functionality</option>
                                                <option value="high">High - Prevents me from completing tasks</option>
                                                <option value="critical">Critical - Site unusable</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div id="featureFields" class="feedback-section" style="display: none;">
                                    <div class="row g-3 mb-4">
                                        <div class="col-md-6">
                                            <label for="featureCategory" class="form-label">Feature Category</label>
                                            <select class="form-select" id="featureCategory" name="featureCategory">
                                                <option value="">Select category</option>
                                                <option value="claim-process">Claim Process</option>
                                                <option value="documents">Document Management</option>
                                                <option value="tracking">Claim Tracking</option>
                                                <option value="communication">Communication</option>
                                                <option value="accessibility">Accessibility</option>
                                                <option value="mobile">Mobile Experience</option>
                                                <option value="other">Other</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="featurePriority" class="form-label">How important is this to you?</label>
                                            <select class="form-select" id="featurePriority" name="featurePriority">
                                                <option value="">Select priority</option>
                                                <option value="nice-to-have">Nice to have</option>
                                                <option value="helpful">Would be helpful</option>
                                                <option value="important">Important</option>
                                                <option value="essential">Essential</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Common Fields -->
                                <div class="mb-4">
                                    <label for="subject" class="form-label">Subject</label>
                                    <input type="text" class="form-control" id="subject" name="subject" required>
                                </div>

                                <div class="mb-4">
                                    <label for="description" class="form-label">
                                        <span id="descriptionLabel">Tell us about your experience</span>
                                    </label>
                                    <textarea class="form-control" id="description" name="description" rows="6" required placeholder="Please provide as much detail as possible..."></textarea>
                                </div>

                                <!-- Steps to Reproduce (Bug Reports Only) -->
                                <div id="stepsSection" class="mb-4" style="display: none;">
                                    <label for="steps" class="form-label">Steps to Reproduce (if applicable)</label>
                                    <textarea class="form-control" id="steps" name="steps" rows="4" placeholder="1. Go to...&#10;2. Click on...&#10;3. Expected vs actual result..."></textarea>
                                </div>

                                <!-- Browser/Device Info (Bug Reports Only) -->
                                <div id="browserSection" class="mb-4" style="display: none;">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label for="browser" class="form-label">Browser & Version</label>
                                            <input type="text" class="form-control" id="browser" name="browser" placeholder="e.g., Chrome 91.0">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="device" class="form-label">Device/OS</label>
                                            <input type="text" class="form-control" id="device" name="device" placeholder="e.g., Windows 10, iPhone 12">
                                        </div>
                                    </div>
                                </div>

                                <!-- Follow-up Permission -->
                                <div class="mb-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="followUp" name="followUp" checked>
                                        <label class="form-check-label" for="followUp">
                                            It's okay to contact me about this feedback
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="updates" name="updates">
                                        <label class="form-check-label" for="updates">
                                            Send me updates about new features and improvements
                                        </label>
                                    </div>
                                </div>

                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="fas fa-paper-plane"></i> Submit Feedback
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Recent Improvements -->
                <div class="recent-improvements mt-5">
                    <h2 class="section-title">Recent Improvements Based on Your Feedback</h2>
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="improvement-card">
                                <div class="improvement-icon">
                                    <i class="fas fa-mobile-alt"></i>
                                </div>
                                <h4>Mobile Optimization</h4>
                                <p>Improved mobile experience based on user requests for better smartphone access.</p>
                                <span class="implementation-date">Implemented: March 2025</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="improvement-card">
                                <div class="improvement-icon">
                                    <i class="fas fa-upload"></i>
                                </div>
                                <h4>Faster File Uploads</h4>
                                <p>Enhanced document upload speed and reliability after user reports of slow uploads.</p>
                                <span class="implementation-date">Implemented: February 2025</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="improvement-card">
                                <div class="improvement-icon">
                                    <i class="fas fa-bell"></i>
                                </div>
                                <h4>Better Notifications</h4>
                                <p>Added email and SMS notifications for claim status updates per user feedback.</p>
                                <span class="implementation-date">Implemented: January 2025</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="improvement-card">
                                <div class="improvement-icon">
                                    <i class="fas fa-search"></i>
                                </div>
                                <h4>Enhanced Search</h4>
                                <p>Improved help and resource search functionality based on user suggestions.</p>
                                <span class="implementation-date">Implemented: December 2024</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Feedback type selection
function selectFeedbackType(type) {
    // Update active card
    document.querySelectorAll('.feedback-type-card').forEach(card => {
        card.classList.remove('active');
    });
    document.querySelector(`[data-type="${type}"]`).classList.add('active');
    
    // Hide all specific sections
    document.querySelectorAll('.feedback-section').forEach(section => {
        section.style.display = 'none';
    });
    
    // Update form title and show relevant sections
    const formTitle = document.getElementById('formTitle');
    const descriptionLabel = document.getElementById('descriptionLabel');
    const stepsSection = document.getElementById('stepsSection');
    const browserSection = document.getElementById('browserSection');
    
    switch(type) {
        case 'general':
            formTitle.textContent = 'Share Your General Feedback';
            descriptionLabel.textContent = 'Tell us about your experience';
            document.getElementById('generalFields').style.display = 'block';
            break;
        case 'bug':
            formTitle.textContent = 'Report a Bug';
            descriptionLabel.textContent = 'Describe the problem you encountered';
            document.getElementById('bugFields').style.display = 'block';
            stepsSection.style.display = 'block';
            browserSection.style.display = 'block';
            break;
        case 'feature':
            formTitle.textContent = 'Request a Feature';
            descriptionLabel.textContent = 'Describe the feature you would like to see';
            document.getElementById('featureFields').style.display = 'block';
            break;
    }
}

// Star rating functionality
document.addEventListener('DOMContentLoaded', function() {
    const stars = document.querySelectorAll('.star');
    const ratingInput = document.getElementById('ratingValue');
    
    stars.forEach(star => {
        star.addEventListener('click', function() {
            const rating = this.dataset.rating;
            ratingInput.value = rating;
            
            stars.forEach((s, index) => {
                if (index < rating) {
                    s.classList.add('active');
                } else {
                    s.classList.remove('active');
                }
            });
        });
        
        star.addEventListener('mouseover', function() {
            const rating = this.dataset.rating;
            stars.forEach((s, index) => {
                if (index < rating) {
                    s.classList.add('hover');
                } else {
                    s.classList.remove('hover');
                }
            });
        });
    });
    
    document.getElementById('overallRating').addEventListener('mouseleave', function() {
        stars.forEach(s => s.classList.remove('hover'));
    });
    
    // Auto-detect browser info for bug reports
    const browser = navigator.userAgent;
    const browserField = document.getElementById('browser');
    const deviceField = document.getElementById('device');
    
    if (browserField) {
        // Simple browser detection
        let browserName = 'Unknown';
        if (browser.includes('Chrome')) browserName = 'Chrome';
        else if (browser.includes('Firefox')) browserName = 'Firefox';
        else if (browser.includes('Safari')) browserName = 'Safari';
        else if (browser.includes('Edge')) browserName = 'Edge';
        
        browserField.placeholder = `e.g., ${browserName}`;
        deviceField.placeholder = `e.g., ${navigator.platform}`;
    }
});

// Form submission
document.getElementById('feedbackForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    
    // Show loading state
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Submitting...';
    submitBtn.disabled = true;
    
    // Simulate form submission
    setTimeout(() => {
        // Show success message
        const successAlert = document.createElement('div');
        successAlert.className = 'alert alert-success mt-3';
        successAlert.innerHTML = `
            <i class="fas fa-check-circle"></i>
            <strong>Thank you for your feedback!</strong> 
            We've received your submission and will review it carefully. 
            If you requested follow-up, we'll be in touch soon.
        `;
        
        this.parentNode.insertBefore(successAlert, this.nextSibling);
        
        // Reset form
        this.reset();
        document.querySelectorAll('.star').forEach(s => s.classList.remove('active'));
        document.getElementById('ratingValue').value = '';
        
        // Reset to general feedback
        selectFeedbackType('general');
        
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
        
        // Remove success message after 5 seconds
        setTimeout(() => {
            successAlert.remove();
        }, 5000);
        
        // Scroll to top
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }, 2000);
});
</script>

<style>
.feedback-container {
    padding: 2rem 0;
}

.feedback-type-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
}

.feedback-type-card:hover,
.feedback-type-card.active {
    border-color: #38A169;
    background: #F0FFF4;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.feedback-type-card i {
    font-size: 2rem;
    color: #38A169;
    margin-bottom: 1rem;
}

.feedback-type-card h5 {
    color: #2D3748;
    margin: 0;
}

.form-label {
    font-weight: 600;
    color: #2D3748;
}

.rating-stars {
    display: flex;
    gap: 0.25rem;
}

.star {
    font-size: 1.5rem;
    color: #e9ecef;
    cursor: pointer;
    transition: color 0.2s ease;
}

.star:hover,
.star.hover {
    color: #FFD700;
}

.star.active {
    color: #FFD700;
}

.section-title {
    color: #2D3748;
    border-bottom: 2px solid #38A169;
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
}

.improvement-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

.improvement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.improvement-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #38A169, #2F855A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.improvement-icon i {
    color: white;
    font-size: 1.2rem;
}

.improvement-card h4 {
    color: #2D3748;
    margin-bottom: 1rem;
}

.implementation-date {
    color: #38A169;
    font-weight: 600;
    font-size: 0.9rem;
}

.form-control:focus,
.form-select:focus {
    border-color: #38A169;
    box-shadow: 0 0 0 0.2rem rgba(56, 161, 105, 0.25);
}

@media (max-width: 768px) {
    .feedback-container {
        padding: 1rem 0;
    }
    
    .feedback-type-card {
        margin-bottom: 1rem;
    }
    
    .rating-stars {
        justify-content: center;
    }
    
    .star {
        font-size: 1.2rem;
    }
}
</style>