import React, { useState, useEffect } from "react"; import { useFireproof } from "use-fireproof"; import { callAI } from "call-ai"; export default function App() { const { database, useDocument, useLiveQuery } = useFireproof("cv-builder-database"); // Active section tracking const [activeSection, setActiveSection] = useState("personal"); // Available CV templates const templates = [ { id: "modern", name: "Modern", primaryColor: "#70d6ff", accentColor: "#ff70a6" }, { id: "minimal", name: "Minimal", primaryColor: "#242424", accentColor: "#e9ff70" }, { id: "creative", name: "Creative", primaryColor: "#ff9770", accentColor: "#ffd670" }, { id: "corporate", name: "Corporate", primaryColor: "#4a6fa5", accentColor: "#166088" }, { id: "tech", name: "Tech Focus", primaryColor: "#3a506b", accentColor: "#5bc0be" } ]; // CV document with initial structure const { doc: cv, merge, save } = useDocument({ _id: "main-cv", template: "modern", // Default template personal: { fullName: "", email: "", phone: "", address: "", linkedin: "", github: "", portfolioUrl: "" }, summary: { text: "", tone: "professional" }, experience: [], projects: [], education: [], skills: [], certifications: [], languages: [], interests: [] }); // Current work experience entry being edited const [currentExperience, setCurrentExperience] = useState({ jobTitle: "", company: "", location: "", startDate: "", endDate: "", responsibilities: [""] }); // Current project being edited const [currentProject, setCurrentProject] = useState({ title: "", technologies: "", description: "", links: { github: "", live: "" } }); // Current education entry being edited const [currentEducation, setCurrentEducation] = useState({ degree: "", institution: "", year: "", description: "" }); // AI feature toggle const [aiEnabled, setAiEnabled] = useState(true); // Loading state for AI operations const [isGenerating, setIsGenerating] = useState(false); // Template selection modal state const [showTemplateModal, setShowTemplateModal] = useState(false); // Save CV automatically on change useEffect(() => { const timer = setTimeout(() => { save(); }, 1000); return () => clearTimeout(timer); }, [cv, save]); // Find current template const currentTemplate = templates.find(t => t.id === cv.template) || templates[0]; // Generate or enhance professional summary const generateSummary = async () => { if (!aiEnabled) return; setIsGenerating(true); try { const prompt = `Create a professional ${cv.summary.tone} summary for a developer with the following details: Name: ${cv.personal.fullName} Skills: ${cv.skills.join(", ")} Experience: ${cv.experience.map(exp => `${exp.jobTitle} at ${exp.company}`).join(", ")} Write a concise, first-person professional summary paragraph.`; const response = await callAI(prompt); merge({ summary: { ...cv.summary, text: response.trim() } }); } catch (error) { console.error("Error generating summary:", error); } finally { setIsGenerating(false); } }; // Suggest skills based on experience and projects const suggestSkills = async () => { if (!aiEnabled) return; setIsGenerating(true); try { const prompt = `Based on the following experience and projects, suggest a comprehensive list of technical skills this developer likely has: Experience: ${cv.experience.map(exp => `${exp.jobTitle} at ${exp.company}: ${exp.responsibilities.join(". ")}`).join("\n")} Projects: ${cv.projects.map(proj => `${proj.title}: ${proj.description} (Technologies: ${proj.technologies})`).join("\n")} Return only a list of skills separated by commas, without any additional text.`; const response = await callAI(prompt); const suggestedSkills = response.split(",").map(skill => skill.trim()); // Merge with existing skills, remove duplicates const uniqueSkills = [...new Set([...cv.skills, ...suggestedSkills])]; merge({ skills: uniqueSkills }); } catch (error) { console.error("Error suggesting skills:", error); } finally { setIsGenerating(false); } }; // Enhance experience bullet points const enhanceResponsibilities = async (index) => { if (!aiEnabled) return; setIsGenerating(true); try { const exp = cv.experience[index]; const prompt = `Improve the following bullet points for a ${exp.jobTitle} at ${exp.company}. Make them more impactful, specific, and achievement-oriented: ${exp.responsibilities.join("\n")} Return an improved version of each bullet point, one per line.`; const response = await callAI(prompt); const enhancedResponsibilities = response.split("\n").filter(r => r.trim().length > 0); const updatedExperience = [...cv.experience]; updatedExperience[index] = { ...updatedExperience[index], responsibilities: enhancedResponsibilities }; merge({ experience: updatedExperience }); } catch (error) { console.error("Error enhancing responsibilities:", error); } finally { setIsGenerating(false); } }; // Add a new work experience entry const addExperience = () => { if (!currentExperience.jobTitle || !currentExperience.company) return; const updatedExperience = [ ...cv.experience, { ...currentExperience, responsibilities: currentExperience.responsibilities.filter(r => r.trim()) } ]; merge({ experience: updatedExperience }); setCurrentExperience({ jobTitle: "", company: "", location: "", startDate: "", endDate: "", responsibilities: [""] }); }; // Add a new project entry const addProject = () => { if (!currentProject.title || !currentProject.description) return; const techArray = currentProject.technologies.split(",").map(tech => tech.trim()); const updatedProjects = [ ...cv.projects, { ...currentProject, technologies: techArray } ]; merge({ projects: updatedProjects }); setCurrentProject({ title: "", technologies: "", description: "", links: { github: "", live: "" } }); }; // Add a new education entry const addEducation = () => { if (!currentEducation.degree || !currentEducation.institution) return; const updatedEducation = [ ...cv.education, { ...currentEducation } ]; merge({ education: updatedEducation }); setCurrentEducation({ degree: "", institution: "", year: "", description: "" }); }; // Remove an item from an array field const removeItem = (field, index) => { const updated = [...cv[field]]; updated.splice(index, 1); merge({ [field]: updated }); }; // Update responsibility in current experience form const updateResponsibility = (index, value) => { const updated = [...currentExperience.responsibilities]; updated[index] = value; setCurrentExperience({ ...currentExperience, responsibilities: updated }); }; // Add new responsibility field in current experience form const addResponsibilityField = () => { setCurrentExperience({ ...currentExperience, responsibilities: [...currentExperience.responsibilities, ""] }); }; // Generate demo data for demonstration purposes const generateDemoData = async () => { setIsGenerating(true); try { const prompt = `Create a sample CV for a full-stack developer with React and Node.js experience. Return the data as structured JSON including: - personal (fullName, email, phone, address, linkedin, github, portfolioUrl) - summary (text in professional tone) - experience (array with 2 jobs, each with jobTitle, company, location, startDate, endDate, responsibilities array) - projects (array with 2 projects, each with title, technologies array, description, links object with github and live URLs) - education (array with degree, institution, year, description) - skills (array of strings) - certifications (array with title, issuer, year, description) - languages (array with language and level) - interests (array of strings)`; const response = await callAI(prompt, { schema: { properties: { personal: { type: "object", properties: { fullName: { type: "string" }, email: { type: "string" }, phone: { type: "string" }, address: { type: "string" }, linkedin: { type: "string" }, github: { type: "string" }, portfolioUrl: { type: "string" } } }, summary: { type: "object", properties: { text: { type: "string" }, tone: { type: "string" } } }, experience: { type: "array", items: { type: "object", properties: { jobTitle: { type: "string" }, company: { type: "string" }, location: { type: "string" }, startDate: { type: "string" }, endDate: { type: "string" }, responsibilities: { type: "array", items: { type: "string" } } } } }, projects: { type: "array", items: { type: "object", properties: { title: { type: "string" }, technologies: { type: "array", items: { type: "string" } }, description: { type: "string" }, links: { type: "object", properties: { github: { type: "string" }, live: { type: "string" } } } } } }, education: { type: "array", items: { type: "object", properties: { degree: { type: "string" }, institution: { type: "string" }, year: { type: "string" }, description: { type: "string" } } } }, skills: { type: "array", items: { type: "string" } }, certifications: { type: "array", items: { type: "object", properties: { title: { type: "string" }, issuer: { type: "string" }, year: { type: "string" }, description: { type: "string" } } } }, languages: { type: "array", items: { type: "object", properties: { language: { type: "string" }, level: { type: "string" } } } }, interests: { type: "array", items: { type: "string" } } } } }); const demoData = JSON.parse(response); merge(demoData); } catch (error) { console.error("Error generating demo data:", error); } finally { setIsGenerating(false); } }; // Export CV as PDF const exportToPDF = () => { // Create a new window for the printable version const printWindow = window.open('', '_blank'); // Generate CSS for print version based on selected template const printCSS = generateTemplatePrintCSS(cv.template); // Generate HTML content let content = ` ${cv.personal.fullName || 'CV'}

${cv.personal.fullName || 'Your Name'}

${cv.personal.email ? `${cv.personal.email}` : ''} ${cv.personal.email && cv.personal.phone ? ' | ' : ''} ${cv.personal.phone ? `${cv.personal.phone}` : ''}

${cv.personal.address ? `

${cv.personal.address}

` : ''}

${cv.personal.linkedin ? `LinkedIn` : ''} ${cv.personal.github ? `GitHub` : ''} ${cv.personal.portfolioUrl ? `Portfolio` : ''}

`; // Professional Summary if (cv.summary.text) { content += `

Professional Summary

${cv.summary.text}

`; } // Experience if (cv.experience && cv.experience.length > 0) { content += `

Experience

`; cv.experience.forEach(exp => { content += `

${exp.jobTitle} ${exp.startDate} - ${exp.endDate}

${exp.company}, ${exp.location}

${resp}

`; }); content += `

`; } // Projects if (cv.projects && cv.projects.length > 0) { content += `

Projects

`; cv.projects.forEach(project => { content += `

${project.title}

`; const techs = Array.isArray(project.technologies) ? project.technologies : project.technologies.split(',').map(tech => tech.trim()); techs.forEach(tech => { if (tech.trim()) { content += `${tech} `; } }); content += `

${project.description}

`; if (project.links.github || project.links.live) { content += `

`; if (project.links.github) { content += `GitHub `; } if (project.links.live) { content += `${project.links.github ? '| ' : ''}Live Demo`; } content += `

`; } content += `

`; }); content += `

`; } // Education if (cv.education && cv.education.length > 0) { content += `

Education

`; cv.education.forEach(edu => { content += `

${edu.degree} ${edu.year}

${edu.institution}

${edu.description ? `

${edu.description}

` : ''}

`; }); content += `

`; } // Skills if (cv.skills && cv.skills.length > 0) { content += `

Skills

`; cv.skills.forEach(skill => { content += `${skill}`; }); content += `

`; } // Certifications if (cv.certifications && cv.certifications.length > 0) { content += `

Certifications & Awards

`; cv.certifications.forEach(cert => { content += `

${cert.title} ${cert.year ? `${cert.year}` : ''}

${cert.issuer}

${cert.description ? `

${cert.description}

` : ''}

`; }); content += `

`; } // Languages if (cv.languages && cv.languages.length > 0) { content += `

Languages

`; cv.languages.forEach(lang => { content += `

${lang.language} (${lang.level})

`; }); content += `

`; } // Interests if (cv.interests && cv.interests.length > 0) { content += `

Interests

`; cv.interests.forEach(interest => { content += `${interest}`; }); content += `

`; } // Add print button and close content += `

`; // Write content to the new window printWindow.document.open(); printWindow.document.write(content); printWindow.document.close(); }; // Generate template-specific CSS const generateTemplatePrintCSS = (templateId) => { // Common styles const commonCSS = ` body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .cv-container { width: 100%; max-width: 800px; margin: 0 auto; padding: 40px; } h1, h2 { margin-top: 0; } ul { margin-top: 5px; padding-left: 20px; } li { margin-bottom: 3px; } .item { margin-bottom: 15px; } .item-header { display: flex; justify-content: space-between; } .skills-list, .interests-list { display: flex; flex-wrap: wrap; gap: 8px; } .languages-grid { display: flex; flex-wrap: wrap; gap: 15px; } .project-links { margin-top: 5px; font-size: 14px; } @media print { body { padding: 0; } .no-print { display: none; } } `; // Template-specific styles let templateCSS = ''; switch(templateId) { case 'modern': templateCSS = ` .template-modern { color: #333; } .template-modern .cv-container { box-shadow: 0 0 10px rgba(0,0,0,0.1); background-color: #fff; } .template-modern .header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #70d6ff; } .template-modern h1 { color: #333; font-size: 28px; margin-bottom: 8px; } .template-modern h2 { color: #70d6ff; font-size: 18px; border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 15px; } .template-modern .contact-info { color: #666; font-size: 14px; margin-bottom: 3px; } .template-modern .links { margin-top: 10px; } .template-modern .links a { color: #70d6ff; text-decoration: none; margin: 0 10px; } .template-modern .section { margin-bottom: 25px; } .template-modern .item-title { font-weight: bold; color: #333; } .template-modern .item-date { color: #666; font-size: 14px; } .template-modern .item-subtitle { color: #444; font-size: 15px; margin-bottom: 5px; } .template-modern .item-description { font-size: 14px; color: #555; margin-top: 5px; } .template-modern .skill-item, .template-modern .tech-item, .template-modern .interest-item { background-color: #f0f8ff; color: #333; padding: 4px 8px; border-radius: 4px; font-size: 14px; } .template-modern .language-name { font-weight: medium; } .template-modern .language-level { color: #666; font-size: 14px; } .template-modern .project-links a { color: #70d6ff; text-decoration: none; } `; break; case 'minimal': templateCSS = ` .template-minimal { color: #333; } .template-minimal .cv-container { background-color: #fff; max-width: 700px; } .template-minimal .header { margin-bottom: 30px; } .template-minimal h1 { color: #000; font-size: 24px; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; font-weight: normal; } .template-minimal h2 { color: #000; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #ddd; padding-bottom: 5px; font-weight: normal; margin-bottom: 15px; } .template-minimal .contact-info { color: #666; font-size: 13px; } .template-minimal .links { margin-top: 8px; } .template-minimal .links a { color: #000; text-decoration: none; margin-right: 15px; font-size: 13px; } .template-minimal .section { margin-bottom: 25px; } .template-minimal .item-title { font-weight: normal; color: #000; text-transform: uppercase; letter-spacing: 0.5px; font-size: 14px; } .template-minimal .item-date { color: #666; font-size: 13px; } .template-minimal .item-subtitle { color: #333; font-size: 14px; } .template-minimal .item-description { font-size: 13px; color: #444; margin-top: 5px; } .template-minimal ul { list-style-type: none; padding-left: 0; } .template-minimal li:before { content: "–"; margin-right: 5px; } .template-minimal .skill-item, .template-minimal .tech-item, .template-minimal .interest-item { background: none; border: 1px solid #ddd; color: #333; padding: 3px 8px; border-radius: 0; font-size: 13px; } .template-minimal .language-name { font-weight: normal; text-transform: uppercase; letter-spacing: 0.5px; font-size: 13px; } .template-minimal .language-level { color: #666; font-size: 13px; } .template-minimal .project-links a { color: #000; text-decoration: none; font-size: 13px; } `; break; case 'creative': templateCSS = ` .template-creative { color: #333; } .template-creative .cv-container { background-color: #fff; position: relative; } .template-creative .header { background: linear-gradient(135deg, #ff9770 0%, #ffd670 100%); margin: -40px -40px 30px -40px; padding: 40px; color: white; position: relative; text-align: center; } .template-creative h1 { color: white; font-size: 32px; margin-bottom: 10px; position: relative; z-index: 1; } .template-creative .contact-info, .template-creative .links { color: rgba(255, 255, 255, 0.9); position: relative; z-index: 1; } .template-creative .links a { color: white; text-decoration: none; margin: 0 10px; font-weight: bold; } .template-creative h2 { color: #ff9770; font-size: 18px; margin-bottom: 15px; position: relative; display: inline-block; padding-bottom: 5px; } .template-creative h2:after { content: ""; position: absolute; bottom: 0; left: 0; height: 3px; width: 50%; background: linear-gradient(90deg, #ff9770 0%, #ffd670 100%); border-radius: 2px; } .template-creative .section { margin-bottom: 28px; } .template-creative .item { position: relative; padding-left: 18px; } .template-creative .item:before { content: ""; position: absolute; top: 5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background-color: #ff9770; } .template-creative .item-title { font-weight: bold; color: #333; } .template-creative .item-date { color: #ff9770; font-weight: bold; } .template-creative .skill-item, .template-creative .tech-item, .template-creative .interest-item { background: linear-gradient(135deg, #ff9770 0%, #ffd670 100%); color: white; padding: 5px 10px; border-radius: 20px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .template-creative .language-name { font-weight: bold; } .template-creative .project-links a { color: #ff9770; font-weight: bold; text-decoration: none; } `; break; case 'corporate': templateCSS = ` .template-corporate { color: #333; } .template-corporate .cv-container { background-color: #fff; border: 1px solid #ddd; } .template-corporate .header { border-bottom: 2px solid #4a6fa5; padding-bottom: 20px; margin-bottom: 30px; } .template-corporate h1 { color: #166088; font-size: 26px; margin-bottom: 8px; } .template-corporate h2 { background-color: #4a6fa5; color: white; font-size: 16px; padding: 8px 15px; margin-bottom: 15px; } .template-corporate .contact-info { color: #555; } .template-corporate .links { margin-top: 10px; } .template-corporate .links a { color: #4a6fa5; text-decoration: none; margin-right: 15px; font-weight: bold; } .template-corporate .section { margin-bottom: 25px; } .template-corporate .item-title { font-weight: bold; color: #166088; } .template-corporate .item-date { color: #555; } .template-corporate .skill-item, .template-corporate .tech-item, .template-corporate .interest-item { background-color: #f0f5fa; color: #166088; padding: 4px 8px; border-radius: 2px; font-size: 14px; border-left: 3px solid #4a6fa5; } .template-corporate .language-name { font-weight: bold; color: #166088; } .template-corporate .project-links a { color: #4a6fa5; font-weight: bold; text-decoration: none; } `; break; case 'tech': templateCSS = ` .template-tech { color: #333; background-color: #f7f9fc; } .template-tech .cv-container { background-color: #fff; box-shadow: 0 3px 15px rgba(0,0,0,0.08); border-radius: 8px; overflow: hidden; } .template-tech .header { background-color: #3a506b; color: white; padding: 30px; margin: -40px -40px 30px; } .template-tech h1 { font-size: 28px; margin-bottom: 10px; color: white; } .template-tech .contact-info, .template-tech .links { color: rgba(255,255,255,0.85); } .template-tech .links { margin-top: 10px; } .template-tech .links a { color: #5bc0be; text-decoration: none; margin-right: 15px; transition: color 0.3s; } .template-tech h2 { color: #3a506b; font-size: 18px; margin-bottom: 15px; border-left: 4px solid #5bc0be; padding-left: 10px; } .template-tech .section { margin-bottom: 25px; } .template-tech .item { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed #eee; } .template-tech .item:last-child { border-bottom: none; } .template-tech .item-title { font-weight: bold; color: #3a506b; } .template-tech .item-date { color: #5bc0be; font-weight: 500; } .template-tech .tech-list { margin-top: 8px; } .template-tech .skill-item, .template-tech .tech-item, .template-tech .interest-item { background-color: rgba(91, 192, 190, 0.1); color: #3a506b; padding: 4px 10px; border-radius: 4px; font-size: 13px; border: 1px solid rgba(91, 192, 190, 0.3); } .template-tech .language-name { font-weight: bold; color: #3a506b; } .template-tech .project-links a { color: #5bc0be; text-decoration: none; font-weight: 500; } `; break; default: templateCSS = ''; } return commonCSS + templateCSS; }; return (

CV Builder Dashboard

setAiEnabled(!aiEnabled)} className="sr-only peer" />

AI Assistant {aiEnabled ? "Enabled" : "Disabled"}

{/* Template Selection Modal */} {showTemplateModal && (

Choose a Template

{templates.map(template => (

{ merge({ template: template.id }); setShowTemplateModal(false); }} >

{template.name}

{cv.template === template.id && ( Selected )}

))}

)}

