// Mock data - In a real app, this would come from an API
const mockProjects = [
    {
        id: 1,
        name: "E-Commerce Platform",
        description: "A fully responsive e-commerce platform with payment gateway integration and inventory management.",
        image: "http://static.photos/technology/640x360/1"
    },
    {
        id: 2,
        name: "Healthcare App",
        description: "Mobile application for healthcare providers to manage patient records and appointments.",
        image: "http://static.photos/medical/640x360/2"
    },
    {
        id: 3,
        name: "Corporate Website",
        description: "Modern corporate website with CMS integration and SEO optimization.",
        image: "http://static.photos/office/640x360/3"
    }
];

const mockClients = [
    {
        id: 1,
        name: "Sarah Johnson",
        designation: "CEO, TechCorp",
        description: "Working with this team was a game-changer for our business. Their attention to detail is unmatched.",
        image: "http://static.photos/people/200x200/1"
    },
    {
        id: 2,
        name: "Michael Chen",
        designation: "Marketing Director",
        description: "They delivered our project on time and exceeded our expectations. Highly recommended!",
        image: "http://static.photos/people/200x200/2"
    },
    {
        id: 3,
        name: "Emma Rodriguez",
        designation: "Founder & CEO",
        description: "The team was professional, creative, and delivered exceptional results. Will work with them again.",
        image: "http://static.photos/people/200x200/3"
    }
];

// Load projects into the DOM
function loadProjects() {
    const projectsContainer = document.getElementById('projects-container');
    
    mockProjects.forEach(project => {
        const projectCard = document.createElement('div');
        projectCard.className = 'project-card bg-white rounded-xl overflow-hidden shadow-md';
        projectCard.innerHTML = `
            <img src="${project.image}" alt="${project.name}" class="w-full h-48 object-cover">
            <div class="p-6">
                <h3 class="text-xl font-bold text-gray-800 mb-2">${project.name}</h3>
                <p class="text-gray-600 mb-4">${project.description}</p>
                <button class="text-primary font-medium hover:text-primary-600 transition duration-300">
                    Read More <i data-feather="arrow-right" class="inline"></i>
                </button>
            </div>
        `;
        projectsContainer.appendChild(projectCard);
    });
    
    feather.replace();
}

// Load clients into the DOM
function loadClients() {
    const clientsContainer = document.getElementById('clients-container');
    
    mockClients.forEach(client => {
        const clientCard = document.createElement('div');
        clientCard.className = 'client-card bg-white rounded-xl overflow-hidden shadow-md p-6';
        clientCard.innerHTML = `
            <div class="flex items-center mb-4">
                <img src="${client.image}" alt="${client.name}" class="w-16 h-16 rounded-full object-cover mr-4">
                <div>
                    <h3 class="font-bold text-gray-800">${client.name}</h3>
                    <p class="text-sm text-secondary">${client.designation}</p>
                </div>
            </div>
            <p class="text-gray-600">"${client.description}"</p>
        `;
        clientsContainer.appendChild(clientCard);
    });
}

// Handle contact form submission
function handleContactSubmit(e) {
    e.preventDefault();
    const formData = new FormData();
    formData.append('name', e.target.name.value);
    formData.append('email', e.target.email.value);
    formData.append('phone', e.target.phone.value);
    formData.append('city', e.target.city.value);
    // Add attachments if any with proper MIME types
    const attachments = e.target.attachments.files;
    for (let i = 0; i < attachments.length; i++) {
        const file = attachments[i];
        formData.append(`attachments[${i}]`, file, file.name);
        formData.append(`attachments[${i}].type`, file.type);
        formData.append(`attachments[${i}].size`, file.size);
    }
// In a real app, you would send this to your backend API
    console.log('Form submitted:', formData);
    
    // Show success message
    alert('Thank you for your message! We will get back to you soon.');
    e.target.reset();
}

// Handle newsletter subscription
function handleNewsletterSubmit(e) {
    e.preventDefault();
    
    const email = e.target.querySelector('#newsletter-email').value;
    
    // In a real app, you would send this to your backend API
    console.log('Newsletter subscription:', email);
    
    // Show success message
    alert('Thank you for subscribing to our newsletter!');
    e.target.reset();
}

// Admin panel functions would be in a separate admin.js file