document.getElementById('profileForm').addEventListener('submit', function(event) {
    event.preventDefault();

    // Get form values
    const name = document.getElementById('name').value;
    const profession = document.getElementById('profession').value;
    const hourlyRate = document.getElementById('hourlyRate').value;
    const bio = document.getElementById('bio').value;

    // Create profile card
    const profileCard = document.createElement('div');
    profileCard.classList.add('profile-card');
    profileCard.innerHTML = `
        <h3>${name}</h3>
        <p><strong>Profession:</strong> ${profession}</p>
        <p><strong>Hourly Rate:</strong> <span class="rate">$${hourlyRate}/hr</span></p>
        <p>${bio}</p>
    `;

    // Append to profiles list
    document.getElementById('profileCards').appendChild(profileCard);

    // Clear form
    this.reset();
});

// Optional: Add some default profiles for demonstration
const defaultProfiles = [
    {
        name: "Jane Doe",
        profession: "Developer",
        hourlyRate: 50,
        bio: "Experienced web developer with a passion for coding."
    },
    {
        name: "John Smith",
        profession: "Designer",
        hourlyRate: 40,
        bio: "Creative UI/UX designer specializing in modern layouts."
    }
];

// Load default profiles on page load
window.onload = function() {
    defaultProfiles.forEach(profile => {
        const profileCard = document.createElement('div');
        profileCard.classList.add('profile-card');
        profileCard.innerHTML = `
            <h3>${profile.name}</h3>
            <p><strong>Profession:</strong> ${profile.profession}</p>
            <p><strong>Hourly Rate:</strong> <span class="rate">$${profile.hourlyRate}/hr</span></p>
            <p>${profile.bio}</p>
        `;
        document.getElementById('profileCards').appendChild(profileCard);
    });
};