// Sample project data - in a real app this would come from an API
const projects = [
    {
        id: 1,
        title: "E-Commerce Platform",
        description: "A full-featured online shopping experience with payment integration.",
        image: "http://static.photos/technology/640x360/1",
        tags: ["React", "Node.js", "MongoDB"],
        github: "#",
        demo: "#"
    },
    {
        id: 2,
        title: "Task Management App",
        description: "Productivity application for teams to manage projects and deadlines.",
        image: "http://static.photos/office/640x360/2",
        tags: ["Vue.js", "Firebase", "Tailwind"],
        github: "#",
        demo: "#"
    },
    {
        id: 3,
        title: "Weather Dashboard",
        description: "Real-time weather forecasting with interactive maps and alerts.",
        image: "http://static.photos/nature/640x360/3",
        tags: ["JavaScript", "API", "Chart.js"],
        github: "#",
        demo: "#"
    },
    {
        id: 4,
        title: "Fitness Tracker",
        description: "Mobile-first application for tracking workouts and nutrition.",
        image: "http://static.photos/people/640x360/4",
        tags: ["React Native", "Redux", "GraphQL"],
        github: "#",
        demo: "#"
    },
    {
        id: 5,
        title: "Portfolio Website",
        description: "Responsive portfolio showcasing design and development work.",
        image: "http://static.photos/workspace/640x360/5",
        tags: ["HTML", "CSS", "JavaScript"],
        github: "#",
        demo: "#"
    },
    {
        id: 6,
        title: "Recipe Finder",
        description: "Search and save recipes from around the world with dietary filters.",
        image: "http://static.photos/food/640x360/6",
        tags: ["Angular", "Express", "PostgreSQL"],
        github: "#",
        demo: "#"
    }
];

// Function to render projects
function renderProjects() {
    const container = document.getElementById('projects-container');
    
    projects.forEach((project, index) => {
        const projectCard = document.createElement('div');
        projectCard.className = 'project-card animate-fade-in';
        projectCard.style.animationDelay = `${index * 0.1}s`;
        
        projectCard.innerHTML = `
            <img src="${project.image}" alt="${project.title}" class="project-image">
            <div class="p-6">
                <h4 class="text-xl font-bold mb-2 project-title">${project.title}</h4>
                <p class="text-gray-600 mb-4">${project.description}</p>
                <div class="flex flex-wrap gap-2 mb-4">
                    ${project.tags.map(tag => `<span class="project-tag text-xs px-3 py-1 rounded-full">${tag}</span>`).join('')}
                </div>
                <div class="flex justify-between">
                    <a href="${project.github}" class="text-indigo-600 hover:text-indigo-800 flex items-center">
                        <i data-feather="github" class="mr-1"></i> Code
                    </a>
                    <a href="${project.demo}" class="text-indigo-600 hover:text-indigo-800 flex items-center">
                        <i data-feather="external-link" class="mr-1"></i> Demo
                    </a>
                </div>
            </div>
        `;
        
        container.appendChild(projectCard);
    });
    
    // Re-initialize Feather icons after adding new elements
    feather.replace();
}

// Initialize the page
document.addEventListener('DOMContentLoaded', () => {
    renderProjects();
    
    // Theme toggle functionality
    const themeToggle = document.createElement('button');
    themeToggle.className = 'fixed bottom-6 right-6 bg-indigo-600 text-white p-3 rounded-full shadow-lg hover:bg-indigo-700 transition';
    themeToggle.innerHTML = '<i data-feather="moon"></i>';
    themeToggle.addEventListener('click', toggleTheme);
    document.body.appendChild(themeToggle);
    
    // Initialize Feather icons
    feather.replace();
});

// Theme toggle function
function toggleTheme() {
    document.body.classList.toggle('dark-mode');
    const isDarkMode = document.body.classList.contains('dark-mode');
    
    // Update icon
    const themeToggle = document.querySelector('.fixed.bottom-6.right-6');
    themeToggle.innerHTML = isDarkMode ? 
        '<i data-feather="sun"></i>' : 
        '<i data-feather="moon"></i>';
    
    feather.replace();
}