AI CV Generator – BIM Users

Loading Studio...

import React, { useState, useEffect, useRef } from 'https://esm.sh/react@18.2.0';
import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';
import { 
  Upload, FileText, CheckCircle, AlertCircle, Download, RefreshCw, Briefcase, User, 
  GraduationCap, Star, Sparkles, Loader2, X, BarChart, Search, Palette, 
  Trash2, Plus, ChevronDown, ChevronUp, Award, Mail, MessageSquare, Settings,
  Linkedin, FolderDown, FolderUp, FileType, MapPin, Phone, RefreshCcw, Maximize,
  DollarSign, TrendingUp, LayoutTemplate, AlignJustify, AlignLeft, MoveVertical, Languages, ArrowUpCircle,
  Undo, Redo, Lock, History, Clock, FileBadge, FolderKanban, Link as LinkIcon, Target, Wand2, Image as ImageIcon
} from 'https://esm.sh/lucide-react@0.292.0?bundle';

const apiKey = window.BIMUSERS_CONFIG.apiKey || ""; 
const lockReason = window.BIMUSERS_CONFIG.lockReason; 
const isLocked = lockReason !== 'none';

const BIM_KEYWORDS = [
  "Revit", "Navisworks", "AutoCAD", "BIM 360", "Python", "Dynamo", 
  "Clash Detection", "LOD", "COBie", "IFC", "Coordination", "4D", "5D", 
  "Digital Twin", "Scan to BIM", "Point Cloud", "CDE", "ISO 19650", "BIM Execute Plan"
];

const INITIAL_DATA = {
  fullName: "", title: "", email: "", phone: "", linkedin: "", portfolio: "", summary: "", skills: "", photo: "",
  experience: [{ id: 1, role: "", company: "", duration: "", details: "" }],
  projects: [], education: [{ id: 1, degree: "", school: "", year: "" }],
  certifications: [{ id: 1, name: "", issuer: "", year: "" }], languages: []
};

const DEMO_DATA = {
  fullName: "Alex Rivera", title: "BIM Coordinator", email: "alex.r@example.com", phone: "+1 234 567 890", photo: "",
  linkedin: "linkedin.com/in/arivera", portfolio: "alexrivera.com",
  summary: "Detail-oriented BIM Coordinator with 5+ years of experience managing VDC processes, clash detection, and multi-disciplinary coordination using Revit and Navisworks. Proven track record of reducing project RFIs by 30% through effective 3D modeling and team collaboration.",
  skills: "Revit, Navisworks Manage, AutoCAD, BIM 360, Clash Detection, Dynamo, COBie, 4D Scheduling",
  experience: [
    { id: 1, role: "Senior BIM Coordinator", company: "BuildTech Architecture", duration: "2020 - Present", details: "- Managed multi-disciplinary BIM coordination for a $50M commercial project.\n- Performed weekly clash detection using Navisworks Manage.\n- Developed and maintained Revit templates and families." },
    { id: 2, role: "BIM Modeler", company: "DesignPro Group", duration: "2017 - 2020", details: "- Created detailed 3D models for architectural and structural disciplines.\n- Assisted in creating 4D construction sequencing simulations.\n- Extracted material quantities for cost estimation." }
  ],
  projects: [{ id: 1, name: "Skyline International Airport", role: "Lead BIM Coordinator", details: "- Led 3D coordination for MEP and Structural disciplines.\n- Resolved 500+ major clashes before construction phase."}],
  education: [{ id: 1, degree: "B.S. in Architecture", school: "State University", year: "2017" }],
  certifications: [{ id: 1, name: "Autodesk Certified Professional: Revit", issuer: "Autodesk", year: "2021" }],
  languages: [{ id: 1, name: "English", level: "Native" }, { id: 2, name: "Spanish", level: "Fluent" }]
};

const THEMES = {
  blue: { primary: 'text-blue-700', border: 'border-blue-700', bg: 'bg-blue-700', light: 'bg-blue-50', accent: 'bg-blue-100', hex: '#1d4ed8' },
  emerald: { primary: 'text-emerald-700', border: 'border-emerald-700', bg: 'bg-emerald-700', light: 'bg-emerald-50', accent: 'bg-emerald-100', hex: '#047857' },
  teal: { primary: 'text-teal-700', border: 'border-teal-700', bg: 'bg-teal-700', light: 'bg-teal-50', accent: 'bg-teal-100', hex: '#0f766e' },
  slate: { primary: 'text-slate-800', border: 'border-slate-800', bg: 'bg-slate-800', light: 'bg-slate-100', accent: 'bg-slate-200', hex: '#1e293b' },
  rose: { primary: 'text-rose-700', border: 'border-rose-700', bg: 'bg-rose-700', light: 'bg-rose-50', accent: 'bg-rose-100', hex: '#be123c' },
  violet: { primary: 'text-violet-700', border: 'border-violet-700', bg: 'bg-violet-700', light: 'bg-violet-50', accent: 'bg-violet-100', hex: '#6d28d9' },
  amber: { primary: 'text-amber-700', border: 'border-amber-700', bg: 'bg-amber-700', light: 'bg-amber-50', accent: 'bg-amber-100', hex: '#b45309' },
};

const FONTS = [
  { id: 'sans', name: 'System Sans', family: 'ui-sans-serif, system-ui, sans-serif' },
  { id: 'serif', name: 'System Serif', family: 'ui-serif, Georgia, serif' },
  { id: 'mono', name: 'System Mono', family: 'ui-monospace, SFMono-Regular, monospace' },
  { id: 'inter', name: 'Inter', family: '"Inter", sans-serif' },
  { id: 'roboto', name: 'Roboto', family: '"Roboto", sans-serif' },
  { id: 'opensans', name: 'Open Sans', family: '"Open Sans", sans-serif' },
  { id: 'lato', name: 'Lato', family: '"Lato", sans-serif' },
  { id: 'montserrat', name: 'Montserrat', family: '"Montserrat", sans-serif' },
  { id: 'poppins', name: 'Poppins', family: '"Poppins", sans-serif' },
  { id: 'raleway', name: 'Raleway', family: '"Raleway", sans-serif' },
  { id: 'oswald', name: 'Oswald', family: '"Oswald", sans-serif' },
  { id: 'nunito', name: 'Nunito', family: '"Nunito", sans-serif' },
  { id: 'ubuntu', name: 'Ubuntu', family: '"Ubuntu", sans-serif' },
  { id: 'quicksand', name: 'Quicksand', family: '"Quicksand", sans-serif' },
  { id: 'rubik', name: 'Rubik', family: '"Rubik", sans-serif' },
  { id: 'worksans', name: 'Work Sans', family: '"Work Sans", sans-serif' },
  { id: 'merriweather', name: 'Merriweather', family: '"Merriweather", serif' },
  { id: 'playfair', name: 'Playfair Display', family: '"Playfair Display", serif' },
  { id: 'lora', name: 'Lora', family: '"Lora", serif' },
  { id: 'ptserif', name: 'PT Serif', family: '"PT Serif", serif' },
  { id: 'notoserif', name: 'Noto Serif', family: '"Noto Serif", serif' },
  { id: 'crimsontext', name: 'Crimson Text', family: '"Crimson Text", serif' },
  { id: 'ebgaramond', name: 'EB Garamond', family: '"EB Garamond", serif' },
  { id: 'librebaskerville', name: 'Libre Baskerville', family: '"Libre Baskerville", serif' },
  { id: 'firacode', name: 'Fira Code', family: '"Fira Code", monospace' },
  { id: 'robotomono', name: 'Roboto Mono', family: '"Roboto Mono", monospace' },
  { id: 'spacemono', name: 'Space Mono', family: '"Space Mono", monospace' },
];

const LAYOUTS = ['modern', 'classic', 'executive', 'minimalist', 'creative', 'technical', 'timeline', 'elegant', 'compact'];

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false, error: null };
    }
    static getDerivedStateFromError(error) {
        return { hasError: true, error };
    }
    render() {
        if (this.state.hasError) {
            return (
                <div className="p-8 text-red-600 bg-red-50 m-8 rounded-lg border border-red-200 shadow-sm max-w-2xl mx-auto mt-20">
                    <h2 className="text-xl font-bold mb-4 flex items-center gap-2"><AlertCircle className="w-6 h-6"/> Local Session Error</h2>
                    <p className="mb-4 text-sm text-red-800">The CV Studio encountered a render error. This is usually caused by corrupted saved data from a previous session.</p><pre className="text-xs overflow-auto bg-white p-4 rounded border border-red-100 mb-4">{this.state.error?.message}</pre><button onClick={() => { localStorage.removeItem('bimcv_data'); localStorage.removeItem('bimcv_theme'); window.location.reload(); }} className="bg-red-600 text-white px-4 py-2 rounded font-bold shadow-sm hover:bg-red-700">Clear Saved Data & Reload</button>
                </div>
            );
        }
        return this.props.children;
    }
}

const GateModal = ({ reason, onClose }) => {
    return (
        <div className="bim-modal-backdrop">
            <div className="bim-card">
                <div onClick={onClose} className="bim-close"><X className="w-6 h-6"/></div>
                {reason === 'login' && (
                    <>
                        <div className="text-blue-600 mb-4 flex justify-center"><User className="w-16 h-16"/></div>
                        <h2 className="text-2xl font-bold text-slate-800 mb-2">Login Required</h2>
                        <p className="text-slate-500 mb-6">Please log in to edit, upload, or generate AI content.</p>
                        <a href={window.BIMUSERS_CONFIG.loginUrl} className="bim-btn bim-btn-primary">Login via Portal</a>
                    </>
                )}
                {reason === 'role' && (
                    <>
                        <div className="text-amber-500 mb-4 flex justify-center"><Lock className="w-16 h-16"/></div>
                        <h2 className="text-2xl font-bold text-slate-800 mb-2">Premium Access</h2>
                        <p className="text-slate-500 mb-6">This tool is available for <strong>Premium Subscription </strong> only.</p>
                        <a href={window.BIMUSERS_CONFIG.upgradeUrl} className="bim-btn bim-btn-primary">Subscribe Now</a>
                    </>
                )}
                {reason === 'timer' && (
                    <>
                        <div className="text-blue-500 mb-4 flex justify-center"><Clock className="w-16 h-16"/></div>
                        <h2 className="text-2xl font-bold text-slate-800 mb-2">Usage Limit</h2>
                        <p className="text-slate-500 mb-4">You have used your session for now.</p>
                        <div className="text-3xl font-mono font-bold text-blue-600 mb-6">Wait: {window.BIMUSERS_CONFIG.timeRemaining} min</div>
                        <a href={window.BIMUSERS_CONFIG.upgradeUrl} className="text-sm text-blue-500 hover:underline">Upgrade for Unlimited Access</a>
                    </>
                )}
            </div>
        </div>
    );
};

const UsageHistoryPanel = ({ history }) => (
    <div className="w-64 bg-white border-l border-slate-200 hidden xl:flex flex-col h-screen sticky top-0 z-10 print:hidden">
        <div className="p-4 border-b border-slate-100 bg-slate-50">
            <h3 className="font-bold text-slate-700 flex items-center gap-2"><History className="w-4 h-4"/> Session History</h3>
        </div>
        <div className="flex-1 overflow-y-auto p-4 space-y-3">
            {history.length === 0 ? (
                <p className="text-xs text-slate-400 text-center italic mt-4">No actions yet.</p>
            ) : (
                history.map((item, idx) => (
                    <div key={idx} className="bg-white border border-slate-100 p-2 rounded shadow-sm flex items-start gap-2 animate-in slide-in-from-right-2 fade-in duration-300">
                        <div className="mt-0.5 text-blue-500"><CheckCircle className="w-3 h-3"/></div>
                        <div>
                            <p className="text-xs font-semibold text-slate-700">{item.action}</p>
                            <p className="text-[10px] text-slate-400">{item.time}</p>
                        </div>
                    </div>
                ))
            )}
        </div>
        <div className="p-4 border-t border-slate-100 bg-slate-50">
            <div className="text-xs font-bold text-slate-500 uppercase mb-1">Status</div>
            {isLocked ? (
                <div className="flex items-center gap-2 text-amber-500 text-xs font-bold"><Lock className="w-3 h-3"/> View-Only Mode</div>
            ) : (
                <div className="flex items-center gap-2 text-emerald-600 text-xs font-bold"><Sparkles className="w-3 h-3"/> Full Access Active</div>
            )}
        </div>
    </div>
);

function App() {
  const [activeTab, setActiveTab] = useState('editor'); 
  const [resumeData, setResumeData] = useState(INITIAL_DATA);
  const [theme, setTheme] = useState({ 
      color: 'blue', font: 'sans', size: 'md', spacing: 'normal', layout: 'modern', 
      showPhoto: false, photoScale: 1, photoX: 0, photoY: 0, photoShape: 'circle', photoFit: 'cover'
  }); 
  const [expandedSection, setExpandedSection] = useState('personal'); 
  
  const [history, setHistory] = useState([INITIAL_DATA]);
  const [historyIndex, setHistoryIndex] = useState(0);
  const isHistoryAction = useRef(false);

const [sessionLog, setSessionLog] = useState([]);
  const addToLog = (actionName) => {
      const entry = { action: actionName, time: new Date().toLocaleTimeString() };
      setSessionLog(prev => [entry, ...prev]);
  };

const [showModal, setShowModal] = useState(false);
  const [isUploading, setIsUploading] = useState(false);
  const [uploadError, setUploadError] = useState(null); 
  const [lastSaved, setLastSaved] = useState(null);
  const [isExportingPDF, setIsExportingPDF] = useState(false);
  const [notification, setNotification] = useState(null);
  const fileInputRef = useRef(null);
  
  const [score, setScore] = useState(0);
  const [auditReport, setAuditReport] = useState(null);
  const [isGeneratingReport, setIsGeneratingReport] = useState(false);
  const [jobDescription, setJobDescription] = useState("");
  const [matchScore, setMatchScore] = useState(null);
  const [aiLoading, setAiLoading] = useState({ type: null, id: null });
  const [aiTips, setAiTips] = useState([]);

const [coverLetter, setCoverLetter] = useState("");
  const [coverLetterTone, setCoverLetterTone] = useState("Professional");
  const [interviewPrep, setInterviewPrep] = useState(null);
  const [linkedInData, setLinkedInData] = useState(null);
  const [coldEmail, setColdEmail] = useState("");
  const [salaryInsights, setSalaryInsights] = useState(null);
  const [careerPaths, setCareerPaths] = useState(null);
  const [targetLanguage, setTargetLanguage] = useState("Arabic");
  const [targetLevel, setTargetLevel] = useState("Senior/Executive");
  const [atsOptimization, setAtsOptimization] = useState(null);

useEffect(() => {
    const loader = document.getElementById('native-app-loading');
    if (loader) loader.style.display = 'none';

if (!window.BIMUSERS_CONFIG.hasKey && !isLocked) {
        showNotification('info', 'AI is offline. Manual editing is fully supported!');
    }
    
    try {
        const savedData = localStorage.getItem('bimcv_data');
        const savedTheme = localStorage.getItem('bimcv_theme');
        if (savedData) {
          const parsed = JSON.parse(savedData);
          if(!parsed.experience) parsed.experience = [];
          if(!parsed.projects) parsed.projects = [];
          if(!parsed.languages) parsed.languages = [];
          if(!parsed.education) parsed.education = [];
          if(!parsed.certifications) parsed.certifications = [];
          if(!parsed.skills) parsed.skills = "";
          if(parsed.linkedin === undefined) parsed.linkedin = "";
          if(parsed.portfolio === undefined) parsed.portfolio = "";
          if(parsed.photo === undefined) parsed.photo = "";
          setResumeData(parsed);
          setHistory([parsed]); 
        }
        if (savedTheme) {
            const pTheme = JSON.parse(savedTheme);
            if(pTheme.showPhoto === undefined) pTheme.showPhoto = false;
            if(pTheme.photoScale === undefined) pTheme.photoScale = 1;
            if(pTheme.photoX === undefined) pTheme.photoX = 0;
            if(pTheme.photoY === undefined) pTheme.photoY = 0;
            if(pTheme.photoShape === undefined) pTheme.photoShape = 'circle';
            if(pTheme.photoFit === undefined) pTheme.photoFit = 'cover';
            setTheme(prev => ({...prev, ...pTheme}));
        }
    } catch(e) {
        console.error("Failed to parse local storage", e);
    }
  }, []);

useEffect(() => {
      const activeF = FONTS.find(f => f.id === theme.font) || FONTS[0];
      if (!activeF.name.startsWith('System')) {
          const linkId = 'dynamic-google-font';
          let link = document.getElementById(linkId);
          if (!link) {
              link = document.createElement('link');
              link.id = linkId;
              link.rel = 'stylesheet';
              document.head.appendChild(link);
          }
          link.href = `https://fonts.googleapis.com/css2?family=${activeF.name.replace(/\s+/g, '+')}:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap`;
      }
  }, [theme.font]);

useEffect(() => {
    if (isLocked) return; 
    const timer = setTimeout(() => {
      localStorage.setItem('bimcv_data', JSON.stringify(resumeData));
      localStorage.setItem('bimcv_theme', JSON.stringify(theme));
      setLastSaved(new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}));
    }, 1000);
    return () => clearTimeout(timer);
  }, [resumeData, theme, isLocked]);