{/* Sidebar Navigation */}

{[ { id: "personal", label: "Personal Information" }, { id: "summary", label: "Professional Summary" }, { id: "experience", label: "Work Experience" }, { id: "projects", label: "Projects" }, { id: "education", label: "Education" }, { id: "skills", label: "Skills" }, { id: "certifications", label: "Certifications" }, { id: "languages", label: "Languages" }, { id: "interests", label: "Interests" } ].map((section) => ( ))}

{/* Main Content Area */}

{/* Personal Information Section */} {activeSection === "personal" && (

Personal Information

Full Name merge({ personal: { ...cv.personal, fullName: e.target.value } })} className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent" />

Email merge({ personal: { ...cv.personal, email: e.target.value } })} className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent" />

Phone merge({ personal: { ...cv.personal, phone: e.target.value } })} className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent" />

Address merge({ personal: { ...cv.personal, address: e.target.value } })} className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent" />

LinkedIn URL merge({ personal: { ...cv.personal, linkedin: e.target.value } })} className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent" />

GitHub URL merge({ personal: { ...cv.personal, github: e.target.value } })} className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent" />

Portfolio URL merge({ personal: { ...cv.personal, portfolioUrl: e.target.value } })} className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent" />

)} {/* Professional Summary Section */} {activeSection === "summary" && (

Professional Summary

Tone

Summary

merge({ summary: { ...cv.summary, text: e.target.value } })}
                    rows={5}
                    className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                    placeholder="Write your professional summary here..."
                  />
                </div>
                {aiEnabled && (
                  <button
                    onClick={generateSummary}
                    disabled={isGenerating}
                    className="mt-2 flex items-center justify-center bg-[#ffd670] text-[#242424] px-4 py-2 rounded hover:bg-[#e9ff70] transition duration-300 font-medium"
                  >
                    {isGenerating ? (
                      <>
                        <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-[#242424]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Generating...
                      </>
                    ) : (
                      "Generate with AI"
                    )}
                  </button>
                )}
              </div>
            )}