useEffect(() => {
    if (isLocked) return;
    if (isHistoryAction.current) { isHistoryAction.current = false; return; }
    const handler = setTimeout(() => {
      if (JSON.stringify(resumeData) !== JSON.stringify(history[historyIndex])) {
         const newHistory = history.slice(0, historyIndex + 1);
         if (newHistory.length > 30) newHistory.shift(); 
         newHistory.push(resumeData);
         setHistory(newHistory);
         setHistoryIndex(newHistory.length - 1);
      }
    }, 800); 
    return () => clearTimeout(handler);
  }, [resumeData, isLocked]);

const handleUndo = () => {
    if (historyIndex > 0) {
      isHistoryAction.current = true;
      const newIndex = historyIndex - 1;
      setHistoryIndex(newIndex);
      setResumeData(history[newIndex]);
      showNotification('info', 'Undone');
    }
  };

const handleRedo = () => {
    if (historyIndex < history.length - 1) {
      isHistoryAction.current = true; 
      const newIndex = historyIndex + 1;
      setHistoryIndex(newIndex);
      setResumeData(history[newIndex]);
      showNotification('info', 'Redone');
    }
  };

const callGemini = async (prompt, inlineData = null, jsonMode = false) => {
    if (isLocked) { setShowModal(true); return null; }
    if (!apiKey) { showNotification('info', "AI features are currently offline. Please edit manually."); return null; }

for (let attempt = 0; attempt <= maxRetries; attempt++) {
      try {
        const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${apiKey}`, {
          method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload)
        });
        if (response.status === 429) {
            if (attempt < maxRetries) { await delay(2000 * (attempt + 1)); continue; } 
            else { showNotification('error', "Gemini: System Busy: usage limit reached."); return null; }
        }
        if (!response.ok) throw new Error(`HTTP Error ${response.status}`);
        const data = await response.json();
        if (data.error) {
             if (data.error.code === 429 || data.error.message.includes('quota')) {
                 showNotification('error', "Gemini: System Busy."); return null;
             }
             showNotification('error', `Gemini Error: ${data.error.message}`); return null;
        }
        return data.candidates?.[0]?.content?.parts?.[0]?.text;
      } catch (error) {
        if (attempt === maxRetries) { showNotification('error', "Gemini: System Busy."); return null; }
        await delay(Math.pow(2, attempt) * 1000);
      }
    }
  };

const applyAtsSummary = () => {
      if(atsOptimization?.optimizedSummary) {
          handleInputChange('summary', atsOptimization.optimizedSummary);
          showNotification('success', 'Optimized summary applied!');
      }
  };

const handleFileUpload = async (e) => { 
    if(isLocked) { setShowModal(true); return; }
    if (!apiKey) { showNotification('error', "Auto-import requires AI which is currently offline. Please enter details manually."); return; }

const handleClearData = () => {
      if (confirm("Are you sure you want to clear all data? This cannot be undone.")) {
          setResumeData(INITIAL_DATA);
          showNotification('info', 'All data cleared.');
          addToLog('Cleared Data');
      }
  };

const handleExportPDF = () => {
    if(isLocked) { setShowModal(true); return; }
    const element = document.getElementById('cv-preview-content');
    if (!element) return;
    
    setIsExportingPDF(true);

// Create a precise unscaled clone for export to fix cut-offs
    const clone = element.cloneNode(true);
    const wrapper = document.createElement('div');
    wrapper.style.position = 'absolute';
    wrapper.style.left = '-9999px';
    wrapper.style.top = '0';
    wrapper.style.width = '210mm'; // Force exact A4 width
    wrapper.appendChild(clone);
    document.body.appendChild(wrapper);

// Remove the visual guidelines before capturing PDF
    clone.classList.remove('preview-a4-guidelines');

useEffect(() => {
    let newScore = 0;
    if (resumeData.fullName) newScore += 10;
    if (resumeData.email) newScore += 10;
    const textContent = JSON.stringify(resumeData).toLowerCase();
    let foundKeywords = BIM_KEYWORDS.filter(kw => textContent.includes(kw.toLowerCase()));
    newScore += Math.min(foundKeywords.length * 4, 40);
    if (resumeData.experience.length > 0 && resumeData.experience[0].details.length > 20) newScore += 20;
    if (resumeData.summary.length > 30) newScore += 20;
    setScore(Math.min(newScore, 100));
  }, [resumeData]);

// FIXED: Interactive Photo Editor (Smoother Mouse Pan & Zoom + Fit Option)
  const InteractivePhotoEditor = () => {
      const photoRef = useRef(null);
      const [isDragging, setIsDragging] = useState(false);
      const [dragStart, setDragStart] = useState({ x: 0, y: 0, startX: 0, startY: 0 });

const handleMouseDown = (e) => {
          e.preventDefault();
          setIsDragging(true);
          setDragStart({ 
              x: e.clientX, 
              y: e.clientY, 
              startX: theme.photoX || 0, 
              startY: theme.photoY || 0 
          });
      };

useEffect(() => {
          if (!isDragging) return;
          const handleMove = (e) => {
              setTheme(p => {
                  const scale = p.photoScale || 1;
                  // Improved math: divide the drag distance by the scale so mouse sticks perfectly to the image
                  const dx = (e.clientX - dragStart.x) / scale;
                  const dy = (e.clientY - dragStart.y) / scale;
                  return { ...p, photoX: dragStart.startX + dx, photoY: dragStart.startY + dy };
              });
          };
          const handleUp = () => setIsDragging(false);

window.addEventListener('mousemove', handleMove);
          window.addEventListener('mouseup', handleUp);
          return () => {
              window.removeEventListener('mousemove', handleMove);
              window.removeEventListener('mouseup', handleUp);
          };
      }, [isDragging, dragStart]);

useEffect(() => {
          const el = photoRef.current;
          if (!el) return;
          const handleWheel = (e) => {
              e.preventDefault(); 
              const scaleChange = e.deltaY > 0 ? -0.05 : 0.05;
              setTheme(p => ({ ...p, photoScale: Math.max(0.1, Math.min(5, (p.photoScale || 1) + scaleChange)) }));
          };
          el.addEventListener('wheel', handleWheel, { passive: false });
          return () => el.removeEventListener('wheel', handleWheel);
      }, []);

let borderRadius = '50%';
      if (theme.photoShape === 'square') borderRadius = '0.5rem';
      if (theme.photoShape === 'rounded') borderRadius = '1rem';

return (
          <div className="flex flex-col gap-2">
              <div ref={photoRef} 
                   className="relative group w-32 h-32 shrink-0 cursor-move shadow-md"
                   onMouseDown={handleMouseDown}
                   style={{ borderRadius, overflow: 'hidden', border: '3px solid #e2e8f0', backgroundColor: '#f8fafc' }}>
                   
                   <img src={resumeData.photo} alt="Profile" style={{
                       width: '100%', height: '100%', 
                       objectFit: theme.photoFit || 'cover',
                       objectPosition: 'top center', // Default priority to heads
                       transform: `scale(${theme.photoScale || 1}) translate(${theme.photoX || 0}px, ${theme.photoY || 0}px)`,
                       transformOrigin: 'center center',
                       pointerEvents: 'none'
                   }} />
                   
                   <div className="absolute inset-0 bg-slate-900/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center text-white text-[10px] font-bold pointer-events-none">
                       <span><MoveVertical className="w-4 h-4 mx-auto mb-1 rotate-45"/></span>
                       <span className="text-center leading-tight">Drag to Pan</span>
                   </div>
                   
                   <button onClick={(e) => { e.stopPropagation(); handleInputChange('photo', ''); setTheme(p => ({ ...p, showPhoto: false })); }} className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity z-10 pointer-events-auto shadow-sm hover:bg-red-600"><X className="w-3 h-3"/></button>
              </div>
              
              <div className="w-32 mt-1">
                  <div className="flex justify-between items-center mb-1 px-1">
                      <span className="text-[9px] font-bold text-slate-400 uppercase">Zoom</span>
                      <button onClick={() => setTheme(p => ({...p, photoScale: 1, photoX: 0, photoY: 0, photoFit: 'cover'}))} className="text-[9px] text-blue-500 hover:underline flex items-center gap-0.5"><RefreshCcw className="w-2 h-2"/> Reset</button>
                  </div>
                  <input type="range" min="0.1" max="3" step="0.05" value={theme.photoScale || 1} 
                         onChange={(e) => setTheme(p => ({...p, photoScale: parseFloat(e.target.value)}))} 
                         className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600 mb-2" title="Zoom In/Out" />
                  
                  <div className="flex gap-1 w-full mb-1">
                      {['circle', 'rounded', 'square'].map(shape => (
                          <button key={shape} onClick={() => setTheme(p => ({...p, photoShape: shape}))} className={`flex-1 py-1 text-[9px] font-bold uppercase rounded border transition-colors ${theme.photoShape === shape || (!theme.photoShape && shape==='circle') ? 'bg-blue-600 border-blue-600 text-white shadow-sm' : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'}`}>{shape}</button>
                      ))}
                  </div>
                  <div className="flex gap-1 w-full">
                      <button onClick={() => setTheme(p => ({...p, photoFit: 'cover'}))} className={`flex-1 py-1 text-[9px] font-bold uppercase rounded border transition-colors ${(!theme.photoFit || theme.photoFit === 'cover') ? 'bg-slate-700 border-slate-700 text-white shadow-sm' : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'}`}>Fill</button>
                      <button onClick={() => setTheme(p => ({...p, photoFit: 'contain'}))} className={`flex-1 py-1 text-[9px] font-bold uppercase rounded border transition-colors ${(theme.photoFit === 'contain') ? 'bg-slate-700 border-slate-700 text-white shadow-sm' : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'}`}>Fit</button>
                  </div>
              </div>
          </div>
      );
  };