{/* Work Experience Section */}
            {activeSection === "experience" && (
              <div className="bg-white rounded-lg border-4 border-[#ff9770] p-6 shadow-lg mb-6">
                <h2 className="text-xl font-bold mb-4 text-[#242424]">Work Experience</h2>
                
                <div className="mb-6">
                  <h3 className="text-lg font-semibold mb-3 text-[#242424]">Add Experience</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                      <label className="block text-sm font-medium text-[#242424] mb-1">Job Title</label>
                      <input
                        type="text"
                        value={currentExperience.jobTitle}
                        onChange={(e) => setCurrentExperience({...currentExperience, jobTitle: e.target.value})}
                        className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-[#242424] mb-1">Company</label>
                      <input
                        type="text"
                        value={currentExperience.company}
                        onChange={(e) => setCurrentExperience({...currentExperience, company: e.target.value})}
                        className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-[#242424] mb-1">Location</label>
                      <input
                        type="text"
                        value={currentExperience.location}
                        onChange={(e) => setCurrentExperience({...currentExperience, location: e.target.value})}
                        className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                      />
                    </div>
                    <div className="grid grid-cols-2 gap-2">
                      <div>
                        <label className="block text-sm font-medium text-[#242424] mb-1">Start Date</label>
                        <input
                          type="text"
                          value={currentExperience.startDate}
                          onChange={(e) => setCurrentExperience({...currentExperience, startDate: e.target.value})}
                          placeholder="MM/YYYY"
                          className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-[#242424] mb-1">End Date</label>
                        <input
                          type="text"
                          value={currentExperience.endDate}
                          onChange={(e) => setCurrentExperience({...currentExperience, endDate: e.target.value})}
                          placeholder="MM/YYYY or Present"
                          className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                        />
                      </div>
                    </div>
                  </div>
                  
                  <label className="block text-sm font-medium text-[#242424] mb-1">Responsibilities</label>
                  {currentExperience.responsibilities.map((resp, index) => (
                    <div key={index} className="flex mb-2">
                      <input
                        type="text"
                        value={resp}
                        onChange={(e) => updateResponsibility(index, e.target.value)}
                        className="w-full p-2 border border-gray-300 rounded-l focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                        placeholder="Describe your responsibility..."
                      />
                      {index === currentExperience.responsibilities.length - 1 && (
                        <button
                          type="button"
                          onClick={addResponsibilityField}
                          className="bg-[#70d6ff] text-white px-3 py-2 rounded-r hover:bg-[#ff70a6] transition duration-300"
                        >
                          +
                        </button>
                      )}
                    </div>
                  ))}
                  
                  <div className="mt-4">
                    <button
                      onClick={addExperience}
                      disabled={!currentExperience.jobTitle || !currentExperience.company}
                      className="bg-[#ffd670] text-[#242424] px-4 py-2 rounded hover:bg-[#e9ff70] transition duration-300 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      Add Experience
                    </button>
                  </div>
                </div>
                
                <div className="mt-8">
                  <h3 className="text-lg font-semibold mb-3 text-[#242424]">Your Experience</h3>
                  {cv.experience.length === 0 ? (
                    <p className="text-gray-500 italic">No work experiences added yet.</p>
                  ) : (
                    cv.experience.map((exp, index) => (
                      <div key={index} className="mb-6 p-4 border border-gray-200 rounded bg-gray-50">
                        <div className="flex justify-between items-start">
                          <div>
                            <h4 className="font-bold text-[#242424]">{exp.jobTitle}</h4>
                            <p className="text-[#242424]">
                              {exp.company} • {exp.location}
                            </p>
                            <p className="text-sm text-gray-500">
                              {exp.startDate} - {exp.endDate}
                            </p>
                          </div>
                          <div className="flex">
                            {aiEnabled && (
                              <button
                                onClick={() => enhanceResponsibilities(index)}
                                disabled={isGenerating}
                                className="text-[#ff70a6] hover:text-[#ff9770] mr-2 text-sm"
                                title="Enhance with AI"
                              >
                                ✨ Enhance
                              </button>
                            )}
                            <button
                              onClick={() => removeItem("experience", index)}
                              className="text-red-500 hover:text-red-700 text-sm"
                              title="Remove"
                            >
                              ✕ Remove
                            </button>
                          </div>
                        </div>
                        <ul className="list-disc list-inside mt-2">
                          {exp.responsibilities.map((resp, respIndex) => (
                            <li key={respIndex} className="text-sm text-[#242424] my-1">
                              {resp}
                            </li>
                          ))}
                        </ul>
                      </div>
                    ))
                  )}
                </div>
              </div>
            )}

{/* Projects Section */}
            {activeSection === "projects" && (
              <div className="bg-white rounded-lg border-4 border-[#ffd670] p-6 shadow-lg mb-6">
                <h2 className="text-xl font-bold mb-4 text-[#242424]">Projects</h2>
                
                <div className="mb-6">
                  <h3 className="text-lg font-semibold mb-3 text-[#242424]">Add Project</h3>
                  <div className="grid grid-cols-1 gap-4 mb-4">
                    <div>
                      <label className="block text-sm font-medium text-[#242424] mb-1">Project Title</label>
                      <input
                        type="text"
                        value={currentProject.title}
                        onChange={(e) => setCurrentProject({...currentProject, title: e.target.value})}
                        className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-[#242424] mb-1">Technologies Used (comma separated)</label>
                      <input
                        type="text"
                        value={currentProject.technologies}
                        onChange={(e) => setCurrentProject({...currentProject, technologies: e.target.value})}
                        placeholder="React, Node.js, MongoDB, etc."
                        className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-[#242424] mb-1">Description</label>
                      <textarea
                        value={currentProject.description}
                        onChange={(e) => setCurrentProject({...currentProject, description: e.target.value})}
                        rows={3}
                        className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                        placeholder="Describe your project..."
                      />
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-[#242424] mb-1">GitHub URL</label>
                        <input
                          type="url"
                          value={currentProject.links.github}
                          onChange={(e) => setCurrentProject({
                            ...currentProject, 
                            links: {...currentProject.links, github: e.target.value}
                          })}
                          className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-[#242424] mb-1">Live Demo URL</label>
                        <input
                          type="url"
                          value={currentProject.links.live}
                          onChange={(e) => setCurrentProject({
                            ...currentProject, 
                            links: {...currentProject.links, live: e.target.value}
                          })}
                          className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                        />
                      </div>
                    </div>
                  </div>
                  
                  <div className="mt-4">
                    <button
                      onClick={addProject}
                      disabled={!currentProject.title || !currentProject.description}
                      className="bg-[#ffd670] text-[#242424] px-4 py-2 rounded hover:bg-[#e9ff70] transition duration-300 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      Add Project
                    </button>
                  </div>
                </div>
                
                <div className="mt-8">
                  <h3 className="text-lg font-semibold mb-3 text-[#242424]">Your Projects</h3>
                  {cv.projects.length === 0 ? (
                    <p className="text-gray-500 italic">No projects added yet.</p>
                  ) : (
                    cv.projects.map((project, index) => (
                      <div key={index} className="mb-6 p-4 border border-gray-200 rounded bg-gray-50">
                        <div className="flex justify-between items-start">
                          <div>
                            <h4 className="font-bold text-[#242424]">{project.title}</h4>
                            <div className="flex flex-wrap mt-1 mb-2">
                              {Array.isArray(project.technologies) ? 
                                project.technologies.map((tech, techIndex) => (
                                  <span key={techIndex} className="bg-[#70d6ff]/20 text-[#242424] text-xs px-2 py-1 rounded mr-1 mb-1">
                                    {tech}
                                  </span>
                                )) : 
                                project.technologies.split(",").map((tech, techIndex) => (
                                  <span key={techIndex} className="bg-[#70d6ff]/20 text-[#242424] text-xs px-2 py-1 rounded mr-1 mb-1">
                                    {tech.trim()}
                                  </span>
                                ))
                              }
                            </div>
                            <p className="text-sm text-[#242424]">{project.description}</p>
                            <div className="flex mt-2 text-xs">
                              {project.links.github && (
                                <a href={project.links.github} target="_blank" rel="noopener noreferrer" className="text-[#ff70a6] hover:text-[#ff9770] mr-4">
                                  GitHub
                                </a>
                              )}
                              {project.links.live && (
                                <a href={project.links.live} target="_blank" rel="noopener noreferrer" className="text-[#ff70a6] hover:text-[#ff9770]">
                                  Live Demo
                                </a>
                              )}
                            </div>
                          </div>
                          <button
                            onClick={() => removeItem("projects", index)}
                            className="text-red-500 hover:text-red-700 text-sm"
                            title="Remove"
                          >
                            ✕ Remove
                          </button>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </div>
            )}

{/* Education Section */}
            {activeSection === "education" && (
              <div className="bg-white rounded-lg border-4 border-[#e9ff70] p-6 shadow-lg mb-6">
                <h2 className="text-xl font-bold mb-4 text-[#242424]">Education</h2>
                
                <div className="mb-6">
                  <h3 className="text-lg font-semibold mb-3 text-[#242424]">Add Education</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                      <label className="block text-sm font-medium text-[#242424] mb-1">Degree</label>
                      <input
                        type="text"
                        value={currentEducation.degree}
                        onChange={(e) => setCurrentEducation({...currentEducation, degree: e.target.value})}
                        className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                        placeholder="B.S. Computer Science"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-[#242424] mb-1">Institution</label>
                      <input
                        type="text"
                        value={currentEducation.institution}
                        onChange={(e) => setCurrentEducation({...currentEducation, institution: e.target.value})}
                        className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-[#242424] mb-1">Year</label>
                      <input
                        type="text"
                        value={currentEducation.year}
                        onChange={(e) => setCurrentEducation({...currentEducation, year: e.target.value})}
                        className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                        placeholder="2023"
                      />
                    </div>
                    <div className="md:col-span-2">
                      <label className="block text-sm font-medium text-[#242424] mb-1">Description (Optional)</label>
                      <textarea
                        value={currentEducation.description}
                        onChange={(e) => setCurrentEducation({...currentEducation, description: e.target.value})}
                        rows={2}
                        className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                        placeholder="Honors, GPA, relevant coursework, etc."
                      />
                    </div>
                  </div>
                  
                  <div className="mt-4">
                    <button
                      onClick={addEducation}
                      disabled={!currentEducation.degree || !currentEducation.institution}
                      className="bg-[#ffd670] text-[#242424] px-4 py-2 rounded hover:bg-[#e9ff70] transition duration-300 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      Add Education
                    </button>
                  </div>
                </div>
                
                <div className="mt-8">
                  <h3 className="text-lg font-semibold mb-3 text-[#242424]">Your Education</h3>
                  {cv.education.length === 0 ? (
                    <p className="text-gray-500 italic">No education entries added yet.</p>
                  ) : (
                    cv.education.map((edu, index) => (
                      <div key={index} className="mb-4 p-4 border border-gray-200 rounded bg-gray-50">
                        <div className="flex justify-between items-start">
                          <div>
                            <h4 className="font-bold text-[#242424]">{edu.degree}</h4>
                            <p className="text-[#242424]">
                              {edu.institution} • {edu.year}
                            </p>
                            {edu.description && (
                              <p className="text-sm text-gray-600 mt-1">{edu.description}</p>
                            )}
                          </div>
                          <button
                            onClick={() => removeItem("education", index)}
                            className="text-red-500 hover:text-red-700 text-sm"
                            title="Remove"
                          >
                            ✕ Remove
                          </button>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </div>
            )}

{/* Skills Section */}
            {activeSection === "skills" && (
              <div className="bg-white rounded-lg border-4 border-[#70d6ff] p-6 shadow-lg mb-6">
                <h2 className="text-xl font-bold mb-4 text-[#242424]">Skills</h2>
                {aiEnabled && (
                  <div className="mb-4">
                    <button
                      onClick={suggestSkills}
                      disabled={isGenerating || cv.experience.length === 0}
                      className="bg-[#ffd670] text-[#242424] px-4 py-2 rounded hover:bg-[#e9ff70] transition duration-300 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      {isGenerating ? "Suggesting..." : "Suggest Skills based on Experience"}
                    </button>
                    {cv.experience.length === 0 && (
                      <p className="text-xs text-gray-500 mt-1">Add work experience to enable AI skill suggestions</p>
                    )}
                  </div>
                )}
                
                <div className="mb-4">
                  <label className="block text-sm font-medium text-[#242424] mb-1">Add Skills (comma separated)</label>
                  <div className="flex">
                    <input
                      type="text"
                      id="skill-input"
                      placeholder="JavaScript, React, Node.js..."
                      className="w-full p-2 border border-gray-300 rounded-l focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                      onKeyDown={(e) => {
                        if (e.key === 'Enter' && e.target.value.trim()) {
                          e.preventDefault();
                          const newSkills = e.target.value.split(',').map(s => s.trim()).filter(s => s);
                          merge({ skills: [...cv.skills, ...newSkills] });
                          e.target.value = '';
                        }
                      }}
                    />
                    <button
                      onClick={() => {
                        const input = document.getElementById('skill-input');
                        if (input.value.trim()) {
                          const newSkills = input.value.split(',').map(s => s.trim()).filter(s => s);
                          merge({ skills: [...cv.skills, ...newSkills] });
                          input.value = '';
                        }
                      }}
                      className="bg-[#70d6ff] text-white px-4 py-2 rounded-r hover:bg-[#ff70a6] transition duration-300"
                    >
                      Add
                    </button>
                  </div>
                </div>
                
                <div className="mt-6">
                  <h3 className="text-lg font-semibold mb-3 text-[#242424]">Your Skills</h3>
                  <div className="flex flex-wrap">
                    {cv.skills.length === 0 ? (
                      <p className="text-gray-500 italic">No skills added yet.</p>
                    ) : (
                      cv.skills.map((skill, index) => (
                        <div key={index} className="bg-[#70d6ff]/20 text-[#242424] px-3 py-1 rounded-full mr-2 mb-2 flex items-center">
                          <span>{skill}</span>
                          <button
                            onClick={() => {
                              const updatedSkills = [...cv.skills];
                              updatedSkills.splice(index, 1);
                              merge({ skills: updatedSkills });
                            }}
                            className="ml-2 text-red-500 hover:text-red-700"
                          >
                            ✕
                          </button>
                        </div>
                      ))
                    )}
                  </div>
                </div>
              </div>
            )}

{/* Certifications Section */}
            {activeSection === "certifications" && (
              <div className="bg-white rounded-lg border-4 border-[#ff70a6] p-6 shadow-lg mb-6">
                <h2 className="text-xl font-bold mb-4 text-[#242424]">Certifications & Awards</h2>
                
                <div className="mb-6">
                  <h3 className="text-lg font-semibold mb-3 text-[#242424]">Add Certification</h3>
                  <form onSubmit={(e) => {
                    e.preventDefault();
                    const form = e.target;
                    const newCert = {
                      title: form.title.value,
                      issuer: form.issuer.value,
                      year: form.year.value,
                      description: form.description.value
                    };
                    
                    if (newCert.title && newCert.issuer) {
                      merge({ certifications: [...cv.certifications, newCert] });
                      form.reset();
                    }
                  }}>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                      <div>
                        <label className="block text-sm font-medium text-[#242424] mb-1">Title</label>
                        <input
                          name="title"
                          type="text"
                          required
                          className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                          placeholder="AWS Certified Developer"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-[#242424] mb-1">Issuer</label>
                        <input
                          name="issuer"
                          type="text"
                          required
                          className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                          placeholder="Amazon Web Services"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-[#242424] mb-1">Year</label>
                        <input
                          name="year"
                          type="text"
                          className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                          placeholder="2023"
                        />
                      </div>
                      <div className="md:col-span-2">
                        <label className="block text-sm font-medium text-[#242424] mb-1">Description (Optional)</label>
                        <textarea
                          name="description"
                          rows={2}
                          className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                          placeholder="Description of certification or award"
                        />
                      </div>
                    </div>
                    
                    <div className="mt-4">
                      <button
                        type="submit"
                        className="bg-[#ffd670] text-[#242424] px-4 py-2 rounded hover:bg-[#e9ff70] transition duration-300 font-medium"
                      >
                        Add Certification
                      </button>
                    </div>
                  </form>
                </div>
                
                <div className="mt-8">
                  <h3 className="text-lg font-semibold mb-3 text-[#242424]">Your Certifications</h3>
                  {cv.certifications.length === 0 ? (
                    <p className="text-gray-500 italic">No certifications added yet.</p>
                  ) : (
                    cv.certifications.map((cert, index) => (
                      <div key={index} className="mb-4 p-4 border border-gray-200 rounded bg-gray-50">
                        <div className="flex justify-between items-start">
                          <div>
                            <h4 className="font-bold text-[#242424]">{cert.title}</h4>
                            <p className="text-[#242424]">
                              {cert.issuer} {cert.year && `• ${cert.year}`}
                            </p>
                            {cert.description && (
                              <p className="text-sm text-gray-600 mt-1">{cert.description}</p>
                            )}
                          </div>
                          <button
                            onClick={() => removeItem("certifications", index)}
                            className="text-red-500 hover:text-red-700 text-sm"
                            title="Remove"
                          >
                            ✕ Remove
                          </button>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </div>
            )}
            
            {/* Languages Section */}
            {activeSection === "languages" && (
              <div className="bg-white rounded-lg border-4 border-[#ffd670] p-6 shadow-lg mb-6">
                <h2 className="text-xl font-bold mb-4 text-[#242424]">Languages</h2>
                
                <div className="mb-6">
                  <h3 className="text-lg font-semibold mb-3 text-[#242424]">Add Language</h3>
                  <form onSubmit={(e) => {
                    e.preventDefault();
                    const form = e.target;
                    const newLanguage = {
                      language: form.language.value,
                      level: form.level.value
                    };
                    
                    if (newLanguage.language && newLanguage.level) {
                      merge({ languages: [...cv.languages, newLanguage] });
                      form.reset();
                    }
                  }}>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                      <div>
                        <label className="block text-sm font-medium text-[#242424] mb-1">Language</label>
                        <input
                          name="language"
                          type="text"
                          required
                          className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                          placeholder="English"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-[#242424] mb-1">Proficiency Level</label>
                        <select
                          name="level"
                          required
                          className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                        >
                          <option value="">Select Level</option>
                          <option value="Native">Native</option>
                          <option value="Fluent">Fluent</option>
                          <option value="Intermediate">Intermediate</option>
                          <option value="Basic">Basic</option>
                        </select>
                      </div>
                    </div>
                    
                    <div className="mt-4">
                      <button
                        type="submit"
                        className="bg-[#ffd670] text-[#242424] px-4 py-2 rounded hover:bg-[#e9ff70] transition duration-300 font-medium"
                      >
                        Add Language
                      </button>
                    </div>
                  </form>
                </div>
                
                <div className="mt-8">
                  <h3 className="text-lg font-semibold mb-3 text-[#242424]">Your Languages</h3>
                  {cv.languages.length === 0 ? (
                    <p className="text-gray-500 italic">No languages added yet.</p>
                  ) : (
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {cv.languages.map((lang, index) => (
                        <div key={index} className="p-3 border border-gray-200 rounded bg-gray-50">
                          <div className="flex justify-between items-center">
                            <div>
                              <span className="font-medium text-[#242424]">{lang.language}</span>
                              <span className="mx-2">•</span>
                              <span className="text-[#242424]">{lang.level}</span>
                            </div>
                            <button
                              onClick={() => removeItem("languages", index)}
                              className="text-red-500 hover:text-red-700 text-sm"
                              title="Remove"
                            >
                              ✕
                            </button>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            )}
            
            {/* Interests Section */}
            {activeSection === "interests" && (
              <div className="bg-white rounded-lg border-4 border-[#e9ff70] p-6 shadow-lg mb-6">
                <h2 className="text-xl font-bold mb-4 text-[#242424]">Interests</h2>
                <p className="text-sm text-gray-500 mb-4">Add some personal interests to humanize your CV (optional)</p>
                
                <div className="mb-6">
                  <label className="block text-sm font-medium text-[#242424] mb-1">Add Interest</label>
                  <div className="flex">
                    <input
                      type="text"
                      id="interest-input"
                      placeholder="Photography, Hiking, Chess..."
                      className="w-full p-2 border border-gray-300 rounded-l focus:ring-2 focus:ring-[#70d6ff] focus:border-transparent"
                      onKeyDown={(e) => {
                        if (e.key === 'Enter' && e.target.value.trim()) {
                          e.preventDefault();
                          merge({ interests: [...cv.interests, e.target.value.trim()] });
                          e.target.value = '';
                        }
                      }}
                    />
                    <button
                      onClick={() => {
                        const input = document.getElementById('interest-input');
                        if (input.value.trim()) {
                          merge({ interests: [...cv.interests, input.value.trim()] });
                          input.value = '';
                        }
                      }}
                      className="bg-[#70d6ff] text-white px-4 py-2 rounded-r hover:bg-[#ff70a6] transition duration-300"
                    >
                      Add
                    </button>
                  </div>
                </div>
                
                <div className="mt-6">
                  <h3 className="text-lg font-semibold mb-3 text-[#242424]">Your Interests</h3>
                  <div className="flex flex-wrap">
                    {cv.interests.length === 0 ? (
                      <p className="text-gray-500 italic">No interests added yet.</p>
                    ) : (
                      cv.interests.map((interest, index) => (
                        <div key={index} className="bg-[#e9ff70]/30 text-[#242424] px-3 py-1 rounded-full mr-2 mb-2 flex items-center">
                          <span>{interest}</span>
                          <button
                            onClick={() => {
                              const updatedInterests = [...cv.interests];
                              updatedInterests.splice(index, 1);
                              merge({ interests: updatedInterests });
                            }}
                            className="ml-2 text-red-500 hover:text-red-700"
                          >
                            ✕
                          </button>
                        </div>
                      ))
                    )}
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>

{/* CV Preview Pane */}
        <div className="hidden lg:block w-1/3 bg-gray-100 p-6 border-l border-gray-300 overflow-auto">
          <div className="bg-white shadow-md p-6 rounded-lg">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xl font-bold text-center border-b pb-2">CV Preview</h2>
              <span className="text-sm text-[#ff70a6] font-medium">{currentTemplate.name}</span>
            </div>
            
            {/* Personal Info */}
            <div className="text-center mb-6">
              <h1 className="text-2xl font-bold text-[#242424]">{cv.personal.fullName || "Your Name"}</h1>
              <div className="text-sm text-gray-600 mt-1">
                {cv.personal.email && <span className="mr-2">{cv.personal.email}</span>}
                {cv.personal.phone && <span>{cv.personal.phone}</span>}
              </div>
              <div className="text-sm text-gray-600 mt-1">
                {cv.personal.address && <span>{cv.personal.address}</span>}
              </div>
              <div className="text-xs text-[#70d6ff] mt-2 flex justify-center gap-3">
                {cv.personal.linkedin && <span>LinkedIn</span>}
                {cv.personal.github && <span>GitHub</span>}
                {cv.personal.portfolioUrl && <span>Portfolio</span>}
              </div>
            </div>
            
            {/* Summary */}
            {cv.summary.text && (
              <div className="mb-6">
                <h3 className="text-sm uppercase font-bold text-[#242424] border-b border-gray-200 pb-1 mb-2">Professional Summary</h3>
                <p className="text-sm text-gray-700">{cv.summary.text}</p>
              </div>
            )}
            
            {/* Experience */}
            {cv.experience.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm uppercase font-bold text-[#242424] border-b border-gray-200 pb-1 mb-2">Experience</h3>
                {cv.experience.map((exp, index) => (
                  <div key={index} className="mb-3">
                    <div className="flex justify-between">
                      <span className="font-semibold text-[#242424]">{exp.jobTitle}</span>
                      <span className="text-xs text-gray-500">{exp.startDate} - {exp.endDate}</span>
                    </div>
                    <div className="text-sm">{exp.company}, {exp.location}</div>
                    <ul className="list-disc list-inside text-xs text-gray-700 mt-1">
                      {exp.responsibilities.map((resp, respIndex) => (
                        resp.trim() && <li key={respIndex}>{resp}</li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            )}
            
            {/* Projects */}
            {cv.projects.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm uppercase font-bold text-[#242424] border-b border-gray-200 pb-1 mb-2">Projects</h3>
                {cv.projects.map((project, index) => (
                  <div key={index} className="mb-3">
                    <div className="font-semibold text-[#242424]">{project.title}</div>
                    <div className="flex flex-wrap mt-1">
                      {Array.isArray(project.technologies) ? 
                        project.technologies.map((tech, techIndex) => (
                          <span key={techIndex} className="inline-block text-xs bg-gray-100 px-1 mr-1 mb-1">
                            {tech}
                          </span>
                        )) : 
                        project.technologies.split(",").map((tech, techIndex) => (
                          <span key={techIndex} className="inline-block text-xs bg-gray-100 px-1 mr-1 mb-1">
                            {tech.trim()}
                          </span>
                        ))
                      }
                    </div>
                    <p className="text-xs text-gray-700 mt-1">{project.description}</p>
                  </div>
                ))}
              </div>
            )}
            
            {/* Education */}
            {cv.education.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm uppercase font-bold text-[#242424] border-b border-gray-200 pb-1 mb-2">Education</h3>
                {cv.education.map((edu, index) => (
                  <div key={index} className="mb-2">
                    <div className="flex justify-between">
                      <span className="font-semibold text-[#242424]">{edu.degree}</span>
                      <span className="text-xs text-gray-500">{edu.year}</span>
                    </div>
                    <div className="text-sm">{edu.institution}</div>
                    {edu.description && <p className="text-xs text-gray-700">{edu.description}</p>}
                  </div>
                ))}
              </div>
            )}
            
            {/* Skills */}
            {cv.skills.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm uppercase font-bold text-[#242424] border-b border-gray-200 pb-1 mb-2">Skills</h3>
                <div className="flex flex-wrap">
                  {cv.skills.map((skill, index) => (
                    <span key={index} className="inline-block text-xs bg-gray-100 px-2 py-1 mr-1 mb-1 rounded">
                      {skill}
                    </span>
                  ))}
                </div>
              </div>
            )}
            
            {/* Certifications */}
            {cv.certifications.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm uppercase font-bold text-[#242424] border-b border-gray-200 pb-1 mb-2">Certifications & Awards</h3>
                {cv.certifications.map((cert, index) => (
                  <div key={index} className="mb-2">
                    <div className="flex justify-between">
                      <span className="font-semibold text-[#242424]">{cert.title}</span>
                      {cert.year && <span className="text-xs text-gray-500">{cert.year}</span>}
                    </div>
                    <div className="text-sm">{cert.issuer}</div>
                  </div>
                ))}
              </div>
            )}
            
            {/* Languages */}
            {cv.languages.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm uppercase font-bold text-[#242424] border-b border-gray-200 pb-1 mb-2">Languages</h3>
                <div className="flex flex-wrap">
                  {cv.languages.map((lang, index) => (
                    <div key={index} className="mr-4 mb-1">
                      <span className="text-sm font-medium">{lang.language}</span>
                      <span className="text-xs text-gray-600"> ({lang.level})</span>
                    </div>
                  ))}
                </div>
              </div>
            )}
            
            {/* Interests */}
            {cv.interests.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm uppercase font-bold text-[#242424] border-b border-gray-200 pb-1 mb-2">Interests</h3>
                <div className="flex flex-wrap">
                  {cv.interests.map((interest, index) => (
                    <span key={index} className="inline-block text-xs bg-gray-100 px-2 py-1 mr-1 mb-1 rounded">
                      {interest}
                    </span>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
      
      <div className="bg-[#242424] text-white p-4 text-center text-sm">
        <p>Your CV is automatically saved to your browser's local database</p>
      </div>
    </div>
  );
}</article></body></html>