const EditorContent = () => (
    <div className="w-full space-y-4 pb-20">
      {/* File Upload Section */}
      <div className="bg-white border-2 border-dashed border-slate-200 rounded-xl p-6 flex flex-col md:flex-row items-center gap-6 hover:border-blue-400 transition-colors relative overflow-hidden group mb-6">
          <input type="file" accept=".pdf,image/*" onChange={handleFileUpload} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
          <div className={`w-12 h-12 ${activeTheme.light} ${activeTheme.primary} rounded-full flex items-center justify-center group-hover:scale-110 transition-transform`}>
            {isUploading ? <Loader2 className="w-6 h-6 animate-spin"/> : <Upload className="w-6 h-6"/>}
          </div>
          <div className="flex-1 text-center md:text-left">
            <h3 className="font-bold text-slate-800">Auto-Import from Resume</h3>
            <p className="text-sm text-slate-500">Upload existing PDF/Image to auto-fill details.</p>
            {uploadError && <p className="text-xs text-red-500 mt-1">{uploadError}</p>}
          </div>
          <button className="bg-white border border-slate-200 text-slate-600 px-4 py-2 rounded-lg text-sm font-medium shadow-sm group-hover:bg-slate-50">Browse Files</button>
      </div>

{/* Personal Info */}
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <button onClick={() => setExpandedSection(expandedSection === 'personal' ? null : 'personal')} className="w-full flex justify-between p-4 font-bold text-slate-800 bg-slate-50 hover:bg-slate-100 transition-colors">
          <div className="flex gap-2"><User className="w-5 h-5"/> Personal Info</div>
          {expandedSection === 'personal' ? <ChevronUp className="w-5 h-5"/> : <ChevronDown className="w-5 h-5"/>}
        </button>
        {expandedSection === 'personal' && (
          <div className="p-4 grid grid-cols-2 gap-4 animate-in slide-in-from-top-1">
              <input className="p-2 border rounded focus:ring-2 focus:ring-blue-100 outline-none shadow-sm" placeholder="Full Name" value={resumeData.fullName} onChange={e => handleInputChange('fullName', e.target.value)} />
              <input className="p-2 border rounded focus:ring-2 focus:ring-blue-100 outline-none shadow-sm" placeholder="Job Title" value={resumeData.title} onChange={e => handleInputChange('title', e.target.value)} />
              <input className="p-2 border rounded focus:ring-2 focus:ring-blue-100 outline-none shadow-sm" placeholder="Email" value={resumeData.email} onChange={e => handleInputChange('email', e.target.value)} />
              <input className="p-2 border rounded focus:ring-2 focus:ring-blue-100 outline-none shadow-sm" placeholder="Phone" value={resumeData.phone} onChange={e => handleInputChange('phone', e.target.value)} />
              
              <input className="p-2 border rounded focus:ring-2 focus:ring-blue-100 outline-none text-sm shadow-sm" placeholder="LinkedIn URL" value={resumeData.linkedin || ''} onChange={e => handleInputChange('linkedin', e.target.value)} />
              <input className="p-2 border rounded focus:ring-2 focus:ring-blue-100 outline-none text-sm shadow-sm" placeholder="Portfolio / GitHub URL" value={resumeData.portfolio || ''} onChange={e => handleInputChange('portfolio', e.target.value)} />

<div className="col-span-2 p-4 bg-slate-50 border border-slate-200 rounded-lg shadow-inner">
                  <label className="text-xs font-bold text-slate-700 uppercase tracking-wider block mb-3">Profile Photo</label>
                  <div className="flex items-start gap-6">
                      {resumeData.photo ? (
                          <InteractivePhotoEditor />
                      ) : (
                          <div className="w-32 h-32 rounded-full bg-white border-2 border-dashed border-slate-300 flex flex-col items-center justify-center shrink-0 text-slate-400">
                              <ImageIcon className="w-8 h-8 mb-1 opacity-50"/>
                              <span className="text-[10px] font-semibold uppercase">No Photo</span>
                          </div>
                      )}
                      <div className="flex-1 relative flex flex-col gap-3 justify-center h-32">
                          <div className="relative">
                              <input type="file" accept="image/*" onChange={handlePhotoUpload} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
                              <button className="bg-white border border-slate-300 text-slate-700 px-4 py-2.5 rounded-lg text-xs font-bold shadow-sm hover:bg-blue-50 hover:border-blue-300 hover:text-blue-700 w-full flex items-center justify-center gap-2 transition-colors"><Upload className="w-4 h-4"/> {resumeData.photo ? 'Change Photo' : 'Upload New Photo'}</button>
                          </div>
                          {resumeData.photo && <p className="text-[10px] text-slate-500 leading-relaxed bg-white p-2 rounded border border-slate-200 shadow-sm"><strong>Pro Tip:</strong> Click and drag your photo inside the circle to pan. Use the slider below it to zoom in or out.</p>}
                      </div>
                  </div>
              </div>

<div className="col-span-2 relative mt-2">
                <div className="flex justify-between mb-1">
                    <label className="text-xs font-semibold text-slate-500">Summary</label>
                    <button onClick={handleGenerateSummary} disabled={aiLoading.type === 'summary'} className="text-xs text-purple-600 flex items-center gap-1 hover:bg-purple-50 px-2 py-0.5 rounded transition-colors shadow-sm bg-white border border-purple-100">
                      {aiLoading.type === 'summary' ? <Loader2 className="w-3 h-3 animate-spin"/> : <Sparkles className="w-3 h-3"/>} Auto-Write
                    </button>
                </div>
                <textarea className="w-full p-3 border rounded shadow-sm min-h-[10rem] focus:ring-2 focus:ring-blue-100 outline-none resize-y text-sm leading-relaxed" value={resumeData.summary} onChange={e => handleInputChange('summary', e.target.value)} placeholder="Briefly describe your experience and goals..." />
              </div>
          </div>
        )}
      </div>

{/* Experience Section */}
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <button onClick={() => setExpandedSection(expandedSection === 'xp' ? null : 'xp')} className="w-full flex justify-between p-4 font-bold text-slate-800 bg-slate-50 hover:bg-slate-100 transition-colors">
          <div className="flex gap-2"><Briefcase className="w-5 h-5"/> Experience</div>
          {expandedSection === 'xp' ? <ChevronUp className="w-5 h-5"/> : <ChevronDown className="w-5 h-5"/>}
        </button>
        {expandedSection === 'xp' && (
          <div className="p-4 space-y-4 animate-in slide-in-from-top-1">
            {(resumeData.experience || []).map((exp, idx) => (
              <div key={exp.id} className="p-4 border rounded-lg bg-white shadow-sm relative group">
                <button onClick={() => removeItem('experience', idx)} className="absolute top-2 right-2 text-slate-400 hover:text-red-500 transition-colors"><X className="w-4 h-4"/></button>
                <div className="grid grid-cols-2 gap-3 mb-3">
                    <input placeholder="Role" className="p-2 border rounded font-semibold bg-slate-50" value={exp.role} onChange={e => handleArrayChange('experience', idx, 'role', e.target.value)} />
                    <input placeholder="Company" className="p-2 border rounded bg-slate-50" value={exp.company} onChange={e => handleArrayChange('experience', idx, 'company', e.target.value)} />
                    <input placeholder="Duration" className="p-2 border rounded col-span-2 bg-slate-50" value={exp.duration} onChange={e => handleArrayChange('experience', idx, 'duration', e.target.value)} />
                </div>
                <div className="relative">
                    <textarea placeholder="Key achievements and responsibilities... (Start lines with - or * for bullets)" className="w-full p-3 border rounded bg-slate-50 min-h-[10rem] focus:ring-2 focus:ring-blue-100 outline-none resize-y text-sm leading-relaxed" value={exp.details} onChange={e => handleArrayChange('experience', idx, 'details', e.target.value)} />
                    <button onClick={() => handlePolishText(idx, exp.details, 'experience')} disabled={aiLoading.type === 'polish-experience'} className="absolute bottom-2 right-2 text-xs bg-white text-purple-600 px-2 py-1 rounded border border-purple-100 shadow-sm flex items-center gap-1 hover:bg-purple-50 transition-colors">
                      {aiLoading.type === 'polish-experience' && aiLoading.id === idx ? <Loader2 className="w-3 h-3 animate-spin"/> : <Sparkles className="w-3 h-3"/>} Enhance
                    </button>
                </div>
              </div>
            ))}
            <button onClick={() => addItem('experience')} className="w-full py-2 border-2 border-dashed rounded text-slate-500 hover:text-blue-600 hover:border-blue-300 bg-white transition-colors flex items-center justify-center gap-2"><Plus className="w-4 h-4"/> Add Job</button>
          </div>
        )}
      </div>

{/* Projects Section */}
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <button onClick={() => setExpandedSection(expandedSection === 'projects' ? null : 'projects')} className="w-full flex justify-between p-4 font-bold text-slate-800 bg-slate-50 hover:bg-slate-100 transition-colors">
          <div className="flex gap-2"><FolderKanban className="w-5 h-5"/> Key Projects</div>
          {expandedSection === 'projects' ? <ChevronUp className="w-5 h-5"/> : <ChevronDown className="w-5 h-5"/>}
        </button>
        {expandedSection === 'projects' && (
          <div className="p-4 space-y-4 animate-in slide-in-from-top-1">
            {(resumeData.projects || []).map((proj, idx) => (
              <div key={proj.id} className="p-4 border rounded-lg bg-white shadow-sm relative group">
                <button onClick={() => removeItem('projects', idx)} className="absolute top-2 right-2 text-slate-400 hover:text-red-500 transition-colors"><X className="w-4 h-4"/></button>
                <div className="grid grid-cols-2 gap-3 mb-3">
                    <input placeholder="Project Name (e.g. Skyline Airport)" className="p-2 border rounded font-semibold col-span-2 md:col-span-1 bg-slate-50" value={proj.name} onChange={e => handleArrayChange('projects', idx, 'name', e.target.value)} />
                    <input placeholder="Your Role (e.g. Lead Coordinator)" className="p-2 border rounded col-span-2 md:col-span-1 bg-slate-50" value={proj.role} onChange={e => handleArrayChange('projects', idx, 'role', e.target.value)} />
                </div>
                <div className="relative">
                    <textarea placeholder="Project details, scope, and your specific contributions..." className="w-full p-3 border rounded min-h-[6rem] bg-slate-50 focus:ring-2 focus:ring-blue-100 outline-none resize-y text-sm leading-relaxed" value={proj.details} onChange={e => handleArrayChange('projects', idx, 'details', e.target.value)} />
                    <button onClick={() => handlePolishText(idx, proj.details, 'projects')} disabled={aiLoading.type === 'polish-projects'} className="absolute bottom-2 right-2 text-xs bg-white text-purple-600 px-2 py-1 rounded border border-purple-100 shadow-sm flex items-center gap-1 hover:bg-purple-50 transition-colors">
                      {aiLoading.type === 'polish-projects' && aiLoading.id === idx ? <Loader2 className="w-3 h-3 animate-spin"/> : <Sparkles className="w-3 h-3"/>} Enhance
                    </button>
                </div>
              </div>
            ))}
            <button onClick={() => addItem('projects')} className="w-full py-2 border-2 border-dashed rounded text-slate-500 hover:text-blue-600 hover:border-blue-300 bg-white transition-colors flex items-center justify-center gap-2"><Plus className="w-4 h-4"/> Add Project</button>
          </div>
        )}
      </div>

{/* Skills Section */}
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
          <button onClick={() => setExpandedSection(expandedSection === 'skills' ? null : 'skills')} className="w-full flex justify-between p-4 font-bold text-slate-800 bg-slate-50 hover:bg-slate-100 transition-colors">
            <div className="flex gap-2"><Star className="w-5 h-5"/> Skills</div>
            {expandedSection === 'skills' ? <ChevronUp className="w-5 h-5"/> : <ChevronDown className="w-5 h-5"/>}
          </button>
          {expandedSection === 'skills' && (
            <div className="p-4 animate-in slide-in-from-top-1">
              <div className="flex justify-between mb-2">
                  <label className="text-xs text-slate-500 bg-white px-2 py-1 rounded shadow-sm border border-slate-200">Comma separated list</label>
                  <button onClick={handleSuggestSkills} disabled={aiLoading.type === 'skills'} className="text-xs text-purple-600 flex items-center gap-1 hover:bg-purple-50 px-2 py-1 rounded transition-colors bg-white shadow-sm border border-purple-100">
                    {aiLoading.type === 'skills' ? <Loader2 className="w-3 h-3 animate-spin"/> : <Sparkles className="w-3 h-3"/>} Suggest Skills
                  </button>
              </div>
              <textarea className="w-full p-3 border rounded min-h-[8rem] bg-white shadow-sm focus:ring-2 focus:ring-blue-100 outline-none resize-y text-sm leading-relaxed" placeholder="Revit, AutoCAD, Python..." value={resumeData.skills || ''} onChange={e => handleInputChange('skills', e.target.value)} />
            </div>
          )}
      </div>

{/* Languages Section */}
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
          <button onClick={() => setExpandedSection(expandedSection === 'languages' ? null : 'languages')} className="w-full flex justify-between p-4 font-bold text-slate-800 bg-slate-50 hover:bg-slate-100 transition-colors">
            <div className="flex gap-2"><Languages className="w-5 h-5"/> Languages</div>
            {expandedSection === 'languages' ? <ChevronUp className="w-5 h-5"/> : <ChevronDown className="w-5 h-5"/>}
          </button>
          {expandedSection === 'languages' && (
            <div className="p-4 space-y-3 animate-in slide-in-from-top-1">
              {(resumeData.languages || []).map((lang, idx) => (
                <div key={lang.id} className="flex gap-2 items-center bg-white p-2 rounded shadow-sm border border-slate-200">
                    <input className="flex-1 p-2 border-none outline-none text-sm" placeholder="Language (e.g. English)" value={lang.name || ''} onChange={e => handleArrayChange('languages', idx, 'name', e.target.value)} />
                    <select className="w-40 p-2 border-l border-slate-200 text-sm bg-white outline-none" value={lang.level || ''} onChange={e => handleArrayChange('languages', idx, 'level', e.target.value)}>
                        <option value="">Select Level...</option>
                        <option value="Native">Native / Bilingual</option>
                        <option value="Fluent">Fluent</option>
                        <option value="Intermediate">Intermediate</option>
                        <option value="Basic">Basic</option>
                    </select>
                    <button onClick={() => removeItem('languages', idx)} className="text-slate-400 hover:text-red-500 p-2"><X className="w-4 h-4"/></button>
                </div>
              ))}
              <button onClick={() => addItem('languages')} className="w-full py-2 border-2 border-dashed rounded text-slate-500 hover:text-blue-600 hover:border-blue-300 bg-white transition-colors flex items-center justify-center gap-2"><Plus className="w-4 h-4"/> Add Language</button>
            </div>
          )}
      </div>

{/* Education Section */}
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
          <button onClick={() => setExpandedSection(expandedSection === 'edu' ? null : 'edu')} className="w-full flex justify-between p-4 font-bold text-slate-800 bg-slate-50 hover:bg-slate-100 transition-colors">
            <div className="flex gap-2"><GraduationCap className="w-5 h-5"/> Education & Certifications</div>
            {expandedSection === 'edu' ? <ChevronUp className="w-5 h-5"/> : <ChevronDown className="w-5 h-5"/>}
          </button>
          {expandedSection === 'edu' && (
            <div className="p-4 space-y-6 animate-in slide-in-from-top-1">
              <div>
                  <h4 className="text-xs font-bold text-slate-500 uppercase mb-3 bg-white inline-block px-2 py-1 rounded border shadow-sm">Degrees</h4>
                  <div className="space-y-3">
                      {(resumeData.education || []).map((edu, idx) => (
                        <div key={edu.id} className="flex gap-2 items-center bg-white p-2 rounded shadow-sm border border-slate-200">
                            <input className="flex-1 p-2 border-r outline-none text-sm" placeholder="Degree" value={edu.degree} onChange={e => handleArrayChange('education', idx, 'degree', e.target.value)} />
                            <input className="flex-1 p-2 border-r outline-none text-sm" placeholder="School" value={edu.school} onChange={e => handleArrayChange('education', idx, 'school', e.target.value)} />
                            <input className="w-24 p-2 outline-none text-sm" placeholder="Year" value={edu.year} onChange={e => handleArrayChange('education', idx, 'year', e.target.value)} />
                            <button onClick={() => removeItem('education', idx)} className="text-slate-400 hover:text-red-500 pr-2"><X className="w-4 h-4"/></button>
                        </div>
                      ))}
                      <button onClick={() => addItem('education')} className="text-sm text-blue-600 font-bold hover:underline flex items-center gap-1"><Plus className="w-3 h-3"/> Add Education</button>
                  </div>
              </div>
              <div>
                  <h4 className="text-xs font-bold text-slate-500 uppercase mb-3 bg-white inline-block px-2 py-1 rounded border shadow-sm">Certificates</h4>
                  <div className="space-y-3">
                      {(resumeData.certifications || []).map((cert, idx) => (
                        <div key={cert.id} className="flex gap-2 items-center bg-white p-2 rounded shadow-sm border border-slate-200">
                            <input className="flex-1 p-2 border-r outline-none text-sm" placeholder="Certificate Name" value={cert.name} onChange={e => handleArrayChange('certifications', idx, 'name', e.target.value)} />
                            <input className="flex-1 p-2 border-r outline-none text-sm" placeholder="Issuer" value={cert.issuer} onChange={e => handleArrayChange('certifications', idx, 'issuer', e.target.value)} />
                            <input className="w-24 p-2 outline-none text-sm" placeholder="Year" value={cert.year} onChange={e => handleArrayChange('certifications', idx, 'year', e.target.value)} />
                            <button onClick={() => removeItem('certifications', idx)} className="text-slate-400 hover:text-red-500 pr-2"><X className="w-4 h-4"/></button>
                        </div>
                      ))}
                      <button onClick={() => addItem('certifications')} className="text-sm text-blue-600 font-bold hover:underline flex items-center gap-1"><Plus className="w-3 h-3"/> Add Certificate</button>
                  </div>
              </div>
            </div>
          )}
      </div>
    </div>
  );

// NEW: Dynamic Resizing Wrapper for Side-by-Side Preview
  const PreviewWrapper = ({ fullView = false }) => {
      const wrapperRef = useRef(null);
      const [scale, setScale] = useState(1);
      const [height, setHeight] = useState('auto');

useEffect(() => {
          const updateLayout = () => {
              if (wrapperRef.current && wrapperRef.current.parentElement) {
                  const parentWidth = wrapperRef.current.parentElement.clientWidth;
                  const targetWidth = 794; // approx A4 width in px (210mm)
                  let newScale = 1;
                  
                  if (!fullView) {
                      // In side-by-side mode, strictly scale down to fit container width
                      if (parentWidth < targetWidth + 40) {
                          newScale = (parentWidth - 40) / targetWidth;
                      }
                  } else {
                      // In Full View (Preview Tab), expand on large screens or fit normally
                      if (parentWidth > 1200) {
                          newScale = 1.2;
                      } else if (parentWidth < targetWidth + 40) {
                          newScale = (parentWidth - 40) / targetWidth;
                      }
                  }
                  
                  setScale(newScale);

// Adjust container height to match scaled document to prevent awkward scroll dead-zones
                  const contentNode = document.getElementById('cv-preview-content');
                  if (contentNode) {
                      const actualHeight = contentNode.offsetHeight;
                      setHeight(`${actualHeight * newScale}px`);
                  }
              }
          };
          
          const observer = new ResizeObserver(updateLayout);
          if (wrapperRef.current) {
              observer.observe(wrapperRef.current.parentElement);
              const contentNode = document.getElementById('cv-preview-content');
              if (contentNode) observer.observe(contentNode);
          }
          
          setTimeout(updateLayout, 100);
          return () => observer.disconnect();
      }, [activeTab, resumeData, theme, fullView]);

return (
          <div className="w-full flex justify-center origin-top transition-all duration-200 overflow-hidden" style={{ height }} ref={wrapperRef}>
              <div style={{ transform: `scale(${scale})`, transformOrigin: 'top center' }} className="w-[210mm] shrink-0">
                  {/* Wrap Preview in a div that conditionally gets the page-break lines based on app state */}
                  <div className="preview-a4-guidelines h-full">
                      <PreviewContent />
                  </div>
              </div>
          </div>
      );
  };

const RenderPhoto = ({ className = "" }) => {
      if (!theme.showPhoto || !resumeData.photo) return null;
      let borderRadius = '50%';
      if (theme.photoShape === 'square') borderRadius = '0.5rem';
      if (theme.photoShape === 'rounded') borderRadius = '1rem';
      const scale = theme.photoScale || 1;
      const x = theme.photoX || 0;
      const y = theme.photoY || 0;

return (
          <div className={`overflow-hidden shrink-0 ${className}`} style={{ borderRadius }}>
              <img src={resumeData.photo} alt="Profile" style={{
                  width: '100%', height: '100%', 
                  objectFit: theme.photoFit || 'cover',
                  objectPosition: 'top center', // Ensures heads aren't naturally chopped
                  transform: `scale(${scale}) translate(${x}px, ${y}px)`,
                  transformOrigin: 'center center'
              }} />
          </div>
      );
  };

const PreviewContent = () => {
    const previewStyles = { fontFamily: activeFont.family };

// 1: MODERN
    if (theme.layout === 'modern' || !theme.layout) {
        return (
            <div id="cv-preview-content" style={previewStyles} className={`max-w-[210mm] mx-auto bg-white shadow-2xl min-h-[297mm] p-[15mm] md:p-[20mm] text-slate-800 transition-all duration-300 print:shadow-none print:m-0 print:w-full print:max-w-none print:p-[15mm] h-auto`}>
              <div className="flex flex-col md:flex-row md:justify-between md:items-start mb-10 pb-6 border-b-2 border-slate-100 break-inside-avoid gap-6">
                <RenderPhoto className="w-24 h-24 border border-slate-200 shadow-sm" />
                <div className="flex-1 pr-4">
                  <h1 className={`${getSizeClass('h1')} font-bold uppercase tracking-tight text-slate-900 mb-2`}><SafeRender>{resumeData.fullName || "Your Name"}</SafeRender></h1>
                  <h2 className={`${getSizeClass('h2')} ${activeTheme.primary} font-medium tracking-wide mb-4`}><SafeRender>{resumeData.title || "Professional Title"}</SafeRender></h2>
                  {resumeData.summary && <p className={`${getSizeClass('text')} text-slate-600 mt-4 leading-relaxed`}><SafeRender>{resumeData.summary}</SafeRender></p>}
                </div>
                <div className="mt-6 md:mt-0 md:w-1/4 md:text-right space-y-2 text-sm text-slate-600 flex flex-col items-start md:items-end">
                  {resumeData.email && <div className="flex items-center gap-2"><span className="text-slate-400"><Mail className="w-3 h-3"/></span> <SafeRender>{resumeData.email}</SafeRender></div>}
                  {resumeData.phone && <div className="flex items-center gap-2"><span className="text-slate-400"><Phone className="w-3 h-3"/></span> <SafeRender>{resumeData.phone}</SafeRender></div>}
                  {resumeData.linkedin && <div className="flex items-center gap-2"><span className="text-slate-400"><Linkedin className="w-3 h-3"/></span> <SafeRender>{resumeData.linkedin.replace(/(^\w+:|^)\/\//, '')}</SafeRender></div>}
                  {resumeData.portfolio && <div className="flex items-center gap-2"><span className="text-slate-400"><LinkIcon className="w-3 h-3"/></span> <SafeRender>{resumeData.portfolio.replace(/(^\w+:|^)\/\//, '')}</SafeRender></div>}
                  <div className="flex items-center gap-2"><span className="text-slate-400"><MapPin className="w-3 h-3"/></span> Global</div>
                </div>
              </div>
              <div className="grid grid-cols-12 gap-10">
                <div className="col-span-8 space-y-8">
                  <section>
                    <h3 className={`${getSizeClass('h3')} font-bold uppercase border-b-2 ${activeTheme.border} pb-2 mb-6 text-slate-900 tracking-wider flex items-center gap-2`}><Briefcase className="w-4 h-4"/> Experience</h3>
                    <div className={`relative border-l-2 border-slate-100 ml-2 ${getSpacingClass()}`}>
                      {(resumeData.experience || []).map((exp, idx) => (
                        <div key={exp.id} className="relative pl-6 pb-4 break-inside-avoid">
                          <div className={`absolute -left-[7px] top-1.5 w-3.5 h-3.5 rounded-full border-2 border-white ${activeTheme.bg} shadow-sm`}></div>
                          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-baseline mb-1">
                            <h4 className="font-bold text-slate-900 text-lg"><SafeRender>{exp.role}</SafeRender></h4>
                            <span className="text-xs font-semibold text-slate-500 bg-slate-50 px-2 py-1 rounded whitespace-nowrap mt-1 sm:mt-0 border border-slate-100"><SafeRender>{exp.duration}</SafeRender></span>
                          </div>
                          <p className={`${getSizeClass('text')} ${activeTheme.primary} font-bold mb-2 uppercase tracking-wide`}><SafeRender>{exp.company}</SafeRender></p>
                          <div className={`${getSizeClass('text')} text-slate-600`}>{renderDetails(exp.details)}</div>
                        </div>
                      ))}
                    </div>
                  </section>
                  {resumeData.projects && resumeData.projects.length > 0 && (
                      <section>
                        <h3 className={`${getSizeClass('h3')} font-bold uppercase border-b-2 ${activeTheme.border} pb-2 mb-6 text-slate-900 tracking-wider flex items-center gap-2`}><FolderKanban className="w-4 h-4"/> Key Projects</h3>
                        <div className={`relative border-l-2 border-slate-100 ml-2 ${getSpacingClass()}`}>
                          {(resumeData.projects || []).map((proj, idx) => (
                            <div key={proj.id} className="relative pl-6 pb-4 break-inside-avoid">
                              <div className={`absolute -left-[5px] top-2 w-2.5 h-2.5 rounded-full ${activeTheme.bg} shadow-sm`}></div>
                              <h4 className="font-bold text-slate-900 text-md"><SafeRender>{proj.name}</SafeRender></h4>
                              <p className={`text-sm text-slate-500 font-semibold mb-2 italic`}><SafeRender>{proj.role}</SafeRender></p>
                              <div className={`${getSizeClass('text')} text-slate-600`}>{renderDetails(proj.details)}</div>
                            </div>
                          ))}
                        </div>
                      </section>
                  )}
                </div>
                <div className={`col-span-4 ${getSpacingClass()} space-y-8`}>
                  <section className="break-inside-avoid">
                    <h3 className={`${getSizeClass('h3')} font-bold uppercase border-b-2 ${activeTheme.border} pb-2 mb-4 text-slate-900 tracking-wider flex items-center gap-2`}><Star className="w-4 h-4"/> Skills</h3>
                    <div className="flex flex-wrap gap-2">
                      {(resumeData.skills || '').split(',').map((s,i) => { const trimmed = s.trim(); if (!trimmed) return null; return (<span key={i} className={`px-3 py-1 bg-white border border-slate-200 text-xs font-medium rounded-full text-slate-700 shadow-sm`}><SafeRender>{trimmed}</SafeRender></span>); })}
                    </div>
                  </section>
                  <section className="break-inside-avoid">
                    <h3 className={`${getSizeClass('h3')} font-bold uppercase border-b-2 ${activeTheme.border} pb-2 mb-4 text-slate-900 tracking-wider flex items-center gap-2`}><GraduationCap className="w-4 h-4"/> Education</h3>
                    <div className="space-y-4">
                      {(resumeData.education || []).map(edu => (
                        <div key={edu.id} className="pb-2">
                          <h4 className="font-bold text-slate-900 text-sm leading-tight"><SafeRender>{edu.degree}</SafeRender></h4>
                          <p className="text-xs text-slate-600 mt-1 font-medium"><SafeRender>{edu.school}</SafeRender></p>
                          <p className="text-xs text-slate-400 mt-0.5"><SafeRender>{edu.year}</SafeRender></p>
                        </div>
                      ))}
                    </div>
                  </section>
                  {resumeData.certifications && resumeData.certifications.length > 0 && (
                    <section className="break-inside-avoid">
                      <h3 className={`${getSizeClass('h3')} font-bold uppercase border-b-2 ${activeTheme.border} pb-2 mb-4 text-slate-900 tracking-wider flex items-center gap-2`}><Award className="w-4 h-4"/> Certifications</h3>
                      <div className="space-y-3">
                        {(resumeData.certifications || []).map(cert => (
                          <div key={cert.id} className="bg-slate-50 p-3 rounded border border-slate-100">
                            <h4 className="font-bold text-slate-800 text-xs leading-tight"><SafeRender>{cert.name}</SafeRender></h4>
                            <div className="flex justify-between text-[10px] text-slate-500 mt-1"><span><SafeRender>{cert.issuer}</SafeRender></span><span><SafeRender>{cert.year}</SafeRender></span></div>
                          </div>
                        ))}
                      </div>
                    </section>
                  )}
                  {resumeData.languages && resumeData.languages.length > 0 && (
                    <section className="break-inside-avoid">
                      <h3 className={`${getSizeClass('h3')} font-bold uppercase border-b-2 ${activeTheme.border} pb-2 mb-4 text-slate-900 tracking-wider flex items-center gap-2`}><Languages className="w-4 h-4"/> Languages</h3>
                      <div className="space-y-2">
                        {(resumeData.languages || []).map(lang => (
                          <div key={lang.id} className="flex justify-between items-center border-b border-slate-100 pb-1 last:border-0">
                            <span className="font-bold text-slate-800 text-sm"><SafeRender>{lang.name}</SafeRender></span>
                            <span className="text-xs text-slate-500 bg-slate-100 px-2 py-0.5 rounded"><SafeRender>{lang.level}</SafeRender></span>
                          </div>
                        ))}
                      </div>
                    </section>
                  )}
                </div>
              </div>
            </div>
        );
    }
    
    // 2: CLASSIC PROFESSIONAL
    if (theme.layout === 'classic') {
        return (
            <div id="cv-preview-content" style={previewStyles} className={`max-w-[210mm] mx-auto bg-white shadow-2xl min-h-[297mm] p-[20mm] text-slate-800 transition-all duration-300 print:shadow-none print:m-0 print:w-full print:max-w-none print:p-[15mm] h-auto`}>
              <div className="text-center mb-8 border-b-2 pb-6 border-slate-200">
                <RenderPhoto className="w-24 h-24 mx-auto mb-4 border border-slate-200 shadow-sm" />
                <h1 className={`${getSizeClass('h1')} font-bold uppercase tracking-tight text-slate-900 mb-2`}><SafeRender>{resumeData.fullName || "Your Name"}</SafeRender></h1>
                <h2 className={`${getSizeClass('h2')} ${activeTheme.primary} font-medium tracking-wide mb-4`}><SafeRender>{resumeData.title || "Professional Title"}</SafeRender></h2>
                <div className="flex flex-wrap justify-center items-center gap-x-4 gap-y-2 text-sm text-slate-600">
                  {resumeData.email && <span><SafeRender>{resumeData.email}</SafeRender></span>}
                  {resumeData.phone && <span>• <SafeRender>{resumeData.phone}</SafeRender></span>}
                  {resumeData.linkedin && <span>• <SafeRender>{resumeData.linkedin.replace(/(^\w+:|^)\/\//, '')}</SafeRender></span>}
                  {resumeData.portfolio && <span>• <SafeRender>{resumeData.portfolio.replace(/(^\w+:|^)\/\//, '')}</SafeRender></span>}
                </div>
              </div>
              
              <div className={`space-y-8 ${getSpacingClass()}`}>
                {resumeData.summary && (
                  <section>
                    <h3 className={`${getSizeClass('h3')} font-bold uppercase border-b-2 ${activeTheme.border} pb-1 mb-4 text-slate-900 tracking-wider`}>Professional Summary</h3>
                    <p className={`${getSizeClass('text')} text-slate-700 leading-relaxed`}><SafeRender>{resumeData.summary}</SafeRender></p>
                  </section>
                )}

<section>
                  <h3 className={`${getSizeClass('h3')} font-bold uppercase border-b-2 ${activeTheme.border} pb-1 mb-4 text-slate-900 tracking-wider`}>Professional Experience</h3>
                  <div className="space-y-6">
                    {(resumeData.experience || []).map((exp, idx) => (
                      <div key={exp.id} className="break-inside-avoid">
                        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-baseline mb-1">
                          <h4 className="font-bold text-slate-900 text-lg"><SafeRender>{exp.role}</SafeRender></h4>
                          <span className="text-sm font-bold text-slate-500"><SafeRender>{exp.duration}</SafeRender></span>
                        </div>
                        <p className={`${getSizeClass('text')} ${activeTheme.primary} font-bold mb-2`}><SafeRender>{exp.company}</SafeRender></p>
                        <div className={`${getSizeClass('text')} text-slate-700`}>{renderDetails(exp.details)}</div>
                      </div>
                    ))}
                  </div>
                </section>

{resumeData.projects && resumeData.projects.length > 0 && (
                   <section>
                      <h3 className={`${getSizeClass('h3')} font-bold uppercase border-b-2 ${activeTheme.border} pb-1 mb-4 text-slate-900 tracking-wider`}>Key Projects</h3>
                      <div className="space-y-4">
                        {(resumeData.projects || []).map((proj, idx) => (
                          <div key={proj.id} className="break-inside-avoid">
                            <h4 className="font-bold text-slate-900 text-md"><SafeRender>{proj.name}</SafeRender> <span className="font-normal text-slate-500 italic">| <SafeRender>{proj.role}</SafeRender></span></h4>
                            <div className={`${getSizeClass('text')} text-slate-700 mt-1`}>{renderDetails(proj.details)}</div>
                          </div>
                        ))}
                      </div>
                    </section>
                )}

<section>
                  <h3 className={`${getSizeClass('h3')} font-bold uppercase border-b-2 ${activeTheme.border} pb-1 mb-4 text-slate-900 tracking-wider`}>Core Competencies & Skills</h3>
                  <p className={`${getSizeClass('text')} text-slate-700 leading-relaxed`}><SafeRender>{resumeData.skills}</SafeRender></p>
                </section>

<div className="grid grid-cols-2 gap-8">
                    <section>
                      <h3 className={`${getSizeClass('h3')} font-bold uppercase border-b-2 ${activeTheme.border} pb-1 mb-4 text-slate-900 tracking-wider`}>Education</h3>
                      <div className="space-y-4">
                        {(resumeData.education || []).map(edu => (
                          <div key={edu.id} className="break-inside-avoid">
                            <h4 className="font-bold text-slate-900 text-sm"><SafeRender>{edu.degree}</SafeRender></h4>
                            <p className="text-sm text-slate-600"><SafeRender>{edu.school}</SafeRender>, <SafeRender>{edu.year}</SafeRender></p>
                          </div>
                        ))}
                      </div>
                    </section>

{((resumeData.certifications || []).length > 0 || (resumeData.languages || []).length > 0) && (
                        <div className="space-y-6">
                            {(resumeData.certifications || []).length > 0 && (
                                <section>
                                  <h3 className={`${getSizeClass('h3')} font-bold uppercase border-b-2 ${activeTheme.border} pb-1 mb-4 text-slate-900 tracking-wider`}>Certifications</h3>
                                  <ul className="list-disc pl-4 space-y-1">
                                    {(resumeData.certifications || []).map(cert => (
                                      <li key={cert.id} className="text-sm text-slate-700 break-inside-avoid">
                                        <strong><SafeRender>{cert.name}</SafeRender></strong>, <SafeRender>{cert.issuer}</SafeRender> (<SafeRender>{cert.year}</SafeRender>)
                                      </li>
                                    ))}
                                  </ul>
                                </section>
                            )}
                            {(resumeData.languages || []).length > 0 && (
                                <section>
                                  <h3 className={`${getSizeClass('h3')} font-bold uppercase border-b-2 ${activeTheme.border} pb-1 mb-4 text-slate-900 tracking-wider`}>Languages</h3>
                                  <ul className="list-none space-y-1">
                                    {(resumeData.languages || []).map(lang => (
                                      <li key={lang.id} className="text-sm text-slate-700 break-inside-avoid">
                                        <strong><SafeRender>{lang.name}</SafeRender></strong>: <SafeRender>{lang.level}</SafeRender>
                                      </li>
                                    ))}
                                  </ul>
                                </section>
                            )}
                        </div>
                    )}
                </div>
              </div>
            </div>
        );
    }

// 3: EXECUTIVE MINIMAL
    if (theme.layout === 'executive') {
        return (
            <div id="cv-preview-content" style={previewStyles} className={`max-w-[210mm] mx-auto bg-white shadow-2xl min-h-[297mm] text-slate-800 transition-all duration-300 print:shadow-none print:m-0 print:w-full print:max-w-none h-auto flex flex-row`}>
              <div className={`w-1/3 ${activeTheme.light} p-[10mm] md:p-[15mm] flex flex-col gap-8`}>
                  <div>
                      <RenderPhoto className="w-24 h-24 mb-4 border-2 border-white shadow-sm" />
                      <h1 className={`${getSizeClass('h1')} font-bold uppercase tracking-tight ${activeTheme.primary} mb-2 leading-none`}><SafeRender>{resumeData.fullName || "Your Name"}</SafeRender></h1>
                      <h2 className={`text-sm font-bold tracking-widest text-slate-600 uppercase`}><SafeRender>{resumeData.title || "Professional Title"}</SafeRender></h2>
                  </div>
                  
                  <div className="space-y-3 text-sm text-slate-700">
                      {resumeData.email && <div className="break-all"><strong className="block text-xs uppercase tracking-wider mb-0.5">Email</strong><SafeRender>{resumeData.email}</SafeRender></div>}
                      {resumeData.phone && <div><strong className="block text-xs uppercase tracking-wider mb-0.5">Phone</strong><SafeRender>{resumeData.phone}</SafeRender></div>}
                      {resumeData.linkedin && <div className="break-all"><strong className="block text-xs uppercase tracking-wider mb-0.5">LinkedIn</strong><SafeRender>{resumeData.linkedin.replace(/(^\w+:|^)\/\//, '')}</SafeRender></div>}
                      {resumeData.portfolio && <div className="break-all"><strong className="block text-xs uppercase tracking-wider mb-0.5">Portfolio</strong><SafeRender>{resumeData.portfolio.replace(/(^\w+:|^)\/\//, '')}</SafeRender></div>}
                  </div>

<div>
                      <h3 className="text-xs font-bold uppercase tracking-wider border-b-2 border-slate-300 pb-1 mb-3">Core Skills</h3>
                      <div className="flex flex-col gap-1.5 text-sm text-slate-700">
                          {(resumeData.skills || '').split(',').map((s,i) => {
                            const trimmed = s.trim(); if (!trimmed) return null;
                            return <span key={i}>• <SafeRender>{trimmed}</SafeRender></span>;
                          })}
                      </div>
                  </div>

{resumeData.languages && resumeData.languages.length > 0 && (
                      <div>
                          <h3 className="text-xs font-bold uppercase tracking-wider border-b-2 border-slate-300 pb-1 mb-3">Languages</h3>
                          <div className="flex flex-col gap-2 text-sm text-slate-700">
                              {(resumeData.languages || []).map((l,i) => (
                                  <div key={i}><strong><SafeRender>{l.name}</SafeRender></strong><br/><span className="text-xs text-slate-500"><SafeRender>{l.level}</SafeRender></span></div>
                              ))}
                          </div>
                      </div>
                  )}
                  
                  {resumeData.education && resumeData.education.length > 0 && (
                      <div>
                          <h3 className="text-xs font-bold uppercase tracking-wider border-b-2 border-slate-300 pb-1 mb-3">Education</h3>
                          <div className="flex flex-col gap-3 text-sm text-slate-700">
                              {(resumeData.education || []).map((edu,i) => (
                                  <div key={i}><strong className="leading-tight block"><SafeRender>{edu.degree}</SafeRender></strong><span className="text-xs text-slate-600 block mt-0.5"><SafeRender>{edu.school}</SafeRender></span><span className="text-xs text-slate-500"><SafeRender>{edu.year}</SafeRender></span></div>
                              ))}
                          </div>
                      </div>
                  )}
              </div>

<div className={`w-2/3 p-[10mm] md:p-[15mm] space-y-8 ${getSpacingClass()}`}>
                  {resumeData.summary && (
                      <section>
                          <h3 className={`${getSizeClass('h3')} font-bold uppercase tracking-widest ${activeTheme.primary} mb-3`}>Profile</h3>
                          <p className={`${getSizeClass('text')} text-slate-700 leading-relaxed`}><SafeRender>{resumeData.summary}</SafeRender></p>
                      </section>
                  )}

<section>
                      <h3 className={`${getSizeClass('h3')} font-bold uppercase tracking-widest ${activeTheme.primary} mb-4`}>Experience</h3>
                      <div className="space-y-6">
                        {(resumeData.experience || []).map((exp, idx) => (
                          <div key={exp.id} className="break-inside-avoid">
                            <h4 className="font-bold text-slate-900 text-lg"><SafeRender>{exp.role}</SafeRender></h4>
                            <div className="flex justify-between items-center text-sm font-semibold text-slate-500 mb-2">
                                <span><SafeRender>{exp.company}</SafeRender></span>
                                <span><SafeRender>{exp.duration}</SafeRender></span>
                            </div>
                            <div className={`${getSizeClass('text')} text-slate-700`}>{renderDetails(exp.details)}</div>
                          </div>
                        ))}
                      </div>
                  </section>

{resumeData.projects && resumeData.projects.length > 0 && (
                      <section>
                          <h3 className={`${getSizeClass('h3')} font-bold uppercase tracking-widest ${activeTheme.primary} mb-4`}>Key Projects</h3>
                          <div className="space-y-5">
                            {(resumeData.projects || []).map((proj, idx) => (
                              <div key={proj.id} className="break-inside-avoid">
                                <h4 className="font-bold text-slate-900 text-md"><SafeRender>{proj.name}</SafeRender></h4>
                                <p className="text-sm font-semibold text-slate-500 mb-1"><SafeRender>{proj.role}</SafeRender></p>
                                <div className={`${getSizeClass('text')} text-slate-700`}>{renderDetails(proj.details)}</div>
                              </div>
                            ))}
                          </div>
                      </section>
                  )}

{resumeData.certifications && resumeData.certifications.length > 0 && (
                      <section>
                          <h3 className={`${getSizeClass('h3')} font-bold uppercase tracking-widest ${activeTheme.primary} mb-4`}>Certifications</h3>
                          <div className="space-y-2">
                            {(resumeData.certifications || []).map((cert, idx) => (
                              <div key={cert.id} className="break-inside-avoid text-sm">
                                <strong><SafeRender>{cert.name}</SafeRender></strong> — <span className="text-slate-600"><SafeRender>{cert.issuer}</SafeRender> (<SafeRender>{cert.year}</SafeRender>)</span>
                              </div>
                            ))}
                          </div>
                      </section>
                  )}
              </div>
            </div>
        );
    }

// 4: MINIMALIST
    if (theme.layout === 'minimalist') {
        return (
            <div id="cv-preview-content" style={previewStyles} className={`max-w-[210mm] mx-auto bg-white shadow-2xl min-h-[297mm] p-[20mm] text-slate-800 transition-all duration-300 print:shadow-none print:m-0 print:w-full print:max-w-none print:p-[15mm] h-auto`}>
              <div className="flex flex-col items-center text-center mb-10 pb-6 border-b border-slate-200">
                <RenderPhoto className="w-20 h-20 mb-4 grayscale" />
                <h1 className={`${getSizeClass('h1')} font-bold tracking-widest text-slate-900 mb-1 uppercase`}><SafeRender>{resumeData.fullName || "Your Name"}</SafeRender></h1>
                <h2 className={`${getSizeClass('text')} ${activeTheme.primary} font-medium tracking-[0.2em] uppercase mb-4`}><SafeRender>{resumeData.title || "Professional Title"}</SafeRender></h2>
                <div className="flex flex-wrap justify-center gap-x-6 gap-y-1 text-xs text-slate-500 uppercase tracking-wider">
                  {resumeData.email && <span><SafeRender>{resumeData.email}</SafeRender></span>}
                  {resumeData.phone && <span><SafeRender>{resumeData.phone}</SafeRender></span>}
                  {resumeData.linkedin && <span><SafeRender>{resumeData.linkedin.replace(/(^\w+:|^)\/\//, '')}</SafeRender></span>}
                </div>
              </div>
              
              <div className={`space-y-10 ${getSpacingClass()}`}>
                {resumeData.summary && (
                  <section className="text-center max-w-2xl mx-auto">
                    <p className={`${getSizeClass('text')} text-slate-600 leading-loose italic`}><SafeRender>{resumeData.summary}</SafeRender></p>
                  </section>
                )}

<section>
                  <h3 className={`${getSizeClass('h3')} font-bold uppercase tracking-widest text-slate-900 mb-6 text-center`}>Experience</h3>
                  <div className="space-y-8">
                    {(resumeData.experience || []).map((exp, idx) => (
                      <div key={exp.id} className="break-inside-avoid">
                        <div className="flex flex-col sm:flex-row justify-between sm:items-baseline mb-2">
                          <h4 className="font-bold text-slate-900 text-lg uppercase tracking-wide"><SafeRender>{exp.role}</SafeRender></h4>
                          <span className="text-xs font-medium text-slate-400 uppercase tracking-widest"><SafeRender>{exp.duration}</SafeRender></span>
                        </div>
                        <p className={`text-sm ${activeTheme.primary} mb-3`}><SafeRender>{exp.company}</SafeRender></p>
                        <div className={`${getSizeClass('text')} text-slate-600 leading-relaxed`}>{renderDetails(exp.details)}</div>
                      </div>
                    ))}
                  </div>
                </section>

{resumeData.projects && resumeData.projects.length > 0 && (
                   <section>
                      <h3 className={`${getSizeClass('h3')} font-bold uppercase tracking-widest text-slate-900 mb-6 text-center`}>Projects</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {(resumeData.projects || []).map((proj, idx) => (
                          <div key={proj.id} className="break-inside-avoid border border-slate-100 p-4 rounded-sm">
                            <h4 className="font-bold text-slate-900 text-md uppercase"><SafeRender>{proj.name}</SafeRender></h4>
                            <p className={`text-xs ${activeTheme.primary} mb-3`}><SafeRender>{proj.role}</SafeRender></p>
                            <div className={`${getSizeClass('text')} text-slate-600`}>{renderDetails(proj.details)}</div>
                          </div>
                        ))}
                      </div>
                    </section>
                )}

<div className="grid grid-cols-2 gap-10">
                    <section>
                      <h3 className={`${getSizeClass('h3')} font-bold uppercase tracking-widest text-slate-900 mb-4`}>Expertise</h3>
                      <div className="flex flex-wrap gap-2">
                          {(resumeData.skills || '').split(',').map((s,i) => { 
                              const trimmed = s.trim(); if (!trimmed) return null; 
                              return (<span key={i} className={`px-2 py-1 bg-slate-50 text-xs font-medium text-slate-600 border border-slate-100`}><SafeRender>{trimmed}</SafeRender></span>); 
                          })}
                      </div>
                    </section>

<section>
                      <h3 className={`${getSizeClass('h3')} font-bold uppercase tracking-widest text-slate-900 mb-4`}>Education</h3>
                      <div className="space-y-4">
                        {(resumeData.education || []).map(edu => (
                          <div key={edu.id} className="break-inside-avoid">
                            <h4 className="font-bold text-slate-900 text-sm"><SafeRender>{edu.degree}</SafeRender></h4>
                            <p className="text-sm text-slate-500"><SafeRender>{edu.school}</SafeRender> <span className="text-slate-300">|</span> <SafeRender>{edu.year}</SafeRender></p>
                          </div>
                        ))}
                      </div>
                    </section>
                </div>
              </div>
            </div>
        );
    }

// 5: CREATIVE (Bold Header Banner)
    if (theme.layout === 'creative') {
        return (
            <div id="cv-preview-content" style={previewStyles} className={`max-w-[210mm] mx-auto bg-white shadow-2xl min-h-[297mm] text-slate-800 transition-all duration-300 print:shadow-none print:m-0 print:w-full print:max-w-none h-auto`}>
              <div className={`${activeTheme.bg} p-[15mm] text-white flex flex-col md:flex-row items-center gap-8 break-inside-avoid`}>
                <RenderPhoto className="w-32 h-32 border-4 border-white/30 shadow-lg" />
                <div className="flex-1 text-center md:text-left">
                  <h1 className={`${getSizeClass('h1')} font-bold tracking-tight mb-2`}><SafeRender>{resumeData.fullName || "Your Name"}</SafeRender></h1>
                  <h2 className={`${getSizeClass('h2')} font-medium opacity-90 mb-4`}><SafeRender>{resumeData.title || "Professional Title"}</SafeRender></h2>
                  <div className="flex flex-wrap justify-center md:justify-start gap-4 text-sm opacity-80 font-medium">
                    {resumeData.email && <div className="flex items-center gap-1"><Mail className="w-3 h-3"/> <SafeRender>{resumeData.email}</SafeRender></div>}
                    {resumeData.phone && <div className="flex items-center gap-1"><Phone className="w-3 h-3"/> <SafeRender>{resumeData.phone}</SafeRender></div>}
                    {resumeData.linkedin && <div className="flex items-center gap-1"><Linkedin className="w-3 h-3"/> <SafeRender>{resumeData.linkedin.replace(/(^\w+:|^)\/\//, '')}</SafeRender></div>}
                  </div>
                </div>
              </div>
              
              <div className="p-[15mm] grid grid-cols-12 gap-10">
                <div className="col-span-8 space-y-8">
                  {resumeData.summary && (
                    <section>
                      <h3 className={`${getSizeClass('h3')} font-bold uppercase text-slate-400 tracking-wider mb-2`}>About Me</h3>
                      <p className={`${getSizeClass('text')} text-slate-700 leading-relaxed font-medium`}><SafeRender>{resumeData.summary}</SafeRender></p>
                    </section>
                  )}

<section>
                    <h3 className={`${getSizeClass('h3')} font-bold uppercase text-slate-400 tracking-wider mb-4`}>Experience</h3>
                    <div className="space-y-6">
                      {(resumeData.experience || []).map((exp, idx) => (
                        <div key={exp.id} className="break-inside-avoid relative pl-5 border-l-2 border-slate-200">
                          <div className={`absolute -left-[7px] top-1.5 w-3 h-3 rounded-full ${activeTheme.bg}`}></div>
                          <h4 className="font-bold text-slate-900 text-lg"><SafeRender>{exp.role}</SafeRender></h4>
                          <p className={`text-sm ${activeTheme.primary} font-bold mb-2`}><SafeRender>{exp.company}</SafeRender> <span className="text-slate-400 font-normal">| <SafeRender>{exp.duration}</SafeRender></span></p>
                          <div className={`${getSizeClass('text')} text-slate-600`}>{renderDetails(exp.details)}</div>
                        </div>
                      ))}
                    </div>
                  </section>

{resumeData.projects && resumeData.projects.length > 0 && (
                      <section>
                        <h3 className={`${getSizeClass('h3')} font-bold uppercase text-slate-400 tracking-wider mb-4`}>Projects</h3>
                        <div className="space-y-4">
                          {(resumeData.projects || []).map((proj, idx) => (
                            <div key={proj.id} className="break-inside-avoid bg-slate-50 p-4 rounded-xl border border-slate-100">
                              <h4 className="font-bold text-slate-900 text-md"><SafeRender>{proj.name}</SafeRender></h4>
                              <p className={`text-sm ${activeTheme.primary} mb-2`}><SafeRender>{proj.role}</SafeRender></p>
                              <div className={`${getSizeClass('text')} text-slate-600`}>{renderDetails(proj.details)}</div>
                            </div>
                          ))}
                        </div>
                      </section>
                  )}
                </div>

<div className={`col-span-4 ${getSpacingClass()} space-y-8`}>
                  <section className="break-inside-avoid">
                    <h3 className={`${getSizeClass('h3')} font-bold uppercase text-slate-400 tracking-wider mb-4`}>Skills</h3>
                    <div className="flex flex-wrap gap-2">
                      {(resumeData.skills || '').split(',').map((s,i) => { 
                          const trimmed = s.trim(); if (!trimmed) return null; 
                          return (<span key={i} className={`px-3 py-1.5 ${activeTheme.light} ${activeTheme.primary} font-bold text-xs rounded-lg`}><SafeRender>{trimmed}</SafeRender></span>); 
                      })}
                    </div>
                  </section>

<section className="break-inside-avoid">
                    <h3 className={`${getSizeClass('h3')} font-bold uppercase text-slate-400 tracking-wider mb-4`}>Education</h3>
                    <div className="space-y-4">
                      {(resumeData.education || []).map(edu => (
                        <div key={edu.id} className="break-inside-avoid bg-slate-50 p-3 rounded-lg">
                          <h4 className="font-bold text-slate-900 text-sm leading-tight"><SafeRender>{edu.degree}</SafeRender></h4>
                          <p className="text-xs text-slate-600 mt-1 font-medium"><SafeRender>{edu.school}</SafeRender></p>
                          <p className={`text-xs ${activeTheme.primary} mt-0.5 font-bold`}><SafeRender>{edu.year}</SafeRender></p>
                        </div>
                      ))}
                    </div>
                  </section>

{(resumeData.certifications || []).length > 0 && (
                      <section className="break-inside-avoid">
                        <h3 className={`${getSizeClass('h3')} font-bold uppercase text-slate-400 tracking-wider mb-4`}>Certificates</h3>
                        <div className="space-y-2">
                          {(resumeData.certifications || []).map((cert, idx) => (
                            <div key={cert.id} className="break-inside-avoid text-sm">
                              <span className="block font-bold text-slate-800"><SafeRender>{cert.name}</SafeRender></span>
                              <span className="text-xs text-slate-500"><SafeRender>{cert.issuer}</SafeRender> • <SafeRender>{cert.year}</SafeRender></span>
                            </div>
                          ))}
                        </div>
                      </section>
                  )}
                </div>
              </div>
            </div>
        );
    }

// 6: TECHNICAL (Dense, Highly Structured)
    if (theme.layout === 'technical') {
        return (
            <div id="cv-preview-content" style={previewStyles} className={`max-w-[210mm] mx-auto bg-white shadow-2xl min-h-[297mm] p-[15mm] text-slate-800 transition-all duration-300 print:shadow-none print:m-0 print:w-full print:max-w-none print:p-[10mm] h-auto`}>
              <div className="flex justify-between items-start border-b-[3px] border-slate-800 pb-4 mb-4">
                  <div>
                      <h1 className={`${getSizeClass('h1')} font-black uppercase tracking-tighter text-slate-900 mb-1 leading-none`}><SafeRender>{resumeData.fullName || "Your Name"}</SafeRender></h1>
                      <h2 className={`${getSizeClass('h2')} text-slate-600 font-bold uppercase tracking-widest`}><SafeRender>{resumeData.title || "Professional Title"}</SafeRender></h2>
                  </div>
                  <RenderPhoto className="w-20 h-20 shadow-sm border border-slate-300 ml-4" />
              </div>
              
              <div className="flex flex-wrap gap-x-6 gap-y-2 text-sm font-bold text-slate-700 bg-slate-100 p-2 px-4 rounded mb-6">
                  {resumeData.email && <div><SafeRender>{resumeData.email}</SafeRender></div>}
                  {resumeData.phone && <div><SafeRender>{resumeData.phone}</SafeRender></div>}
                  {resumeData.linkedin && <div><SafeRender>{resumeData.linkedin.replace(/(^\w+:|^)\/\//, '')}</SafeRender></div>}
                  {resumeData.portfolio && <div><SafeRender>{resumeData.portfolio.replace(/(^\w+:|^)\/\//, '')}</SafeRender></div>}
              </div>

<div className={`space-y-6 ${getSpacingClass()}`}>
                {resumeData.summary && (
                  <section>
                    <p className={`${getSizeClass('text')} text-slate-800 font-medium`}><SafeRender>{resumeData.summary}</SafeRender></p>
                  </section>
                )}

<section>
                  <h3 className={`text-md font-black uppercase bg-slate-800 text-white px-2 py-1 mb-3`}>Technical Skills</h3>
                  <div className={`${getSizeClass('text')} text-slate-800 font-medium columns-2 md:columns-3 gap-4`}>
                      {(resumeData.skills || '').split(',').map((s,i) => { 
                          const trimmed = s.trim(); if (!trimmed) return null; 
                          return (<div key={i} className="break-inside-avoid border-b border-slate-200 py-0.5">• <SafeRender>{trimmed}</SafeRender></div>); 
                      })}
                  </div>
                </section>

<section>
                  <h3 className={`text-md font-black uppercase bg-slate-800 text-white px-2 py-1 mb-3`}>Experience</h3>
                  <div className="space-y-4">
                    {(resumeData.experience || []).map((exp, idx) => (
                      <div key={exp.id} className="break-inside-avoid">
                        <div className="flex justify-between items-end border-b border-slate-300 mb-1">
                          <h4 className="font-bold text-slate-900 text-md uppercase"><SafeRender>{exp.company}</SafeRender> <span className="text-slate-500 font-normal capitalize">— <SafeRender>{exp.role}</SafeRender></span></h4>
                          <span className="text-xs font-bold text-slate-600"><SafeRender>{exp.duration}</SafeRender></span>
                        </div>
                        <div className={`${getSizeClass('text')} text-slate-700`}>{renderDetails(exp.details)}</div>
                      </div>
                    ))}
                  </div>
                </section>

{resumeData.projects && resumeData.projects.length > 0 && (
                   <section>
                      <h3 className={`text-md font-black uppercase bg-slate-800 text-white px-2 py-1 mb-3`}>Projects</h3>
                      <div className="space-y-3">
                        {(resumeData.projects || []).map((proj, idx) => (
                          <div key={proj.id} className="break-inside-avoid">
                            <h4 className="font-bold text-slate-900 text-sm"><SafeRender>{proj.name}</SafeRender> <span className="font-normal italic text-slate-600">| <SafeRender>{proj.role}</SafeRender></span></h4>
                            <div className={`${getSizeClass('text')} text-slate-700`}>{renderDetails(proj.details)}</div>
                          </div>
                        ))}
                      </div>
                    </section>
                )}

<div className="grid grid-cols-2 gap-6">
                    <section>
                      <h3 className={`text-md font-black uppercase bg-slate-800 text-white px-2 py-1 mb-3`}>Education</h3>
                      <div className="space-y-2">
                        {(resumeData.education || []).map(edu => (
                          <div key={edu.id} className="break-inside-avoid">
                            <h4 className="font-bold text-slate-900 text-sm"><SafeRender>{edu.degree}</SafeRender></h4>
                            <p className="text-xs text-slate-600"><SafeRender>{edu.school}</SafeRender>, <SafeRender>{edu.year}</SafeRender></p>
                          </div>
                        ))}
                      </div>
                    </section>

{((resumeData.certifications || []).length > 0 || (resumeData.languages || []).length > 0) && (
                        <div>
                            {(resumeData.certifications || []).length > 0 && (
                                <section className="mb-4">
                                  <h3 className={`text-md font-black uppercase bg-slate-800 text-white px-2 py-1 mb-3`}>Certifications</h3>
                                  <ul className="list-square pl-4 space-y-0.5">
                                    {(resumeData.certifications || []).map(cert => (
                                      <li key={cert.id} className="text-xs text-slate-800 break-inside-avoid">
                                        <strong><SafeRender>{cert.name}</SafeRender></strong>, <SafeRender>{cert.issuer}</SafeRender> (<SafeRender>{cert.year}</SafeRender>)
                                      </li>
                                    ))}
                                  </ul>
                                </section>
                            )}
                        </div>
                    )}
                </div>
              </div>
            </div>
        );
    }

// 7: TIMELINE
    if (theme.layout === 'timeline') {
        return (
            <div id="cv-preview-content" style={previewStyles} className={`max-w-[210mm] mx-auto bg-white shadow-2xl min-h-[297mm] p-[15mm] md:p-[20mm] text-slate-800 transition-all duration-300 print:shadow-none print:m-0 print:w-full print:max-w-none print:p-[15mm] h-auto`}>
              <div className="flex flex-col md:flex-row items-center border-b-4 border-slate-900 pb-6 mb-8 gap-6">
                <RenderPhoto className="w-28 h-28 shadow-md" />
                <div className="flex-1 text-center md:text-left">
                  <h1 className={`${getSizeClass('h1')} font-black text-slate-900 tracking-tight mb-1`}><SafeRender>{resumeData.fullName || "Your Name"}</SafeRender></h1>
                  <h2 className={`${getSizeClass('text')} font-bold uppercase tracking-widest ${activeTheme.primary}`}><SafeRender>{resumeData.title || "Professional Title"}</SafeRender></h2>
                </div>
                <div className="text-sm text-slate-600 font-medium space-y-1 text-center md:text-right border-l-2 border-slate-200 pl-6">
                  {resumeData.email && <div><SafeRender>{resumeData.email}</SafeRender></div>}
                  {resumeData.phone && <div><SafeRender>{resumeData.phone}</SafeRender></div>}
                  {resumeData.linkedin && <div><SafeRender>{resumeData.linkedin.replace(/(^\w+:|^)\/\//, '')}</SafeRender></div>}
                  {resumeData.portfolio && <div><SafeRender>{resumeData.portfolio.replace(/(^\w+:|^)\/\//, '')}</SafeRender></div>}
                </div>
              </div>

<div className="grid grid-cols-12 gap-8">
                <div className="col-span-4 space-y-8">
                  {resumeData.summary && (
                    <section>
                      <h3 className={`text-sm font-bold uppercase tracking-widest text-slate-900 mb-3 border-b border-slate-200 pb-1`}>Profile</h3>
                      <p className={`text-sm text-slate-600 leading-relaxed`}><SafeRender>{resumeData.summary}</SafeRender></p>
                    </section>
                  )}

<section>
                    <h3 className={`text-sm font-bold uppercase tracking-widest text-slate-900 mb-3 border-b border-slate-200 pb-1`}>Skills</h3>
                    <div className="flex flex-col gap-1.5">
                      {(resumeData.skills || '').split(',').map((s,i) => { 
                          const trimmed = s.trim(); if (!trimmed) return null; 
                          return (<div key={i} className={`text-sm font-medium text-slate-700`}>✓ <SafeRender>{trimmed}</SafeRender></div>); 
                      })}
                    </div>
                  </section>

{resumeData.languages && resumeData.languages.length > 0 && (
                    <section>
                      <h3 className={`text-sm font-bold uppercase tracking-widest text-slate-900 mb-3 border-b border-slate-200 pb-1`}>Languages</h3>
                      <div className="space-y-2">
                        {(resumeData.languages || []).map(lang => (
                          <div key={lang.id} className="text-sm">
                            <strong className="block text-slate-800"><SafeRender>{lang.name}</SafeRender></strong>
                            <span className="text-slate-500 italic"><SafeRender>{lang.level}</SafeRender></span>
                          </div>
                        ))}
                      </div>
                    </section>
                  )}
                  
                  {resumeData.certifications && resumeData.certifications.length > 0 && (
                    <section>
                      <h3 className={`text-sm font-bold uppercase tracking-widest text-slate-900 mb-3 border-b border-slate-200 pb-1`}>Certifications</h3>
                      <div className="space-y-3">
                        {(resumeData.certifications || []).map(cert => (
                          <div key={cert.id} className="text-sm">
                            <strong className="block text-slate-800 leading-tight mb-0.5"><SafeRender>{cert.name}</SafeRender></strong>
                            <span className="text-slate-600 text-xs block"><SafeRender>{cert.issuer}</SafeRender></span>
                            <span className={`text-xs font-bold ${activeTheme.primary}`}><SafeRender>{cert.year}</SafeRender></span>
                          </div>
                        ))}
                      </div>
                    </section>
                  )}
                </div>

<div className={`col-span-8 ${getSpacingClass()}`}>
                  <section>
                    <h3 className={`text-xl font-bold text-slate-900 mb-6 flex items-center gap-2`}><Briefcase className="w-5 h-5"/> Experience</h3>
                    <div className="relative border-l-2 border-slate-200 ml-3 space-y-6 pb-2">
                      {(resumeData.experience || []).map((exp, idx) => (
                        <div key={exp.id} className="relative pl-6 break-inside-avoid">
                          <div className={`absolute -left-[9px] top-1 w-4 h-4 rounded-full border-4 border-white ${activeTheme.bg}`}></div>
                          <span className={`text-xs font-bold uppercase tracking-widest ${activeTheme.primary} block mb-1`}><SafeRender>{exp.duration}</SafeRender></span>
                          <h4 className="font-bold text-slate-900 text-lg"><SafeRender>{exp.role}</SafeRender></h4>
                          <p className="text-sm font-semibold text-slate-700 mb-2"><SafeRender>{exp.company}</SafeRender></p>
                          <div className={`${getSizeClass('text')} text-slate-600`}>{renderDetails(exp.details)}</div>
                        </div>
                      ))}
                    </div>
                  </section>

{resumeData.projects && resumeData.projects.length > 0 && (
                     <section className="pt-4">
                        <h3 className={`text-xl font-bold text-slate-900 mb-6 flex items-center gap-2`}><FolderKanban className="w-5 h-5"/> Key Projects</h3>
                        <div className="relative border-l-2 border-slate-200 ml-3 space-y-6 pb-2">
                          {(resumeData.projects || []).map((proj, idx) => (
                            <div key={proj.id} className="relative pl-6 break-inside-avoid">
                              <div className={`absolute -left-[9px] top-1 w-4 h-4 rounded-full border-4 border-white bg-slate-400`}></div>
                              <h4 className="font-bold text-slate-900 text-md"><SafeRender>{proj.name}</SafeRender></h4>
                              <p className={`text-sm font-semibold ${activeTheme.primary} mb-2`}><SafeRender>{proj.role}</SafeRender></p>
                              <div className={`${getSizeClass('text')} text-slate-600`}>{renderDetails(proj.details)}</div>
                            </div>
                          ))}
                        </div>
                      </section>
                  )}

{resumeData.education && resumeData.education.length > 0 && (
                     <section className="pt-4 break-inside-avoid">
                        <h3 className={`text-xl font-bold text-slate-900 mb-6 flex items-center gap-2`}><GraduationCap className="w-5 h-5"/> Education</h3>
                        <div className="relative border-l-2 border-slate-200 ml-3 space-y-6 pb-2">
                          {(resumeData.education || []).map((edu, idx) => (
                            <div key={edu.id} className="relative pl-6 break-inside-avoid">
                              <div className={`absolute -left-[9px] top-1 w-4 h-4 rounded-full border-4 border-white ${activeTheme.bg}`}></div>
                              <span className={`text-xs font-bold uppercase tracking-widest ${activeTheme.primary} block mb-1`}><SafeRender>{edu.year}</SafeRender></span>
                              <h4 className="font-bold text-slate-900 text-md"><SafeRender>{edu.degree}</SafeRender></h4>
                              <p className={`text-sm text-slate-700`}><SafeRender>{edu.school}</SafeRender></p>
                            </div>
                          ))}
                        </div>
                      </section>
                  )}
                </div>
              </div>
            </div>
        );
    }
    
    // 8: ELEGANT (New)
    if (theme.layout === 'elegant') {
        return (
            <div id="cv-preview-content" style={previewStyles} className={`max-w-[210mm] mx-auto bg-white shadow-2xl min-h-[297mm] p-[20mm] text-slate-800 transition-all duration-300 print:shadow-none print:m-0 print:w-full print:max-w-none print:p-[15mm] h-auto`}>
              <div className="text-center border-b border-slate-300 pb-8 mb-8">
                <RenderPhoto className="w-24 h-24 mx-auto mb-5 shadow-sm border border-slate-200 p-1" />
                <h1 className={`${getSizeClass('h1')} font-light tracking-[0.15em] text-slate-900 mb-2 uppercase`}><SafeRender>{resumeData.fullName || "Your Name"}</SafeRender></h1>
                <h2 className={`${getSizeClass('text')} ${activeTheme.primary} font-serif italic mb-5`}><SafeRender>{resumeData.title || "Professional Title"}</SafeRender></h2>
                <div className="flex flex-wrap justify-center items-center gap-x-5 gap-y-2 text-xs text-slate-500 tracking-wider">
                  {resumeData.email && <span><SafeRender>{resumeData.email}</SafeRender></span>}
                  {resumeData.phone && <span>| <SafeRender>{resumeData.phone}</SafeRender></span>}
                  {resumeData.linkedin && <span>| <SafeRender>{resumeData.linkedin.replace(/(^\w+:|^)\/\//, '')}</SafeRender></span>}
                  {resumeData.portfolio && <span>| <SafeRender>{resumeData.portfolio.replace(/(^\w+:|^)\/\//, '')}</SafeRender></span>}
                </div>
              </div>
              
              <div className={`space-y-10 ${getSpacingClass()}`}>
                {resumeData.summary && (
                  <section>
                    <h3 className={`${getSizeClass('h3')} font-serif italic ${activeTheme.primary} mb-3 text-center`}>Profile</h3>
                    <p className={`${getSizeClass('text')} text-slate-700 leading-relaxed text-justify`}><SafeRender>{resumeData.summary}</SafeRender></p>
                  </section>
                )}

<section>
                  <h3 className={`${getSizeClass('h3')} font-serif italic ${activeTheme.primary} mb-5 text-center`}>Experience</h3>
                  <div className="space-y-8">
                    {(resumeData.experience || []).map((exp, idx) => (
                      <div key={exp.id} className="break-inside-avoid">
                        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-baseline mb-1">
                          <h4 className="font-bold text-slate-900 text-lg tracking-wide"><SafeRender>{exp.role}</SafeRender></h4>
                          <span className="text-xs text-slate-500 tracking-widest uppercase"><SafeRender>{exp.duration}</SafeRender></span>
                        </div>
                        <p className={`text-sm text-slate-600 font-bold mb-3`}><SafeRender>{exp.company}</SafeRender></p>
                        <div className={`${getSizeClass('text')} text-slate-700 leading-relaxed`}>{renderDetails(exp.details)}</div>
                      </div>
                    ))}
                  </div>
                </section>

{resumeData.projects && resumeData.projects.length > 0 && (
                   <section>
                      <h3 className={`${getSizeClass('h3')} font-serif italic ${activeTheme.primary} mb-5 text-center`}>Selected Projects</h3>
                      <div className="space-y-6">
                        {(resumeData.projects || []).map((proj, idx) => (
                          <div key={proj.id} className="break-inside-avoid">
                            <h4 className="font-bold text-slate-900 text-md tracking-wide"><SafeRender>{proj.name}</SafeRender></h4>
                            <p className="text-sm text-slate-600 italic mb-2"><SafeRender>{proj.role}</SafeRender></p>
                            <div className={`${getSizeClass('text')} text-slate-700 leading-relaxed`}>{renderDetails(proj.details)}</div>
                          </div>
                        ))}
                      </div>
                    </section>
                )}

<div className="grid grid-cols-2 gap-10">
                    <section>
                      <h3 className={`${getSizeClass('h3')} font-serif italic ${activeTheme.primary} mb-5 text-center`}>Education</h3>
                      <div className="space-y-4 text-center">
                        {(resumeData.education || []).map(edu => (
                          <div key={edu.id} className="break-inside-avoid">
                            <h4 className="font-bold text-slate-900 text-sm"><SafeRender>{edu.degree}</SafeRender></h4>
                            <p className="text-sm text-slate-600"><SafeRender>{edu.school}</SafeRender> • <SafeRender>{edu.year}</SafeRender></p>
                          </div>
                        ))}
                      </div>
                    </section>

<section>
                      <h3 className={`${getSizeClass('h3')} font-serif italic ${activeTheme.primary} mb-5 text-center`}>Expertise</h3>
                      <p className={`${getSizeClass('text')} text-slate-700 leading-relaxed text-center`}><SafeRender>{resumeData.skills}</SafeRender></p>
                    </section>
                </div>
              </div>
            </div>
        );
    }
    
    // 9: COMPACT (New)
    if (theme.layout === 'compact') {
        return (
            <div id="cv-preview-content" style={previewStyles} className={`max-w-[210mm] mx-auto bg-white shadow-2xl min-h-[297mm] p-[10mm] md:p-[15mm] text-slate-800 transition-all duration-300 print:shadow-none print:m-0 print:w-full print:max-w-none h-auto flex flex-col md:flex-row gap-6`}>
              {/* Left Column (Narrow) */}
              <div className="w-full md:w-[30%] space-y-6 border-b md:border-b-0 md:border-r border-slate-200 pb-6 md:pb-0 pr-0 md:pr-4 shrink-0">
                  <div>
                      <RenderPhoto className="w-full aspect-square mb-4 shadow-sm" />
                      <h1 className={`${getSizeClass('h2')} font-bold text-slate-900 leading-tight mb-1 uppercase`}><SafeRender>{resumeData.fullName || "Your Name"}</SafeRender></h1>
                      <h2 className={`text-sm ${activeTheme.primary} font-bold mb-4`}><SafeRender>{resumeData.title || "Professional Title"}</SafeRender></h2>
                      <div className="space-y-1.5 text-xs text-slate-600 break-all">
                          {resumeData.email && <div><SafeRender>{resumeData.email}</SafeRender></div>}
                          {resumeData.phone && <div><SafeRender>{resumeData.phone}</SafeRender></div>}
                          {resumeData.linkedin && <div><SafeRender>{resumeData.linkedin.replace(/(^\w+:|^)\/\//, '')}</SafeRender></div>}
                          {resumeData.portfolio && <div><SafeRender>{resumeData.portfolio.replace(/(^\w+:|^)\/\//, '')}</SafeRender></div>}
                      </div>
                  </div>

<div>
                      <h3 className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-2 border-b border-slate-200 pb-1">Skills</h3>
                      <div className="flex flex-wrap gap-1 text-xs">
                          {(resumeData.skills || '').split(',').map((s,i) => {
                            const trimmed = s.trim(); if (!trimmed) return null;
                            return <span key={i} className="bg-slate-100 text-slate-700 px-1.5 py-0.5 rounded">{trimmed}</span>;
                          })}
                      </div>
                  </div>
                  
                  {resumeData.education && resumeData.education.length > 0 && (
                      <div>
                          <h3 className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-2 border-b border-slate-200 pb-1">Education</h3>
                          <div className="space-y-3 text-xs text-slate-700">
                              {(resumeData.education || []).map((edu,i) => (
                                  <div key={i}><strong className="block text-slate-900"><SafeRender>{edu.degree}</SafeRender></strong><span className="text-slate-600 block"><SafeRender>{edu.school}</SafeRender></span><span className="text-slate-500 italic"><SafeRender>{edu.year}</SafeRender></span></div>
                              ))}
                          </div>
                      </div>
                  )}

{resumeData.certifications && resumeData.certifications.length > 0 && (
                      <div>
                          <h3 className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-2 border-b border-slate-200 pb-1">Certs</h3>
                          <div className="space-y-2 text-xs text-slate-700">
                              {(resumeData.certifications || []).map((cert,i) => (
                                  <div key={i}><strong><SafeRender>{cert.name}</SafeRender></strong><br/><span className="text-slate-500"><SafeRender>{cert.year}</SafeRender></span></div>
                              ))}
                          </div>
                      </div>
                  )}
                  
                  {resumeData.languages && resumeData.languages.length > 0 && (
                      <div>
                          <h3 className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-2 border-b border-slate-200 pb-1">Languages</h3>
                          <div className="space-y-1 text-xs text-slate-700">
                              {(resumeData.languages || []).map((l,i) => (
                                  <div key={i} className="flex justify-between"><strong><SafeRender>{l.name}</SafeRender></strong><span className="text-slate-500"><SafeRender>{l.level}</SafeRender></span></div>
                              ))}
                          </div>
                      </div>
                  )}
              </div>

{/* Right Column (Wide) */}
              <div className={`flex-1 space-y-6 ${getSpacingClass()}`}>
                  {resumeData.summary && (
                      <section>
                          <h3 className={`${getSizeClass('h3')} font-bold uppercase text-slate-900 mb-2`}>Summary</h3>
                          <p className={`${getSizeClass('text')} text-slate-700 leading-relaxed`}><SafeRender>{resumeData.summary}</SafeRender></p>
                      </section>
                  )}

<section>
                      <h3 className={`${getSizeClass('h3')} font-bold uppercase text-slate-900 mb-3`}>Experience</h3>
                      <div className="space-y-4">
                        {(resumeData.experience || []).map((exp, idx) => (
                          <div key={exp.id} className="break-inside-avoid">
                            <div className="flex justify-between items-baseline mb-0.5">
                                <h4 className="font-bold text-slate-900 text-md"><SafeRender>{exp.role}</SafeRender></h4>
                                <span className="text-xs font-bold text-slate-500 whitespace-nowrap ml-2"><SafeRender>{exp.duration}</SafeRender></span>
                            </div>
                            <p className={`text-sm ${activeTheme.primary} font-bold mb-1.5`}><SafeRender>{exp.company}</SafeRender></p>
                            <div className={`${getSizeClass('text')} text-slate-700`}>{renderDetails(exp.details)}</div>
                          </div>
                        ))}
                      </div>
                  </section>

{resumeData.projects && resumeData.projects.length > 0 && (
                      <section>
                          <h3 className={`${getSizeClass('h3')} font-bold uppercase text-slate-900 mb-3`}>Key Projects</h3>
                          <div className="space-y-4">
                            {(resumeData.projects || []).map((proj, idx) => (
                              <div key={proj.id} className="break-inside-avoid">
                                <h4 className="font-bold text-slate-900 text-sm"><SafeRender>{proj.name}</SafeRender> <span className="font-normal text-slate-500 italic ml-1">| <SafeRender>{proj.role}</SafeRender></span></h4>
                                <div className={`${getSizeClass('text')} text-slate-700 mt-1`}>{renderDetails(proj.details)}</div>
                              </div>
                            ))}
                          </div>
                      </section>
                  )}
              </div>
            </div>
        );
    }
    
    return null;
  };

const ToolsContent = () => (
    <div className="max-w-3xl mx-auto space-y-6 pb-20">
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 overflow-hidden relative">
         <div className="absolute top-0 right-0 bg-purple-600 text-white text-[10px] font-bold px-3 py-1 rounded-bl-lg">NEW</div>
         <div className="flex items-start justify-between mb-4">
            <div className="flex items-center gap-3">
                <div className="p-2 bg-purple-100 rounded-lg text-purple-700"><Target className="w-5 h-5"/></div>
                <div><h3 className="font-bold text-slate-800">ATS Keyword Injector</h3><p className="text-xs text-slate-500">Beat resume screening bots.</p></div>
            </div>
         </div>
         <div className="bg-slate-50 p-4 rounded-lg border border-slate-200">
             <label className="text-xs font-semibold text-slate-500 mb-2 block">Target Job Description</label>
             <textarea className="w-full h-24 p-3 text-xs border rounded bg-white mb-3 focus:ring-2 focus:ring-purple-200 outline-none" placeholder="Paste the exact job description here to extract keywords..." value={jobDescription} onChange={e => setJobDescription(e.target.value)} />
             <div className="flex justify-end">
                 <button onClick={handleATSOptimize} disabled={aiLoading.type === 'ats'} className="bg-purple-600 text-white px-4 py-2 rounded text-sm hover:bg-purple-700 disabled:opacity-50 flex items-center gap-2">
                     {aiLoading.type === 'ats' ? <Loader2 className="w-4 h-4 animate-spin"/> : <Sparkles className="w-4 h-4"/>} Analyze Resume vs Job
                 </button>
             </div>
             
             {atsOptimization && (
                 <div className="mt-4 pt-4 border-t border-slate-200 animate-in fade-in">
                     <h4 className="text-sm font-bold text-slate-800 mb-2">Missing Keywords to Add:</h4>
                     <div className="flex flex-wrap gap-2 mb-4">
                         {(atsOptimization.missingKeywords || []).map((kw, i) => (
                             <span key={i} className="px-2 py-1 bg-white border border-purple-200 text-purple-700 text-xs rounded-md shadow-sm">{kw}</span>
                         ))}
                     </div>
                     <h4 className="text-sm font-bold text-slate-800 mb-2">Suggested ATS-Optimized Summary:</h4>
                     <div className="bg-white p-3 rounded border text-sm text-slate-700 mb-3">{atsOptimization.optimizedSummary}</div>
                     <button onClick={applyAtsSummary} className="text-xs text-purple-600 font-bold hover:underline">Apply to my Resume Summary</button>
                 </div>
             )}
         </div>
      </div>

<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
         <div className="flex items-center gap-3 mb-4">
            <div className="p-2 bg-indigo-100 rounded-lg text-indigo-700"><Wand2 className="w-5 h-5"/></div>
            <div><h3 className="font-bold text-slate-800">Global Actions</h3><p className="text-xs text-slate-500">Transform your entire resume.</p></div>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="p-4 bg-slate-50 rounded-lg border border-slate-200 flex flex-col justify-between">
               <div>
                   <label className="text-xs font-semibold text-slate-500 mb-2 block">Grammar & Tone Check</label>
                   <p className="text-[10px] text-slate-400 mb-3">Scans full resume to fix typos and professionalize tone.</p>
               </div>
               <button onClick={handleGlobalGrammarCheck} disabled={aiLoading.type === 'grammar'} className="w-full bg-slate-800 text-white px-3 py-2 rounded text-sm hover:bg-slate-900 disabled:opacity-50 flex items-center justify-center gap-2">
                   {aiLoading.type === 'grammar' ? <Loader2 className="w-4 h-4 animate-spin"/> : <CheckCircle className="w-4 h-4"/>} Polish Entire CV
               </button>
            </div>
            
            <div className="p-4 bg-slate-50 rounded-lg border border-slate-200 flex flex-col justify-between">
               <div>
                   <label className="text-xs font-semibold text-slate-500 mb-2 block">Translate</label>
                   <select className="w-full p-2 border rounded text-sm bg-white mb-3" value={targetLanguage} onChange={e => setTargetLanguage(e.target.value)}>
                      <option>Arabic</option><option>Spanish</option><option>French</option><option>German</option><option>Hindi</option>
                   </select>
               </div>
               <button onClick={handleTranslateResume} disabled={aiLoading.type === 'translate'} className="w-full bg-indigo-600 text-white px-3 py-2 rounded text-sm hover:bg-indigo-700 disabled:opacity-50 flex items-center justify-center gap-2">
                   {aiLoading.type === 'translate' ? <Loader2 className="w-4 h-4 animate-spin"/> : <Languages className="w-4 h-4"/>} Translate
               </button>
            </div>
            
            <div className="p-4 bg-slate-50 rounded-lg border border-slate-200 flex flex-col justify-between">
               <div>
                   <label className="text-xs font-semibold text-slate-500 mb-2 block">Level Up (Rewrite)</label>
                   <select className="w-full p-2 border rounded text-sm bg-white mb-3" value={targetLevel} onChange={e => setTargetLevel(e.target.value)}>
                      <option value="Senior/Executive">Senior/Executive</option><option value="Mid-Level/Manager">Mid-Level/Manager</option><option value="Technical Specialist">Technical Specialist</option><option value="Creative/Modern">Creative/Modern</option>
                   </select>
               </div>
               <button onClick={handleLevelUpResume} disabled={aiLoading.type === 'levelup'} className="w-full bg-emerald-600 text-white px-3 py-2 rounded text-sm hover:bg-emerald-700 disabled:opacity-50 flex items-center justify-center gap-2">
                   {aiLoading.type === 'levelup' ? <Loader2 className="w-4 h-4 animate-spin"/> : <ArrowUpCircle className="w-4 h-4"/>} Upgrade Tone
               </button>
            </div>
         </div>
      </div>

<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3"><div className="p-2 bg-yellow-100 rounded-lg text-yellow-700"><DollarSign className="w-5 h-5"/></div><div><h3 className="font-bold text-slate-800">Salary Estimator</h3><p className="text-xs text-slate-500">Estimate market value.</p></div></div>
            {!salaryInsights && <button onClick={handleSalaryEstimate} disabled={aiLoading.type === 'salary'} className="text-xs text-yellow-700 bg-yellow-50 px-3 py-1.5 rounded-lg border border-yellow-200 hover:bg-yellow-100 flex items-center gap-1">{aiLoading.type === 'salary' ? <Loader2 className="w-3 h-3 animate-spin"/> : <Sparkles className="w-3 h-3"/>} Estimate</button>}
        </div>
        {salaryInsights && (
          <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
              <div className="flex justify-between items-start mb-2">
                <h4 className="text-xl font-bold text-yellow-800"><SafeRender>{salaryInsights.range}</SafeRender></h4>
                {salaryInsights.location && <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full border border-yellow-200 flex items-center gap-1"><MapPin className="w-3 h-3"/> <SafeRender>{salaryInsights.location}</SafeRender></span>}
              </div>
              <p className="text-sm text-yellow-900 leading-relaxed"><SafeRender>{salaryInsights.reasoning}</SafeRender></p>
          </div>
        )}
      </div>
      
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3"><div className="p-2 bg-cyan-100 rounded-lg text-cyan-700"><TrendingUp className="w-5 h-5"/></div><div><h3 className="font-bold text-slate-800">Career Path</h3><p className="text-xs text-slate-500">Growth opportunities.</p></div></div>
            {!careerPaths && <button onClick={handleCareerPath} disabled={aiLoading.type === 'career'} className="text-xs text-cyan-700 bg-cyan-50 px-3 py-1.5 rounded-lg border border-cyan-200 hover:bg-cyan-100 flex items-center gap-1">{aiLoading.type === 'career' ? <Loader2 className="w-3 h-3 animate-spin"/> : <Sparkles className="w-3 h-3"/>} Analyze</button>}
        </div>
        {careerPaths && <div className="space-y-2">{careerPaths.paths.map((p,i) => (<div key={i} className="flex justify-between items-center p-3 bg-cyan-50/50 border border-cyan-100 rounded-lg"><span className="font-bold text-cyan-900 text-sm"><SafeRender>{p.role}</SafeRender></span><span className="text-xs text-cyan-600 bg-white px-2 py-1 rounded border border-cyan-100"><SafeRender>{p.gap}</SafeRender></span></div>))}</div>}
      </div>
      
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <div className="flex justify-between items-center mb-4"><div className="flex items-center gap-3"><div className="p-2 bg-purple-100 rounded-lg text-purple-600"><Mail className="w-5 h-5"/></div><div><h3 className="font-bold text-slate-800">Cover Letter</h3><p className="text-xs text-slate-500">Tailored to job.</p></div></div></div>
        {coverLetter ? <textarea className="w-full h-48 p-3 border rounded bg-slate-50 text-sm" value={coverLetter} onChange={(e) => setCoverLetter(e.target.value)} /> : <div className="text-center py-6 bg-slate-50 border border-dashed rounded"><button onClick={handleGenerateCoverLetter} disabled={aiLoading.type === 'coverLetter'} className="bg-purple-600 text-white px-4 py-2 rounded text-sm hover:bg-purple-700 flex items-center gap-2 mx-auto">{aiLoading.type === 'coverLetter' ? <Loader2 className="w-4 h-4 animate-spin"/> : <Sparkles className="w-4 h-4"/>} Generate</button></div>}
      </div>
      
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
          <div className="flex justify-between items-center mb-4"><div className="flex items-center gap-3"><div className="p-2 bg-emerald-100 rounded-lg text-emerald-600"><MessageSquare className="w-5 h-5"/></div><div><h3 className="font-bold text-slate-800">Interview Coach</h3><p className="text-xs text-slate-500">Practice Q&A.</p></div></div></div>
          {interviewPrep ? <div className="grid md:grid-cols-2 gap-3">{(interviewPrep.questions || []).map((q, i) => (<div key={i} className="bg-slate-50 p-3 rounded border"><h4 className="font-bold text-sm mb-1"><SafeRender>{q.question}</SafeRender></h4><p className="text-xs text-slate-600"><SafeRender>{q.tip}</SafeRender></p></div>))}</div> : <div className="text-center py-6 bg-slate-50 border border-dashed rounded"><button onClick={handleInterviewPrep} disabled={aiLoading.type === 'interview'} className="bg-emerald-600 text-white px-4 py-2 rounded text-sm hover:bg-emerald-700 flex items-center gap-2 mx-auto">{aiLoading.type === 'interview' ? <Loader2 className="w-4 h-4 animate-spin"/> : <Sparkles className="w-4 h-4"/>} Start Prep</button></div>}
      </div>
    </div>
  );

const ReportContent = () => (
    <div className="max-w-3xl mx-auto p-8 text-center bg-white rounded-xl shadow-sm border border-slate-200">
      {auditReport ? (
        <div className="text-left">
            <div className="flex justify-between items-center border-b pb-4 mb-4"><h2 className="text-2xl font-bold text-slate-800">Audit Grade: <SafeRender>{auditReport.overallGrade}</SafeRender></h2></div>
            <p className="text-slate-600 mb-6 bg-slate-50 p-4 rounded"><SafeRender>{auditReport.executiveSummary}</SafeRender></p>
            <div className="grid md:grid-cols-2 gap-6">
                <div><h4 className="font-bold text-green-600 mb-2">Strengths</h4><ul className="list-disc pl-4 text-sm space-y-1">{(auditReport.strengths || []).map((s,i)=><li key={i}><SafeRender>{s}</SafeRender></li>)}</ul></div>
                <div><h4 className="font-bold text-red-500 mb-2">Weaknesses</h4><ul className="list-disc pl-4 text-sm space-y-1">{(auditReport.weaknesses || []).map((s,i)=><li key={i}><SafeRender>{s}</SafeRender></li>)}</ul></div>
            </div>
        </div>
      ) : (
        <div className="py-12">
            <Loader2 className="w-12 h-12 animate-spin mx-auto text-slate-300 mb-4"/>
            <p className="text-slate-500">Analyzing your resume against industry standards...</p>
        </div>
      )}
    </div>
  );

return (
    <div className={`min-h-screen bg-slate-100 text-slate-800 flex flex-col md:flex-row print:bg-white`}>
      
      {showModal && <GateModal reason={lockReason} onClose={() => setShowModal(false)} />}

{notification && (
        <div className={`fixed top-4 left-1/2 transform -translate-x-1/2 z-[100000] px-6 py-3 rounded-full shadow-lg flex items-center gap-3 animate-in fade-in slide-in-from-top-4 duration-300 ${notification.type === 'error' ? 'bg-red-600 text-white' : notification.type === 'info' ? 'bg-blue-600 text-white' : 'bg-emerald-600 text-white'}`}>
          {notification.type === 'error' ? <AlertCircle className="w-5 h-5"/> : <CheckCircle className="w-5 h-5"/>}
          <span className="text-sm font-medium">{notification.message}</span>
          <button onClick={() => setNotification(null)} className="ml-2 opacity-80 hover:opacity-100"><X className="w-4 h-4"/></button>
        </div>
      )}

{/* LEFT SIDEBAR */}
      <aside className="w-full md:w-80 bg-white border-r border-slate-200 flex-shrink-0 overflow-y-auto h-screen sticky top-0 z-20 print:hidden">
        <div className="p-6">
          <div className="flex items-center gap-3 mb-8">
            <div className={`w-8 h-8 ${activeTheme.bg} rounded-lg flex items-center justify-center shrink-0`}>
              <FileText className="text-white w-5 h-5" />
            </div>
            <div>
               <h1 className="font-bold text-xl text-slate-900 leading-none">BIMUsers AI <span className="text-blue-600">CV Studio</span></h1>
               <div className="flex items-center gap-1.5 mt-1.5">
                   <span className={`w-2 h-2 rounded-full ${window.BIMUSERS_CONFIG.hasKey ? 'bg-emerald-500' : 'bg-amber-500'}`}></span>
                   <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">{window.BIMUSERS_CONFIG.hasKey ? 'AI Online' : 'AI Offline - Manual Mode'}</span>
               </div>
            </div>
          </div>
          <PremiumOverlay>
            <div className="grid grid-cols-2 gap-2 mb-6">
              <button onClick={handleSaveProject} className="flex items-center justify-center gap-1.5 p-2 bg-slate-50 border border-slate-200 rounded-lg text-xs font-semibold text-slate-600 hover:bg-slate-100 transition-colors"><FolderDown className="w-3.5 h-3.5" /> Save</button>
              <button onClick={() => fileInputRef.current.click()} className="flex items-center justify-center gap-1.5 p-2 bg-slate-50 border border-slate-200 rounded-lg text-xs font-semibold text-slate-600 hover:bg-slate-100 transition-colors"><FolderUp className="w-3.5 h-3.5" /> Load</button>
              <button onClick={handleLoadDemo} className="flex items-center justify-center gap-1.5 p-2 bg-slate-50 border border-slate-200 rounded-lg text-xs font-semibold text-slate-600 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200 transition-colors"><FileBadge className="w-3.5 h-3.5" /> Demo CV</button>
              <button onClick={handleClearData} className="flex items-center justify-center gap-1.5 p-2 bg-slate-50 border border-slate-200 rounded-lg text-xs font-semibold text-slate-600 hover:bg-red-50 hover:text-red-600 hover:border-red-200 transition-colors"><Trash2 className="w-3.5 h-3.5" /> Clear</button>
              <input type="file" ref={fileInputRef} onChange={handleLoadProject} className="hidden" accept=".json" />
            </div>
          </PremiumOverlay>
          
          <PremiumOverlay>
            <div className="mb-8">
              <div className="flex items-center justify-between mb-3">
                  <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-2"><Palette className="w-3 h-3" /> Design & Theme</h3>
                  
                  <label className="relative inline-flex items-center cursor-pointer" title="Toggle Profile Photo">
                      <input type="checkbox" className="sr-only peer" checked={theme.showPhoto} onChange={e => setTheme(p => ({...p, showPhoto: e.target.checked}))} />
                      <div className="w-7 h-4 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-blue-600"></div>
                      <span className="ml-2 text-[10px] font-semibold text-slate-500 uppercase">Photo</span>
                  </label>
              </div>
              
              <div className="mb-4">
                  <label className="text-[10px] font-semibold text-slate-400 uppercase mb-1 block">CV Layout</label>
                  <div className="flex flex-wrap gap-1 bg-slate-100 p-1.5 rounded-lg">
                      {LAYOUTS.map(tpl => (
                         <button key={tpl} onClick={() => setTheme(p => ({...p, layout: tpl}))} className={`flex-1 min-w-[30%] py-1.5 text-[9px] font-bold uppercase rounded transition-colors ${theme.layout === tpl ? 'bg-white shadow text-slate-800' : 'text-slate-500 hover:text-slate-700 hover:bg-slate-200/50'}`}>{tpl}</button>
                      ))}
                  </div>
              </div>

<label className="text-[10px] font-semibold text-slate-400 uppercase mb-1 block">Theme Color</label>
              <div className="flex gap-2 mb-4 flex-wrap">
                {Object.keys(THEMES).map(c => (
                  <button key={c} onClick={() => setTheme(p => ({...p, color: c}))} className={`w-6 h-6 rounded-full border-2 ${THEMES[c].bg} ${theme.color === c ? 'border-slate-800 scale-110' : 'border-transparent opacity-70 hover:opacity-100'}`} title={c} />
                ))}
              </div>
              
              <label className="text-[10px] font-semibold text-slate-400 uppercase mb-1 block">Typography (25+ Fonts)</label>
              <div className="mb-4">
                  <select 
                      value={theme.font} 
                      onChange={(e) => setTheme(p => ({...p, font: e.target.value}))}
                      className="w-full p-2 border border-slate-200 rounded-lg text-xs font-medium bg-slate-50 hover:bg-slate-100 outline-none focus:ring-2 focus:ring-blue-100 transition-all cursor-pointer"
                  >
                      {FONTS.map(f => (
                          <option key={f.id} value={f.id}>{f.name}</option>
                      ))}
                  </select>
              </div>

<div className="grid grid-cols-2 gap-3 pt-2 border-t border-slate-100">
                 <div>
                   <label className="text-[10px] font-semibold text-slate-400 uppercase mb-1 block">Text Size</label>
                   <div className="flex bg-slate-100 p-1 rounded-lg">
                      {['sm', 'md', 'lg'].map(s => (
                        <button key={s} onClick={() => setTheme(p => ({...p, size: s}))} className={`flex-1 py-1 text-xs font-medium rounded transition-all ${theme.size === s ? 'bg-white shadow text-slate-800' : 'text-slate-500 hover:text-slate-700'}`}>{s === 'sm' ? 'A-' : s === 'md' ? 'A' : 'A+'}</button>
                      ))}
                   </div>
                 </div>
                 <div>
                   <label className="text-[10px] font-semibold text-slate-400 uppercase mb-1 block">Spacing</label>
                   <div className="flex bg-slate-100 p-1 rounded-lg">
                      {['compact', 'normal', 'loose'].map(sp => (
                        <button key={sp} onClick={() => setTheme(p => ({...p, spacing: sp}))} className={`flex-1 py-1 px-0 text-xs font-medium rounded transition-all ${theme.spacing === sp ? 'bg-white shadow text-slate-800' : 'text-slate-500 hover:text-slate-700'}`} title={sp}>
                          {sp === 'compact' ? <AlignJustify className="w-3 h-3 mx-auto"/> : sp === 'normal' ? <AlignLeft className="w-3 h-3 mx-auto"/> : <MoveVertical className="w-3 h-3 mx-auto"/>}
                        </button>
                      ))}
                   </div>
                 </div>
              </div>
            </div>
          </PremiumOverlay>
          
          <PremiumOverlay>
            <div className="bg-slate-50 rounded-xl p-4 border border-slate-200 mb-6">
               <div className="flex justify-between items-center mb-2">
                 <span className="text-xs font-bold text-slate-500">RESUME SCORE</span>
                 <span className={`text-xl font-bold ${activeTheme.primary}`}>{score}</span>
               </div>
               <div className="w-full bg-slate-200 h-1.5 rounded-full overflow-hidden mb-3">
                 <div className={`${activeTheme.bg} h-full transition-all duration-1000 ease-out`} style={{width: `${score}%`}}/>
               </div>
               <button onClick={handleGenerateAudit} className="w-full bg-slate-800 text-white text-xs py-2 rounded-lg flex items-center justify-center gap-2 hover:bg-slate-900"><BarChart className="w-3 h-3" /> Audit Report</button>
            </div>
          </PremiumOverlay>
          
          <PremiumOverlay>
            <div className="border-t border-slate-100 pt-6">
              <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-2"><Search className="w-3 h-3"/> Job Matcher</h3>
              <textarea className="w-full h-20 p-2 text-xs border rounded bg-slate-50 mb-2 focus:ring-1 focus:ring-blue-500 outline-none" placeholder="Paste Job Description..." value={jobDescription} onChange={e => setJobDescription(e.target.value)} />
              <button onClick={handleSmartMatch} disabled={aiLoading.type === 'match'} className="w-full bg-purple-600 text-white text-xs py-2 rounded-lg flex items-center justify-center gap-2 hover:bg-purple-700 transition-colors">
                 {aiLoading.type === 'match' ? <Loader2 className="w-3 h-3 animate-spin"/> : <Sparkles className="w-3 h-3"/>} Check Fit
              </button>
              {matchScore !== null && <div className="mt-2 text-center text-xs font-bold text-purple-700">Match Score: {matchScore}%</div>}
            </div>
          </PremiumOverlay>
        </div>
      </aside>

{/* MAIN CONTENT */}
      <main className="flex-1 flex flex-col h-screen overflow-hidden print:h-auto print:overflow-visible relative">
        <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0 z-10 print:hidden">
          <div className="flex items-center gap-2">
            <div className="flex bg-slate-100 p-1 rounded-lg items-center gap-1 overflow-x-auto">
              {['editor', 'preview', 'report', 'tools'].map(tab => (
                <button key={tab} onClick={() => setActiveTab(tab)} className={`px-3 md:px-4 py-1.5 text-xs md:text-sm font-medium rounded-md capitalize transition-all whitespace-nowrap flex items-center gap-1.5 ${activeTab === tab ? 'bg-white shadow-sm text-slate-800' : 'text-slate-500 hover:text-slate-700'}`}>
                  {tab === 'tools' ? <><Sparkles className="w-3.5 h-3.5"/> Tools</> : tab === 'preview' ? <><Maximize className="w-3.5 h-3.5"/> Full View</> : tab}
                </button>
              ))}
            </div>
            <div className="w-px h-6 bg-slate-300 mx-1 md:mx-2 hidden md:block"></div>
            <PremiumOverlay>
                <div className="hidden md:flex items-center gap-1">
                    <button onClick={handleUndo} disabled={historyIndex <= 0} className="p-1.5 rounded-md hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent transition-colors" title="Undo"><Undo className="w-4 h-4 text-slate-600" /></button>
                    <button onClick={handleRedo} disabled={historyIndex >= history.length - 1} className="p-1.5 rounded-md hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent transition-colors" title="Redo"><Redo className="w-4 h-4 text-slate-600" /></button>
                </div>
            </PremiumOverlay>
            <div className="hidden lg:block ml-2 text-xs font-medium text-slate-400">{lastSaved ? `Saved at ${lastSaved}` : 'Saving...'}</div>
          </div>
          <PremiumOverlay>
              <div className="flex items-center gap-2 shrink-0">
                 <button className="flex items-center gap-1.5 md:gap-2 bg-white border border-slate-200 text-slate-700 px-3 py-2 rounded-lg text-xs md:text-sm font-medium hover:bg-slate-50 transition-colors" onClick={handleExportWord}><FileType className="w-4 h-4 text-blue-600" /> <span className="hidden sm:inline">Word</span></button>
                 <button className={`flex items-center gap-1.5 md:gap-2 ${activeTheme.bg} text-white px-3 md:px-4 py-2 rounded-lg text-xs md:text-sm font-medium hover:opacity-90 transition-colors`} onClick={() => { setTimeout(handleExportPDF, 100); }} disabled={isExportingPDF}>
                   {isExportingPDF ? <Loader2 className="w-4 h-4 animate-spin"/> : <Download className="w-4 h-4" />} <span className="hidden sm:inline">PDF</span>
                 </button>
              </div>
          </PremiumOverlay>
        </header>
        
        <div className="flex-1 overflow-y-auto bg-slate-100 p-4 md:p-6 scroll-smooth print:p-0 print:bg-white print:overflow-visible flex flex-col">
          <ErrorBoundary>
              {/* EDITOR & PREVIEW SPLIT SCREEN */}
              <div className={`${activeTab === 'editor' ? 'flex flex-col xl:flex-row gap-6 flex-1 h-full' : 'hidden'} print:hidden`}>
                  {/* Left: Editor */}
                  <div className="flex-1 overflow-y-auto pr-1">
                      <PremiumOverlay><EditorContent /></PremiumOverlay>
                  </div>
                  
                  {/* Right: Live Preview */}
                  <div className="flex-1 overflow-y-auto bg-slate-300/40 rounded-xl border border-slate-300 shadow-inner flex flex-col relative hidden lg:flex">
                      <div className="absolute top-4 left-4 bg-slate-800 text-white text-[10px] font-bold px-3 py-1.5 rounded-full shadow-lg z-10 flex items-center gap-2">
                          <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> LIVE PREVIEW
                      </div>
                      <div className="flex-1 overflow-y-auto p-4 flex justify-center">
                          <PreviewWrapper />
                      </div>
                  </div>
              </div>

{/* Full Screen Preview Tab */}
              <div className={`${activeTab === 'preview' ? 'block' : 'hidden'} print:block h-full flex-1 overflow-y-auto bg-slate-300/40 rounded-xl p-4 md:p-8 flex justify-center`}>
                  <PreviewWrapper fullView={true} />
              </div>
              
              <div className={`${activeTab === 'tools' ? 'block' : 'hidden'} print:hidden`}><PremiumOverlay><ToolsContent /></PremiumOverlay></div>
              <div className={`${activeTab === 'report' ? 'block' : 'hidden'} print:hidden`}><PremiumOverlay><ReportContent /></PremiumOverlay></div>
          </ErrorBoundary>
        </div>
      </main>

<UsageHistoryPanel history={sessionLog} />
    </div>
  );
}