Veteran Career Tools | AI Resume & Job Builder

{selectedCareer.sector==="Government"?"🏛️":selectedCareer.sector===DI?"🛡️":"💼"}

{selectedCareer.title}

{selectedCareer.match} Match {selectedCareer.clearanceBonus&&🔐 Clearance Advantage}

{selectedCareer.sector} · {selectedCareer.industry||"Multiple Industries"}

{selectedCareer.salaryRange}

{selectedCareer.outlook==="High Growth"?"📈":selectedCareer.outlook==="Emerging"?"🔄":"📊"} {selectedCareer.outlook}

{loading.careerDetail&&

Loading full career profile...

} {careerDetail&&!loading.careerDetail&&( )}

); } function CareerTab(props) { const {careers,careerFilter,setCareerFilter,selectedCareer,setSelectedCareer,careerDetail,loading,careerError,openCareerDetail,findCareers,tab,setTab,target,upT,targetLocation,milExperiences,civExperiences,education,currentUser,showToast,setShowAuth,DI,RG,filterCareers,matchesSector,hasAccess,setShowPaywall,skills,personal} = props; if (tab!==1) return null; return (

Your Civilian Qualifications Profile. Before finding your career matches, review what your service actually unlocks in the civilian world. Every MOS, clearance, ASI, SQI, and additional duty is an asset — here's what each one means to a civilian employer.

{milExperiences.map(exp=>(

{window.BRANCH_LOGOS&&window.BRANCH_LOGOS[exp.branch] ? React.createElement("img",{src:window.BRANCH_LOGOS[exp.branch],alt:exp.branch,width:32,height:32,style:{borderRadius:"50%",flexShrink:0},onError:function(e){e.target.style.display="none";}}) : "🎖️" } {exp.branch} {exp.rank ? "— "+exp.rank : ""}

{exp.serviceType}{exp.tos ? " · "+exp.tos : ""}

{exp.mos||"—"} {exp.mosTitle&&{exp.mosTitle}} {exp.unit&&· {exp.unit}}

{exp.tos&&⏱ {exp.tos} Time in Service} {exp.startDate&&📅 {exp.startDate} – {exp.current?"Present":exp.endDate||"?"}}

{/* ── CIVILIAN TRANSLATION BOX ── */}

🔄

Your Military Experience → Civilian Translation

{exp.mos ? (<>

In civilian terms, you were: { (function(){ var r = exp.rank || ""; var isNCO = r.indexOf("E-5")!==-1||r.indexOf("E-6")!==-1||r.indexOf("E-7")!==-1||r.indexOf("E-8")!==-1||r.indexOf("E-9")!==-1; var isSrNCO = r.indexOf("E-7")!==-1||r.indexOf("E-8")!==-1||r.indexOf("E-9")!==-1; var isOfficer = r.indexOf("O-")!==-1||r.indexOf("W-")!==-1; var title = exp.mosTitle || exp.mos; if(isOfficer) return "A department director or senior program manager leading " + (exp._unitSize||"multiple teams of") + " personnel, responsible for strategic planning, resource allocation, and mission execution in a " + (exp.branch||"military") + " " + title + " organization."; if(isSrNCO) return "A senior operations manager supervising " + (exp._leaderCount||"multiple") + " direct reports and " + (exp._unitSize||"a team of") + " personnel, with full accountability for training, performance, equipment worth " + (exp._equipValue||"significant assets") + ", and day-to-day execution of " + title + " operations."; if(isNCO) return "A team lead / front-line supervisor managing " + (exp._leaderCount||"a team of") + " personnel, responsible for training, task execution, quality control, and operational readiness in " + title + " operations."; return "A trained specialist in " + title + " operations with hands-on experience in mission execution, technical procedures, teamwork, and accountability under pressure."; })() }

{exp.duties && (

What companies see when they read your background: { (exp.duties||"").replace(/led/gi,"managed").replace(/soldiers|Marines|sailors|airmen|service members/gi,"team members").replace(/platoon/gi,"division").replace(/squad/gi,"team").replace(/company/gi,"department").replace(/battalion/gi,"organization").replace(/mission/gi,"project").replace(/field exercise/gi,"operational exercise").replace(/PT\b/g,"fitness training").replace(/NCOIC/gi,"supervisor").replace(/OIC/gi,"manager").replace(/COP|FOB|base/gi,"facility").substring(0,300) + (exp.duties.length>300?"...":"") }

)} {(exp._leaderCount || exp._unitSize || exp._equipValue || exp._trainedCount) && (

{exp._leaderCount && Led {exp._leaderCount} personnel} {exp._unitSize && {exp._unitSize}-person organization} {exp._equipValue && {exp._equipValue} in assets} {exp._trainedCount && Trained {exp._trainedCount} personnel}

)} ) : (

Enter your MOS code on the Profile tab to see your civilian translation.

)}

🔐 Security Clearance

{exp.clearanceLevel==="None" ?

No clearance listed. Many civilian roles don't require one — your skills still transfer.

{exp.clearanceLevel} {exp.clearanceStatus} {exp.polygraph!=="None"&&{exp.polygraph}}

{exp.clearanceLevel.includes("SCI")||exp.clearanceLevel.includes("Poly") ? "🏆 Premium Asset: TS/SCI clearances unlock high-paying roles in intelligence agencies (CIA, NSA, DIA), defense contractors (Booz Allen, SAIC, Leidos), and federal IT. Cleared professionals command 10–30% salary premiums. Your clearance alone can be worth $20,000–$50,000 more per year." : exp.clearanceLevel==="Top Secret" ? "⭐ High Value: Top Secret clearance opens doors to defense contracting, federal law enforcement, DHS, and government IT roles. Actively sought by employers — investigation costs $50,000+ to initiate." : exp.clearanceLevel==="Secret" ? "✅ Solid Asset: Secret clearance qualifies you for thousands of defense, federal, and contractor positions. Most DoD contractor roles require this as a baseline." : "✅ Clearance noted. Even Confidential/Public Trust clearances help with federal and contractor employment."}

}

{exp.asi.length>0&&(<>

Additional Skill Identifiers (ASI) — What They Unlock

{exp.asi.map(a=>(

{a.code}

{a.desc}

{a.code==="2S"||a.code==="R" ? "Ranger qualification signals elite physical conditioning, leadership under extreme stress, and small-unit tactics mastery. Highly valued in law enforcement special units, federal agencies, private security, and defense contracting." : a.code==="8A" ? "Airborne qualification demonstrates ability to operate in austere environments and adapt to rapidly changing conditions. Valued in emergency management, aviation, and special operations support roles." : a.code==="B3" ? "Linguist qualification is a premium asset in intelligence, federal law enforcement (FBI/CIA/DEA), international business, diplomacy, and translation services." : a.code==="P1" ? "Master Parachutist with 65+ jumps signals elite special operations background, exceptional risk management, and advanced military training. Top-tier for SOF support, government contracting, and security consulting." : a.code==="X3" ? "Military Instructor qualification translates directly to corporate training, learning & development roles, academic instruction, and leadership coaching — all high-demand civilian fields." : a.code==="G4" ? "Combatives instructor certification demonstrates advanced physical training expertise. Directly applicable to law enforcement training, personal protection, and defense sector roles." : a.code==="V5" ? "Battle Staff qualification means you've planned and coordinated complex multi-element operations. This maps directly to senior project management, operations director, and strategic planning roles." : a.code==="W1" ? "SERE training signals resilience, high-stress decision-making, and classified operations knowledge — valuable in intelligence, security, and government contracting." : (a.desc)+" represents specialized military training that differentiates you from typical civilian applicants. Highlight this on your resume and in interviews."}

))}

)} {exp.sqi.length>0&&(<>

Skill Qualification Identifiers (SQI) — What They Unlock

{exp.sqi.map(s=>(

{s.code}

{s.desc}

{s.code==="F"||s.code==="Q" ? "Special Forces background is among the most valued military credentials in civilian employment. Opens doors to intelligence agencies, Tier 1 defense contractors, private military consulting, federal law enforcement leadership, and executive protection. Salary premiums of 20–40% are common." : s.code==="R" ? "Ranger-tabbed service members are highly sought in law enforcement, federal agencies, and security consulting for their demonstrated leadership, physical toughness, and tactical expertise." : s.code==="P" ? "Parachutist qualification demonstrates willingness to operate in high-risk environments and comfort with complex technical procedures — valued in aviation, emergency services, and government contracting." : s.code==="X" ? "Instructor/Faculty SQI means you've been certified to teach and develop others in the military's most rigorous training environment. This maps directly to corporate L&D, technical training, academic instruction, and coaching careers." : s.code==="V" ? "Aviation background unlocks commercial aviation, drone operations, air traffic control, aviation management, and aerospace industry roles." : s.code==="S" ? "Special Operations support experience is premium in defense contracting, intelligence support, and government program management." : (s.desc)+" SQI represents a specialized role that distinguishes you from standard applicants. Leverage this credential prominently."}

))}

)} {exp.additionalDuties.length>0&&(<>

Additional Duty Qualifications — Civilian Value

{exp.additionalDuties.map(d=>(

{d}

{d.includes("Armorer") ? "Maps to: Firearms compliance, asset management, inventory control" : d.includes("Safety") ? "Maps to: EHS Officer, Workplace Safety Manager, OSHA compliance" : d.includes("SHARP")||d.includes("Equal Opportunity") ? "Maps to: HR Business Partner, DEI Coordinator, Employee Relations" : d.includes("COR")||d.includes("Contracting") ? "Maps to: Procurement Specialist, Contract Manager, Acquisition Analyst" : d.includes("OPSEC")||d.includes("Information Security") ? "Maps to: Information Security Analyst, Cybersecurity, Risk Management" : d.includes("UPL")||d.includes("Prevention") ? "Maps to: Employee Assistance Programs, HR Compliance, Wellness Coordinator" : d.includes("Training Room")||d.includes("Records") ? "Maps to: HR Specialist, Records Manager, Compliance Officer" : d.includes("Property Book")||d.includes("Supply") ? "Maps to: Logistics Coordinator, Asset Manager, Supply Chain Analyst" : d.includes("Master Driver") ? "Maps to: Fleet Manager, Transportation Supervisor, Logistics Lead" : d.includes("Battle Staff")||d.includes("Master Gunner") ? "Maps to: Operations Manager, Senior Project Lead, Strategic Planner" : d.includes("Recruiter")||d.includes("Career Counselor") ? "Maps to: Talent Acquisition, HR Recruiter, Career Coach" : d.includes("Family Readiness") ? "Maps to: Community Liaison, Employee Engagement, HR Programs" : d.includes("NBC")||d.includes("CBRN") ? "Maps to: Hazmat Specialist, Environmental Health & Safety, Emergency Management" : "Maps to: Program management, compliance, and organizational leadership roles"}

))}

)} {(exp.deployments||exp.awards)&&(<>

{exp.deployments&&

Combat / Operational Experience

{exp.deployments}

Demonstrates: adaptability, crisis leadership, cross-cultural operations, mission execution under pressure

} {(exp.awards||[]).length>0&&

Awards & Decorations

{exp.awards}

Demonstrates: recognized performance, leadership, valor, and professional excellence

}

)}

))} {civExperiences.map(exp=>(

💼 {exp.type}

{exp.jobTitle||""}{exp.employer?" · "+exp.employer:""}

{exp.startDate&&📅 {exp.startDate} – {exp.current?"Present":exp.endDate||"?"}} {exp.clearanceLevel!=="None"&&{exp.clearanceLevel} — {exp.clearanceStatus}}

{exp.duties&&

"{exp.duties.slice(0,180)}{exp.duties.length>180?"...":""}"

} {exp.type===RG&&

⭐ Dual-career advantage: Simultaneously maintaining civilian employment and military service demonstrates exceptional time management, discipline, and commitment — a top-tier signal to civilian employers.

}

))}

Refine Your Target (optional)

Target Job TitleupT("title",e.target.value)}/>

Preferred IndustryupT("industry",e.target.value)}/>

Priorities / KeywordsupT("keywords",e.target.value)}/>

Preferred Work Location setTargetLocation(e.target.value)} onKeyUp={e=>setTargetLocation(e.target.value)} style={{width:"100%"}} /> Used to filter job search results by location

Interests & Hobbies upT("interests",e.target.value)}/> Help us find careers matching your passions — not just your MOS

Open To Exploring

{["Entrepreneurship","Government / Federal","Defense / Intel","Tech / Cybersecurity","Trades / Skilled Labor","Healthcare","Law Enforcement","Education / Coaching","Nonprofit / Veteran Services","Remote Work","Part-time / Flexible"].map(opt=>( ))}

Click to select — expands career matches beyond your MOS

{hasAccess?( ):( )} {loading.careers&&

Analyzing your qualifications and finding career matches...

} {careerError&&!loading.careers&&(

Career match error: {careerError}

)} {careers&&!loading.careers&&!selectedCareer&&()} {selectedCareer&&!loading.careers&&()}

); } function RankInsignia({branch,grade,color}) { const c = color||"#c8a951"; const g = grade||""; if (g.startsWith("E-")) { const n = parseInt(g.slice(2))||1; const chevs = n<=3?n:n<=6?3:n<=8?3:3; const rockers = n>=7?n-6:0; const hasDiamond = n===8; const stars = n>=9?n-8:0; const h = 36; const paths = []; for(let ci=0;ciReact.createElement("rect",{key:bi,x:2+(bi*7),y:8,width:5,height:14,rx:1,fill:bi%2===0?c:"rgba(255,255,255,.2)"})); return React.createElement("svg",{viewBox:"0 0 36 24",width:32,height:24,style:{flexShrink:0}}, React.createElement("rect",{x:2,y:18,width:32,height:4,rx:1,fill:c}),...bars); } if (g.startsWith("O-")) { const n = parseInt(g.slice(2))||1; if(n===1) return React.createElement("svg",{viewBox:"0 0 36 14",width:32,height:14,style:{flexShrink:0}},React.createElement("rect",{x:4,y:3,width:28,height:8,rx:2,fill:c})); if(n===2) return React.createElement("svg",{viewBox:"0 0 36 14",width:32,height:14,style:{flexShrink:0}},React.createElement("rect",{x:4,y:3,width:28,height:8,rx:2,fill:"#d8d8d8"})); if(n===3) return React.createElement("svg",{viewBox:"0 0 36 14",width:32,height:14,style:{flexShrink:0}},React.createElement("rect",{x:2,y:3,width:13,height:8,rx:2,fill:"#d8d8d8"}),React.createElement("rect",{x:21,y:3,width:13,height:8,rx:2,fill:"#d8d8d8"})); if(n<=5) return React.createElement("svg",{viewBox:"0 0 36 20",width:32,height:20,style:{flexShrink:0}},React.createElement("path",{d:"M18,2 C11,2 5,7 5,13 C5,17 8,19 12,18 L18,22 L24,18 C28,19 31,17 31,13 C31,7 25,2 18,2Z",fill:n===4?c:"#d8d8d8"})); if(n===6) return React.createElement("svg",{viewBox:"0 0 36 22",width:32,height:22,style:{flexShrink:0}},React.createElement("ellipse",{cx:18,cy:14,rx:5,ry:4,fill:c}),React.createElement("path",{d:"M4,12 L18,5 L32,12",fill:"none",stroke:c,strokeWidth:2.5}),React.createElement("polygon",{points:"18,2 20,7 18,6 16,7",fill:c})); const ns = n-6; const sp = [{x:18,y:11},{x:10,y:16},{x:26,y:16},{x:8,y:8},{x:28,y:8}].slice(0,ns); return React.createElement("svg",{viewBox:"0 0 36 22",width:32,height:22,style:{flexShrink:0}},...sp.map((p,si)=>React.createElement("text",{key:si,x:p.x,y:p.y,textAnchor:"middle",fontSize:11,fill:c},"★"))); } if (window.BRANCH_LOGOS && window.BRANCH_LOGOS[branch]) { return React.createElement("img",{src:window.BRANCH_LOGOS[branch],alt:branch,width:44,height:44,style:{borderRadius:"50%",verticalAlign:"middle",display:"block"},onError:function(e){e.target.style.display="none";}}); } return React.createElement("span",{style:{fontSize:"1.2rem"}},BRANCH_EMBLEMS[branch]||"⭐"); } function MyProfileHero(props) { const {tab,currentUser,personal,hasAccess,hasUnsaved,milExperiences,BRANCH_EMBLEMS,BRANCH_COLORS,RANKS,RankInsignia,careers,openCareerDetail,setTab,resume,savedResumes,handleDeleteResume,savedCoverLetters,savedEmails,savedScores,handleDeleteSaved,handleLogout,handleSaveProfile,showToast,setShowPaywall,savedPaths,setSavedPaths} = props; return (<>

{personal.name||(currentUser&¤tUser.name)||"Veteran"}

{personal.email||(currentUser&¤tUser.email)||""}

Service Record

{milExperiences.filter(e=>e.branch).map((exp,ri)=>{ const bRanks = RANKS[exp.branch]||RANKS["Army"]; const allR = [...(bRanks.enlisted||[]),...(bRanks.warrant||[]),...(bRanks.officer||[])]; const rankObj = allR.find(r=>r.abbr===exp.rank)||null; const bColor = BRANCH_COLORS[exp.branch]||BRANCH_COLORS["Army"]; return (

{window.BRANCH_LOGOS&&window.BRANCH_LOGOS[exp.branch] ?React.createElement("img",{src:window.BRANCH_LOGOS&&window.BRANCH_LOGOS[exp.branch],alt:exp.branch,width:24,height:24,style:{borderRadius:"50%",flexShrink:0},onError:function(e){e.target.style.display="none";}}) :null} {exp.branch}

Status:{exp.serviceType||"—"}

{exp.rank&&

Rank:{exp.rank}{rankObj?" — "+rankObj.title:""}

} {(exp.startDate||exp.endDate)&&

Served:{exp.startDate||"?"} – {exp.currently?"Present":(exp.endDate||"?")}

} {exp.tos&&

{exp.tos} total

}

); })} {milExperiences.filter(e=>e.branch).length===0&&(

Add service history in Profile & Qualifications to see your record here.

)}

{careers&&careers.length>0&&(

Your Career Matches

{careers.length} matches · click any to explore

{careers.map((c,ci)=>(

{setTab(1);setTimeout(()=>openCareerDetail(c),100);}}>

{c.title}

{c.match}

{c.industry}

{c.salaryRange}

))}

)} ); } function MyProfileSaved(props) { const {tab,hasAccess,setTab,resume,savedResumes,handleDeleteResume,savedCoverLetters,savedEmails,savedScores,handleDeleteSaved,handleLogout,handleSaveProfile,handleSaveResume,showToast,setShowPaywall,savedPaths,setSavedPaths} = props; // Fallback for handleSaveResume const _hsr = handleSaveResume || window.__vcp_saveResume || (()=>{}); return (<>

Saved Resumes

{resume&&}

{savedResumes.length===0?(

📄

No saved resumes yet. Generate one on the Build Resume tab.

):( savedResumes.map(r=>(

{r.title}

{r.title||r.job||"Saved Resume"}

{r.date}{r.industry?" · "+r.industry:""}

)) )}

📝 Saved Cover Letters

{savedCoverLetters.length} saved

{savedCoverLetters.length===0?(

No saved cover letters yet. Generate one on the Cover Letter tab.

):( savedCoverLetters.map(r=>(

{r.job}{r.company?" @ "+r.company:""}

{r.date}

)) )}

✉️ Saved Emails

{savedEmails.length} saved

{savedEmails.length===0?(

No saved emails yet. Generate follow-up emails on the Job Search tab.

):( savedEmails.map(r=>(

{r.type}

{r.date}

)) )}

📊 Saved Score Reports

{savedScores.length} saved

{savedScores.length===0?(

No saved scores yet. Score your resume on the Cover Letter & Review tab.

):( savedScores.map(r=>(

=80?"#1a7a40":r.score>=65?"#e67e22":"#c0392b"}}>{r.score} {r.label}

{r.date}

)) )}

Quick Links

{[ {label:"Profile & Qualifications",icon:"📋",tab:0}, {label:"Career Pathways",icon:"🎯",tab:1}, {label:"Build Resume",icon:"📄",tab:2}, {label:"Cover Letter & Review",icon:"📝",tab:3}, {label:"Job Search Tools",icon:"🔍",tab:4}, {label:"Resources Hub",icon:"🏛️",tab:6} ].map((link,i)=>( ))}

Account & Subscription

{hasAccess?(

Full Access Active {(()=>{try{const d=JSON.parse(localStorage.getItem("vcb_access")||"null");if(d&&d.expiry)return React.createElement("span",{style:{fontSize:".75rem",color:"#5a7090",fontWeight:400}}," — expires "+new Date(d.expiry).toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"}));if(d&&d.type==="code")return React.createElement("span",{style:{fontSize:".75rem",color:"#5a7090",fontWeight:400}}," — Access Code");return null;}catch(e){return null;}})()}

):(

No active subscription

Unlock all 16 AI-powered career tools

)}

🧭 Saved Assessment Results

Career Assessments

{(()=>{ let assessmentResult = null; try { assessmentResult = JSON.parse(localStorage.getItem("vcb_assessment_result")||"null"); } catch(e){} if (!assessmentResult) { return (

🧭

No saved assessment results yet.

Take the VCP PathFinder™ Pro

); } return (

{assessmentResult.type||"Career Assessment"}

{assessmentResult.date ? new Date(assessmentResult.date).toLocaleDateString() : "Date unknown"}

View Results Retake

{(assessmentResult.topCareers||assessmentResult.results||[]).length>0&&(

Top Career Matches

{(assessmentResult.topCareers||assessmentResult.results||[]).slice(0,6).map((c,i)=>(

{typeof c==="string"?c:(c.title||c.name||"Career "+(i+1))}

{c.match&&

{c.match}% Match

} {c.sector&&

{c.sector}

}

))}

)} {assessmentResult.summary&&(

{assessmentResult.summary}

)}

); })()}

⭐ Saved Career Paths

{(savedPaths||[]).length} saved

{(!savedPaths||savedPaths.length===0)?(

🎯

No saved career paths yet. Go to Career Pathways and click 💾 Save Path on any career.

):(

{(savedPaths||[]).map((p,i)=>(

{p.title}

{p.sector&&

{p.sector}{p.industry?" · "+p.industry:""}

} {p.salaryRange&&

{p.salaryRange}

} {p.match&&{p.match} Match} {p.whyFit&&

{p.whyFit}

}

))}

)}

); } function MyProfileContent(props) { const {tab,currentUser,personal,hasAccess,hasUnsaved,milExperiences,BRANCH_EMBLEMS,BRANCH_COLORS,RANKS,RankInsignia,careers,openCareerDetail,setTab,resume,savedResumes,handleDeleteResume,savedCoverLetters,savedEmails,savedScores,handleDeleteSaved,handleLogout,handleSaveProfile,handleSaveResume,showToast,setShowPaywall,savedPaths,setSavedPaths} = props; // Fallback: if handleSaveResume wasn't passed as prop, use window version const _handleSaveResume = handleSaveResume || window.__vcp_saveResume || (()=>{}); return (

); } function MyProfileTab(props) { const {tab,currentUser,setShowAuth,personal,hasAccess,hasUnsaved,milExperiences,BRANCH_EMBLEMS,BRANCH_COLORS,RANKS,RankInsignia,careers,openCareerDetail,setTab,resume,savedResumes,handleDeleteResume,savedCoverLetters,savedEmails,savedScores,handleDeleteSaved,handleLogout,handleSaveProfile,handleSaveResume,showToast,setShowPaywall,savedPaths,setSavedPaths} = props; if (tab!==5) return null; return (

); } function App() { // ── APP STATE (must be declared first) ── const [tab, setTab] = useState(0); const [personal, setPersonal] = useState({ name:"", email:"", phone:"", location:"", linkedin:"" }); const [milExperiences, setMilExperiences] = useState([newMilExp()]); const [civExperiences, setCivExperiences] = useState([]); // Keep a unified "experiences" for backwards compatibility with AI prompts const experiences = [...milExperiences, ...civExperiences]; const [education, setEducation] = useState([{ id:1, institution:"", degree:"", field:"", year:"", pme:"" }]); const [skills, setSkills] = useState({ technical:"", leadership:"", languages:"", certs:"" }); const [target, setTarget] = useState({ title:"", industry:"", keywords:"", interests:"", openTo:"" }); const [targetLocation, setTargetLocation] = useState(""); const [collapsed, setCollapsed] = useState({}); const [mosOut, setMosOut] = useState(""); const [careers, setCareers] = useState(null); const [serviceRecords, setServiceRecords] = useState([{ id:1, branch:"Army", rank:"", status:"Veteran" }]); const [coverLetter, setCoverLetter] = useState(""); const [coverLetterJob, setCoverLetterJob] = useState({ title:"", company:"", description:"" }); const [resumeScore, setResumeScore] = useState(null); const [resumeReview, setResumeReview] = useState(null); const [coverLetterLoading, setCoverLetterLoading] = useState(false); const [reviewLoading, setReviewLoading] = useState(false); const [uploadedResumeText, setUploadedResumeText] = useState(""); const [uploadedFileName, setUploadedFileName] = useState(""); const [uploadProcessing, setUploadProcessing] = useState(false); const [copiedCL, setCopiedCL] = useState(false); // ── RETENTION FEATURE STATE ─────────────────────────────────────────────── // Job Tracker const [jobApps, setJobApps] = useState(() => { try { return JSON.parse(localStorage.getItem("vcb_jobs")||"[]"); } catch(e){ return []; } }); const [newJob, setNewJob] = useState({ company:"", title:"", date:"", status:"Applied", notes:"", link:"",source:"" }); const [showAddJob, setShowAddJob] = useState(false); const saveJobs = (jobs) => { setJobApps(jobs); localStorage.setItem("vcb_jobs", JSON.stringify(jobs)); }; // Interview Prep const [prepJob, setPrepJob] = useState({ title:"", company:"", type:"behavioral" }); const [prepQuestions, setPrepQuestions] = useState([]); const [prepLoading, setPrepLoading] = useState(false); // Follow-up Email const [followupCtx, setFollowupCtx] = useState({ company:"", role:"", interviewerName:"", date:"", outcome:"thank-you" }); const [followupEmail, setFollowupEmail] = useState(""); const [followupJob, setFollowupJob] = useState({title:"",company:""}); const [showClipboardModal, setShowClipboardModal] = useState(false); const [showHomelessForm, setShowHomelessForm] = useState(false); const [homelessForm, setHomelessForm] = useState({name:"",branch:"",location:"",situation:"",email:"",phone:""}); const [homelessSubmitted, setHomelessSubmitted] = useState(false); const [clipboardParsed, setClipboardParsed] = useState({title:"",company:"",link:""}); const [followupLoading, setFollowupLoading] = useState(false); const [copiedFollowup, setCopiedFollowup] = useState(false); // Transition Timeline const [tlChecks, setTlChecks] = useState(() => { try { return JSON.parse(localStorage.getItem("vcb_timeline")||"{}"); } catch(e){ return {}; } }); const saveTl = (key, val) => { const updated = {...tlChecks, [key]: val}; setTlChecks(updated); localStorage.setItem("vcb_timeline", JSON.stringify(updated)); if (currentUser && fbDb) { try { fbDb.collection("profiles").doc((currentUser&¤tUser.uid)).set({ timeline: updated, updatedAt: Date.now() }, { merge: true }); } catch(e) {} } }; // Dashboard tab sub-view const [retentionTab, setRetentionTab] = useState("tracker"); const [savedPaths, setSavedPaths] = useState(() => { try { return JSON.parse(localStorage.getItem("vcb_saved_paths")||"[]"); } catch(e){ return []; } }); const refreshSavedPaths = () => { try { setSavedPaths(JSON.parse(localStorage.getItem("vcb_saved_paths")||"[]")); } catch(e){} }; const [resFilter, setResFilter] = useState("All"); const [selectedCareer, setSelectedCareer] = useState(null); const [careerDetail, setCareerDetail] = useState(null); const [careerFilter, setCareerFilter] = useState("All"); const [resume, setResume] = useState(""); const [resumeFormat, setResumeFormat] = useState("ats_chrono"); const [translationData, setTranslationData] = useState(null); const [loading, setLoading] = useState({ translate:false, careers:false, resume:false, careerDetail:false }); const [apiError, setApiError] = useState(""); const [showAdminSetup, setShowAdminSetup] = useState(false); const [adminKeyInput, setAdminKeyInput] = useState(""); const [adminKeySet, setAdminKeySet] = useState(() => { if (PROXY_URL && PROXY_URL.length > 10) return true; const k = localStorage.getItem("vcb_admin_key")||(typeof sessionStorage!=="undefined"&&sessionStorage.getItem("vcb_admin_key"))||""; return k.length > 20; }); const [careerError, setCareerError] = useState(""); const [resumeData, setResumeData] = useState(null); const [resumeTemplate, setResumeTemplate] = useState("ats_chrono"); const [profileMode, setProfileMode] = useState("guided"); const [resumeVisualStyle, setResumeVisualStyle] = useState("classic"); const VISUAL_STYLES = { classic: { name:"Classic", accent:"#000000", accent2:"#333333", headerBg:"#ffffff", headerText:"#000000", font:"Georgia,Times New Roman,serif", sectionBorder:"2px solid #000", preview:"#000" }, navy: { name:"Navy Professional", accent:"#1a3a6b", accent2:"#c8960a", headerBg:"#1a3a6b", headerText:"#ffffff", font:"Arial,Helvetica,sans-serif", sectionBorder:"2px solid #1a3a6b", preview:"#1a3a6b" }, slate: { name:"Slate Modern", accent:"#475569", accent2:"#0ea5e9", headerBg:"#f8fafc", headerText:"#0f172a", font:"Calibri,Segoe UI,sans-serif", sectionBorder:"1px solid #cbd5e1", preview:"#475569" }, amber: { name:"Warm Amber", accent:"#92400e", accent2:"#d97706", headerBg:"#fffbeb", headerText:"#78350f", font:"Cambria,Georgia,serif", sectionBorder:"2px solid #d97706", preview:"#92400e" }, midnight: { name:"Midnight", accent:"#1e293b", accent2:"#6366f1", headerBg:"#1e293b", headerText:"#f8fafc", font:"Inter,Helvetica Neue,sans-serif", sectionBorder:"2px solid #6366f1", preview:"#1e293b" } }; const vs = VISUAL_STYLES[resumeVisualStyle] || VISUAL_STYLES.classic; const [resumeError, setResumeError] = useState(""); const [copied, setCopied] = useState(false); const [includeClearance, setIncludeClearance] = useState(true); // ── RESUME SECTIONS CHECKLIST ── const [resumeSections, setResumeSections] = useState({ summary: true, military: true, civilian: true, education: true, certifications: true, clearance: true, awards: true, volunteer: false, technicalSkills: true, languages: false }); const toggleResumeSection = (key) => setResumeSections(prev => ({...prev, [key]: !prev[key]})); // ── RESUME TARGET ENHANCEMENTS ── const [targetCompany, setTargetCompany] = useState(""); const [experienceLevel, setExperienceLevel] = useState("mid"); const [jobDescription, setJobDescription] = useState(""); // ── ATS ANALYSIS STATE ── const [atsAnalysis, setAtsAnalysis] = useState(null); const [atsLoading, setAtsLoading] = useState(false); // ── JOB URL ANALYZER STATE ── const [jobAnalyzerUrl, setJobAnalyzerUrl] = useState(""); const [jobAnalyzerResult, setJobAnalyzerResult] = useState(null); const [jobAnalyzerLoading, setJobAnalyzerLoading] = useState(false); // ── AUTH STATE ── const [authMode, setAuthMode] = useState("login"); const [showAuth, setShowAuth] = useState(false); const [authForm, setAuthForm] = useState({ username:"", password:"", confirmPassword:"", name:"" }); const [authErr, setAuthErr] = useState(""); const [authOk, setAuthOk] = useState(""); const [currentUser, setCurrentUser] = useState(null); const [saveToast, setSaveToast] = useState(""); const [hasUnsaved, setHasUnsaved] = useState(false); const [savedResumes, setSavedResumes] = useState([]); const [savedCoverLetters, setSavedCoverLetters] = useState([]); const [savedEmails, setSavedEmails] = useState([]); const [savedScores, setSavedScores] = useState([]); const [viewingResume, setViewingResume] = useState(null); // ── PAYWALL STATE ───────────────────────────────────────────────────────── // ── ACCESS CODE SYSTEM ────────────────────────────────────────────────────── // Format: CODE -> expiry timestamp (ms). 0 = never expires. // Add new codes here. Date.UTC(year, month-1, day) for expiry. // ACCESS_CODES, isCodeValid, checkAccess defined at module level (see below component) // They are referenced here as module-level vars so useState initializer can call them const [hasAccess, setHasAccess] = useState(() => checkAccess()); const [showPaywall, setShowPaywall] = useState(false); const [pwPlan, setPwPlan] = useState("monthly"); const [pwCode, setPwCode] = useState(""); const [pwCodeStatus, setPwCodeStatus] = useState("idle"); const [pwCodeMsg, setPwCodeMsg] = useState(""); const redeemCode = () => { const code = pwCode.trim().toUpperCase(); const check = isCodeValid(code); // calls module-level function if (check.valid) { localStorage.setItem("vcb_access", JSON.stringify({ type:"code", code })); // Persist code to Firestore for cross-session access try { if (window.fbAuth && window.fbDb) { const u = window.fbAuth.currentUser; if (u) { window.fbDb.collection("profiles").doc(u.uid).set( { accessCode: code, updatedAt: Date.now() }, { merge: true } ); } } } catch(e) {} const expMsg = check.reason === "permanent" ? "✓ Code accepted! You have permanent access." : "✓ Code accepted! Access expires " + new Date(check.expiry).toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"}) + "."; setPwCodeStatus("valid"); setPwCodeMsg(expMsg); setTimeout(() => { setHasAccess(true); setShowPaywall(false); }, 900); } else if (check.reason === "expired") { setPwCodeStatus("invalid"); setPwCodeMsg("This code has expired. Please subscribe or contact support for a new code."); } else { setPwCodeStatus("invalid"); setPwCodeMsg("That code isn't valid. Check spelling or contact support."); } }; const grantPaidAccess = (planMonths) => { const expiry = Date.now() + planMonths * 30 * 24 * 60 * 60 * 1000; localStorage.setItem("vcb_access", JSON.stringify({ type:"paid", stripeSession:"direct", expiry, plan: planMonths===1?"monthly":"annual" })); setHasAccess(true); setShowPaywall(false); }; // Access validation handled in checkAccess() // ── FIREBASE STORAGE HELPERS ──────────────────────────────────────────────── const openClipboardCapture = async () => { let text = ""; try { text = await navigator.clipboard.readText(); } catch(e) { // Clipboard permission denied - open with empty fields } // Try to parse job info from clipboard text let title = ""; let company = ""; let link = ""; if (text) { // If it looks like a URL if (text.startsWith("http")) { link = text.trim(); // Try to extract from common URL patterns if (text.includes("indeed.com")) company = "Indeed Job"; if (text.includes("linkedin.com")) company = "LinkedIn Job"; if (text.includes("usajobs.gov")) company = "U.S. Government"; if (text.includes("ziprecruiter.com")) company = "ZipRecruiter Job"; if (text.includes("clearancejobs.com")) company = "ClearanceJobs"; } else { // Try to parse "Job Title - Company" or "Job Title at Company" const atMatch = text.match(/^(.+?)\s+at\s+(.+?)$/i); const dashMatch = text.match(/^(.+?)\s*[-–]\s*(.+?)$/); if (atMatch) { title = atMatch[1].trim(); company = atMatch[2].trim(); } else if (dashMatch) { title = dashMatch[1].trim(); company = dashMatch[2].trim(); } else { title = text.slice(0, 80).trim(); } } } setClipboardParsed({ title, company, link }); setShowClipboardModal(true); setTab(4); setRetentionTab("tracker"); }; const showToast = (msg) => { setSaveToast(msg); setTimeout(() => setSaveToast(""), 2800); }; // ── LISTEN FOR FIREBASE AUTH STATE ── // ── BOOKMARKLET URL HANDLER ── useEffect(() => { const params = new URLSearchParams(window.location.search); if (params.get("addjob") === "1") { const title = decodeURIComponent(params.get("title")||""); const company = decodeURIComponent(params.get("company")||""); const link = decodeURIComponent(params.get("link")||""); if (title || company) { const entry = {id:Date.now(), title, company, link, date: new Date().toISOString().slice(0,10), status:"Applied", notes:"", source:"Bookmarklet"}; setJobApps(prev => { const updated = [entry, ...prev]; localStorage.setItem("vcb_jobs", JSON.stringify(updated)); return updated; }); setTab(4); setRetentionTab("tracker"); showToast("Job saved to tracker ✓ — "+(title||company)); window.history.replaceState({}, "", window.location.pathname); } } }, []); useEffect(() => { if (!fbAuth) return; const unsubscribe = fbAuth.onAuthStateChanged(async (firebaseUser) => { if (firebaseUser) { // User is signed in const initials = (firebaseUser.displayName || firebaseUser.email) .split(" ").map(w => w[0]).join("").toUpperCase().slice(0, 2); const user = { uid: firebaseUser.uid, name: firebaseUser.displayName || firebaseUser.email.split("@")[0], email: firebaseUser.email, initials, }; setCurrentUser(user); setHasUnsaved(false); // Load their saved profile try { const doc = await fbDb.collection("profiles").doc(firebaseUser.uid).get(); if (doc.exists) { const data = doc.data(); if (data.personal) setPersonal(data.personal); if ((data.milExperiences && data.milExperiences.length)) setMilExperiences(data.milExperiences); if ((data.civExperiences && data.civExperiences.length)) setCivExperiences(data.civExperiences); // backwards compat if (!data.milExperiences && (data.experiences && data.experiences.length)) setMilExperiences(data.experiences); if ((data.education && data.education.length)) setEducation(data.education); if (data.skills) setSkills(data.skills); if (data.target) setTarget(data.target); // Cache profile to localStorage so standalone tool pages can read it // without needing their own Firebase init try { localStorage.setItem("vcb_profile", JSON.stringify(data)); } catch(e) {} // Re-hydrate vcb_access from Firestore if localStorage was cleared // This keeps tools unlocked across refreshes for paying users try { const currentAccess = localStorage.getItem("vcb_access"); let needsRehydrate = !currentAccess; if (currentAccess) { const parsed = JSON.parse(currentAccess); if (parsed.type === "paid" && parsed.expiry <= Date.now()) needsRehydrate = true; } if (needsRehydrate && data.stripeSession) { const expiry = data.accessExpiry || (Date.now() + 365*24*60*60*1000); localStorage.setItem("vcb_access", JSON.stringify({ type:"paid", stripeSession: data.stripeSession, expiry, plan: data.plan || "monthly" })); setHasAccess(true); setShowPaywall(false); } else if (needsRehydrate && data.accessCode) { localStorage.setItem("vcb_access", JSON.stringify({ type:"code", code: data.accessCode })); setHasAccess(true); setShowPaywall(false); } else if (!needsRehydrate) { // localStorage still valid, make sure React state reflects it if (checkAccess()) { setHasAccess(true); setShowPaywall(false); // Sync localStorage access to Firestore if Firestore is missing it try { const acc = JSON.parse(localStorage.getItem("vcb_access")||"{}"); if (acc.stripeSession && !data.stripeSession) { fbDb.collection("profiles").doc(firebaseUser.uid).set({ stripeSession: acc.stripeSession, accessExpiry: acc.expiry, plan: acc.plan || "monthly", updatedAt: Date.now() }, { merge: true }); } else if (acc.code && !data.accessCode) { fbDb.collection("profiles").doc(firebaseUser.uid).set({ accessCode: acc.code, updatedAt: Date.now() }, { merge: true }); } } catch(e) {} } } } catch(e) {} } // Load saved resumes const resumesSnap = await fbDb.collection("profiles").doc(firebaseUser.uid) .collection("resumes").orderBy("createdAt","desc").limit(20).get(); setSavedResumes(resumesSnap.docs.map(d => d.data())); const clSnap = await fbDb.collection("profiles").doc(firebaseUser.uid).collection("coverLetters").orderBy("id","desc").limit(20).get(); setSavedCoverLetters(clSnap.docs.map(d=>d.data())); const emSnap = await fbDb.collection("profiles").doc(firebaseUser.uid).collection("emails").orderBy("id","desc").limit(20).get(); setSavedEmails(emSnap.docs.map(d=>d.data())); const scSnap = await fbDb.collection("profiles").doc(firebaseUser.uid).collection("scores").orderBy("id","desc").limit(10).get(); setSavedScores(scSnap.docs.map(d=>d.data())); } catch(e) { console.warn("Profile load error:", e); } } else { setCurrentUser(null); setSavedResumes([]); setJobApps([]); setTlChecks({}); setSavedCoverLetters([]); setSavedEmails([]); setSavedScores([]); } }); return () => unsubscribe(); }, []); // Mark unsaved when key fields change useEffect(() => { if (!currentUser || !fbDb) { setHasUnsaved(false); return; } setHasUnsaved(true); const timer = setTimeout(async () => { try { await fbDb.collection("profiles").doc((currentUser&¤tUser.uid)).set({ personal, milExperiences, civExperiences, education, skills, target, serviceRecords, targetLocation, updatedAt: Date.now() }, { merge: true }); setHasUnsaved(false); } catch(e) { /* silent fail */ } }, 1800); return () => clearTimeout(timer); }, [personal, milExperiences, civExperiences, education, skills, target, targetLocation, serviceRecords]); // ── AUTH HANDLERS (Firebase) ── const handleRegister = async () => { setAuthErr(""); setAuthOk(""); if (!authForm.name.trim()) return setAuthErr("Full name is required."); if (!authForm.username.trim()) return setAuthErr("Email is required."); if (authForm.password.length < 6) return setAuthErr("Password must be at least 6 characters."); if (authForm.password !== authForm.confirmPassword) return setAuthErr("Passwords do not match."); try { const cred = await fbAuth.createUserWithEmailAndPassword(authForm.username.trim(), authForm.password); await cred.user.updateProfile({ displayName: authForm.name.trim() }); setAuthOk("Account created! Signing you in..."); setShowAuth(false); // Check access before redirecting to Stripe if(window._pendingStripe){ delete window._pendingStripe; if(!checkAccess()){setShowPaywall(true);} } else if(!checkAccess()){setShowPaywall(true);} showToast("Welcome, " + authForm.name.split(" ")[0] + "! ✓"); setAuthForm({ username:"", password:"", confirmPassword:"", name:"" }); } catch(e) { if (e.code === "auth/email-already-in-use") setAuthErr("An account with this email already exists."); else if (e.code === "auth/invalid-email") setAuthErr("Please enter a valid email address."); else setAuthErr(e.message); } }; const handleLogin = async () => { if (!fbAuth) { setAuthErr("Authentication is not configured yet. Contact the site owner."); return; } setAuthErr(""); setAuthOk(""); if (!authForm.username.trim()) { setAuthErr("Please enter your email address."); return; } if (!authForm.password) { setAuthErr("Please enter your password."); return; } try { await fbAuth.signInWithEmailAndPassword(authForm.username.trim(), authForm.password); setShowAuth(false); // Check access before redirecting to Stripe - prevent double charges if(window._pendingStripe){ delete window._pendingStripe; if(!checkAccess()){setShowPaywall(true);} } else if(!checkAccess()){setShowPaywall(true);} setAuthForm({ username:"", password:"", confirmPassword:"", name:"" }); } catch(e) { if (e.code === "auth/user-not-found" || e.code === "auth/invalid-credential") setAuthErr("No account found. Check your email or create an account."); else if (e.code === "auth/wrong-password") setAuthErr("Incorrect password. Try again or reset it below."); else if (e.code === "auth/invalid-email") setAuthErr("Please enter a valid email address."); else if (e.code === "auth/too-many-requests") setAuthErr("Too many attempts. Please wait a moment and try again."); else setAuthErr("Sign in failed: " + (e.message||"Unknown error")); } }; const handleLogout = async () => { await fbAuth.signOut(); setCurrentUser(null); setSavedResumes([]); setHasUnsaved(false); // Clear localStorage caches try { localStorage.removeItem("vcb_profile"); localStorage.removeItem("vcb_access"); localStorage.removeItem("vcp_pf_user"); localStorage.removeItem("vcp_pathfinder_result"); localStorage.removeItem("vcb_assessment_result"); localStorage.removeItem("vcp_scout_data"); localStorage.removeItem("vcp_scout_resume"); localStorage.removeItem("vcp_scout_wizard"); } catch(e) {} setHasAccess(false); setShowPaywall(false); // Reset form fields setPersonal({ name:"", email:"", phone:"", location:"", linkedin:"" }); setMilExperiences([newMilExp()]); setEducation([{ id:1, institution:"", degree:"", field:"", year:"", pme:"" }]); setSkills({ technical:"", leadership:"", languages:"", certs:"" }); }; const handleSaveProfile = async () => { if (!currentUser) { setShowAuth(true); return; } try { const profileData = { personal, milExperiences, civExperiences, education, skills, target, updatedAt: new Date().toISOString() }; await fbDb.collection("profiles").doc((currentUser&¤tUser.uid)).set( profileData, { merge: true } ); // Cache profile in localStorage so standalone tool pages can read it // without needing their own Firebase init try { localStorage.setItem("vcb_profile", JSON.stringify(profileData)); } catch(e) {} showToast("Profile saved ✓"); setHasUnsaved(false); } catch(e) { showToast("Save failed — check connection"); } }; const handleSaveResume = async () => { if (!currentUser) { setShowAuth(true); return; } if (!resume) return; try { const resumeTitle = window.prompt("Give this resume a name so you can find it later:", target.title || "My Resume") || target.title || "Saved Resume"; const id = Date.now().toString(); const entry = { id, title: resumeTitle, industry: target.industry || "", format: resumeFormat, template: resumeTemplate, visualStyle: resumeVisualStyle, resumeData: resumeData || null, date: new Date().toLocaleDateString("en-US", { year:"numeric", month:"short", day:"numeric" }), preview: resume.slice(0, 120) + "...", content: resume, createdAt: new Date().toISOString(), }; await fbDb.collection("profiles").doc((currentUser&¤tUser.uid)) .collection("resumes").doc(id).set(entry); setSavedResumes(prev => [entry, ...prev].slice(0, 20)); showToast("Resume saved to your profile ✓"); } catch(e) { showToast("Save failed — check connection"); } }; // Safety: expose on window so components with broken prop threading can still call it window.__vcp_saveResume = handleSaveResume; const handleDeleteResume = async (id) => { if (!currentUser) return; try { await fbDb.collection("profiles").doc((currentUser&¤tUser.uid)) .collection("resumes").doc(id.toString()).delete(); setSavedResumes(prev => prev.filter(r => r.id !== id)); showToast("Resume deleted"); } catch(e) { showToast("Delete failed"); } }; const saveCoverLetter = async () => { const entry = {id:Date.now(), date:new Date().toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"}), job:coverLetterJob.title||"Cover Letter", company:coverLetterJob.company||"", content:coverLetter}; setSavedCoverLetters(prev=>[entry,...prev].slice(0,20)); if(currentUser&&fbDb){try{await fbDb.collection("profiles").doc((currentUser&¤tUser.uid)).collection("coverLetters").doc(entry.id.toString()).set(entry);}catch(e){}} showToast("Cover letter saved to My Profile ✓"); }; const saveEmail = async () => { const entry = {id:Date.now(), date:new Date().toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"}), type:followupCtx.outcome||"Follow-Up Email", content:followupEmail}; setSavedEmails(prev=>[entry,...prev].slice(0,20)); if(currentUser&&fbDb){try{await fbDb.collection("profiles").doc((currentUser&¤tUser.uid)).collection("emails").doc(entry.id.toString()).set(entry);}catch(e){}} showToast("Email saved to My Profile ✓"); }; const saveScore = async () => { const entry = {id:Date.now(), date:new Date().toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"}), score:resumeScore, label:resumeScore>=85?"Excellent":resumeScore>=75?"Strong":resumeScore>=65?"Good":"Needs Work", summary:resumeReview.summary||"", grades:resumeReview.grades||{}}; setSavedScores(prev=>[entry,...prev].slice(0,10)); if(currentUser&&fbDb){try{await fbDb.collection("profiles").doc((currentUser&¤tUser.uid)).collection("scores").doc(entry.id.toString()).set(entry);}catch(e){}} showToast("Score report saved to My Profile ✓"); }; const handleDeleteSaved = async (type,id) => { if(type==="cl") setSavedCoverLetters(prev=>prev.filter(x=>x.id!==id)); else if(type==="em") setSavedEmails(prev=>prev.filter(x=>x.id!==id)); else if(type==="sc") setSavedScores(prev=>prev.filter(x=>x.id!==id)); if(currentUser&&fbDb){ const col=type==="cl"?"coverLetters":type==="em"?"emails":"scores"; try{await fbDb.collection("profiles").doc((currentUser&¤tUser.uid)).collection(col).doc(id.toString()).delete();}catch(e){} } showToast("Deleted"); }; const handleLoadResume = (r) => { setResume(r.content); setTarget(t => ({ ...t, title: r.title, industry: r.industry })); setTab(2); showToast("Resume loaded ✓"); }; const setL = (k,v) => setLoading(l=>({...l,[k]:v})); const upP = (k,v) => setPersonal(p=>({...p,[k]:v})); const upT = (k,v) => setTarget(p=>({...p,[k]:v})); const upMilExp = (id,k,v) => setMilExperiences(es=>es.map(e=>e.id===id ? {...e,[k]:v,...(k==="mos"?{mosTitle:(MOS_DATA[v.toUpperCase()] && MOS_DATA[v.toUpperCase()].title)||""}:{})} : e)); const upCivExp = (id,k,v) => setCivExperiences(es=>es.map(e=>e.id===id ? {...e,[k]:v} : e)); const upExp = (id,k,v) => { if (milExperiences.find(e=>e.id===id)) upMilExp(id,k,v); else upCivExp(id,k,v); }; // ASI helpers const addAsi = (id) => { const exp = experiences.find(e=>e.id===id); if (!exp) return; const code = exp.customAsiCode.trim().toUpperCase(); const desc = exp.customAsiDesc.trim() || (COMMON_ASI.find(a=>a.code===code) ? COMMON_ASI.find(a=>a.code===code).desc : undefined) || ""; if (!code) return; if (exp.asi.find(a=>a.code===code)) return; upExp(id,"asi",[...exp.asi,{code,desc}]); upExp(id,"customAsiCode",""); upExp(id,"customAsiDesc",""); }; const addAsiCommon = (id,asi) => { const exp = experiences.find(e=>e.id===id); if (!exp||exp.asi.find(a=>a.code===asi.code)) return; upExp(id,"asi",[...exp.asi,asi]); }; const rmAsi = (id,code) => { const exp=experiences.find(e=>e.id===id); upExp(id,"asi",exp.asi.filter(a=>a.code!==code)); }; // SQI helpers const addSqi = (id) => { const exp = experiences.find(e=>e.id===id); if (!exp) return; const code = exp.customSqiCode.trim().toUpperCase(); const desc = exp.customSqiDesc.trim() || (COMMON_SQI.find(s=>s.code===code) ? COMMON_SQI.find(s=>s.code===code).desc : undefined) || ""; if (!code) return; if (exp.sqi.find(s=>s.code===code)) return; upExp(id,"sqi",[...exp.sqi,{code,desc}]); upExp(id,"customSqiCode",""); upExp(id,"customSqiDesc",""); }; const addSqiCommon = (id,sqi) => { const exp = experiences.find(e=>e.id===id); if (!exp||exp.sqi.find(s=>s.code===sqi.code)) return; upExp(id,"sqi",[...exp.sqi,sqi]); }; const rmSqi = (id,code) => { const exp=experiences.find(e=>e.id===id); upExp(id,"sqi",exp.sqi.filter(s=>s.code!==code)); }; // Duty helpers const addDuty = (id, duty) => { const exp = experiences.find(e=>e.id===id); if (!exp||!duty.trim()||exp.additionalDuties.includes(duty.trim())) return; upExp(id,"additionalDuties",[...exp.additionalDuties,duty.trim()]); upExp(id,"customDuty",""); }; const rmDuty = (id,d) => { const exp=experiences.find(e=>e.id===id); upExp(id,"additionalDuties",exp.additionalDuties.filter(x=>x!==d)); }; const addMilExp = () => setMilExperiences(es=>[...es,newMilExp()]); const addCivExp = () => setCivExperiences(es=>[...es,newCivExp()]); const addExp = () => setCivExperiences(es=>[...es,newCivExp()]); const rmExp = id => { setMilExperiences(es=>es.filter(e=>e.id!==id)); setCivExperiences(es=>es.filter(e=>e.id!==id)); }; const upEdu = (id,k,v) => setEducation(eds=>eds.map(e=>e.id===id?{...e,[k]:v}:e)); const addEdu = () => setEducation(eds=>[...eds,{id:Date.now(),institution:"",degree:"",field:"",year:"",pme:""}]); const rmEdu = id => setEducation(eds=>eds.filter(e=>e.id!==id)); const toggleCollapse = id => setCollapsed(c=>({...c,[id]:!c[id]})); // ── BUILD SUMMARIES ──────────────────────────────────────────────────────── const buildExpSummary = () => { const milParts = milExperiences.map(e=>{ const rolesStr = (e.mosRoles||[]).length ? "Positions held: "+(e.mosRoles.map(r=>[r.title,r.rankAtRole,r.fromYear&&r.toYear?r.fromYear+"-"+r.toYear:"",r.keyDuty].filter(Boolean).join(", ")).join(" | ")) : ""; const awardsStr = (e.awards||[]).length ? "Awards: "+((e.awards||[]).join(", ")) : ""; const qualStr = [ (e.asi && e.asi.length)?"ASIs: "+(e.asi.map(a=>a.code+"("+a.desc+")").join(", ")):null, (e.sqi && e.sqi.length)?"SQIs: "+(e.sqi.map(s=>s.code+"("+s.desc+")").join(", ")):null, (e.additionalDuties && e.additionalDuties.length)?"Additional Duties: "+(e.additionalDuties.join(", ")):null, ].filter(Boolean).join(" | "); const clearStr = e.clearanceLevel!=="None" ? `Clearance: ${e.clearanceLevel} (${e.clearanceStatus})${e.polygraph!=="None"?" + "+e.polygraph+" Poly":""}` : "No clearance"; return `[MILITARY] ${e.branch} | ${e.rank} | MOS: ${e.mos}${e.mosTitle?" ("+e.mosTitle+")":""} | ${e.serviceType} | Unit: ${e.unit} | TOS: ${e.tos||"not listed"} | ${e.startDate||"?"}–${e.current?"Present":e.endDate||"?"} | ${clearStr}${qualStr?" | "+qualStr:""} | Duties: ${e.duties||"not listed"}${rolesStr?" | "+rolesStr:""}${awardsStr?" | "+awardsStr:""}${e.deployments?" | Deployments: "+e.deployments:""}`; }); const civParts = civExperiences.map(e=>{ const clearStr = (e.clearanceLevel&&e.clearanceLevel!=="None") ? "Clearance: "+(e.clearanceLevel):""; return `[${e.type.toUpperCase()}] ${e.jobTitle||"Role"} at ${e.employer||"Unknown"} | ${e.startDate||"?"}–${e.current?"Present":e.endDate||"?"} | Duties: ${e.duties||"not listed"}${clearStr?" | "+clearStr:""}`; }); return [...milParts,...civParts].join("\n"); }; // ── TRANSLATE ────────────────────────────────────────────────────────────── const translateMOS = async () => { if (!hasAccess) { setShowPaywall(true); return; } if (!isApiKeySet()) { setShowAdminSetup(true); return; } if (!milExperiences.length) return; setApiError(""); setTranslationData(null); setMosOut(""); setL("translate", true); try { const lines = milExperiences.map(e => { const parts = [ "MOS/Rate: " + (e.mos||"unknown") + " (" + (e.mosTitle||"see title") + ")", "Branch: " + e.branch + " | Rank: " + (e.rank||"not listed") + " | Service: " + (e.serviceType||"Active Duty") + " | TOS: " + (e.tos||"unknown"), (e.asi&&e.asi.length) ? "ASIs: " + e.asi.map(a=>a.code+" - "+a.desc).join(", ") : null, (e.sqi&&e.sqi.length) ? "SQIs: " + e.sqi.map(s=>s.code+" - "+s.desc).join(", ") : null, (e.additionalDuties&&e.additionalDuties.length) ? "Additional Duties: " + e.additionalDuties.join(", ") : null, (e.mosRoles&&e.mosRoles.length) ? "Career progression: " + e.mosRoles.map(r=>(r.fromYear?r.fromYear:"")+(r.toYear?"-"+r.toYear:"")+" "+r.rankAtRole+" "+r.title+(r.keyDuty?": "+r.keyDuty:"")).filter(s=>s.trim()).join(" → ") : null, (e.awards&&e.awards.length) ? "Awards: " + e.awards.join(", ") : null, (e.clearanceLevel&&e.clearanceLevel!=="None") ? "Clearance: " + e.clearanceLevel + " " + (e.clearanceStatus||"Active") : null, "Duties: " + (e.duties||"not described"), ]; return parts.filter(Boolean).join("\n"); }).join("\n\n---\n\n"); const prompt = "A veteran has this military background:\n\n" + lines + "\n\n" + "Please provide a detailed civilian translation. Return ONLY a JSON object with NO markdown, no backticks, no extra text. Start with { and end with }.\n\n" + "The JSON must have these exact keys:\n" + "summary: a 3-sentence professional civilian summary paragraph\n" + "roles: array of objects, one per military role, each with: mos (string), title (string), whatYouDid (string, 2-3 plain English sentences), transferableSkills (array of 6 strings), resumeBullets (array of 4 strong resume bullet points starting with action verbs)\n" + "qualifications: array of objects for each ASI/SQI, each with: code, name, civilianMeaning, unlocks\n" + "additionalDuties: array of objects for each additional duty, each with: duty, civilianEquivalent, value"; const raw = await callClaude( prompt, "You are an expert military-to-civilian career translator. RULES: 1) ZERO military jargon — translate everything to civilian language. 2) EMPLOYER/BRANCH NAME: Never change U.S. Army, U.S. Navy, U.S. Marine Corps, U.S. Air Force, U.S. Coast Guard, U.S. Space Force — keep exactly as written. 3) UNIT NAME: Never translate unit names — keep exactly as the veteran typed (e.g. 126 CTC stays 126 CTC). 4) RANK TRANSLATIONS: E5-E6=Supervisor, E7=Operations Manager, E8=Senior Manager, E9=Director, O3=Program Manager, O4=Senior PM, O5=Director, O6=Executive Director. 5) TITLE TRANSLATIONS: NCO=Supervisor, NCOIC=Operations Lead, Armorer=Equipment Inventory Manager, SHARP Rep=HR Compliance Coordinator, Retention NCO=Talent Acquisition Specialist, Supply Sgt=Logistics Manager, Motor Transport=Fleet Operations Manager. 6) METRICS: Only use numbers the veteran explicitly provided — never fabricate metrics. 7) Security clearances: ONLY include if the veteran selected to include it. If not selected, omit entirely. 8) Every bullet starts with a civilian action verb: Led, Managed, Directed, Coordinated, Developed, Implemented, Oversaw, Delivered.", 2000 ); // Robust JSON extraction const start = raw.indexOf("{"); const end = raw.lastIndexOf("}"); if (start === -1 || end === -1) { throw new Error("Response did not contain valid JSON. Raw: " + raw.slice(0,200)); } const parsed = JSON.parse(raw.slice(start, end + 1)); // Ensure required fields exist with fallbacks const result = { summary: parsed.summary || "Your military background demonstrates strong leadership, discipline, and mission-focused expertise.", roles: Array.isArray(parsed.roles) ? parsed.roles : [], qualifications: Array.isArray(parsed.qualifications) ? parsed.qualifications : [], additionalDuties: Array.isArray(parsed.additionalDuties) ? parsed.additionalDuties : [], }; setTranslationData(result); } catch(err) { console.error("translateMOS error:", err); setMosOut("Translation failed: " + (err.message || "Unknown error. Check your API key and try again.")); } setL("translate", false); }; // ── CAREERS ─────────────────────────────────────────────────────────────── const findCareers = async () => { if (!hasAccess) { setShowPaywall(true); return; } if (!isApiKeySet()) { setShowAdminSetup(true); return; } setApiError(""); setCareerError(""); setL("careers",true); setCareers(null); setSelectedCareer(null); setCareerDetail(null); const summary = buildExpSummary(); const branch = (milExperiences[0]||{}).branch||"Army"; const mos = (milExperiences[0]||{}).mos||""; const rank = (milExperiences[0]||{}).rank||""; const tos = (milExperiences[0]||{}).tos||""; const clearance = (milExperiences[0]||{}).clearanceLevel||"None"; const hasClearance = clearance && clearance!=="None"; const system = "You are the world's best military-to-civilian career counselor. You know EVERY civilian job sector including skilled trades, retail management, transportation, agriculture, maritime, aviation, hospitality, fitness, education, social work, nonprofits, entrepreneurship, real estate, financial services, and more. Return ONLY valid minified JSON. No markdown, no backticks, no line breaks inside strings, no trailing commas. The JSON must parse with JSON.parse() on the first try."; const mosDetail = milExperiences.map(e=>(e.mos||(e.branch+' service'))+(e.mosTitle?' ('+e.mosTitle+')':'')+', '+e.branch+(e.rank?' '+e.rank:'')+', '+(e.tos||'unknown TIS')+' TIS').join('; '); const civDetail = civExperiences.filter(e=>e.jobTitle).map(e=>e.jobTitle+(e.employer?' at '+e.employer:'')).join(', '); const awardsDetail = milExperiences.flatMap(e=>e.awards||[]).slice(0,6).join(', '); const asiDetail = milExperiences.flatMap(e=>(e.asi||[]).map(a=>a.code+': '+a.desc)).slice(0,4).join('; '); const clearances = milExperiences.map(e=>e.clearanceLevel).filter(c=>c&&c!=='None').join(', '); const dutiesDetail = milExperiences.flatMap(e=>e.duties?[e.duties.slice(0,100)]:[]).join(' | ').slice(0,300); const eduDetail = education.map(e=>e.degree+' '+e.field).filter(Boolean).join(', '); const prompt = `You are an expert military transition counselor. Generate 12 PERSONALIZED career paths for this specific veteran. THIS VETERAN'S ACTUAL BACKGROUND: Military: ${mosDetail||'military background'} Civilian Work: ${civDetail||'none yet'} Duties/Responsibilities: ${dutiesDetail||'standard military duties'} Specialty Quals: ${asiDetail||'none listed'} Awards: ${awardsDetail||'none listed'} Clearance: ${clearances||'None'} Education: ${eduDetail||'military training'} Career Goal: ${target.title||'open'} in ${target.industry||'any sector'} Interests & Hobbies: ${target.interests||'not specified'} Open To: ${target.openTo||'flexible'} Location: ${targetLocation||'flexible'} RULES — follow strictly: 1. Top 8 paths must directly match their MOS/rate and civilian work history 2. Use their interests/hobbies to find 3-4 meaningful career connections 3. Clearances unlock intel, defense contractor, and federal roles — include them 4. ASI/SQI specialties must appear directly in titles and whyFit 5. Include entry-level ($40k-$60k) AND senior paths ($80k+) 6. NO generic roles unless directly tied to their specific background 7. whyFit MUST cite something specific from their profile — not generic veteran praise 8. salaryRange format: '$XX,000-$XX,000' only, no special chars 9. Return ONLY minified JSON, no markdown [{"title":"Specific Title","sector":"Civilian|Government|Defense\/Intel","industry":"Field","salaryRange":"$X-$Y","match":"Excellent|Strong|Good","whyFit":"cite specific background","topSkills":["s1","s2","s3"],"nextStep":"first action"}]` try { const raw = await callClaude(prompt, system, 2500); // Aggressively clean the response let cleaned = raw .replace(/```json/gi,"").replace(/```/g,"") .replace(/,\s*}/g,"}").replace(/,\s*]/g,"]") .trim(); const arrStart = cleaned.indexOf("["); const arrEnd = cleaned.lastIndexOf("]"); if (arrStart === -1 || arrEnd === -1) throw new Error("No JSON array found"); cleaned = cleaned.slice(arrStart, arrEnd + 1); // Fix common JSON issues const parsed = JSON.parse(cleaned); if (!Array.isArray(parsed) || parsed.length === 0) throw new Error("Empty array"); setCareers(parsed); } catch(err) { console.error("findCareers error:", err); setCareerError("Career match failed: " + (err.message||"Try again.")); // Rich fallback covering all sectors setCareers([ {title:"CDL Truck Driver",sector:"Civilian",industry:"Transportation / Logistics",salaryRange:"$55,000-$90,000",match:"Excellent",outlook:"High Growth",why:"Military discipline and vehicle operation translate directly. CDL license obtainable in 4-8 weeks.",clearanceBonus:false,entryPath:"Enroll in CDL school using GI Bill or Helmets to Hardhats",education:"CDL-A License"}, {title:"Police Officer",sector:"Government",industry:"Law Enforcement",salaryRange:"$55,000-$85,000",match:"Excellent",outlook:"Stable",why:"Military veterans are preferred candidates at most agencies. Physical fitness and command presence are direct assets.",clearanceBonus:false,entryPath:"Apply to local or federal agency, most waive written exam for veterans",education:"Police Academy (3-6 months)"}, {title:"Electrician Apprentice",sector:"Civilian",industry:"Skilled Trades / Construction",salaryRange:"$48,000-$95,000",match:"Excellent",outlook:"High Growth",why:"High demand, strong union wages, GI Bill covers apprenticeship programs.",clearanceBonus:false,entryPath:"Register with IBEW or IEC apprenticeship program",education:"4-year apprenticeship"}, {title:"Firefighter",sector:"Government",industry:"Fire & Emergency Services",salaryRange:"$52,000-$80,000",match:"Excellent",outlook:"Stable",why:"Military teamwork, physical fitness, and emergency response experience are exactly what fire departments seek.",clearanceBonus:false,entryPath:"Apply to local fire department, use veterans preference points",education:"Fire Academy + EMT cert"}, {title:"Federal Law Enforcement Officer",sector:"Government",industry:"Federal Agency",salaryRange:"$60,000-$100,000",match:"Strong",outlook:"Stable",why:"FBI, DEA, CBP, Secret Service all actively recruit veterans with military police or combat experience.",clearanceBonus:true,entryPath:"Apply via USAJobs.gov with veterans preference",education:"Agency-specific training"}, {title:"Operations Manager",sector:"Civilian",industry:"Logistics / Manufacturing",salaryRange:"$65,000-$100,000",match:"Strong",outlook:"Stable",why:"Military NCOs and officers run complex operations daily — this is the same skill set.",clearanceBonus:false,entryPath:"Translate leadership experience on resume, target Walmart, Amazon, FedEx hiring programs",education:"PMP cert helpful"}, {title:"HVAC Technician",sector:"Civilian",industry:"Skilled Trades",salaryRange:"$50,000-$85,000",match:"Strong",outlook:"High Growth",why:"Strong demand, excellent wages, military mechanical experience is valued.",clearanceBonus:false,entryPath:"Enroll in HVAC program via GI Bill, apprenticeship or trade school",education:"EPA 608 Cert"}, {title:"Cybersecurity Analyst",sector:"Civilian",industry:"Technology / Defense",salaryRange:"$70,000-$115,000",match:"Strong",outlook:"High Growth",why:"DOD cybersecurity experience and clearances are extremely valuable in the private sector.",clearanceBonus:true,entryPath:"CompTIA Security+ certification (study 2-3 months), apply to defense contractors",education:"Security+ / CEH cert"}, {title:"Government Contractor (DoD)",sector:"Defense/Intel",industry:"Defense Contracting",salaryRange:"$75,000-$130,000",match:"Excellent",outlook:"Stable",why:"Your military experience and clearance make you immediately valuable to Booz Allen, SAIC, Leidos, and others.",clearanceBonus:true,entryPath:"Apply directly to major defense contractors on LinkedIn or ClearanceJobs.com",education:"Clearance required"}, {title:"EMT / Paramedic",sector:"Civilian",industry:"Emergency Medical Services",salaryRange:"$38,000-$65,000",match:"Strong",outlook:"High Growth",why:"Combat medics (68W, HM, 18D) can often test out of EMT requirements.",clearanceBonus:false,entryPath:"Enroll in EMT-Basic course, advance to Paramedic in 1-2 years",education:"EMT-B cert (4-8 weeks)"}, {title:"Project Manager",sector:"Civilian",industry:"Construction / Technology / Healthcare",salaryRange:"$70,000-$110,000",match:"Strong",outlook:"High Growth",why:"Military planning experience maps directly to project management.",clearanceBonus:false,entryPath:"Earn PMP certification, target companies with veteran hiring programs",education:"PMP Certification"}, {title:"TSA Officer / Border Patrol",sector:"Government",industry:"Homeland Security",salaryRange:"$45,000-$75,000",match:"Excellent",outlook:"Stable",why:"Direct pipeline from military service, veterans preference applies.",clearanceBonus:false,entryPath:"Apply on USAJobs.gov, process takes 3-6 months",education:"Federal training provided"}, {title:"Welder",sector:"Civilian",industry:"Manufacturing / Oil & Gas / Shipbuilding",salaryRange:"$48,000-$80,000",match:"Strong",outlook:"Stable",why:"High demand across shipbuilding, pipeline, and manufacturing. Overtime opportunities are substantial.",clearanceBonus:false,entryPath:"AWS welding cert via trade school or community college using GI Bill",education:"AWS Certification"}, {title:"Intelligence Analyst",sector:"Defense/Intel",industry:"Intelligence Community",salaryRange:"$70,000-$115,000",match:"Strong",outlook:"Stable",why:"Military intelligence experience and clearances are the #1 requirement for these roles.",clearanceBonus:true,entryPath:"Apply to CIA, NSA, DIA or defense contractors via ClearanceJobs.com",education:"Clearance + BA preferred"}, {title:"Heavy Equipment Operator",sector:"Civilian",industry:"Construction / Mining / Oil & Gas",salaryRange:"$55,000-$90,000",match:"Strong",outlook:"Stable",why:"Military combat engineers and motor transport operators have directly transferable skills.",clearanceBonus:false,entryPath:"NCCER certification via apprenticeship or Helmets to Hardhats program",education:"NCCER Operator Cert"}, {title:"Logistics Coordinator",sector:"Civilian",industry:"Supply Chain / Freight",salaryRange:"$50,000-$75,000",match:"Excellent",outlook:"High Growth",why:"Military logistics (92A, 88M, Storekeeper) is identical to civilian supply chain work.",clearanceBonus:false,entryPath:"Apply to Amazon, FedEx, UPS, or freight brokerages",education:"None required"}, {title:"Diesel Mechanic",sector:"Civilian",industry:"Transportation / Fleet Maintenance",salaryRange:"$52,000-$80,000",match:"Strong",outlook:"Stable",why:"Military vehicle mechanics (91B, 63 series, DC) are highly sought after.",clearanceBonus:false,entryPath:"ASE certification, apply to trucking companies or transit agencies",education:"ASE Cert"}, {title:"Safety Manager / EHS Specialist",sector:"Civilian",industry:"Construction / Manufacturing / Oil & Gas",salaryRange:"$60,000-$95,000",match:"Strong",outlook:"High Growth",why:"Military safety protocols and risk management experience are directly valuable.",clearanceBonus:false,entryPath:"OSHA 30 cert + CSP or CHST certification",education:"OSHA 30 cert"}, {title:"Corrections Officer",sector:"Government",industry:"State / Federal Corrections",salaryRange:"$45,000-$70,000",match:"Strong",outlook:"Stable",why:"Military discipline and physical fitness are exactly what the correctional system needs.",clearanceBonus:false,entryPath:"Apply to state DOC or Bureau of Prisons, veterans preference applies",education:"Academy training provided"}, {title:"IT Systems Administrator",sector:"Civilian",industry:"Technology",salaryRange:"$60,000-$95,000",match:"Strong",outlook:"High Growth",why:"Military IT and communications (25 series, IT rating) translates directly.",clearanceBonus:false,entryPath:"CompTIA A+ and Network+ certs, apply to IT staffing firms",education:"CompTIA A+ / Network+"}, {title:"Plumber / Pipefitter",sector:"Civilian",industry:"Skilled Trades",salaryRange:"$55,000-$100,000",match:"Strong",outlook:"High Growth",why:"Extremely high demand, strong union wages, GI Bill covers apprenticeship.",clearanceBonus:false,entryPath:"UA Plumbers & Pipefitters apprenticeship via Helmets to Hardhats",education:"5-year apprenticeship"}, {title:"Training Specialist / Instructional Designer",sector:"Civilian",industry:"Corporate / Government",salaryRange:"$55,000-$85,000",match:"Excellent",outlook:"Stable",why:"Military instructors (Drill Sergeants, MOS trainers) are natural training specialists.",clearanceBonus:false,entryPath:"ATD certification, apply to corporate L&D departments or government training contractors",education:"ATD cert helpful"}, {title:"Postal Inspector / Mail Carrier",sector:"Government",industry:"United States Postal Service",salaryRange:"$50,000-$85,000",match:"Strong",outlook:"Stable",why:"USPS offers veterans preference and career advancement paths.",clearanceBonus:false,entryPath:"Apply at usps.com/careers, veterans preference gives significant advantage",education:"None required"}, {title:"Real Estate Agent",sector:"Civilian",industry:"Real Estate",salaryRange:"$45,000-$120,000",match:"Good",outlook:"High Growth",why:"Veterans understand the military relocation process and connect well with the 1.3M military families moving annually.",clearanceBonus:false,entryPath:"State real estate license (3-6 months), target military communities near bases",education:"State RE License"} ]); } setL("careers",false); }; // ── CAREER DETAIL ────────────────────────────────────────────────────────── const openCareerDetail = async (career) => { if (!hasAccess) { setShowPaywall(true); return; } setSelectedCareer(career); setCareerDetail(null); setL("careerDetail",true); const summary = buildExpSummary(); const prompt = `A veteran with this background: ${summary || "general military service"} is considering the career: "${career.title}" in the ${career.sector} sector. You MUST return ONLY a valid JSON object. No text before or after. No markdown. No backticks. Start your response with { and end with }. Use this exact structure: {"about":"3-4 sentences about this career","salaryBreakdown":{"entry":"$X – $Y","mid":"$X – $Y","senior":"$X – $Y","cleared":"$X – $Y or null","notes":"what drives salary variation"},"careerPath":[{"title":"Job Title","salary":"$X – $Y","description":"one sentence","timeframe":"Years 0-2"},{"title":"Next Role","salary":"$X – $Y","description":"one sentence","timeframe":"Years 2-5"},{"title":"Senior Role","salary":"$X – $Y","description":"one sentence","timeframe":"Years 5-10"},{"title":"Expert/Leadership","salary":"$X – $Y","description":"one sentence","timeframe":"Years 10+"}],"whyYouFit":["reason 1","reason 2","reason 3","reason 4"],"requiredSkills":["skill 1","skill 2","skill 3","skill 4","skill 5"],"gaps":["gap 1","gap 2"],"certifications":["cert 1","cert 2","cert 3"],"actionSteps":["step 1","step 2","step 3","step 4","step 5"]}`; try { const raw = await callClaude(prompt, "You are a military career transition expert. Return ONLY valid JSON starting with { and ending with }. Never include markdown, backticks, or explanatory text outside the JSON."); // Robust JSON extraction — find first { to last } const start = raw.indexOf("{"); const end = raw.lastIndexOf("}"); if (start === -1 || end === -1) throw new Error("No JSON found"); const jsonStr = raw.slice(start, end + 1); const parsed = JSON.parse(jsonStr); // Ensure all expected fields exist with fallbacks setCareerDetail({ about: parsed.about || (career.title)+" is a "+(career.sector||"")+" career well-suited for veterans.", salaryBreakdown: { entry: (parsed.salaryBreakdown && parsed.salaryBreakdown.entry) || career.salaryRange, mid: (parsed.salaryBreakdown && parsed.salaryBreakdown.mid) || "", senior: (parsed.salaryBreakdown && parsed.salaryBreakdown.senior) || "", cleared: (parsed.salaryBreakdown && parsed.salaryBreakdown.cleared) || null, notes: (parsed.salaryBreakdown && parsed.salaryBreakdown.notes) || "", }, careerPath: Array.isArray(parsed.careerPath) ? parsed.careerPath : [], whyYouFit: Array.isArray(parsed.whyYouFit) ? parsed.whyYouFit : [career.whyFit || "Your military background is directly transferable."], requiredSkills: Array.isArray(parsed.requiredSkills) ? parsed.requiredSkills : (career.topSkills || []), gaps: Array.isArray(parsed.gaps) ? parsed.gaps : [], certifications: Array.isArray(parsed.certifications) ? parsed.certifications : [], actionSteps: Array.isArray(parsed.actionSteps) ? parsed.actionSteps : [career.nextStep || "Research this career field further."], }); } catch(err) { // Fallback: build a useful detail view from the data we already have setCareerDetail({ about: (career.title)+" is a "+(career.sector||"")+" role in "+(career.industry||"multiple industries")+". "+(career.description||"")+" Veterans are well-positioned for this career due to their disciplined work ethic, leadership experience, and mission-focused mindset.", salaryBreakdown: { entry: career.salaryRange, mid: "", senior: "", cleared: null, notes: "Salary varies by location, experience, and certifications." }, careerPath: [ { title: "Entry-Level "+(career.title), salary: career.salaryRange, description: "Build foundational civilian experience and professional network.", timeframe: "Years 0–2" }, { title: "Mid-Level "+(career.title), salary: "", description: "Take on increased responsibility and specialize in a sub-field.", timeframe: "Years 2–5" }, { title: "Senior "+(career.title), salary: "", description: "Lead teams, mentor junior staff, manage larger programs.", timeframe: "Years 5–10" }, { title: "Director / Principal", salary: "", description: "Strategic leadership, executive decision-making, organizational impact.", timeframe: "Years 10+" }, ], whyYouFit: [career.whyFit || "Your military background provides strong transferable skills.", "Veterans bring leadership and discipline that civilian employers highly value.", "Your service demonstrates mission focus and the ability to perform under pressure."], requiredSkills: career.topSkills || [], gaps: ["Consider gaining civilian industry certifications to complement your military training.", "Building a professional civilian network through LinkedIn and industry events will accelerate your transition."], certifications: ["Research industry-specific certifications for this field.", "Consider PMP (Project Management Professional) as a broad credential.", "Check if your military training credits toward any civilian licenses."], actionSteps: [career.nextStep || "Research job postings in this field on USAJOBS, LinkedIn, and Indeed.", "Update your resume to target this specific role using the Resume tab.", "Connect with veterans already working in this field through LinkedIn.", "Research employers who actively recruit veterans in this sector.", "Schedule informational interviews with professionals in this career."], }); } setL("careerDetail",false); }; // ── RESUME ───────────────────────────────────────────────────────────────── const genResume = async () => { if (!hasAccess) { setShowPaywall(true); return; } if (!isApiKeySet()) { setShowAdminSetup(true); return; } setApiError(""); setL("resume",true); setResume(""); setResumeData(null); const expText = buildExpSummary(); const milSum = milExperiences.map(e => (e.branch||"Military") + " " + (e.rank||"") + " MOS:" + (e.mos||"") + " " + (e.mosTitle||"") + " TOS:" + (e.tos||"unknown") + ((e.asi&&e.asi.length) ? " ASIs:"+e.asi.map(a=>a.code+"-"+a.desc).join(",") : "") + ((e.sqi&&e.sqi.length) ? " SQIs:"+e.sqi.map(s=>s.code+"-"+s.desc).join(",") : "") + ((e.awards&&e.awards.length) ? " Awards:"+e.awards.join(",") : "") + ((e.additionalDuties&&e.additionalDuties.length) ? " Duties:"+e.additionalDuties.join(",") : "") + ((e.mosRoles&&e.mosRoles.length) ? " Progression:"+e.mosRoles.map(r=>(r.fromYear||"")+"-"+(r.toYear||"")+" "+r.rankAtRole+" "+r.title).join(" → ") : "") + " Clearance:" + (e.clearanceLevel||"None") + " Deployments:" + (e.deployments||"none") + " Duties:" + (e.duties||"not described") ).join(" | "); const eduText = education.map(e=>(e.degree)+" in "+(e.field||"")+" — "+(e.institution||"")+" ("+(e.year||"")+")").join("; "); try { const formatInstructions = { ats_chrono: "ATS CHRONOLOGICAL FORMAT: Simple clean layout. Standard section headers (Summary, Experience, Education, Skills, Certifications). Reverse chronological work history. No tables, no text boxes, no columns. Keyword-rich. ATS-safe fonts and structure.", ats_combo: "ATS COMBINATION FORMAT: Open with a Skills Summary section listing 8-10 core competencies as keywords. Then reverse-chronological experience. Then education. ATS-optimized throughout with no tables or columns.", functional: "FUNCTIONAL (SKILLS-FIRST) FORMAT: Section order: 1) Professional Profile (3 sentences), 2) Core Competencies (10-12 keywords), 3) Functional Skill Groups — create 2-3 sections named after skill categories (Leadership & Management, Technical Operations, Medical/Healthcare, etc.) with 3-4 bullets each, 4) Employment History (brief: title, org, dates only — no bullets), 5) Education. This format de-emphasizes employment gaps and career pivots by leading with what the veteran CAN DO.", traditional: "TRADITIONAL FORMAT: Conservative black and white. Clean serif-style formatting. Standard sections. No color, no design elements. Appropriate for government, legal, and formal industries.", modern: "MODERN PROFESSIONAL FORMAT: Clean contemporary layout. Use subtle section dividers (——). Bold role titles. Clean hierarchy. Professional but polished. Suitable for corporate and private sector.", executive: "EXECUTIVE FORMAT: Open with a strong executive profile paragraph. Follow with Core Competencies as two columns of keywords. Then Career Highlights with 3-4 major achievements with metrics. Then abbreviated experience. Emphasize leadership scope, P&L, team size, and strategic impact.", federal: "FEDERAL/USAJOBS FORMAT: Extremely detailed. Include GS pay scale equivalent where applicable. List all positions with full addresses of employers, hours per week, supervisor names. Include detailed KSAs. Often 3-5 pages. List all training, awards, and certifications in full.", harvard: "HARVARD STYLE: Single column, clean conservative layout. Name and contact centered at top with a line beneath. Section headers in small caps or bold with a line rule. Clean consistent formatting with strong use of white space.", wharton: "WHARTON/MBA STYLE: Name bold and prominent. One-line title/brand statement. Experience entries lead with company and bold achievement metrics. Emphasis on quantified results, revenue impact, team sizes, and scope. Sharp and results-focused.", minimalist: "MINIMALIST FORMAT: Maximum white space. Simple clean typography. Minimal use of dividers. Let content breathe. Easy to scan. Clean hierarchy with role, company, dates on one line.", creative: "CREATIVE FORMAT: Use tasteful formatting with section color accents (use ASCII/text characters to simulate). Clear visual hierarchy. Creative but readable. Appropriate for design, media, and branding roles.", }; const formatGuide = formatInstructions[resumeFormat] || formatInstructions.ats_chrono; const contact = (personal.name||"") + " | " + (personal.email||"") + " | " + (personal.phone||"") + " | " + (personal.location||"") + (personal.linkedin ? " | " + personal.linkedin : ""); const eduText2 = education.map(e => (e.degree||"") + " " + (e.field||"") + " " + (e.institution||"") + " " + (e.year||"")).join("; "); const sectionsToInclude = Object.entries(resumeSections).filter(([k,v])=>v).map(([k])=>k).join(", "); const expLevelGuide = { entry: "ENTRY LEVEL: Focus on transferable skills, training certifications, leadership potential. Emphasize trainability and work ethic.", mid: "MID-CAREER: Balance military achievements with growing expertise. Show progression and increasing responsibility.", senior: "SENIOR LEVEL: Lead with strategic impact, team/org size, budget authority. Show cross-functional leadership.", executive: "EXECUTIVE LEVEL: Emphasize org-wide transformations, P&L ownership, strategic vision, enterprise-level decisions." }; const prompt = "You are a military-to-civilian resume expert and ATS optimization specialist. Create a PREMIUM, ATS-optimized professional resume.\n\n" + "VETERAN MILITARY PROFILE:\n" + milSum + "\n\n" + "CIVILIAN EXPERIENCE:\n" + expText + "\n\n" + "EDUCATION:\n" + eduText2 + "\n\n" + "SKILLS: " + (skills.technical||"") + "\n" + "LEADERSHIP: " + (skills.leadership||"") + "\n" + "LANGUAGES: " + (skills.languages||"") + "\n" + "CERTIFICATIONS: " + (skills.certs||"") + "\n" + (target.interests ? "INTERESTS/HOBBIES: " + target.interests + "\n" : "") + "TARGET ROLE: " + (target.title||"open") + " | Industry: " + (target.industry||"any") + "\n" + (targetCompany ? "TARGET COMPANY: " + targetCompany + " — tailor language and culture fit to this company\n" : "") + "EXPERIENCE LEVEL: " + (expLevelGuide[experienceLevel] || expLevelGuide.mid) + "\n" + (jobDescription ? "\nJOB DESCRIPTION TO MATCH:\n" + jobDescription.slice(0,2000) + "\n\nCRITICAL: Extract exact keywords from this job description and mirror them in the resume. Match qualifications, skills, and terminology exactly as written in the posting.\n" : "") + "SECTIONS TO INCLUDE: " + sectionsToInclude + "\n\n" + "CONTACT: " + contact + "\n\n" + "ATS OPTIMIZATION RULES:\n" + "1. Use EXACT keywords from the job description (if provided). ATS systems do literal string matching.\n" + "2. Include industry-standard civilian keywords for " + (target.industry||"this field") + ": " + (target.title||"operations management, leadership") + "\n" + "3. Use standard section headers that ATS systems recognize (Professional Summary, Experience, Education, Skills, Certifications).\n" + "4. No tables, columns, text boxes, headers/footers, or images — pure text hierarchy.\n" + "5. Spell out acronyms the first time, then abbreviate: 'Project Management Professional (PMP)'\n\n" + "PROFESSIONAL SUMMARY RULES:\n" + "Write a compelling 3-sentence Professional Summary that: (a) opens with years of experience + core expertise, (b) highlights 2-3 quantified signature achievements, (c) ends with the value proposition for the target role. Make it specific and powerful — not generic.\n\n" + "ACHIEVEMENT RULES:\n" + "1. Every bullet MUST follow the format: [Action Verb] + [What You Did] + [Quantified Result]\n" + "2. Include numbers wherever possible: team sizes, budget amounts ($), percentages (%), time saved, efficiency gains\n" + "3. Quantify ONLY using numbers the veteran explicitly provided. NEVER invent or fabricate metrics. If they gave no numbers, write a strong qualitative bullet.\n" + "4. Start every bullet with a powerful civilian action verb: Spearheaded, Orchestrated, Streamlined, Optimized, Transformed, Directed, Launched, Pioneered, Delivered, Accelerated\n\n" + "CRITICAL RULES — ZERO MILITARY JARGON ALLOWED:\n" + "ABSOLUTE RULE: The resume must read as if written by a civilian professional. A civilian hiring manager should not be able to tell this person was in the military unless they choose to mention it. Every single military term MUST be replaced with civilian language.\n" + "BANNED WORDS — never use these: NCO, NCOIC, OIC, MOS, AFSC, NEC, SGT, SSG, SFC, MSG, CSM, PFC, SPC, CPL, E-4, E-5, O-3, Soldier, Airman, Marine, Sailor, Guardian, Troop, Unit, Battalion, Brigade, Company, Platoon, Squad, TOC, SITREP, AAR, OPORD, TDY, PCS, ETS, TAD, SHARP (spell it out), Armorer (say Weapons Inventory Manager), Retention NCO (say Talent Acquisition Specialist), Drill Sergeant (say Training Instructor/Leadership Development Specialist), Airborne (say Parachute Operations Certified), MRE, Battle Rhythm, Hooah, Oorah, Hard Charger.\n" + "FULL JARGON TRANSLATION TABLE — translate ALL of these:\n" + "- NCO / Sergeant / Staff Sergeant = Team Leader / Operations Supervisor\n" + "- NCOIC = Operations Lead / Team Supervisor\n" + "- OIC = Program Manager / Department Lead\n" + "- 1SG/First Sergeant = Senior Operations Manager\n" + "- CSM/Command Sergeant Major = Chief of Staff / Senior Director\n" + "- Platoon Leader = Team Manager (30-50 personnel)\n" + "- Company Commander = Department Director (100-200 personnel)\n" + "- Battalion Commander = Division Director (500-800 personnel)\n" + "- S1/G1/J1 = Human Resources / Personnel Management\n" + "- S2/G2/J2 = Intelligence / Security Analysis\n" + "- S3/G3/J3 = Operations Management\n" + "- S4/G4/J4 = Logistics / Supply Chain Management\n" + "- S6/G6/J6 = Information Technology / Communications\n" + "- Unit Armorer = Weapons & Equipment Inventory Manager\n" + "- SHARP Representative = Employee Relations & Compliance Coordinator\n" + "- Retention NCO = Talent Acquisition & Career Development Specialist\n" + "- Drill Sergeant = Leadership Development Instructor\n" + "- Airborne qualified = Parachute Operations Certified (or just omit if not relevant)\n" + "- Supply Sergeant = Inventory & Logistics Manager\n" + "- Motor Transport = Fleet Operations & Vehicle Maintenance Manager\n" + "- Battalion / Brigade = Organization / Division\n" + "- Platoon of 40 soldiers = Team of 40 personnel\n" + "- TOC = Operations Center\n" + "- SITREP = Status Report / Progress Update\n" + "- AAR = After-Action Review / Post-Project Debrief\n" + "- OPORD = Operations Plan / Project Plan\n" + "- COR = Contract Oversight Manager\n" + "- PMCS = Preventive Maintenance Inspection Program\n" + "- SOP = Standard Operating Procedure / Process Documentation\n" + "- PT = Physical Fitness / Wellness Program\n" + "- FOB = Forward Operating Base / Remote Facility\n" + "- Deployed = Worked in austere / international / remote environment\n" + "- Secret clearance = Active Secret Security Clearance (keep this — it is valuable)\n" + "- TS/SCI = Active Top Secret/SCI Security Clearance (keep this — premium asset)\n\n" + "Return ONLY valid JSON, no markdown, starting with { ending with }.\n" + "Keys: name, contact (string), summary (2-3 sentence COMPELLING professional paragraph — not generic), " + "experience (array of {employer, title, dates, bullets:[4-6 strong civilian achievement bullets with quantified results]}), " + "education (array of {degree, school, year}), " + "skills (array of max 12 ATS-optimized skill strings matching the target industry), " + "certifications (array of strings), " + "clearance (string or null), " + "awards (array of strings), " + (resumeSections.volunteer ? "volunteer (array of {org, role, description}), " : "") + (resumeSections.languages ? "languages (array of strings), " : "") + "atsKeywords (array of 10-15 relevant keywords used in the resume)"; const raw = await callClaude( prompt, "You are an expert military-to-civilian career translator. RULES: 1) ZERO military jargon — translate everything to civilian language. 2) EMPLOYER/BRANCH NAME: Never change U.S. Army, U.S. Navy, U.S. Marine Corps, U.S. Air Force, U.S. Coast Guard, U.S. Space Force — keep exactly as written. 3) UNIT NAME: Never translate unit names — keep exactly as the veteran typed (e.g. 126 CTC stays 126 CTC). 4) RANK TRANSLATIONS: E5-E6=Supervisor, E7=Operations Manager, E8=Senior Manager, E9=Director, O3=Program Manager, O4=Senior PM, O5=Director, O6=Executive Director. 5) TITLE TRANSLATIONS: NCO=Supervisor, NCOIC=Operations Lead, Armorer=Equipment Inventory Manager, SHARP Rep=HR Compliance Coordinator, Retention NCO=Talent Acquisition Specialist, Supply Sgt=Logistics Manager, Motor Transport=Fleet Operations Manager. 6) METRICS: Only use numbers the veteran explicitly provided — never fabricate metrics. 7) Security clearances: ONLY include if the veteran selected to include it. If not selected, omit entirely. 8) Every bullet starts with a civilian action verb: Led, Managed, Directed, Coordinated, Developed, Implemented, Oversaw, Delivered.", 3500 ); const rStart = raw.indexOf("{"); const rEnd = raw.lastIndexOf("}"); if (rStart > -1 && rEnd > -1) { try { const rd = JSON.parse(raw.slice(rStart, rEnd + 1)); delete rd.careerPath; setResumeData(rd); } catch(pe) { console.warn("Resume JSON parse failed, using text mode:", pe.message); } } setResume(raw); setL("resume",false); // Auto-run ATS analysis after successful generation if (rStart > -1 && rEnd > -1) { runAtsAnalysis(raw.slice(rStart, rEnd + 1)); } } catch(e) { console.error("Resume generation failed:", e); setResume("Error generating resume: " + (e.message || "Please check your API key and try again.")); setL("resume",false); } }; // ── ATS ANALYSIS ────────────────────────────────────────────────────────── const runAtsAnalysis = async (resumeJson) => { setAtsLoading(true); setAtsAnalysis(null); try { const jdText = jobDescription ? "\nJOB DESCRIPTION:\n" + jobDescription.slice(0,1500) : ""; const atsPrompt = "Analyze this resume for ATS (Applicant Tracking System) optimization.\n\n" + "RESUME:\n" + (resumeJson||resume).slice(0,2500) + "\n" + "TARGET ROLE: " + (target.title||"general") + " | Industry: " + (target.industry||"any") + (targetCompany ? " | Company: " + targetCompany : "") + jdText + "\n\n" + "Return ONLY valid JSON:\n" + '{"atsScore": 0-100, "scoreBreakdown": {"keywordMatch": 0-100, "formatting": 0-100, "quantifiedAchievements": 0-100, "jargonFree": 0-100, "readability": 0-100}, ' + '"keywordsFound": ["keyword1","keyword2",...], "keywordsMissing": ["keyword1","keyword2",...], ' + '"improvements": [{"priority":"high|medium|low","suggestion":"specific improvement"},...], ' + '"verdict": "One sentence overall assessment"}'; const raw = await callClaude(atsPrompt, "You are an ATS optimization expert. Return ONLY valid JSON.", 1200); const clean = raw.replace(/```json|```/g,"").trim(); const s = clean.indexOf("{"); const e = clean.lastIndexOf("}"); if (s > -1 && e > -1) { setAtsAnalysis(JSON.parse(clean.slice(s, e + 1))); } } catch(err) { console.warn("ATS analysis failed:", err); } setAtsLoading(false); }; // ── JOB URL ANALYZER ───────────────────────────────────────────────────── const analyzeJobUrl = async () => { if (!hasAccess) { setShowPaywall(true); return; } if (!isApiKeySet()) { setShowAdminSetup(true); return; } if (!jobAnalyzerUrl.trim()) return; setJobAnalyzerLoading(true); setJobAnalyzerResult(null); const milSummary = milExperiences.map(e=>(e.branch||"")+" "+(e.rank||"")+" MOS:"+(e.mos||"")+" "+(e.mosTitle||"")+" TOS:"+(e.tos||"")).join("; "); const prompt = "I want you to analyze a job posting URL and compare it against a veteran's profile.\n\n" + "JOB POSTING URL: " + jobAnalyzerUrl.trim() + "\n\n" + "NOTE: You cannot actually visit URLs, so extract what you can from the URL structure (company name, job title hints) and provide your best analysis. If the URL contains company/title info, use that. Otherwise, ask the user to paste the job description instead.\n\n" + "VETERAN PROFILE:\n" + "Military: " + milSummary + "\n" + "Skills: " + (skills.technical||"none listed") + "\n" + "Leadership: " + (skills.leadership||"none listed") + "\n" + "Certifications: " + (skills.certs||"none") + "\n" + "Education: " + education.map(e=>(e.degree||"")+" "+(e.field||"")+" "+(e.institution||"")).join("; ") + "\n" + "Target Role: " + (target.title||"open") + " | Industry: " + (target.industry||"any") + "\n\n" + "Return ONLY valid JSON:\n" + '{"jobTitle":"extracted or inferred title","company":"extracted company","matchScore":0-100,' + '"strengths":["strength1","strength2","strength3"],' + '"gaps":["gap1","gap2"],' + '"actionItems":["action1","action2","action3"],' + '"keyQualifications":["qual1","qual2","qual3"],' + '"salaryEstimate":"estimated range or unknown",' + '"verdict":"honest 2-sentence assessment"}'; try { const raw = await callClaude(prompt, "You are a veteran career counselor and job matching expert. Be honest about gaps. Return ONLY valid JSON.", 1500); const clean = raw.replace(/```json|```/g,"").trim(); const s = clean.indexOf("{"); const e = clean.lastIndexOf("}"); if (s > -1 && e > -1) { setJobAnalyzerResult(JSON.parse(clean.slice(s, e + 1))); } } catch(err) { setJobAnalyzerResult({ error: "Could not analyze this job. Try pasting the job description in the Resume Builder instead." }); } setJobAnalyzerLoading(false); }; // ── COVER LETTER GENERATOR ──────────────────────────────────────────────── const genCoverLetter = async () => { if (!hasAccess) { setShowPaywall(true); return; } if (!isApiKeySet()) { setShowAdminSetup(true); return; } if (!resume && !resumeData && !uploadedResumeText) { alert("Please upload a resume file or generate one on the Build Resume tab."); return; } setCoverLetterLoading(true); setCoverLetter(""); const milSummary = milExperiences.map(e=>(e.branch)+" "+(e.rank||"")+" ("+(e.tos||"")+"), MOS: "+(e.mos||"")).join("; "); const resumeText = uploadedResumeText || resume || (resumeData ? JSON.stringify(resumeData) : ""); const prompt = `You are an expert military-to-civilian career counselor writing a compelling cover letter. VETERAN PROFILE: - Service: ${milSummary} - Name: ${personal.name||"[Name]"} TARGET JOB: - Title: ${coverLetterJob.title||"[Position]"} - Company: ${coverLetterJob.company||"[Company]"} - Job Description: ${coverLetterJob.description||"Not provided"} RESUME SUMMARY: ${resumeText.slice(0,1500)} Write a professional, warm, and compelling 3-paragraph cover letter that: 1. Opens with a strong hook connecting military service to the role 2. Highlights 2-3 specific achievements from their service that directly apply 3. Closes with confidence and a clear call to action 4. Translates ALL military jargon into civilian language 5. Is addressed to the hiring manager (use "Dear Hiring Manager" if no name given) 6. Is between 250-350 words Return ONLY the cover letter text, no subject line, no extra commentary.`; try { const raw = await callClaude(prompt, "You are an expert military-to-civilian career translator. RULES: 1) ZERO military jargon — translate everything to civilian language. 2) EMPLOYER/BRANCH NAME: Never change U.S. Army, U.S. Navy, U.S. Marine Corps, U.S. Air Force, U.S. Coast Guard, U.S. Space Force — keep exactly as written. 3) UNIT NAME: Never translate unit names — keep exactly as the veteran typed (e.g. 126 CTC stays 126 CTC). 4) RANK TRANSLATIONS: E5-E6=Supervisor, E7=Operations Manager, E8=Senior Manager, E9=Director, O3=Program Manager, O4=Senior PM, O5=Director, O6=Executive Director. 5) TITLE TRANSLATIONS: NCO=Supervisor, NCOIC=Operations Lead, Armorer=Equipment Inventory Manager, SHARP Rep=HR Compliance Coordinator, Retention NCO=Talent Acquisition Specialist, Supply Sgt=Logistics Manager, Motor Transport=Fleet Operations Manager. 6) METRICS: Only use numbers the veteran explicitly provided — never fabricate metrics. 7) Security clearances: ONLY include if the veteran selected to include it. If not selected, omit entirely. 8) Every bullet starts with a civilian action verb: Led, Managed, Directed, Coordinated, Developed, Implemented, Oversaw, Delivered.", 1500); setCoverLetter(raw); } catch(e) { setCoverLetter("Error generating cover letter. Please try again."); } setCoverLetterLoading(false); }; // ── INTERVIEW PREP GENERATOR ────────────────────────────────────────────── const genInterviewPrep = async () => { if (!hasAccess) { setShowPaywall(true); return; } if (!isApiKeySet()) { setShowAdminSetup(true); return; } setPrepLoading(true); setPrepQuestions([]); const milSummary = milExperiences.map(e=>(e.branch)+" "+(e.rank||"")+" MOS "+(e.mos||"")+" ("+(e.tos||"")+")").join("; "); const prompt = `You are an elite interview coach for military veterans transitioning to civilian careers. VETERAN: ${milSummary} APPLYING FOR: ${prepJob.title||"a civilian role"} at ${prepJob.company||"a company"} INTERVIEW TYPE: ${prepJob.type} Generate 8 interview questions they will likely be asked, with a tailored answer strategy using their military background. Return ONLY valid JSON array: [{ "question": "Tell me about yourself.", "whyAsked": "Sets the tone, they want your career story", "answerStrategy": "Start with military service, bridge to civilian value, end with why this role", "starExample": "Situation: As a [rank] in [branch]... Task: I was responsible for... Action: I implemented... Result: This led to...", "tip": "Keep it under 2 minutes. Practice out loud." }] Make answers specific to their MOS and rank. Use the STAR method. Translate all military jargon.`; try { const raw = await callClaude(prompt, "You are an expert military-to-civilian career translator. RULES: 1) ZERO military jargon — translate everything to civilian language. 2) EMPLOYER/BRANCH NAME: Never change U.S. Army, U.S. Navy, U.S. Marine Corps, U.S. Air Force, U.S. Coast Guard, U.S. Space Force — keep exactly as written. 3) UNIT NAME: Never translate unit names — keep exactly as the veteran typed (e.g. 126 CTC stays 126 CTC). 4) RANK TRANSLATIONS: E5-E6=Supervisor, E7=Operations Manager, E8=Senior Manager, E9=Director, O3=Program Manager, O4=Senior PM, O5=Director, O6=Executive Director. 5) TITLE TRANSLATIONS: NCO=Supervisor, NCOIC=Operations Lead, Armorer=Equipment Inventory Manager, SHARP Rep=HR Compliance Coordinator, Retention NCO=Talent Acquisition Specialist, Supply Sgt=Logistics Manager, Motor Transport=Fleet Operations Manager. 6) METRICS: Only use numbers the veteran explicitly provided — never fabricate metrics. 7) Security clearances: ONLY include if the veteran selected to include it. If not selected, omit entirely. 8) Every bullet starts with a civilian action verb: Led, Managed, Directed, Coordinated, Developed, Implemented, Oversaw, Delivered.", 3000); const clean = raw.replace(/```json|```/g,"").trim(); const s = clean.indexOf("["); const e = clean.lastIndexOf("]"); if(s===-1||e===-1) throw new Error("No array"); setPrepQuestions(JSON.parse(clean.slice(s,e+1))); } catch(err) { setPrepQuestions([{ question:"Tell me about yourself.", whyAsked:"Opens the interview and sets the tone", answerStrategy:"Lead with your military service, highlight your top 2-3 skills, connect to this specific role, end with your excitement about the opportunity.", starExample:"I served "+milSummary+". I built strong skills in leadership and operations that I am excited to bring to this role.", tip:"Practice this until it feels natural. This is your elevator pitch." }]); } setPrepLoading(false); }; // ── FOLLOW-UP EMAIL GENERATOR ───────────────────────────────────────────── const genFollowupEmail = async () => { if (!hasAccess) { setShowPaywall(true); return; } if (!isApiKeySet()) { setShowAdminSetup(true); return; } setFollowupLoading(true); setFollowupEmail(""); const milSum = milExperiences.map(e=>(e.branch)+" "+(e.rank||"")).join(", "); const emailTypes = { "thank-you": "a warm, professional thank-you email after an interview", "follow-up": "a polite follow-up email checking on application status after 1 week of silence", "negotiation": "a professional salary negotiation email asking for a higher offer", "withdraw": "a gracious email withdrawing from consideration while keeping the door open" }; const prompt = `Write ${emailTypes[followupCtx.outcome]||"a professional email"}. Veteran: ${personal.name||"[Name]"} | Service: ${milSum} Role: ${followupCtx.role||"the position"} at ${followupCtx.company||"your company"} Interviewer: ${followupCtx.interviewerName||"Hiring Manager"} Interview date: ${followupCtx.date||"recently"} Write a genuine, professional email that: - Is NOT overly formal or stiff - References something specific from the conversation if possible (be generic if no details) - Subtly reinforces their military background as an asset - Is under 150 words - Has a clear subject line on the first line starting with "Subject: " Return ONLY the email text including the subject line. No extra commentary.`; try { const raw = await callClaude(prompt, "You are an expert military-to-civilian career translator. RULES: 1) ZERO military jargon — translate everything to civilian language. 2) EMPLOYER/BRANCH NAME: Never change U.S. Army, U.S. Navy, U.S. Marine Corps, U.S. Air Force, U.S. Coast Guard, U.S. Space Force — keep exactly as written. 3) UNIT NAME: Never translate unit names — keep exactly as the veteran typed (e.g. 126 CTC stays 126 CTC). 4) RANK TRANSLATIONS: E5-E6=Supervisor, E7=Operations Manager, E8=Senior Manager, E9=Director, O3=Program Manager, O4=Senior PM, O5=Director, O6=Executive Director. 5) TITLE TRANSLATIONS: NCO=Supervisor, NCOIC=Operations Lead, Armorer=Equipment Inventory Manager, SHARP Rep=HR Compliance Coordinator, Retention NCO=Talent Acquisition Specialist, Supply Sgt=Logistics Manager, Motor Transport=Fleet Operations Manager. 6) METRICS: Only use numbers the veteran explicitly provided — never fabricate metrics. 7) Security clearances: ONLY include if the veteran selected to include it. If not selected, omit entirely. 8) Every bullet starts with a civilian action verb: Led, Managed, Directed, Coordinated, Developed, Implemented, Oversaw, Delivered.", 800); setFollowupEmail(raw.trim()); } catch(err) { setFollowupEmail("Subject: Thank You - " + (followupCtx.role||"Position") + " Interview\n\nDear " + (followupCtx.interviewerName||"Hiring Manager") + ",\n\nThank you for taking the time to meet with me regarding the " + (followupCtx.role||"position") + " role at " + (followupCtx.company||"your organization") + ". I enjoyed learning more about the team and am excited about the opportunity to bring my military leadership experience to your organization.\n\nPlease let me know if you need any additional information.\n\nBest regards,\n" + (personal.name||"[Your Name]")); } setFollowupLoading(false); }; // ── RESUME REVIEW / SCORE ───────────────────────────────────────────────── const runResumeReview = async () => { if (!hasAccess) { setShowPaywall(true); return; } if (!isApiKeySet()) { setShowAdminSetup(true); return; } if (!resume && !resumeData && !uploadedResumeText) { alert("Please upload a resume file or generate one first."); return; } setReviewLoading(true); setResumeScore(null); setResumeReview(null); const resumeText = uploadedResumeText || resume || JSON.stringify(resumeData||{}); const prompt = `You are an expert resume reviewer for military-to-civilian career transitions. Analyze this resume and return ONLY valid JSON. RESUME: ${resumeText.slice(0,2000)} TARGET JOB: ${target.title||"General civilian role"} Return this exact JSON structure: { "overallScore": 82, "grades": { "impact": { "score": 85, "label": "Impact & Achievements" }, "clarity": { "score": 78, "label": "Clarity & Civilian Language" }, "keywords": { "score": 80, "label": "Keywords & ATS" }, "formatting": { "score": 88, "label": "Format & Length" }, "military": { "score": 72, "label": "Military Translation" } }, "strengths": ["strength 1", "strength 2", "strength 3"], "improvements": [ { "priority": "HIGH", "issue": "Issue title", "fix": "Specific fix to make" }, { "priority": "MEDIUM", "issue": "Issue title", "fix": "Specific fix to make" }, { "priority": "LOW", "issue": "Issue title", "fix": "Specific fix to make" } ], "missingKeywords": ["keyword1", "keyword2", "keyword3"], "verdict": "One sentence overall assessment" }`; try { const raw = await callClaude(prompt, "You are an expert resume reviewer. Return ONLY valid JSON, no markdown, no commentary.", 1500); const clean = raw.replace(/```json|```/g,"").trim(); const data = JSON.parse(clean); setResumeScore(data.overallScore); setResumeReview(data); } catch(e) { setResumeReview({ error: "Could not analyze resume. Make sure your resume is generated first." }); } setReviewLoading(false); }; const copy = () => { navigator.clipboard.writeText(resume); setCopied(true); setTimeout(()=>setCopied(false),2200); }; const TABS = ["My Service Record","Career Pathways","Build Resume","Cover Letter & Review","Job Search Hub","My Profile"]; const TAB_ICONS = ["\u{1F396}\uFE0F","\u{1F3AF}","\u{1F4C4}","\u{2709}\uFE0F","\u{1F50D}","\u{1F464}"]; const AI_TABS = [2,3,4]; // tabs that are AI-powered tools const isMilType = t => t==="Military Service"||t==="Reserve/Guard (concurrent with civilian)"; const DI = "Defense/Intel"; const RG = "Reserve/Guard (concurrent with civilian)"; const matchesSector = (c, filter) => filter==="All" || c.sector===filter || (filter===DI && c.sector===DI); const filterCareers = (careers, filter) => careers.filter(c => matchesSector(c, filter)); // Hide loading skeleton on first render useEffect(() => { const skel = document.getElementById('app-skeleton'); if (skel) skel.style.display = 'none'; }, []); // Profile dropdown state const [profileOpen, setProfileOpen] = useState(false); const [showAccountSettings, setShowAccountSettings] = useState(false); const profileRef = useRef(null); useEffect(() => { const handler = (e) => { if (profileRef.current && !profileRef.current.contains(e.target)) setProfileOpen(false); }; document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, []); return ( <>

{/* ── PROFILE ICON (top-right) ── */}

{profileOpen&¤tUser&&(

{personal.name||currentUser.displayName||"Veteran"}

{personal.email||currentUser.email||""}

)}

{/* ── ACCOUNT SETTINGS MODAL ── */} {showAccountSettings&¤tUser&&(()=>{ let accessData = null; try { accessData = JSON.parse(localStorage.getItem("vcb_access")||"null"); } catch(e){} const isSubscribed = hasAccess; const planLabel = accessData ? (accessData.type==="paid" ? (accessData.plan==="annual"?"Annual Plan":"Monthly Plan") : accessData.type==="code" ? "Access Code" : "Active") : null; const expiryDate = accessData && accessData.expiry ? new Date(accessData.expiry).toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"}) : null; return (

{if(e.target===e.currentTarget)setShowAccountSettings(false);}}>

Account Settings

Account Info

{(()=>{const m=milExperiences&&milExperiences[0];const g=m&&m.rank?(m.rank.match(/[EWO]-\d+/)||[""])[0]:"";return g?React.createElement(RankInsignia,{branch:m.branch,grade:g,color:"#1a3a6b"}):null;})()} {(()=>{const m=milExperiences&&milExperiences[0];const r=m&&m.rank?m.rank.split(" - ").pop().split(" (")[0]:"";const isRet=m&&(m.serviceType==="Retired"||m.status==="Retired"||(m.endDate&&!m.currently));return (r?r+" ":"")+(personal.name||currentUser.displayName||"Veteran")+(isRet?" (Ret.)":"");})()}

{personal.email||currentUser.email||""}

Subscription Status

{isSubscribed?(

Active {planLabel&&{planLabel}}

{expiryDate&&

Access expires: {expiryDate}

}

):(

No active subscription

Subscribe to unlock all 16 AI-powered career tools.

)}

Quick Stats

{savedResumes.length}

Resumes

{savedCoverLetters.length}

Cover Letters

{savedScores.length}

Score Reports

{savedEmails.length}

Emails

); })()} {showPaywall&&(

e.target===e.currentTarget&&null}>

AI-powered tools to translate your service into a civilian career

$15

Monthly Subscription

$15/month — 16 AI tools

{["AI Career Matching","Military Language Translator","AI Resume Builder","5 Resume Templates","Cover Letter Generator","Resume Score & Review","Job Application Tracker","Interview Prep Generator","Follow-Up Email Generator","Transition Timeline","Weekly Progress Dashboard","Veteran Resources Hub"].map((f,i)=>(

✓{f}

))}

OR ENTER ACCESS CODE

{setPwCode(e.target.value.toUpperCase());setPwCodeStatus("idle");setPwCodeMsg("");}} onKeyDown={e=>e.key==="Enter"&&redeemCode()} style={{textTransform:"uppercase",letterSpacing:".1em",fontWeight:600}} />

{pwCodeMsg&&(

{pwCodeMsg}

)}

{(!fbAuth||!fbAuth.currentUser)&&( )}

$15/month · 16 AI tools · cancel anytime

Already have an account?{" "}

)} {showAuth&&(

e.target===e.currentTarget&&setShowAuth(false)}>

🎖

Veteran Career Path

Free account — save your profile and resumes

{authErr&&

{authErr}

} {authOk&&

{authOk}

}

OR EMAIL

{authMode==="register"&&(

Full Name setAuthForm(f=>({...f,name:e.target.value}))}/>

)}

Email setAuthForm(f=>({...f,username:e.target.value}))} onKeyDown={e=>e.key==="Enter"&&(authMode==="login"?handleLogin():handleRegister())}/>

Password setAuthForm(f=>({...f,password:e.target.value}))} onKeyDown={e=>e.key==="Enter"&&(authMode==="login"?handleLogin():handleRegister())}/>

{authMode==="register"&&(

Confirm Password setAuthForm(f=>({...f,confirmPassword:e.target.value}))}/>

)} {authMode==="login"&&(

)}

)} {showAdminSetup&&(

⚙ Site Owner Setup

This panel is only for the site owner — not visible to users

{adminKeySet?(

✓ API key is configured — AI features are enabled

):(

AI features are enabled via the Vercel proxy. If you need to override with a direct API key, enter it below.

)}

Anthropic API Key setAdminKeyInput(e.target.value)} style={{width:"100%",background:"rgba(255,255,255,.92)",border:"1.5px solid rgba(201,168,76,.5)",borderRadius:"3px",color:"#1a1a2e",padding:".65rem .85rem",fontFamily:"monospace",fontSize:".9rem"}} />

{adminKeySet&&( )}

)} {currentUser?(

{(()=>{ const latestMil = milExperiences && milExperiences[0]; const rank = latestMil && latestMil.rank; const grade = rank ? (rank.match(/[EWO]-\d+/)||[""])[0] : ""; const branch = latestMil && latestMil.branch; const isRetired = latestMil && (latestMil.serviceType==="Retired" || latestMil.status==="Retired" || (latestMil.endDate && !latestMil.currently)); const rankAbbr = rank || ""; const displayName = rankAbbr ? (rankAbbr.split(" - ").pop().split(" (")[0] + " " + (personal.name||currentUser.name||"").split(" ").pop()) : (personal.name||currentUser.name||"Veteran"); const insigniaUrl = (grade && window.VCP_INSIGNIA) ? window.VCP_INSIGNIA.get(branch||"Army",grade) : null; return React.createElement("div",{style:{display:"flex",alignItems:"center",gap:".4rem"}}, insigniaUrl ? React.createElement("img",{src:insigniaUrl,alt:grade+" insignia",style:{height:"28px",width:"auto",flexShrink:0,filter:"drop-shadow(0 1px 2px rgba(0,0,0,.3))"}}) : React.createElement("div",{className:"user-avatar"},(currentUser&¤tUser.initials)), React.createElement("span",null, "Welcome Back, ", React.createElement("strong",null,displayName), isRetired ? React.createElement("span",{style:{fontSize:".72rem",color:"rgba(240,192,64,.7)",marginLeft:".25rem",fontStyle:"italic"}},"(Ret.)") : null ) ); })()} {hasUnsaved&&}

{!hasAccess&&} {window.location.search.indexOf("admin=1")>-1&&}

):(

Not signed in — your progress won't be saved

)}

{TABS.map((t,i)=>( {i===2&&

} {i===5&&

} ))}

{TABS.map((_,i)=>

)}

{tab===0 &&

{/* ── SCOUT DATA CODE IMPORT ── */}

🔑 Have a Scout Data Code? Import your profile

If you previously used the Scout Resume Builder or Cover Letter Builder, enter your email and 6-digit data code to automatically import your military experience, skills, and career data into your profile.

Email used with Scout

Data Code

{/* ── GUIDED WIZARD LAUNCH BUTTON ── */} {profileMode==="manual"&&

} {profileMode==="guided"&&

} {/* ══ GUIDED WIZARD ══ */} {profileMode==="guided" && ( )} {/* ══ MANUAL ENTRY (existing form) ══ */} {profileMode==="manual" && <>

Your service matters. Fill in your background below — your military experience, civilian work, education, and skills. The more you add, the better your career matches and resume will be. Take your time and be as detailed as you like.

toggleCollapse("personal")}>

Personal Information

▼

{!collapsed.personal &&

Full NameupP("name",e.target.value)}/>

EmailupP("email",e.target.value)}/>

PhoneupP("phone",e.target.value)}/>

City, StateupP("location",e.target.value)}/>

LinkedIn (optional)upP("linkedin",e.target.value)}/>

}

Military Service History

All Branches Served

OPSEC WARNING

Do not include identifying information about your unit, personnel, equipment, or operations that is not public knowledge. Be vague with specifics. Present yourself as the asset you are without violating OPSEC.

DoD OPSEC Guidelines

{milExperiences.map((exp)=>(

{exp.branch||"Military Service"} · {exp.serviceType||"Active Duty"} {milExperiences.length>1&&}

Branch of Service

Rank at Separation / Current

Service Status

Primary MOS / Rate / AFSC

{ const val = e.target.value.toUpperCase(); upMilExp(exp.id,"mos",val); }} style={{paddingRight:"2.5rem"}} /> {exp.mosTitle&&( ✓ {exp.mosTitle} )}

Type your code above — it auto-fills the title. Or browse by branch:

Browse {exp.branch} {exp.branch==="Navy"?"Rates":exp.branch==="Air Force"||exp.branch==="Space Force"?"AFSCs":"MOS codes"} {getMosByBranch(exp.branch).length} codes ›

{ const q=e.target.value.toLowerCase(); const items=document.querySelectorAll(`.mos-lookup-item-${exp.id}`); items.forEach(item=>{ item.style.display=(item.dataset.code.toLowerCase().includes(q)||item.dataset.title.toLowerCase().includes(q))?"flex":"none"; }); }} />

{getMosByBranch(exp.branch).map(m=>( ))}

Total Time in Service (TOS) upMilExp(exp.id,"tos",e.target.value)}/>

Unit / Command upMilExp(exp.id,"unit",e.target.value)}/>

Start Date upMilExp(exp.id,"startDate",v)} placeholder="Select start date"/>

End Date {exp.current ?

Present

: upMilExp(exp.id,"endDate",v)} placeholder="Select end date"/> }

upMilExp(exp.id,"current",e.target.checked)} style={{width:"auto"}}/> Currently serving

Roles Held Under This MOS

Add each official position you held under this MOS — even within the same contract. Example: 88M as Operator (E-4, 2020-2022) → Dispatcher (E-5, 2022-2024) → Platoon Sergeant (E-6, 2024-2026). This shows career progression, not just time served.

{(exp.mosRoles||[]).map((role,ri)=>(

Position {ri+1}

Official Position / Role Title { const updated=[...(exp.mosRoles||[])]; updated[ri]={...updated[ri],title:e.target.value}; upMilExp(exp.id,"mosRoles",updated); }}/>

Rank at This Position { const updated=[...(exp.mosRoles||[])]; updated[ri]={...updated[ri],rankAtRole:e.target.value}; upMilExp(exp.id,"mosRoles",updated); }}/>

From (Year) { const updated=[...(exp.mosRoles||[])]; updated[ri]={...updated[ri],fromYear:e.target.value}; upMilExp(exp.id,"mosRoles",updated); }}/>

To (Year) { const updated=[...(exp.mosRoles||[])]; updated[ri]={...updated[ri],toYear:e.target.value}; upMilExp(exp.id,"mosRoles",updated); }}/>

Key Responsibility { const updated=[...(exp.mosRoles||[])]; updated[ri]={...updated[ri],keyDuty:e.target.value}; upMilExp(exp.id,"mosRoles",updated); }}/>

))}

🔐 Security Clearance

Clearance Level {exp.clearanceLevel!=="None"&&{exp.clearanceLevel}}

Status

Polygraph

{(BRANCH_QUALS[exp.branch]||BRANCH_QUALS["Army"]).label}

Browse common qualifiers {(BRANCH_QUALS[exp.branch]||BRANCH_QUALS["Army"]).items.length} options ›

{(BRANCH_QUALS[exp.branch]||BRANCH_QUALS["Army"]).items.map(a=>( ))}

{(exp.asi||[]).length>0&&(

{(exp.asi||[]).map(a=>( {a.code} {a.desc} upMilExp(exp.id,"asi",(exp.asi||[]).filter(x=>x.code!==a.code))}>✕ ))}

)}

Code upMilExp(exp.id,"customAsiCode",e.target.value)}/>

Description (optional) upMilExp(exp.id,"customAsiDesc",e.target.value)}/>

{(BRANCH_QUALS[exp.branch]||BRANCH_QUALS["Army"]).sqiLabel}

Browse qualifiers {(BRANCH_QUALS[exp.branch]||BRANCH_QUALS["Army"]).sqi.length} options ›

{(BRANCH_QUALS[exp.branch]||BRANCH_QUALS["Army"]).sqi.map(s=>( ))}

{(exp.sqi||[]).length>0&&(

{(exp.sqi||[]).map(s=>( {s.code} {s.desc} upMilExp(exp.id,"sqi",(exp.sqi||[]).filter(x=>x.code!==s.code))}>✕ ))}

)}

Additional Duty Qualifications

{[ {cat:"Command & Admin",items:["Unit Armorer","Unit Fund Custodian","Property Book Officer","Inspector General Representative","Records Management","Battle Staff NCO"]}, {cat:"Training & Safety",items:["Training Room NCO","Safety Officer/NCO","Master Driver","Master Gunner","Physical Fitness Leader","NBC/CBRN Officer"]}, {cat:"Personnel & HR",items:["Equal Opportunity Leader","Sexual Harassment/Assault Response (SHARP) Coordinator","Casualty Notification Officer","Family Readiness Officer/NCO","Retention NCO","Recruiter/Career Counselor"]}, {cat:"Operations",items:["Operations Security (OPSEC) Coordinator","Information Security Officer","Physical Security Officer","Supply Sergeant (additional duty)","Contracting Officer Representative (COR)","Unit Prevention Leader (UPL/Drug Testing)"]}, {cat:"Community & Liaison",items:["Casualty Liaison Officer","Community Outreach Coordinator","Voting Assistance Officer","Religious Affairs NCO"]}, ].map(grp=>(

{grp.cat} {grp.items.length} options ›

{grp.items.map(d=>( ))}

))} {(exp.additionalDuties||[]).length>0&&(

{(exp.additionalDuties||[]).map(d=>( {d} upMilExp(exp.id,"additionalDuties",(exp.additionalDuties||[]).filter(x=>x!==d))}>✕ ))}

)}

Custom Duty upMilExp(exp.id,"customDuty",e.target.value)} onKeyDown={e=>{ if(e.key==="Enter"&&(exp.customDuty||"").trim()){ upMilExp(exp.id,"additionalDuties",[...(exp.additionalDuties||[]),exp.customDuty.trim()]); upMilExp(exp.id,"customDuty",""); }}}/>

Awards & Decorations

Select from the library or type your own. Awards are pulled from the {exp.branch} awards list.

Add from Awards Library

{(exp.awards||[]).length>0&&(

{(exp.awards||[]).map((a,i)=>( 🎖 {a} upMilExp(exp.id,"awards",(exp.awards||[]).filter((_,j)=>j!==i))}>✕ ))}

)}

Add Unlisted Award upMilExp(exp.id,"customAward",e.target.value)} onKeyDown={e=>{ if(e.key==="Enter"&&(exp.customAward||"").trim()){ upMilExp(exp.id,"awards",[...(exp.awards||[]),exp.customAward.trim()]); upMilExp(exp.id,"customAward",""); } }}/>

Deployments / Operations (optional)

upMilExp(exp.id,"deployments",e.target.value)}/>
                    </div>
                    <div className="field">
                      <label>General Duties & Responsibilities</label>
                      <textarea style={{minHeight:"140px"}}
                        placeholder="Include YOUR ACTUAL NUMBERS — the AI will not guess.

Example: Supervised 12 soldiers. Managed $2.4M in equipment. Conducted vehicle maintenance for 18 wheeled vehicles, maintaining 95% readiness rate. Trained 40 personnel on weapons qualification, achieving 100% pass rate. Coordinated logistics for 3-week field exercise supporting 200 personnel."
                        value={exp.duties||""} onChange={e=>upMilExp(exp.id,"duties",e.target.value)}/>
                      <span className="hint">💡 <strong>The more specific your numbers, the stronger your resume.</strong> How many people did you supervise? What was your equipment/budget value? What percentage or rate did you achieve? How many people did you train or support?</span>
                    </div>
                  </div>
                ))}
                <button className="btn-add" style={{borderColor:"rgba(91,155,213,.4)",color:"#7eb8f5"}}
                  onClick={addMilExp}>
                  + Add Other Military Branch / Service Period
                </button>
              </div>
            </div>
            <div className="card">
              <div className="ch">
                <h3>Civilian, DoD & Government Employment</h3>
                <span className="ch-sub">Include part-time, contract, and federal work</span>
              </div>
              <div className="cb">
                {civExperiences.length===0&&(
                  <div style={{textAlign:"center",padding:"1.2rem",color:"var(--dim)",fontSize:".88rem"}}>
                    No civilian employment added yet. Click below to add a position.
                  </div>
                )}
                {civExperiences.map((exp)=>(
                  <div className="entry" key={exp.id}>
                    <div className="etop">
                      <span className={getBadge(exp.type)}>{exp.type}</span>
                      <button className="btn-rm" onClick={()=>rmExp(exp.id)}>Remove</button>
                    </div>
                    <div className="field">
                      <label>Employment Type</label>
                      <select value={exp.type} onChange={e=>upCivExp(exp.id,"type",e.target.value)}>
                        {["Civilian Employment","DoD/Government Contractor","Other Government (Federal/State)","Reserve/Guard (concurrent with civilian)"].map(t=><option key={t}>{t}</option>)}
                      </select>
                    </div>
                    <div className="g2">
                      <div className="field"><label>Employer / Agency</label>
                        <input placeholder="Company or organization name" value={exp.employer||""}
                          onChange={e=>upCivExp(exp.id,"employer",e.target.value)}/>
                      </div>
                      <div className="field"><label>Your Job Title</label>
                        <input placeholder="e.g. Logistics Manager, Security Analyst" value={exp.jobTitle||""}
                          onChange={e=>upCivExp(exp.id,"jobTitle",e.target.value)}/>
                      </div>
                      <div className="field"><label>City / State</label>
                        <input placeholder="e.g. Norfolk, VA or Remote" value={exp.location||""}
                          onChange={e=>upCivExp(exp.id,"location",e.target.value)}/>
                      </div>
                    </div>
                    <div className="g2">
                      <div className="field"><label>Start Date</label>
                        <DatePicker value={exp.startDate} onChange={v=>upCivExp(exp.id,"startDate",v)} placeholder="Select start date"/>
                      </div>
                      <div className="field"><label>End Date</label>
                        {exp.current
                          ? <div style={{padding:".58rem .8rem",background:"rgba(255,255,255,.08)",borderRadius:"3px",fontSize:".88rem",color:"var(--dim)"}}>Present</div>
                          : <DatePicker value={exp.endDate} onChange={v=>upCivExp(exp.id,"endDate",v)} placeholder="Select end date"/>
                        }
                      </div>
                    </div>
                    <div className="field" style={{flexDirection:"row",alignItems:"center",gap:".5rem",marginTop:"-.3rem",marginBottom:".5rem"}}>
                      <input type="checkbox" id={"curc-"+exp.id} checked={exp.current||false}
                        onChange={e=>upCivExp(exp.id,"current",e.target.checked)} style={{width:"auto"}}/>
                      <label htmlFor={"curc-"+exp.id} style={{textTransform:"none",fontSize:".83rem",letterSpacing:"0",color:"var(--text)"}}>Currently employed here</label>
                    </div>
                    {(exp.clearanceLevel&&exp.clearanceLevel!=="None")&&(
                      <div className="clearance-block" style={{marginBottom:".5rem"}}>
                        <h4>🔐 Clearance for this Role</h4>
                        <div className="g2">
                          <div className="field">
                            <label>Clearance Level</label>
                            <select value={exp.clearanceLevel} onChange={e=>upCivExp(exp.id,"clearanceLevel",e.target.value)}>
                              {CLEARANCE_LEVELS.map(c=><option key={c}>{c}</option>)}
                            </select>
                          </div>
                          <div className="field">
                            <label>Status</label>
                            <select value={exp.clearanceStatus||"Active"} onChange={e=>upCivExp(exp.id,"clearanceStatus",e.target.value)}>
                              {CLEARANCE_STATUS.map(s=><option key={s}>{s}</option>)}
                            </select>
                          </div>
                        </div>
                      </div>
                    )}
                    <div className="field" style={{marginBottom:".35rem"}}>
                      <label style={{fontSize:".65rem",color:"var(--dim)",cursor:"pointer"}}
                        onClick={()=>upCivExp(exp.id,"clearanceLevel",exp.clearanceLevel==="None"?"Secret":"None")}>
                        + Add clearance for this role
                      </label>
                    </div>
                    <div className="field">
                      <label>Key Duties & Achievements</label>
                      <textarea placeholder="Include YOUR ACTUAL NUMBERS — the AI will not guess.

Example: Managed team of 8 employees. Oversaw $500K annual budget. Reduced processing time by 30%. Handled customer accounts totaling $1.2M annually."
                        value={exp.duties||""} onChange={e=>upCivExp(exp.id,"duties",e.target.value)} style={{minHeight:"120px"}}/>
                      <span className="hint">💡 <strong>Numbers make your resume stand out.</strong> Team size? Budget managed? Percentage improvements? Revenue impacted? Customers served?</span>
                    </div>
                  </div>
                ))}
                <button className="btn-add" onClick={addCivExp}>
                  + Add Civilian / DoD / Government Position
                </button>
              </div>
            </div>
            <div className="card">
              <div className="ch" onClick={()=>toggleCollapse("edu")}><h3>Education & Military Training</h3><span className="chevron">▼</span></div>
              {!collapsed.edu&&<div className="cb">
                {education.map(edu=>(
                  <div className="entry" key={edu.id}>
                    <div className="etop"><span style={{fontSize:".78rem",color:"var(--dim)"}}>Degree / School</span>{education.length>1&&<button className="btn-rm" onClick={()=>rmEdu(edu.id)}>Remove</button>}</div>
                    <div className="g2">
                      <div className="field"><label>Institution</label><UniversityInput value={edu.institution} onChange={v=>upEdu(edu.id,"institution",v)} placeholder="Type institution name..."/></div>
                      <div className="field"><label>Degree Type</label><input placeholder="B.S., A.A., MBA, Certificate..." value={edu.degree} onChange={e=>upEdu(edu.id,"degree",e.target.value)}/></div>
                      <div className="field"><label>Field of Study</label><input placeholder="Criminal Justice, Business, Nursing..." value={edu.field} onChange={e=>upEdu(edu.id,"field",e.target.value)}/></div>
                      <div className="field"><label>Year Completed / Expected</label><input placeholder="2023" value={edu.year} onChange={e=>upEdu(edu.id,"year",e.target.value)}/></div>
                    </div>
                    <div className="field">
                      <label>Military Schools & PME</label>
                      <details style={{border:"1px solid #d8e4f0",borderRadius:"4px",background:"#fafcff",marginBottom:".4rem"}}>
                        <summary style={{padding:".4rem .75rem",cursor:"pointer",fontWeight:600,fontSize:".8rem",color:"#1a3a6b",listStyle:"none"}}>Browse common military schools ›</summary>
                        <div style={{padding:".4rem .75rem .5rem",display:"flex",flexWrap:"wrap",gap:".3rem",borderTop:"1px solid #e8f0f8"}}>
                          {[
                            "Basic Combat Training (BCT)","One Station Unit Training (OSUT)","Advanced Individual Training (AIT)",
                            "Basic Officer Leaders Course (BOLC)","Warrior Leaders Course (WLC)","Advanced Leaders Course (ALC)",
                            "Senior Leaders Course (SLC)","Sergeant Major Course (SGM Course)","Command and General Staff College (CGSC)",
                            "Army War College (AWC)","Ranger School","Airborne School (Basic Parachutist Course)",
                            "Air Assault School","Sapper Leader Course","Jumpmaster Course","Military Freefall School (HALO/HAHO)",
                            "Special Forces Qualification Course (SFQC / Q Course)","Civil Affairs School","Psychological Operations School",
                            "Warrant Officer Candidate School (WOCS)","Warrant Officer Basic Course (WOBC)","Warrant Officer Advanced Course (WOAC)",
                            "BNCOC","ANCOC","Primary Leadership Development Course (PLDC)",
                            "Officer Candidate School (OCS)","ROTC","United States Military Academy (West Point)",
                            "Defense Language Institute (DLI)","Drill Sergeant School","Master Gunner Course",
                            "Sniper School","Combat Diver Qualification Course","SERE School",
                            "Officer Basic Course (OBC)","Amphibious Warfare School (USMC)","Command and Staff College (USMC)",
                            "Marine Corps War College","The Basic School (TBS)","Infantry Officer Course (IOC)",
                            "Expeditionary Warfare School (EWS)","Officer Development School (ODS - Navy)",
                            "Naval War College","Naval Postgraduate School","Naval Justice School",
                            "Aviation Preflight Indoctrination (API)","Basic Underwater Demolition/SEAL (BUD/S)",
                            "SEAL Qualification Training (SQT)","Explosive Ordnance Disposal School",
                            "Air Force Officer Training School (OTS)","Air Force Academy","Squadron Officer School (SOS)",
                            "Air Command and Staff College (ACSC)","Air War College (AWC - AF)",
                            "Aerospace Medical School","Combat Controller Training","Pararescue Training (PJ School)",
                            "SERE School (Air Force)","Weapons School (USAF Weapons School)",
                            "Coast Guard Officer Candidate School","Maritime Law Enforcement Academy",
                            "National Defense University (NDU)","Defense Acquisition University (DAU)",
                            "Joint Forces Staff College","Interagency Institute",
                            "Community College of the Air Force (CCAF)"
                          ].map(s=>(
                            <button key={s} style={{background:"#e8edf5",border:"1px solid #c0d0e4",borderRadius:"3px",padding:".2rem .55rem",fontSize:".75rem",cursor:"pointer",color:"#1a3a6b"}}
                              onClick={()=>upEdu(edu.id,"pme",edu.pme?(edu.pme+", "+s):s)}>+ {s}</button>
                          ))}
                        </div>
                      </details>
                      <input placeholder="Click schools above or type your own (e.g. Ranger School, BNCOC, DLI...)" value={edu.pme} onChange={e=>upEdu(edu.id,"pme",e.target.value)}/>
                    </div>
                  </div>
                ))}
                <button className="btn-add" onClick={addEdu}>+ Add Education or Training</button>
              </div>}
            </div>
            <div className="card">
              <div className="ch" onClick={()=>toggleCollapse("skills")}><h3>Skills & Certifications</h3><span className="chevron">▼</span></div>
              {!collapsed.skills&&<div className="cb">
                <div className="field" style={{marginBottom:"1rem"}}>
                  <label>Technical Skills</label>
                  <div className="hint" style={{marginBottom:".5rem"}}>Type your own, or click a category to expand common options.</div>
                  {[
                    {cat:"Weapons & Combat",items:["Weapons Qualification (Rifle/Pistol)","Crew-Served Weapons","Close Quarter Combat","Explosive Ordnance","Fire Support/Artillery","Sniper/Long Range Marksmanship"]},
                    {cat:"Vehicles & Equipment",items:["Vehicle Operation (Wheeled)","Vehicle Operation (Tracked)","Aircraft Ground Support","UAS/Drone Operation","Crane Operation","Forklift Operation","Material Handling Equipment"]},
                    {cat:"Communications & IT",items:["Radio/Communications Systems","SINCGARS Radio","Satellite Communications","Network Administration","IT Systems Administration","Programming/Software Development","Cybersecurity"]},
                    {cat:"Intelligence & Surveillance",items:["Signal Intelligence (SIGINT)","Human Intelligence (HUMINT)","All-Source Intelligence Analysis","Geospatial Analysis","OSINT (Open Source Intelligence)","Imagery Analysis","Electronic Warfare"]},
                    {cat:"Medical & Safety",items:["Medical Triage/Combat First Aid","TCCC (Tactical Combat Casualty Care)","HAZMAT Handling","CBRN/NBC Detection","Medevac/CASEVAC Procedures","Demolitions"]},
                    {cat:"Logistics & Supply",items:["Supply Chain Management","Inventory Management Systems","Petroleum Operations","GCSS-Army / ERP Systems","Property Book Management","Contracting Officer Representative (COR)"]},
                    {cat:"Navigation & Recon",items:["Land Navigation","GPS/Digital Navigation","Night Vision Devices (NVDs)","IED Detection/Counter-IED","Explosives Handling"]},
                    {cat:"Software & Office",items:["Microsoft Office Suite","SharePoint","Geographic Information Systems (GIS)","AutoCAD","Adobe Suite"]},
                  ].map(grp=>(
                    <details key={grp.cat} style={{marginBottom:".3rem",border:"1px solid #d8e4f0",borderRadius:"4px",background:"#fafcff"}}>
                      <summary style={{padding:".45rem .75rem",cursor:"pointer",fontWeight:600,fontSize:".82rem",color:"#1a3a6b",listStyle:"none",display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                        {grp.cat} <span style={{fontSize:".7rem",color:"#8aa0b8",fontWeight:400}}>{grp.items.length} options ›</span>
                      </summary>
                      <div style={{padding:".4rem .75rem .6rem",display:"flex",flexWrap:"wrap",gap:".3rem",borderTop:"1px solid #e8f0f8"}}>
                        {grp.items.map(s=>(
                          <button key={s} style={{background:"#e8edf5",border:"1px solid #c0d0e4",borderRadius:"3px",padding:".2rem .55rem",fontSize:".78rem",cursor:"pointer",color:"#1a3a6b",transition:"all .15s"}}
                            onClick={()=>{if(!skills.technical.includes(s)) setSkills(sk=>({...sk,technical:sk.technical?(sk.technical+", "+s):s}));}}>
                            + {s}
                          </button>
                        ))}
                      </div>
                    </details>
                  ))}
                  <textarea style={{marginTop:".4rem"}}
                    placeholder="Your technical skills will appear here as you select them, or type your own..."
                    value={skills.technical}
                    onChange={e=>setSkills(s=>({...s,technical:e.target.value}))}/>
                </div>
                <div className="field" style={{marginBottom:"1rem"}}>
                  <label>Leadership & Soft Skills</label>
                  <div className="hint" style={{marginBottom:".5rem"}}>Click a category to expand options.</div>
                  {[
                    {cat:"Leadership & Management",items:["Team Leadership (squad/team level)","Platoon Leadership","Company Leadership","Staff Officer Experience","Personnel Management","Scheduling and Coordination"]},
                    {cat:"Training & Development",items:["Training Development and Delivery","Performance Counseling","Mentoring","Coaching","Instructor / Facilitator"]},
                    {cat:"Operations & Planning",items:["Mission Planning","Operations Planning (OPORD)","Crisis Management","Decision Making Under Pressure","Emergency Management","Disaster Response"]},
                    {cat:"Communication",items:["Public Speaking/Briefing","Technical Writing","Cross-Cultural Communication","Negotiation","Conflict Resolution"]},
                    {cat:"Business & Finance",items:["Budget Management","Resource Allocation","Risk Management","Project Management","Logistics Coordination","Quality Control"]},
                  ].map(grp=>(
                    <details key={grp.cat} style={{marginBottom:".3rem",border:"1px solid #d8e4f0",borderRadius:"4px",background:"#fafcff"}}>
                      <summary style={{padding:".45rem .75rem",cursor:"pointer",fontWeight:600,fontSize:".82rem",color:"#1a3a6b",listStyle:"none",display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                        {grp.cat} <span style={{fontSize:".7rem",color:"#8aa0b8",fontWeight:400}}>{grp.items.length} options ›</span>
                      </summary>
                      <div style={{padding:".4rem .75rem .6rem",display:"flex",flexWrap:"wrap",gap:".3rem",borderTop:"1px solid #e8f0f8"}}>
                        {grp.items.map(s=>(
                          <button key={s} style={{background:"#e8edf5",border:"1px solid #c0d0e4",borderRadius:"3px",padding:".2rem .55rem",fontSize:".78rem",cursor:"pointer",color:"#1a3a6b",transition:"all .15s"}}
                            onClick={()=>{if(!skills.leadership.includes(s)) setSkills(sk=>({...sk,leadership:sk.leadership?(sk.leadership+", "+s):s}));}}>
                            + {s}
                          </button>
                        ))}
                      </div>
                    </details>
                  ))}
                  <textarea style={{marginTop:".4rem"}}
                    placeholder="Your leadership skills will appear here as you select them, or type your own..."
                    value={skills.leadership}
                    onChange={e=>setSkills(s=>({...s,leadership:e.target.value}))}/>
                </div>
                <div className="g2">
                  <div className="field"><label>Languages</label>
                    <input placeholder="e.g. Spanish (conversational), Arabic (basic), Pashto DLPT 2/2..."
                      value={skills.languages} onChange={e=>setSkills(s=>({...s,languages:e.target.value}))}/>
                  </div>
                </div>
                <div className="field">
                  <label>Licenses & Certifications</label>
                  <div className="hint" style={{marginBottom:".5rem"}}>Click a category to expand certifications.</div>
                  {[
                    {cat:"Medical & Emergency",items:["EMT-Basic (NREMT-B)","EMT-Intermediate","Paramedic (NREMT-P)","Combat Lifesaver (CLS)","TCCC Certified","Registered Nurse (RN)","Licensed Practical Nurse (LPN)","Certified Nursing Assistant (CNA)"]},
                    {cat:"IT & Cybersecurity",items:["CompTIA Security+","CompTIA A+","CompTIA Network+","CompTIA CySA+","CISSP","CEH (Certified Ethical Hacker)","AWS Cloud Practitioner","DoD 8570 IAT Level I/II/III","DoD 8570 IAM Level I/II/III"]},
                    {cat:"Project & Business",items:["PMP (Project Management Professional)","CAPM","Lean Six Sigma Green Belt","Lean Six Sigma Black Belt","Certified Government Financial Manager (CGFM)","Certified Public Accountant (CPA)"]},
                    {cat:"Trades & Operations",items:["CDL Class A","CDL Class B","Forklift Operator Certification","Crane Operator Certification","OSHA 10-Hour","OSHA 30-Hour","Welding Certification (AWS)","HVAC Certification","Electrician License","Plumbing License"]},
                    {cat:"Aviation & Unmanned",items:["FAA Part 107 (UAS/Drone Pilot)","Private Pilot License","HAZMAT Endorsement","Aircraft Ground Support Certification"]},
                    {cat:"Security & Clearance",items:["Secret Clearance","Top Secret Clearance","TS/SCI Clearance","Physical Security Professional (PSP)","Certified Protection Professional (CPP)","Contracting Officer Representative (COR) Certification"]},
                    {cat:"Safety & Professional",items:["Certified Safety Professional (CSP)","DAWIA Level I/II/III","Certified Fraud Examiner (CFE)","Certified Information Privacy Professional (CIPP)"]},
                  ].map(grp=>(
                    <details key={grp.cat} style={{marginBottom:".3rem",border:"1px solid #d8e4f0",borderRadius:"4px",background:"#fafcff"}}>
                      <summary style={{padding:".45rem .75rem",cursor:"pointer",fontWeight:600,fontSize:".82rem",color:"#1a3a6b",listStyle:"none",display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                        {grp.cat} <span style={{fontSize:".7rem",color:"#8aa0b8",fontWeight:400}}>{grp.items.length} options ›</span>
                      </summary>
                      <div style={{padding:".4rem .75rem .6rem",display:"flex",flexWrap:"wrap",gap:".3rem",borderTop:"1px solid #e8f0f8"}}>
                        {grp.items.map(c=>(
                          <button key={c} style={{background:"#e8edf5",border:"1px solid #c0d0e4",borderRadius:"3px",padding:".2rem .55rem",fontSize:".78rem",cursor:"pointer",color:"#1a3a6b",transition:"all .15s"}}
                            onClick={()=>{if(!skills.certs.includes(c)) setSkills(sk=>({...sk,certs:sk.certs?(sk.certs+", "+c):c}));}}>
                            + {c}
                          </button>
                        ))}
                      </div>
                    </details>
                  ))}
                  <input style={{marginTop:".4rem"}}
                    placeholder="Selected certifications appear here, or type your own..."
                    value={skills.certs}
                    onChange={e=>setSkills(s=>({...s,certs:e.target.value}))}/>
                </div>
              </div>}
            </div>
            <button className="btn-primary" onClick={translateMOS} style={{position:"relative"}} disabled={loading.translate||milExperiences.length===0}>
              {loading.translate?"Translating Your Service...":"🔄  Translate My Military Experience to Civilian Language"}
            </button>
            {loading.translate&&<div className="loading"><div className="spin"/><span>Analyzing your service record...</span></div>}
            {mosOut&&!loading.translate&&(
              <div style={{background:"rgba(224,85,85,.12)",border:"1px solid rgba(224,85,85,.35)",borderRadius:"4px",padding:"1rem 1.2rem",marginTop:"1rem",fontSize:".88rem",color:"#f0a0a0",lineHeight:"1.6"}}>
                <strong style={{display:"block",marginBottom:".3rem"}}>⚠ Could not complete translation</strong>
                {mosOut}
                <div style={{marginTop:".5rem",fontSize:".8rem",opacity:.8}}>Make sure your API key is set correctly and try again.</div>
              </div>
            )}
            {translationData&&!loading.translate&&(
              <div>
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:".5rem",marginBottom:".75rem",marginTop:"1rem"}}>
                  <h3 style={{fontFamily:"'Bebas Neue',sans-serif",letterSpacing:".1em",color:"var(--gold-light)",fontSize:"1.05rem"}}>Your Military Experience — Translated</h3>
                  <div style={{display:"flex",gap:".4rem"}}>
                    <button className="btn-sec" onClick={()=>{
                      const text = [
                        "PROFESSIONAL SUMMARY",
                        translationData.summary||"",
                        "",
                        ...(translationData.roles||[]).flatMap(r=>[
                          (r.mos)+" — "+(r.title||""),
                          r.whatYouDid||"",
                          "Transferable Skills: " + (r.transferableSkills||[]).join(", "),
                          "Resume Bullets:",
                          ...(r.resumeBullets||[]).map(b=>"• "+b),
                          ""
                        ]),
                        ...(translationData.qualifications||[]).flatMap(q=>[
                          (q.code)+" — "+(q.name||"")+": "+(q.civilianMeaning||""),
                          "Opens doors to: "+(q.unlocks),""
                        ]),
                      ].join("\n");
                      navigator.clipboard.writeText(text);
                    }}>Copy All</button>
                    <button className="btn-sec" onClick={async()=>{
                      const jsPDFScript = document.createElement("script");
                      jsPDFScript.src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js";
                      document.head.appendChild(jsPDFScript);
                      jsPDFScript.onload = () => {
                        const {jsPDF} = window.jspdf;
                        const doc = new jsPDF();
                        let y = 20;
                        const addLine = (text, size=10, bold=false) => {
                          if(y>270){doc.addPage();y=20;}
                          doc.setFontSize(size);
                          doc.setFont("helvetica", bold?"bold":"normal");
                          const lines = doc.splitTextToSize(text||"", 170);
                          doc.text(lines, 20, y);
                          y += lines.length * (size*0.4+2);
                        };
                        addLine("MILITARY EXPERIENCE — CIVILIAN TRANSLATION", 14, true);
                        addLine("Generated by VeteranCareerPath.com", 9);
                        y+=4;
                        addLine("PROFESSIONAL SUMMARY", 11, true); y+=2;
                        addLine(translationData.summary||""); y+=4;
                        (translationData.roles||[]).forEach(r=>{
                          addLine((r.mos)+" — "+(r.title||""), 11, true); y+=1;
                          addLine(r.whatYouDid||""); y+=2;
                          addLine("TRANSFERABLE SKILLS", 9, true);
                          addLine((r.transferableSkills||[]).join(" • ")); y+=2;
                          addLine("RESUME BULLETS", 9, true);
                          (r.resumeBullets||[]).forEach(b=>addLine("• "+b)); y+=4;
                        });
                        if((translationData.qualifications||[]).length){
                          addLine("QUALIFICATIONS & WHAT THEY UNLOCK", 11, true); y+=2;
                          (translationData.qualifications||[]).forEach(q=>{
                            addLine((q.code)+" — "+(q.name||""), 10, true);
                            addLine(q.civilianMeaning||"");
                            addLine("Opens: "+(q.unlocks||"")); y+=2;
                          });
                        }
                        if((translationData.additionalDuties||[]).length){
                          addLine("ADDITIONAL DUTY QUALIFICATIONS", 11, true); y+=2;
                          (translationData.additionalDuties||[]).forEach(d=>{
                            addLine((d.duty)+" → "+(d.civilianEquivalent||""), 10, true);
                            addLine(d.value||""); y+=2;
                          });
                        }
                        doc.save("veteran-experience-translated.pdf");
                      };
                    }}>Export PDF</button>
                  </div>
                </div>
                {translationData.summary&&(
                  <div className="trans-section">
                    <div className="trans-section-head"><h4>Professional Summary</h4></div>
                    <div className="trans-section-body">
                      <p style={{fontSize:".9rem",lineHeight:"1.8",color:"var(--text)",fontStyle:"italic"}}>{translationData.summary}</p>
                    </div>
                  </div>
                )}
                {(translationData.roles||[]).map((r,i)=>(
                  <div className="trans-section" key={i}>
                    <div className="trans-section-head">
                      <h4>{r.mos && <span style={{background:"rgba(201,168,76,.2)",padding:".1rem .4rem",borderRadius:"2px",marginRight:".5rem"}}>{r.mos}</span>}{r.title}</h4>
                    </div>
                    <div className="trans-section-body">
                      <div className="trans-block">
                        <div className="trans-block-label">What You Actually Did</div>
                        <div className="trans-block-text">{r.whatYouDid}</div>
                      </div>
                      {(r.transferableSkills||[]).length>0&&(
                        <div className="trans-block">
                          <div className="trans-block-label">Transferable Civilian Skills</div>
                          <div style={{display:"flex",flexWrap:"wrap",gap:".35rem",marginTop:".3rem"}}>
                            {(r.transferableSkills||[]).map((s,j)=>(
                              <span key={j} style={{background:"rgba(76,175,130,.12)",border:"1px solid rgba(76,175,130,.28)",borderRadius:"2px",padding:".18rem .55rem",fontSize:".78rem",color:"#1a3a6b"}}>{s}</span>
                            ))}
                          </div>
                        </div>
                      )}
                      {(r.resumeBullets||[]).length>0&&(
                        <div className="trans-block">
                          <div className="trans-block-label">Ready-to-Use Resume Bullets</div>
                          {(r.resumeBullets||[]).map((b,j)=>(
                            <div className="trans-bullet" key={j}>
                              <div className="trans-bullet-dot"/>
                              <div className="trans-bullet-text">{b}</div>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                ))}
                {(translationData.qualifications||[]).length>0&&(
                  <div className="trans-section">
                    <div className="trans-section-head" style={{background:"rgba(160,124,214,.1)",borderBottom:"1px solid rgba(160,124,214,.2)"}}>
                      <h4 style={{color:"#c4a0f5"}}>ASIs, SQIs & Specialized Qualifications</h4>
                    </div>
                    <div className="trans-section-body">
                      {(translationData.qualifications||[]).map((q,i)=>(
                        <div className="trans-block" key={i}>
                          <div style={{display:"flex",gap:".6rem",alignItems:"flex-start"}}>
                            <span style={{fontFamily:"'Bebas Neue',sans-serif",fontSize:"1.1rem",color:"#c4a0f5",minWidth:"2.5rem"}}>{q.code}</span>
                            <div>
                              <div style={{fontSize:".88rem",fontWeight:600,color:"var(--text)",marginBottom:".2rem"}}>{q.name}</div>
                              <div style={{fontSize:".82rem",color:"var(--dim)",marginBottom:".2rem"}}>{q.civilianMeaning}</div>
                              <div style={{fontSize:".78rem",color:"var(--gold-light)"}}>🔓 Unlocks: {q.unlocks}</div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
                {(translationData.additionalDuties||[]).length>0&&(
                  <div className="trans-section">
                    <div className="trans-section-head" style={{background:"rgba(230,160,60,.08)",borderBottom:"1px solid rgba(230,160,60,.2)"}}>
                      <h4 style={{color:"#e8b84b"}}>Additional Duty Qualifications</h4>
                    </div>
                    <div className="trans-section-body">
                      <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(220px,1fr))",gap:".5rem"}}>
                        {(translationData.additionalDuties||[]).map((d,i)=>(
                          <div key={i} style={{background:"rgba(255,255,255,.05)",border:"1px solid rgba(230,160,60,.18)",borderRadius:"3px",padding:".65rem .8rem"}}>
                            <div style={{fontSize:".8rem",color:"#e8b84b",fontWeight:600,marginBottom:".2rem"}}>{d.duty}</div>
                            <div style={{fontSize:".75rem",color:"var(--green)",marginBottom:".2rem"}}>→ {d.civilianEquivalent}</div>
                            <div style={{fontSize:".72rem",color:"var(--dim)",lineHeight:"1.45"}}>{d.value}</div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                )}
              </div>
            )}
            <div className="nav-row"><div/><button className="btn-sec" onClick={()=>setTab(1)}>Next: Career Pathways →</button></div>
            </>}
          </div>}
          <CareerTab careers={careers} careerFilter={careerFilter} setCareerFilter={setCareerFilter} selectedCareer={selectedCareer} setSelectedCareer={setSelectedCareer} careerDetail={careerDetail} loading={loading} careerError={careerError} openCareerDetail={openCareerDetail} findCareers={findCareers} tab={tab} setTab={setTab} target={target} upT={upT} targetLocation={targetLocation} milExperiences={milExperiences} civExperiences={civExperiences} education={education} currentUser={currentUser} showToast={showToast} setShowAuth={setShowAuth} DI={DI} filterCareers={filterCareers} matchesSector={matchesSector}  hasAccess={hasAccess} RG={RG} setShowPaywall={setShowPaywall}  skills={skills} personal={personal} />
          {tab===2 && <div className="panel on">
            <div className="intro">
              <strong>Generate Your Resume.</strong> Your complete military profile — MOS, ASIs, SQIs, additional duties, clearances, service history, and all experience — will be translated into a polished, ATS-optimized civilian resume.
            </div>
            <div className="card">
              <div className="ch"><h3>Target This Resume To</h3></div>
              <div className="cb">
                <div className="g3">
                  <div className="field"><label>Target Job Title</label><input placeholder="e.g. Operations Manager, Intelligence Analyst" value={target.title} onChange={e=>upT("title",e.target.value)}/></div>
                  <div className="field"><label>Industry</label><input placeholder="e.g. Defense, Healthcare, Logistics" value={target.industry} onChange={e=>upT("industry",e.target.value)}/></div>
                  <div className="field"><label>Keywords to Emphasize</label><input placeholder="e.g. leadership, project management, security" value={target.keywords} onChange={e=>upT("keywords",e.target.value)}/></div>
                </div>
                <div className="g3" style={{marginTop:".75rem"}}>
                  <div className="field"><label>Target Company</label><input placeholder="e.g. Amazon, Booz Allen, VA" value={targetCompany} onChange={e=>setTargetCompany(e.target.value)}/></div>
                  <div className="field"><label>Experience Level</label>
                    <select value={experienceLevel} onChange={e=>setExperienceLevel(e.target.value)}>
                      <option value="entry">Entry Level (0-2 yrs civilian)</option>
                      <option value="mid">Mid-Career (3-7 yrs)</option>
                      <option value="senior">Senior (8-15 yrs)</option>
                      <option value="executive">Executive (15+ yrs)</option>
                    </select>
                  </div>
                  <div className="field"><label>Experience Level Hint</label>
                    <div style={{fontSize:".76rem",color:"var(--slate)",lineHeight:1.55,paddingTop:".4rem"}}>
                      {experienceLevel==="entry"?"Focus on transferable skills, training, and potential":
                       experienceLevel==="mid"?"Balance military achievements with growing civilian expertise":
                       experienceLevel==="senior"?"Emphasize leadership scope, strategic impact, and results":
                       "Highlight executive-level decisions, org transformations, and P&L ownership"}
                    </div>
                  </div>
                </div>
                <div className="field" style={{marginTop:".5rem"}}>
                  <label>Paste the Job Description (optional)</label>
                  <textarea rows="4" placeholder="Paste the full job posting here. The AI will match keywords, mirror the language, and optimize your resume for this specific role..." value={jobDescription} onChange={e=>setJobDescription(e.target.value)} style={{resize:"vertical"}}/>
                  <div className="hint">Pasting the actual job description dramatically improves ATS keyword matching and relevance.</div>
                </div>
              </div>
            </div>
            <div className="card">
              <div className="ch"><h3>Resume Sections</h3><span className="ch-sub" style={{fontSize:".75rem",color:"var(--dim)"}}>Toggle which sections to include</span></div>
              <div className="cb">
                <div className="resume-sections-grid">
                  {[
                    {key:"summary",label:"Professional Summary",required:true},
                    {key:"military",label:"Military Experience",required:true},
                    {key:"civilian",label:"Civilian Experience",required:false},
                    {key:"education",label:"Education & Training",required:false},
                    {key:"certifications",label:"Certifications & Licenses",required:false},
                    {key:"clearance",label:"Security Clearance",required:false},
                    {key:"awards",label:"Awards & Decorations",required:false},
                    {key:"volunteer",label:"Volunteer / Community Service",required:false},
                    {key:"technicalSkills",label:"Technical Skills",required:false},
                    {key:"languages",label:"Languages",required:false},
                  ].map(s=>(
                    <div key={s.key} className="resume-section-toggle">
                      <input type="checkbox" id={"rs-"+s.key} checked={resumeSections[s.key]} onChange={()=>s.required?null:toggleResumeSection(s.key)} disabled={s.required}/>
                      <label htmlFor={"rs-"+s.key}>
                        {s.label}
                        {s.required&&<span className="section-required">(always included)</span>}
                      </label>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div className="card">
              <div className="ch"><h3>Choose Your Resume Format</h3><span className="ch-sub">Select before generating</span></div>
              <div className="cb">
                <div className="format-grid">
                  {RESUME_FORMATS.map(f=>(
                    <div key={f.id} className={"format-card "+(resumeFormat===f.id?"selected":"")} onClick={()=>{
                          setResumeFormat(f.id);
                          const tmplMap={"ats_chrono":"ats_chrono","ats_combo":"ats_combo","functional":"ats_combo","traditional":"traditional","modern":"modern","executive":"executive","federal":"federal","harvard":"harvard","wharton":"wharton","minimalist":"minimalist","creative":"modern"};
                          setResumeTemplate(tmplMap[f.id]||"ats_chrono");
                        }}>
                      {f.badge&&<div style={{display:"inline-block",background:resumeFormat===f.id?"rgba(255,255,255,.2)":"rgba(26,58,107,.1)",border:"1px solid",borderColor:resumeFormat===f.id?"rgba(255,255,255,.35)":"rgba(26,58,107,.2)",borderRadius:"20px",padding:".08rem .45rem",fontSize:".62rem",fontWeight:700,color:resumeFormat===f.id?"#fff":"#1a3a6b",letterSpacing:".05em",marginBottom:".3rem"}}>{f.badge}</div>}
                      <h4>{f.label}</h4>
                      <p>{f.desc}</p>
                    </div>
                  ))}
                </div>
                <div style={{fontSize:".78rem",color:"var(--dim)",marginTop:".35rem",fontStyle:"italic",lineHeight:1.65}}>
                  💡 <strong style={{fontStyle:"normal"}}>Not sure which to pick?</strong> Use <strong style={{color:"var(--gold-light)",fontStyle:"normal"}}>ATS Chronological</strong> for most jobs · <strong style={{color:"var(--gold-light)",fontStyle:"normal"}}>Federal</strong> for USAJOBS · <strong style={{color:"var(--gold-light)",fontStyle:"normal"}}>Functional</strong> if pivoting careers or have a gap · <strong style={{color:"var(--gold-light)",fontStyle:"normal"}}>Executive</strong> if you led organizations of 100+ people
                </div>
                <div style={{marginTop:".75rem",padding:".75rem",background:"#f8fafc",border:"1px solid #e0e8f0",borderRadius:"6px",display:"flex",alignItems:"center",gap:".75rem"}}>
                  <input type="checkbox" id="includeClearance" checked={includeClearance} onChange={e=>setIncludeClearance(e.target.checked)} style={{width:"auto",cursor:"pointer"}}/>
                  <label htmlFor="includeClearance" style={{cursor:"pointer",fontSize:".88rem",color:"#1a3a6b",fontWeight:600,textTransform:"none",letterSpacing:"0"}}>
                    Include security clearance on resume
                    <span style={{display:"block",fontSize:".75rem",color:"#5a7090",fontWeight:400,marginTop:".1rem"}}>Uncheck if applying to roles that don't require clearance or if you prefer not to disclose it</span>
                  </label>
                </div>
              </div>
            </div>
                {hasAccess?(
              <button className="btn-primary" onClick={genResume} style={{position:"relative"}} disabled={loading.resume||!personal.name}>
                {loading.resume?"Crafting Your Resume...":`📄  Generate My ${(RESUME_FORMATS.find(f=>f.id===resumeFormat) ? RESUME_FORMATS.find(f=>f.id===resumeFormat).label : "Professional")||"Professional"} Resume`}
              </button>
                ):(
                <button onClick={()=>setShowPaywall(true)} style={{width:"100%",padding:".75rem",background:"linear-gradient(135deg,#f0c040,#e0a820)",border:"none",borderRadius:"6px",color:"#0d1f3c",fontWeight:700,fontSize:".95rem",cursor:"pointer",letterSpacing:".03em"}}>🔒 Unlock AI Tools — $15/mo</button>
                )}
            {loading.resume&&<div className="loading"><div className="spin"/><span>Generating your resume — this may take 15-30 seconds...</span></div>}
            {resume&&!loading.resume&&(
              <div style={{marginTop:"1rem"}}>
                <div className="resume-out">
                  <div style={{background:"#f0f2f8",borderBottom:"1px solid #d0d8e8",padding:".65rem 1rem",display:"flex",gap:".4rem",flexWrap:"wrap",alignItems:"center"}}>
                    <div style={{marginRight:".4rem"}}>
                      <span style={{fontSize:".7rem",fontWeight:700,letterSpacing:".1em",textTransform:"uppercase",color:"#3a5070"}}>Visual Style:</span>
                      <span style={{fontSize:".65rem",color:"#8aa0b8",marginLeft:".3rem",fontStyle:"italic"}}>changes appearance only — re-generate to change content format</span>
                    </div>
                    {[
                      {id:"ats_chrono",l:"ATS Chrono",pv:'<div style="padding:6%"><div style="height:5px;width:50%;background:#1a3a6b;border-radius:1px;margin-bottom:2px"></div><div style="height:3px;width:70%;background:#999;border-radius:1px;margin-bottom:2px"></div><div style="border-top:2px solid #1a3a6b;margin:3px 0"></div><div style="height:3px;width:100%;background:#ddd;border-radius:1px;margin-bottom:1px"></div><div style="height:3px;width:90%;background:#ddd;border-radius:1px;margin-bottom:3px"></div><div style="height:4px;width:35%;background:#1a3a6b;border-radius:1px;margin-bottom:2px"></div><div style="height:3px;width:100%;background:#eee;border-radius:1px;margin-bottom:1px"></div><div style="height:3px;width:85%;background:#eee;border-radius:1px"></div></div>'},
                      {id:"ats_combo",l:"ATS Combo",pv:'<div style="height:14%;background:#1a3a6b"></div><div style="padding:5%"><div style="display:flex;gap:3px;margin-bottom:4px"><div style="height:8px;width:22%;background:#e8edf5;border-radius:3px"></div><div style="height:8px;width:18%;background:#e8edf5;border-radius:3px"></div><div style="height:8px;width:25%;background:#e8edf5;border-radius:3px"></div></div><div style="height:4px;width:35%;background:#1a3a6b;border-radius:1px;margin-bottom:2px"></div><div style="height:3px;width:100%;background:#eee;border-radius:1px;margin-bottom:1px"></div><div style="height:3px;width:88%;background:#eee;border-radius:1px"></div></div>'},
                      {id:"functional",l:"Functional",pv:'<div style="padding:5%"><div style="height:5px;width:45%;background:#1a3a6b;border-radius:1px;margin-bottom:2px"></div><div style="height:3px;width:65%;background:#aaa;border-radius:1px;margin-bottom:4px"></div><div style="display:flex;gap:3px;flex-wrap:wrap;margin-bottom:4px"><div style="height:8px;width:28%;background:#e8edf5;border-radius:3px"></div><div style="height:8px;width:22%;background:#e8edf5;border-radius:3px"></div><div style="height:8px;width:26%;background:#e8edf5;border-radius:3px"></div></div><div style="height:3px;width:100%;background:#eee;border-radius:1px;margin-bottom:1px"></div><div style="height:3px;width:85%;background:#eee;border-radius:1px"></div></div>'},
                      {id:"traditional",l:"Traditional",pv:'<div style="padding:6%;text-align:center;border-bottom:2px solid #333"><div style="height:5px;width:50%;background:#333;border-radius:1px;margin:0 auto 2px"></div><div style="height:3px;width:65%;background:#999;border-radius:1px;margin:0 auto"></div></div><div style="padding:4%"><div style="height:4px;width:30%;background:#333;border-radius:1px;margin-bottom:3px"></div><div style="height:3px;width:100%;background:#e5e5e5;border-radius:1px;margin-bottom:1px"></div><div style="height:3px;width:90%;background:#e5e5e5;border-radius:1px;margin-bottom:3px"></div><div style="height:4px;width:28%;background:#333;border-radius:1px;margin-bottom:2px"></div><div style="height:3px;width:85%;background:#e5e5e5;border-radius:1px"></div></div>'},
                      {id:"modern",l:"Modern",pv:'<div style="height:20%;background:linear-gradient(135deg,#0d1f3c,#1a3a6b)"></div><div style="padding:5%"><div style="height:3px;width:100%;background:#eee;border-radius:1px;margin-bottom:1px"></div><div style="height:3px;width:85%;background:#eee;border-radius:1px;margin-bottom:4px"></div><div style="height:4px;width:35%;background:#1a3a6b;border-radius:2px;margin-bottom:2px"></div><div style="height:3px;width:95%;background:#eee;border-radius:1px;margin-bottom:1px"></div><div style="height:3px;width:80%;background:#eee;border-radius:1px"></div></div>'},
                      {id:"classic",l:"Classic",pv:'<div style="padding:6%"><div style="height:6px;width:50%;background:#222;margin-bottom:2px"></div><div style="height:3px;width:70%;background:#888;margin-bottom:2px"></div><div style="border-top:1px solid #222;margin:3px 0"></div><div style="height:3px;width:25%;background:#222;margin-bottom:2px"></div><div style="height:3px;width:100%;background:#ddd;margin-bottom:1px"></div><div style="height:3px;width:90%;background:#ddd;margin-bottom:3px"></div><div style="height:3px;width:28%;background:#222;margin-bottom:2px"></div><div style="height:3px;width:88%;background:#ddd"></div></div>'},
                      {id:"executive",l:"Executive",pv:'<div style="padding:6% 6% 3%;border-bottom:1px solid #c8960a"><div style="height:6px;width:50%;background:#1a1a1a;border-radius:1px;margin-bottom:2px"></div><div style="height:3px;width:55%;background:#999;border-radius:1px"></div></div><div style="padding:4% 6%"><div style="height:3px;width:100%;background:#eee;border-radius:1px;margin-bottom:1px"></div><div style="height:3px;width:88%;background:#eee;border-radius:1px;margin-bottom:3px"></div><div style="height:1px;background:#c8960a;margin-bottom:3px"></div><div style="height:4px;width:35%;background:#1a1a1a;border-radius:1px;margin-bottom:2px"></div><div style="height:3px;width:90%;background:#eee;border-radius:1px"></div></div>'},
                      {id:"federal",l:"Federal",pv:'<div style="border:2px solid #333;margin:4%;height:calc(100% - 8%);padding:4%"><div style="text-align:center;border-bottom:2px double #333;padding-bottom:4px;margin-bottom:4px"><div style="height:5px;width:55%;background:#333;margin:0 auto 2px;border-radius:1px"></div><div style="height:3px;width:65%;background:#999;margin:0 auto;border-radius:1px"></div></div><div style="height:3px;width:100%;background:#e5e5e5;border-radius:1px;margin-bottom:1px"></div><div style="height:3px;width:85%;background:#e5e5e5;border-radius:1px;margin-bottom:3px"></div><div style="height:4px;width:30%;background:#333;border-radius:1px;margin-bottom:2px"></div><div style="height:3px;width:90%;background:#e5e5e5;border-radius:1px"></div></div>'},
                      {id:"harvard",l:"Harvard",pv:'<div style="padding:6%;text-align:center"><div style="height:5px;width:55%;background:#2c3e50;border-radius:1px;margin:0 auto 2px"></div><div style="height:3px;width:45%;background:#999;border-radius:1px;margin:0 auto"></div></div><div style="border-top:1px solid #2c3e50;padding:4% 6%"><div style="height:4px;width:30%;background:#2c3e50;border-radius:1px;margin-bottom:3px"></div><div style="height:3px;width:95%;background:#e5e5e5;border-radius:1px;margin-bottom:1px"></div><div style="height:3px;width:85%;background:#e5e5e5;border-radius:1px;margin-bottom:3px"></div><div style="height:4px;width:25%;background:#2c3e50;border-radius:1px;margin-bottom:2px"></div><div style="height:3px;width:90%;background:#e5e5e5;border-radius:1px"></div></div>'},
                      {id:"wharton",l:"Wharton",pv:'<div style="padding:5%"><div style="height:6px;width:48%;background:#8b0000;border-radius:1px;margin-bottom:2px"></div><div style="height:3px;width:60%;background:#aaa;border-radius:1px;margin-bottom:2px"></div><div style="border-top:2px solid #8b0000;margin:3px 0"></div><div style="height:3px;width:100%;background:#eee;border-radius:1px;margin-bottom:1px"></div><div style="height:3px;width:88%;background:#eee;border-radius:1px;margin-bottom:3px"></div><div style="height:4px;width:32%;background:#8b0000;border-radius:1px;margin-bottom:2px"></div><div style="height:3px;width:92%;background:#eee;border-radius:1px"></div></div>'},
                      {id:"minimalist",l:"Minimalist",pv:'<div style="padding:6%"><div style="height:5px;width:40%;background:#444;border-radius:1px;margin-bottom:2px"></div><div style="height:3px;width:55%;background:#bbb;border-radius:1px;margin-bottom:2px"></div><div style="height:1px;background:#ddd;margin:4px 0"></div><div style="height:3px;width:100%;background:#f0f0f0;border-radius:1px;margin-bottom:1px"></div><div style="height:3px;width:88%;background:#f0f0f0;border-radius:1px;margin-bottom:3px"></div><div style="height:1px;background:#ddd;margin:3px 0"></div><div style="height:3px;width:30%;background:#444;border-radius:1px;margin-bottom:2px"></div><div style="height:3px;width:85%;background:#f0f0f0;border-radius:1px"></div></div>'}
                    ].map(t=>(
                      <div key={t.id} style={{display:"inline-block",cursor:"pointer",marginRight:".4rem",marginBottom:".4rem",textAlign:"center",verticalAlign:"top"}}
                        onClick={()=>setResumeTemplate(t.id)}>
                        <div style={{width:56,height:72,background:"#fff",borderRadius:4,border:resumeTemplate===t.id?"2px solid #1a3a6b":"1px solid #d0d8e8",overflow:"hidden",marginBottom:".15rem",boxShadow:resumeTemplate===t.id?"0 0 0 2px #4a7aef":"0 1px 3px rgba(0,0,0,.08)"}}
                          dangerouslySetInnerHTML={{__html: t.pv}} />
                        <div style={{fontSize:".62rem",color:resumeTemplate===t.id?"#1a3a6b":"#8a9ab0",fontWeight:resumeTemplate===t.id?700:400,lineHeight:1.2,maxWidth:56}}>{t.l}</div>
                      </div>
                    ))}
                    <div style={{width:"100%",display:"flex",gap:".4rem",alignItems:"center",flexWrap:"wrap",marginTop:".5rem",paddingTop:".5rem",borderTop:"1px solid #e8edf5"}}>
                      <span style={{fontSize:".72rem",fontWeight:600,color:"#5a7090",marginRight:".25rem"}}>Visual Style:</span>
                      {Object.entries(VISUAL_STYLES).map(([key,s])=>(
                        <button key={key} onClick={()=>setResumeVisualStyle(key)}
                          style={{padding:".25rem .65rem",borderRadius:"3px",border:"1.5px solid",fontSize:".72rem",cursor:"pointer",display:"flex",alignItems:"center",gap:".3rem",
                            background:resumeVisualStyle===key?"#f8f8f8":"#fff",
                            color:resumeVisualStyle===key?s.accent:"#5a7090",
                            borderColor:resumeVisualStyle===key?s.accent:"#d0daea",
                            fontWeight:resumeVisualStyle===key?700:400,
                            boxShadow:resumeVisualStyle===key?"0 0 0 2px "+s.accent+"33":"none"}}>
                          <span style={{width:"10px",height:"10px",borderRadius:"50%",background:s.preview,border:"1px solid rgba(0,0,0,.15)",flexShrink:0}}/>
                          {s.name}
                        </button>
                      ))}
                    </div>
                    <div style={{marginLeft:"auto",display:"flex",gap:".4rem"}}>
                      <button style={{padding:".28rem .75rem",fontSize:".74rem",background:"#fff",color:"#1a3a6b",border:"1px solid #1a3a6b",borderRadius:"3px",cursor:"pointer"}} onClick={()=>{
                          const el=document.getElementById("resume-render");
                          if(el) navigator.clipboard.writeText(el.innerText||"");
                        }}>Copy</button>
                      <button id="btn-pdf-resume" style={{padding:".28rem .75rem",fontSize:".74rem",background:"#1a3a6b",color:"#fff",border:"none",borderRadius:"3px",cursor:"pointer",fontWeight:600}} onClick={async()=>{
                          const el=document.getElementById("resume-render");
                          if(!el) return;
                          const btn=document.getElementById("btn-pdf-resume");
                          btn.textContent="Generating PDF...";btn.disabled=true;
                          try {
                            if(!window.html2pdf){
                              await new Promise((resolve,reject)=>{
                                const s=document.createElement("script");
                                s.src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js";
                                s.onload=resolve;s.onerror=reject;document.head.appendChild(s);
                              });
                            }
                            const resumeBox=el.querySelector("div[style*='background']")||el.firstElementChild;
                            if(!resumeBox){btn.textContent="PDF";btn.disabled=false;return;}
                            const origW=resumeBox.style.width;
                            resumeBox.style.width="760px";
                            const name=(resumeData&&resumeData.name)||personal.name||"Resume";
                            await html2pdf().set({
                              margin:0,
                              filename:name.replace(/\s+/g,"_")+"_Resume.pdf",
                              image:{type:"jpeg",quality:0.98},
                              html2canvas:{scale:2,useCORS:true,letterRendering:true,scrollY:0},
                              jsPDF:{unit:"mm",format:"letter",orientation:"portrait"},
                              pagebreak:{mode:["avoid-all","css","legacy"],avoid:["div","h3","li"]}
                            }).from(resumeBox).save();
                            resumeBox.style.width=origW;
                          } catch(e){
                            console.error("PDF generation error:",e);
                            alert("PDF generation failed: "+e.message);
                          }
                          btn.textContent="PDF";btn.disabled=false;
                        }}>PDF</button>
                    </div>
                  </div>
                  <div id="resume-render" style={{overflowY:"auto",maxHeight:"none",background:"#f0f4fa",padding:"1.2rem",display:"flex",justifyContent:"center"}}>
                    {resumeData ? (
                      <div style={{width:"100%",maxWidth:"760px",background:"#fff",boxShadow:"0 4px 20px rgba(0,0,0,.15)"}}>
                        {resumeTemplate==="modern"&&(
                          <div style={{fontFamily:vs.font,fontSize:"10pt",color:"#1a1a1a"}}>
                            <div style={{background:vs.headerBg==="#ffffff"?"linear-gradient(135deg,"+vs.accent+","+vs.accent+"dd)":"linear-gradient(135deg,"+vs.headerBg+","+vs.accent+")",color:vs.headerText==="#000000"?"#fff":vs.headerText,padding:"1.8rem 2.2rem 1.4rem"}}>
                              <div style={{fontSize:"20pt",fontWeight:700,marginBottom:".3rem"}}>{resumeData.name||personal.name}</div>
                              <div style={{fontSize:"8.5pt",opacity:.85}}>{resumeData.contact||personal.email}</div>
                              {(includeClearance&&resumeData.clearance)&&(<div style={{marginTop:".5rem",display:"inline-block",background:"#b8860b",color:"#fff",padding:".12rem .6rem",borderRadius:"2px",fontSize:"7.5pt",fontWeight:700,letterSpacing:".08em"}}>CLEARANCE: {resumeData.clearance}</div>)}
                            </div>
                            <div style={{padding:"1.4rem 2.2rem"}}>
                              {resumeData.summary&&(<div style={{marginBottom:"1rem",paddingBottom:".8rem",borderBottom:"2px solid #1a3a6b"}}>
                                <div style={{fontSize:"8pt",fontWeight:700,letterSpacing:".12em",textTransform:"uppercase",color:"#1a3a6b",marginBottom:".3rem"}}>Professional Summary</div>
                                <div style={{fontSize:"9.5pt",lineHeight:1.65,color:"#2a2a2a"}}>{resumeData.summary}</div>
                              </div>)}
                              {(resumeData.experience||[]).map((job,i)=>(
                                <div key={i} style={{marginBottom:".85rem",paddingBottom:".85rem",borderBottom:"1px solid #eee"}}>
                                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:".15rem"}}>
                                    <div style={{fontWeight:700,fontSize:"10pt",color:"#1a3a6b"}}>{job.title}</div>
                                    <div style={{fontSize:"8.5pt",color:"#666"}}>{job.dates}</div>
                                  </div>
                                  <div style={{fontSize:"9pt",color:"#444",fontStyle:"italic",marginBottom:".3rem"}}>{job.employer}</div>
                                  {(job.bullets||[]).map((b,j)=>(<div key={j} style={{fontSize:"9pt",lineHeight:1.55,paddingLeft:".9rem",position:"relative",color:"#333",marginBottom:".12rem"}}><span style={{position:"absolute",left:0,color:"#b8860b",fontWeight:700}}>►</span>{b}</div>))}
                                </div>
                              ))}
                              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"1rem",marginTop:".4rem"}}>
                                <div>
                                  <div style={{fontSize:"8pt",fontWeight:700,letterSpacing:".12em",textTransform:"uppercase",color:"#1a3a6b",marginBottom:".4rem",paddingBottom:".15rem",borderBottom:"2px solid #1a3a6b"}}>Education</div>
                                  {(resumeData.education||[]).map((e,i)=>(<div key={i} style={{marginBottom:".4rem",fontSize:"9pt"}}><div style={{fontWeight:600}}>{e.degree}</div><div style={{color:"#555"}}>{e.school}</div><div style={{color:"#888",fontSize:"8pt"}}>{e.year}</div></div>))}
                                </div>
                                <div>
                                  <div style={{fontSize:"8pt",fontWeight:700,letterSpacing:".12em",textTransform:"uppercase",color:"#1a3a6b",marginBottom:".4rem",paddingBottom:".15rem",borderBottom:"2px solid #1a3a6b"}}>Core Skills</div>
                                  <div style={{display:"flex",flexWrap:"wrap",gap:".25rem",marginBottom:".5rem"}}>
                                    {(resumeData.skills||[]).map((s,i)=>(<span key={i} style={{background:"#e8edf5",border:"1px solid #b8c8d8",borderRadius:"2px",padding:".1rem .4rem",fontSize:"8pt",color:"#1a3a6b"}}>{s}</span>))}
                                  </div>
                                  {(resumeData.certifications||[]).length>0&&(<div><div style={{fontSize:"8pt",fontWeight:700,color:"#666",marginBottom:".2rem",textTransform:"uppercase"}}>Certifications</div>{(resumeData.certifications||[]).map((c,i)=>(<div key={i} style={{fontSize:"8.5pt",color:"#333"}}>• {c}</div>))}</div>)}
                                  {(resumeData.awards||[]).length>0&&(<div style={{marginTop:".5rem"}}><div style={{fontSize:"8pt",fontWeight:700,color:"#666",marginBottom:".2rem",textTransform:"uppercase"}}>Awards</div>{(resumeData.awards||[]).map((a,i)=>(<div key={i} style={{fontSize:"8.5pt",color:"#333"}}>• {a}</div>))}</div>)}
                                </div>
                              </div>
                            </div>
                          </div>
                        )}
                        {resumeTemplate==="classic"&&(
                          <div style={{fontFamily:"Georgia,serif",fontSize:"10pt",color:"#1a1a1a",padding:"2rem 2.4rem"}}>
                            <div style={{textAlign:"center",borderBottom:"2px solid #1a1a1a",paddingBottom:".8rem",marginBottom:".8rem"}}>
                              <div style={{fontSize:"18pt",fontWeight:700,letterSpacing:".04em",textTransform:"uppercase"}}>{resumeData.name||personal.name}</div>
                              <div style={{fontSize:"8.5pt",color:"#444",marginTop:".25rem"}}>{resumeData.contact||personal.email}</div>
                              {(includeClearance&&resumeData.clearance)&&(<div style={{fontSize:"8.5pt",fontWeight:700,marginTop:".2rem"}}>Security Clearance: {resumeData.clearance}</div>)}
                            </div>
                            {resumeData.summary&&(<div style={{marginBottom:".9rem"}}><div style={{fontSize:"8.5pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",borderBottom:"1px solid #888",paddingBottom:"2pt",marginBottom:".4rem"}}>Professional Summary</div><div style={{fontSize:"9.5pt",lineHeight:1.65,color:"#222",textAlign:"justify"}}>{resumeData.summary}</div></div>)}
                            <div style={{fontSize:"8.5pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",borderBottom:"1px solid #888",paddingBottom:"2pt",marginBottom:".5rem"}}>Experience</div>
                            {(resumeData.experience||[]).map((job,i)=>(<div key={i} style={{marginBottom:".8rem"}}><div style={{display:"flex",justifyContent:"space-between"}}><span style={{fontWeight:700,fontSize:"10pt"}}>{job.title}</span><span style={{fontSize:"8.5pt",color:"#555",fontStyle:"italic"}}>{job.dates}</span></div><div style={{fontStyle:"italic",color:"#444",fontSize:"9pt",marginBottom:".25rem"}}>{job.employer}</div>{(job.bullets||[]).map((b,j)=>(<div key={j} style={{fontSize:"9pt",lineHeight:1.55,paddingLeft:".9rem",marginBottom:".1rem"}}>• {b}</div>))}</div>))}
                            <div style={{fontSize:"8.5pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",borderBottom:"1px solid #888",paddingBottom:"2pt",margin:".8rem 0 .4rem"}}>Education</div>
                            {(resumeData.education||[]).map((e,i)=>(<div key={i} style={{fontSize:"9pt",marginBottom:".3rem"}}><strong>{e.degree}</strong> — {e.school} {e.year&&"("+e.year+")"}</div>))}
                            <div style={{fontSize:"8.5pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",borderBottom:"1px solid #888",paddingBottom:"2pt",margin:".8rem 0 .4rem"}}>Skills</div>
                            <div style={{fontSize:"9pt",lineHeight:1.7}}>{(resumeData.skills||[]).concat(resumeData.certifications||[]).join(" \u2022 ")}</div>
                            {(resumeData.awards||[]).length>0&&(<div><div style={{fontSize:"8.5pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",borderBottom:"1px solid #888",paddingBottom:"2pt",margin:".8rem 0 .4rem"}}>Awards</div>{(resumeData.awards||[]).map((a,i)=>(<div key={i} style={{fontSize:"9pt"}}>• {a}</div>))}</div>)}
                          </div>
                        )}
                        {resumeTemplate==="executive"&&(
                          <div style={{fontFamily:vs.font,fontSize:"10pt",color:"#1a1a1a"}}>
                            <div style={{background:vs.accent,color:"#fff",padding:"2rem 2.4rem"}}>
                              <div style={{fontSize:"22pt",fontWeight:300,letterSpacing:".08em",textTransform:"uppercase"}}>{resumeData.name||personal.name}</div>
                              <div style={{height:"2px",background:"#b8860b",width:"50px",margin:".6rem 0"}}/>
                              <div style={{fontSize:"8.5pt",color:"#aaa",letterSpacing:".05em"}}>{resumeData.contact||personal.email}</div>
                              {(includeClearance&&resumeData.clearance)&&(<div style={{marginTop:".5rem",color:"#b8860b",fontSize:"8.5pt",fontWeight:600}}>CLEARANCE: {resumeData.clearance.toUpperCase()}</div>)}
                            </div>
                            <div style={{padding:"1.5rem 2.4rem"}}>
                              {resumeData.summary&&(<div style={{marginBottom:"1.2rem",paddingBottom:"1.2rem",borderBottom:"1px solid #e8e8e8"}}><div style={{fontSize:"7.5pt",fontWeight:700,letterSpacing:".18em",textTransform:"uppercase",color:"#b8860b",marginBottom:".4rem"}}>Executive Profile</div><div style={{fontSize:"10pt",lineHeight:1.7,color:"#222",fontWeight:300}}>{resumeData.summary}</div></div>)}
                              <div style={{marginBottom:"1.2rem"}}><div style={{fontSize:"7.5pt",fontWeight:700,letterSpacing:".18em",textTransform:"uppercase",color:"#b8860b",marginBottom:".6rem"}}>Core Competencies</div><div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:".25rem"}}>{(resumeData.skills||[]).map((s,i)=>(<div key={i} style={{fontSize:"8.5pt",padding:".2rem .5rem",background:"#f8f8f8",borderLeft:"3px solid #b8860b",color:"#222"}}>{s}</div>))}</div></div>
                              {(resumeData.experience||[]).map((job,i)=>(<div key={i} style={{marginBottom:"1rem",paddingBottom:"1rem",borderBottom:"1px solid #f0f0f0"}}><div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline"}}><div style={{fontWeight:700,fontSize:"10.5pt"}}>{job.title}</div><div style={{fontSize:"8pt",color:"#888",fontStyle:"italic"}}>{job.dates}</div></div><div style={{fontSize:"9pt",color:"#b8860b",fontWeight:600,marginBottom:".4rem"}}>{job.employer}</div>{(job.bullets||[]).map((b,j)=>(<div key={j} style={{fontSize:"9pt",lineHeight:1.6,paddingLeft:"1rem",position:"relative",color:"#333",marginBottom:".18rem"}}><span style={{position:"absolute",left:0,color:"#b8860b",fontWeight:700}}>›</span>{b}</div>))}</div>))}
                              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"1.2rem"}}>
                                <div><div style={{fontSize:"7.5pt",fontWeight:700,letterSpacing:".18em",textTransform:"uppercase",color:"#b8860b",marginBottom:".4rem"}}>Education</div>{(resumeData.education||[]).map((e,i)=>(<div key={i} style={{marginBottom:".35rem",fontSize:"9pt"}}><div style={{fontWeight:600}}>{e.degree}</div><div style={{color:"#666"}}>{e.school} {e.year}</div></div>))}</div>
                                <div><div style={{fontSize:"7.5pt",fontWeight:700,letterSpacing:".18em",textTransform:"uppercase",color:"#b8860b",marginBottom:".4rem"}}>Certifications & Awards</div>{(resumeData.certifications||[]).map((c,i)=>(<div key={i} style={{fontSize:"8.5pt",color:"#333",marginBottom:".18rem"}}>✓ {c}</div>))}{(resumeData.awards||[]).map((a,i)=>(<div key={i} style={{fontSize:"8.5pt",color:"#333",marginBottom:".18rem"}}>★ {a}</div>))}</div>
                              </div>
                            </div>
                          </div>
                        )}
                        {resumeTemplate==="minimal"&&(
                          <div style={{fontFamily:"Arial,sans-serif",fontSize:"10pt",color:"#1a1a1a",padding:"2.5rem"}}>
                            <div style={{marginBottom:"1.8rem"}}>
                              <div style={{fontSize:"24pt",fontWeight:700,marginBottom:".15rem"}}>{resumeData.name||personal.name}</div>
                              <div style={{fontSize:"8.5pt",color:"#888"}}>{resumeData.contact||personal.email}</div>
                              {(includeClearance&&resumeData.clearance)&&(<div style={{fontSize:"8.5pt",fontWeight:600,color:"#333",marginTop:".2rem"}}>{resumeData.clearance}</div>)}
                            </div>
                            {resumeData.summary&&(<div style={{marginBottom:"1.8rem",paddingBottom:"1.8rem",borderBottom:"1px solid #eee"}}><div style={{fontSize:"10pt",lineHeight:1.8,color:"#444"}}>{resumeData.summary}</div></div>)}
                            {(resumeData.experience||[]).map((job,i)=>(<div key={i} style={{marginBottom:"1.6rem"}}><div style={{display:"flex",justifyContent:"space-between"}}><div style={{fontWeight:700,fontSize:"10.5pt"}}>{job.title}</div><div style={{fontSize:"8.5pt",color:"#999"}}>{job.dates}</div></div><div style={{color:"#666",fontSize:"9pt",marginBottom:".4rem"}}>{job.employer}</div>{(job.bullets||[]).map((b,j)=>(<div key={j} style={{fontSize:"9pt",lineHeight:1.6,paddingLeft:".9rem",borderLeft:"2px solid #eee",marginBottom:".25rem",color:"#333"}}>{b}</div>))}</div>))}
                            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"1.8rem",paddingTop:"1.5rem",borderTop:"1px solid #eee"}}>
                              <div><div style={{fontSize:"7.5pt",letterSpacing:".15em",textTransform:"uppercase",color:"#999",fontWeight:700,marginBottom:".6rem"}}>Education</div>{(resumeData.education||[]).map((e,i)=>(<div key={i} style={{fontSize:"9pt",marginBottom:".4rem"}}><div style={{fontWeight:600}}>{e.degree}</div><div style={{color:"#777"}}>{e.school}</div></div>))}</div>
                              <div><div style={{fontSize:"7.5pt",letterSpacing:".15em",textTransform:"uppercase",color:"#999",fontWeight:700,marginBottom:".6rem"}}>Skills</div><div style={{fontSize:"9pt",color:"#444",lineHeight:1.8}}>{(resumeData.skills||[]).join(" \u00b7 ")}</div></div>
                            </div>
                          </div>
                        )}
                        {resumeTemplate==="federal"&&(
                          <div style={{fontFamily:"Arial,sans-serif",fontSize:"9.5pt",color:"#000",padding:"1.6rem 2rem"}}>
                            <div style={{borderBottom:"3px double #000",paddingBottom:".8rem",marginBottom:".8rem"}}>
                              <div style={{fontSize:"15pt",fontWeight:700}}>{resumeData.name||personal.name}</div>
                              <div style={{fontSize:"8.5pt",color:"#333",marginTop:".2rem"}}>{resumeData.contact||personal.email}</div>
                              {(includeClearance&&resumeData.clearance)&&(<div style={{fontSize:"8.5pt",fontWeight:700,marginTop:".2rem"}}>SECURITY CLEARANCE: {resumeData.clearance}</div>)}
                            </div>
                            {resumeData.summary&&(<div style={{marginBottom:".8rem"}}><div style={{fontWeight:700,fontSize:"9.5pt",textDecoration:"underline",marginBottom:".3rem"}}>PROFESSIONAL SUMMARY</div><div style={{lineHeight:1.7}}>{resumeData.summary}</div></div>)}
                            <div style={{fontWeight:700,fontSize:"9.5pt",textDecoration:"underline",marginBottom:".5rem"}}>WORK EXPERIENCE</div>
                            {(resumeData.experience||[]).map((job,i)=>(<div key={i} style={{marginBottom:"1rem",paddingLeft:".9rem",borderLeft:"3px solid #000"}}><div style={{fontWeight:700}}>{job.title}</div><div style={{fontWeight:600,color:"#333"}}>{job.employer}</div><div style={{color:"#555",fontSize:"8.5pt",marginBottom:".3rem"}}>{job.dates}</div>{(job.bullets||[]).map((b,j)=>(<div key={j} style={{lineHeight:1.65,paddingLeft:".7rem",marginBottom:".15rem"}}>• {b}</div>))}</div>))}
                            <div style={{fontWeight:700,fontSize:"9.5pt",textDecoration:"underline",margin:".8rem 0 .5rem"}}>EDUCATION</div>
                            {(resumeData.education||[]).map((e,i)=>(<div key={i} style={{marginBottom:".4rem"}}><strong>{e.degree}</strong><br/>{e.school}{e.year&&", "+e.year}</div>))}
                            <div style={{fontWeight:700,fontSize:"9.5pt",textDecoration:"underline",margin:".8rem 0 .5rem"}}>SKILLS & CERTIFICATIONS</div>
                            <div style={{lineHeight:1.8}}>{(resumeData.skills||[]).concat(resumeData.certifications||[]).join(" | ")}</div>
                            {(resumeData.awards||[]).length>0&&(<div><div style={{fontWeight:700,fontSize:"9.5pt",textDecoration:"underline",margin:".8rem 0 .5rem"}}>AWARDS</div>{(resumeData.awards||[]).map((a,i)=>(<div key={i}>• {a}</div>))}</div>)}
                          </div>
                        )}
                        {resumeTemplate==="ats_chrono"&&(
                          <div style={{fontFamily:"Arial,sans-serif",fontSize:"10pt",color:"#000",padding:"1.5rem 2rem",lineHeight:1.4}}>
                            <div style={{textAlign:"center",marginBottom:"8pt"}}>
                              <div style={{fontSize:"14pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".05em"}}>{resumeData.name||personal.name}</div>
                              <div style={{fontSize:"9pt",color:"#333",marginTop:"2pt"}}>{resumeData.contact||personal.email}</div>
                              {(includeClearance&&resumeData.clearance)&&<div style={{fontSize:"9pt",fontWeight:700,marginTop:"2pt"}}>Clearance: {resumeData.clearance}</div>}
                            </div>
                            <div style={{borderTop:"2px solid #000",borderBottom:"1px solid #000",padding:"3pt 0",marginBottom:"6pt"}}>
                              <div style={{fontSize:"8pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".12em",textAlign:"center"}}>Professional Summary</div>
                            </div>
                            <div style={{fontSize:"9.5pt",marginBottom:"8pt",lineHeight:1.6}}>{resumeData.summary}</div>
                            <div style={{borderTop:"2px solid #000",borderBottom:"1px solid #000",padding:"3pt 0",marginBottom:"6pt"}}>
                              <div style={{fontSize:"8pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".12em",textAlign:"center"}}>Core Competencies</div>
                            </div>
                            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:"2pt",marginBottom:"8pt"}}>
                              {(resumeData.skills||[]).map((s,i)=>(<div key={i} style={{fontSize:"9pt",padding:"1pt 0"}}>■ {s}</div>))}
                            </div>
                            <div style={{borderTop:"2px solid #000",borderBottom:"1px solid #000",padding:"3pt 0",marginBottom:"6pt"}}>
                              <div style={{fontSize:"8pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".12em",textAlign:"center"}}>Professional Experience</div>
                            </div>
                            {(resumeData.experience||[]).map((job,i)=>(
                              <div key={i} style={{marginBottom:"8pt"}}>
                                <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline"}}>
                                  <span style={{fontWeight:700,fontSize:"10pt",textTransform:"uppercase"}}>{job.title}</span>
                                  <span style={{fontSize:"9pt"}}>{job.dates}</span>
                                </div>
                                <div style={{fontWeight:600,fontSize:"9pt",marginBottom:"3pt"}}>{job.employer}</div>
                                {(job.bullets||[]).map((b,j)=>(<div key={j} style={{fontSize:"9pt",paddingLeft:"12pt",marginBottom:"2pt"}}>• {b}</div>))}
                              </div>
                            ))}
                            <div style={{borderTop:"2px solid #000",borderBottom:"1px solid #000",padding:"3pt 0",marginBottom:"6pt"}}>
                              <div style={{fontSize:"8pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".12em",textAlign:"center"}}>Education</div>
                            </div>
                            {(resumeData.education||[]).map((e,i)=>(
                              <div key={i} style={{fontSize:"9pt",marginBottom:"4pt"}}><strong>{e.degree}</strong> — {e.school} {e.year&&"("+e.year+")"}</div>
                            ))}
                            {(resumeData.certifications||[]).length>0&&<>
                              <div style={{borderTop:"2px solid #000",borderBottom:"1px solid #000",padding:"3pt 0",marginBottom:"6pt",marginTop:"6pt"}}>
                                <div style={{fontSize:"8pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".12em",textAlign:"center"}}>Certifications</div>
                              </div>
                              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"2pt"}}>
                                {(resumeData.certifications||[]).map((c,i)=>(<div key={i} style={{fontSize:"9pt"}}>■ {c}</div>))}
                              </div>
                            </>}
                          </div>
                        )}
                        {resumeTemplate==="ats_combo"&&(
                          <div style={{fontFamily:"Arial,sans-serif",fontSize:"10pt",color:"#000",padding:"1.5rem 2rem",lineHeight:1.4}}>
                            <div style={{marginBottom:"8pt"}}>
                              <div style={{fontSize:"15pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".04em"}}>{resumeData.name||personal.name}</div>
                              <div style={{fontSize:"9pt",color:"#333",marginTop:"2pt"}}>{resumeData.contact||personal.email}</div>
                              {(includeClearance&&resumeData.clearance)&&<div style={{fontSize:"9pt",fontWeight:700,color:"#1a3a6b",marginTop:"2pt"}}>Clearance: {resumeData.clearance}</div>}
                            </div>
                            <div style={{background:"#f0f0f0",padding:"6pt 8pt",marginBottom:"8pt",borderLeft:"4px solid #000"}}>
                              <div style={{fontSize:"9pt",lineHeight:1.65}}>{resumeData.summary}</div>
                            </div>
                            <div style={{fontWeight:700,fontSize:"8.5pt",textTransform:"uppercase",letterSpacing:".1em",borderBottom:"2px solid #000",paddingBottom:"2pt",marginBottom:"5pt"}}>Areas of Expertise</div>
                            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:"3pt",marginBottom:"8pt"}}>
                              {(resumeData.skills||[]).map((s,i)=>(<div key={i} style={{fontSize:"9pt",padding:"2pt 4pt",background:"#f8f8f8",border:"1px solid #ddd"}}>✓ {s}</div>))}
                            </div>
                            <div style={{fontWeight:700,fontSize:"8.5pt",textTransform:"uppercase",letterSpacing:".1em",borderBottom:"2px solid #000",paddingBottom:"2pt",marginBottom:"5pt"}}>Professional Experience</div>
                            {(resumeData.experience||[]).map((job,i)=>(
                              <div key={i} style={{marginBottom:"8pt"}}>
                                <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline"}}>
                                  <span style={{fontWeight:700,fontSize:"10pt"}}>{job.title}</span>
                                  <span style={{fontSize:"9pt",color:"#555"}}>{job.dates}</span>
                                </div>
                                <div style={{fontStyle:"italic",fontSize:"9pt",marginBottom:"3pt"}}>{job.employer}</div>
                                {(job.bullets||[]).map((b,j)=>(<div key={j} style={{fontSize:"9pt",paddingLeft:"10pt",marginBottom:"2pt"}}>• {b}</div>))}
                              </div>
                            ))}
                            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"1rem",marginTop:"6pt"}}>
                              <div>
                                <div style={{fontWeight:700,fontSize:"8.5pt",textTransform:"uppercase",letterSpacing:".1em",borderBottom:"2px solid #000",paddingBottom:"2pt",marginBottom:"5pt"}}>Education</div>
                                {(resumeData.education||[]).map((e,i)=>(<div key={i} style={{fontSize:"9pt",marginBottom:"3pt"}}><strong>{e.degree}</strong><br/>{e.school} {e.year}</div>))}
                              </div>
                              <div>
                                <div style={{fontWeight:700,fontSize:"8.5pt",textTransform:"uppercase",letterSpacing:".1em",borderBottom:"2px solid #000",paddingBottom:"2pt",marginBottom:"5pt"}}>Certifications</div>
                                {(resumeData.certifications||[]).map((c,i)=>(<div key={i} style={{fontSize:"9pt",marginBottom:"2pt"}}>■ {c}</div>))}
                              </div>
                            </div>
                          </div>
                        )}
                        {resumeTemplate==="harvard"&&(
                          <div style={{fontFamily:"Garamond,Georgia,serif",fontSize:"10.5pt",color:"#000",padding:"2rem 2.4rem",lineHeight:1.5}}>
                            <div style={{textAlign:"center",marginBottom:"6pt"}}>
                              <div style={{fontSize:"16pt",fontWeight:700,letterSpacing:".06em",textTransform:"uppercase",fontVariant:"small-caps"}}>{resumeData.name||personal.name}</div>
                              <div style={{height:"1px",background:"#000",margin:"4pt 0"}}/>
                              <div style={{fontSize:"9pt",color:"#333"}}>{resumeData.contact||personal.email}</div>
                              {(includeClearance&&resumeData.clearance)&&<div style={{fontSize:"9pt",fontWeight:700,marginTop:"2pt"}}>Security Clearance: {resumeData.clearance}</div>}
                            </div>
                            {resumeData.summary&&(
                              <div style={{marginBottom:"10pt"}}>
                                <div style={{fontWeight:700,fontSize:"9pt",textTransform:"uppercase",letterSpacing:".12em",fontVariant:"small-caps",borderBottom:"1px solid #000",paddingBottom:"2pt",marginBottom:"4pt"}}>Summary</div>
                                <div style={{fontSize:"10pt",lineHeight:1.7,textAlign:"justify"}}>{resumeData.summary}</div>
                              </div>
                            )}
                            <div style={{fontWeight:700,fontSize:"9pt",textTransform:"uppercase",letterSpacing:".12em",fontVariant:"small-caps",borderBottom:"1px solid #000",paddingBottom:"2pt",marginBottom:"6pt"}}>Experience</div>
                            {(resumeData.experience||[]).map((job,i)=>(
                              <div key={i} style={{marginBottom:"8pt"}}>
                                <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline"}}>
                                  <span style={{fontWeight:700,fontSize:"10.5pt"}}>{job.employer}</span>
                                  <span style={{fontSize:"9.5pt",fontStyle:"italic"}}>{job.dates}</span>
                                </div>
                                <div style={{fontStyle:"italic",fontSize:"10pt",marginBottom:"3pt"}}>{job.title}</div>
                                {(job.bullets||[]).map((b,j)=>(<div key={j} style={{fontSize:"9.5pt",paddingLeft:"12pt",marginBottom:"2pt",lineHeight:1.6}}>• {b}</div>))}
                              </div>
                            ))}
                            <div style={{fontWeight:700,fontSize:"9pt",textTransform:"uppercase",letterSpacing:".12em",fontVariant:"small-caps",borderBottom:"1px solid #000",paddingBottom:"2pt",margin:"8pt 0 6pt"}}>Education</div>
                            {(resumeData.education||[]).map((e,i)=>(
                              <div key={i} style={{display:"flex",justifyContent:"space-between",marginBottom:"4pt",fontSize:"10pt"}}>
                                <div><strong>{e.school}</strong><br/><span style={{fontStyle:"italic"}}>{e.degree}</span></div>
                                <div style={{textAlign:"right",fontSize:"9.5pt",color:"#444"}}>{e.year}</div>
                              </div>
                            ))}
                            <div style={{fontWeight:700,fontSize:"9pt",textTransform:"uppercase",letterSpacing:".12em",fontVariant:"small-caps",borderBottom:"1px solid #000",paddingBottom:"2pt",margin:"8pt 0 6pt"}}>Skills & Certifications</div>
                            <div style={{fontSize:"9.5pt",lineHeight:1.8,columns:2,columnGap:"2rem"}}>
                              {(resumeData.skills||[]).concat(resumeData.certifications||[]).map((s,i)=>(<div key={i}>• {s}</div>))}
                            </div>
                          </div>
                        )}
                        {resumeTemplate==="wharton"&&(
                          <div style={{fontFamily:"Calibri,Arial,sans-serif",fontSize:"10pt",color:"#000",padding:"1.5rem 2rem",lineHeight:1.35}}>
                            <div style={{borderBottom:"3px solid #000",paddingBottom:"4pt",marginBottom:"6pt"}}>
                              <div style={{fontSize:"17pt",fontWeight:700,letterSpacing:".02em"}}>{resumeData.name||personal.name}</div>
                              <div style={{fontSize:"9pt",color:"#444",marginTop:"2pt"}}>{resumeData.contact||personal.email}</div>
                              {(includeClearance&&resumeData.clearance)&&<div style={{fontSize:"9pt",fontWeight:700,color:"#1a3a6b",marginTop:"1pt"}}>Active {resumeData.clearance} Clearance</div>}
                            </div>
                            <div style={{fontWeight:700,fontSize:"8.5pt",textTransform:"uppercase",letterSpacing:".1em",marginBottom:"4pt"}}>Education</div>
                            {(resumeData.education||[]).map((e,i)=>(
                              <div key={i} style={{display:"flex",justifyContent:"space-between",marginBottom:"3pt"}}>
                                <div><strong style={{fontSize:"10pt"}}>{e.school}</strong> <span style={{fontSize:"9.5pt"}}>— {e.degree}</span></div>
                                <div style={{fontSize:"9pt",color:"#555",whiteSpace:"nowrap"}}>{e.year}</div>
                              </div>
                            ))}
                            <div style={{borderBottom:"1.5px solid #000",margin:"6pt 0"}}/>
                            <div style={{fontWeight:700,fontSize:"8.5pt",textTransform:"uppercase",letterSpacing:".1em",marginBottom:"4pt"}}>Experience</div>
                            {(resumeData.experience||[]).map((job,i)=>(
                              <div key={i} style={{marginBottom:"8pt"}}>
                                <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:"2pt"}}>
                                  <div><strong style={{fontSize:"10pt"}}>{job.employer}</strong><span style={{fontSize:"9.5pt",color:"#444"}}>, {job.title}</span></div>
                                  <div style={{fontSize:"9pt",color:"#555",whiteSpace:"nowrap"}}>{job.dates}</div>
                                </div>
                                {(job.bullets||[]).map((b,j)=>(<div key={j} style={{fontSize:"9.5pt",paddingLeft:"10pt",marginBottom:"2pt",lineHeight:1.5}}>• {b}</div>))}
                              </div>
                            ))}
                            <div style={{borderBottom:"1.5px solid #000",margin:"6pt 0"}}/>
                            <div style={{fontWeight:700,fontSize:"8.5pt",textTransform:"uppercase",letterSpacing:".1em",marginBottom:"4pt"}}>Additional Information</div>
                            <div style={{fontSize:"9.5pt",lineHeight:1.7}}>
                              {(resumeData.skills||[]).length>0&&<div><strong>Skills: </strong>{(resumeData.skills||[]).join(" · ")}</div>}
                              {(resumeData.certifications||[]).length>0&&<div style={{marginTop:"2pt"}}><strong>Certifications: </strong>{(resumeData.certifications||[]).join(" · ")}</div>}
                              {(resumeData.awards||[]).length>0&&<div style={{marginTop:"2pt"}}><strong>Awards: </strong>{(resumeData.awards||[]).join(" · ")}</div>}
                            </div>
                          </div>
                        )}
                        {resumeTemplate==="traditional"&&(
                          <div style={{fontFamily:"Times New Roman,serif",fontSize:"11pt",color:"#000",padding:"1.5rem 2.2rem",lineHeight:1.45}}>
                            <div style={{textAlign:"center",marginBottom:"10pt"}}>
                              <div style={{fontSize:"15pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".08em"}}>{resumeData.name||personal.name}</div>
                              <div style={{fontSize:"9.5pt",marginTop:"3pt"}}>{resumeData.contact||personal.email}</div>
                              {(includeClearance&&resumeData.clearance)&&<div style={{fontSize:"9.5pt",fontWeight:700,marginTop:"2pt"}}>Security Clearance: {resumeData.clearance}</div>}
                            </div>
                            {resumeData.summary&&(
                              <div style={{marginBottom:"10pt"}}>
                                <div style={{fontWeight:700,fontSize:"10pt",textTransform:"uppercase",letterSpacing:".08em",textAlign:"center",borderTop:"1.5px solid #000",borderBottom:"1.5px solid #000",padding:"2pt 0",marginBottom:"5pt"}}>Objective / Summary</div>
                                <div style={{fontSize:"10.5pt",lineHeight:1.7,textAlign:"justify"}}>{resumeData.summary}</div>
                              </div>
                            )}
                            <div style={{fontWeight:700,fontSize:"10pt",textTransform:"uppercase",letterSpacing:".08em",textAlign:"center",borderTop:"1.5px solid #000",borderBottom:"1.5px solid #000",padding:"2pt 0",marginBottom:"6pt"}}>Professional Experience</div>
                            {(resumeData.experience||[]).map((job,i)=>(
                              <div key={i} style={{marginBottom:"9pt"}}>
                                <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline"}}>
                                  <span style={{fontWeight:700,fontSize:"11pt"}}>{job.title}</span>
                                  <span style={{fontSize:"9.5pt"}}>{job.dates}</span>
                                </div>
                                <div style={{fontStyle:"italic",fontSize:"10pt",marginBottom:"3pt"}}>{job.employer}</div>
                                {(job.bullets||[]).map((b,j)=>(<div key={j} style={{fontSize:"10.5pt",paddingLeft:"14pt",marginBottom:"2pt",lineHeight:1.55}}>• {b}</div>))}
                              </div>
                            ))}
                            <div style={{fontWeight:700,fontSize:"10pt",textTransform:"uppercase",letterSpacing:".08em",textAlign:"center",borderTop:"1.5px solid #000",borderBottom:"1.5px solid #000",padding:"2pt 0",margin:"8pt 0 6pt"}}>Education</div>
                            {(resumeData.education||[]).map((e,i)=>(
                              <div key={i} style={{display:"flex",justifyContent:"space-between",marginBottom:"5pt",fontSize:"10.5pt"}}>
                                <div><strong>{e.degree}</strong> — {e.school}</div>
                                <div>{e.year}</div>
                              </div>
                            ))}
                            <div style={{fontWeight:700,fontSize:"10pt",textTransform:"uppercase",letterSpacing:".08em",textAlign:"center",borderTop:"1.5px solid #000",borderBottom:"1.5px solid #000",padding:"2pt 0",margin:"8pt 0 6pt"}}>Skills & Qualifications</div>
                            <div style={{columns:2,columnGap:"2rem",fontSize:"10.5pt",lineHeight:1.7}}>
                              {(resumeData.skills||[]).concat(resumeData.certifications||[]).map((s,i)=>(<div key={i}>• {s}</div>))}
                            </div>
                            {(resumeData.awards||[]).length>0&&<>
                              <div style={{fontWeight:700,fontSize:"10pt",textTransform:"uppercase",letterSpacing:".08em",textAlign:"center",borderTop:"1.5px solid #000",borderBottom:"1.5px solid #000",padding:"2pt 0",margin:"8pt 0 6pt"}}>Awards & Honors</div>
                              {(resumeData.awards||[]).map((a,i)=>(<div key={i} style={{fontSize:"10.5pt"}}>• {a}</div>))}
                            </>}
                          </div>
                        )}
                        {resumeTemplate==="minimalist"&&(
                          <div style={{fontFamily:"Helvetica Neue,Arial,sans-serif",fontSize:"10pt",color:"#1a1a1a",padding:"2.5rem 3rem",lineHeight:1.6}}>
                            <div style={{marginBottom:"2rem"}}>
                              <div style={{fontSize:"22pt",fontWeight:300,letterSpacing:"-.01em",marginBottom:"3pt"}}>{resumeData.name||personal.name}</div>
                              <div style={{fontSize:"9pt",color:"#888",letterSpacing:".03em"}}>{resumeData.contact||personal.email}</div>
                              {(includeClearance&&resumeData.clearance)&&<div style={{fontSize:"9pt",color:"#888",marginTop:"1pt"}}>{resumeData.clearance}</div>}
                            </div>
                            {resumeData.summary&&(
                              <div style={{marginBottom:"2rem",paddingBottom:"1.5rem",borderBottom:"1px solid #e8e8e8"}}>
                                <div style={{fontSize:"10pt",lineHeight:1.8,color:"#555",maxWidth:"540px"}}>{resumeData.summary}</div>
                              </div>
                            )}
                            <div style={{marginBottom:"2rem"}}>
                              <div style={{fontSize:"7.5pt",fontWeight:600,letterSpacing:".2em",textTransform:"uppercase",color:"#aaa",marginBottom:"12pt"}}>Experience</div>
                              {(resumeData.experience||[]).map((job,i)=>(
                                <div key={i} style={{marginBottom:"1.4rem",display:"grid",gridTemplateColumns:"120px 1fr",gap:"0 1.5rem"}}>
                                  <div style={{fontSize:"8.5pt",color:"#999",paddingTop:"2pt",lineHeight:1.4}}>{job.dates}<br/><span style={{color:"#666",fontStyle:"italic"}}>{job.employer}</span></div>
                                  <div>
                                    <div style={{fontWeight:600,fontSize:"10pt",marginBottom:"5pt"}}>{job.title}</div>
                                    {(job.bullets||[]).map((b,j)=>(<div key={j} style={{fontSize:"9.5pt",color:"#444",marginBottom:"3pt",paddingLeft:"8pt",borderLeft:"1.5px solid #e0e0e0"}}>  {b}</div>))}
                                  </div>
                                </div>
                              ))}
                            </div>
                            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"2rem",paddingTop:"1.5rem",borderTop:"1px solid #e8e8e8"}}>
                              <div>
                                <div style={{fontSize:"7.5pt",fontWeight:600,letterSpacing:".2em",textTransform:"uppercase",color:"#aaa",marginBottom:"8pt"}}>Education</div>
                                {(resumeData.education||[]).map((e,i)=>(<div key={i} style={{marginBottom:"6pt",fontSize:"9.5pt"}}><div style={{fontWeight:600}}>{e.degree}</div><div style={{color:"#777",fontSize:"9pt"}}>{e.school} · {e.year}</div></div>))}
                              </div>
                              <div>
                                <div style={{fontSize:"7.5pt",fontWeight:600,letterSpacing:".2em",textTransform:"uppercase",color:"#aaa",marginBottom:"8pt"}}>Skills</div>
                                {(resumeData.skills||[]).map((s,i)=>(<div key={i} style={{fontSize:"9.5pt",color:"#555",marginBottom:"3pt"}}>— {s}</div>))}
                              </div>
                            </div>
                          </div>
                        )}
                        {resumeTemplate==="functional"&&(
                          <div style={{fontFamily:"Arial,sans-serif",fontSize:"10pt",color:"#1a1a1a",padding:"1.5rem 2rem",lineHeight:1.45}}>
                            <div style={{textAlign:"center",marginBottom:"10pt",paddingBottom:"8pt",borderBottom:"2px solid #1a3a6b"}}>
                              <div style={{fontSize:"15pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".04em"}}>{resumeData.name||personal.name}</div>
                              <div style={{fontSize:"9pt",color:"#555",marginTop:"3pt"}}>{resumeData.contact||personal.email}</div>
                              {(includeClearance&&resumeData.clearance)&&(
                                <div style={{fontSize:"9pt",fontWeight:700,color:"#1a3a6b",marginTop:"2pt"}}>{resumeData.clearance}</div>
                              )}
                            </div>
                            {resumeData.summary&&(
                              <div style={{marginBottom:"8pt",paddingBottom:"6pt",borderBottom:"1px solid #ddd"}}>
                                <div style={{fontSize:"8.5pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".12em",color:"#1a3a6b",marginBottom:"4pt"}}>Professional Profile</div>
                                <div style={{fontSize:"9.5pt",lineHeight:1.65,color:"#333"}}>{resumeData.summary}</div>
                              </div>
                            )}
                            <div style={{marginBottom:"8pt",paddingBottom:"6pt",borderBottom:"1px solid #ddd"}}>
                              <div style={{fontSize:"8.5pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".12em",color:"#1a3a6b",marginBottom:"6pt"}}>Core Competencies</div>
                              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:"3pt"}}>
                                {(resumeData.skills||[]).map((s,i)=>(
                                  <div key={i} style={{fontSize:"9pt",padding:"2pt 5pt",background:"#f0f4fa",border:"1px solid #d0dcea"}}>■ {s}</div>
                                ))}
                              </div>
                            </div>
                            <div style={{marginBottom:"8pt",paddingBottom:"6pt",borderBottom:"1px solid #ddd"}}>
                              <div style={{fontSize:"8.5pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".12em",color:"#1a3a6b",marginBottom:"6pt"}}>Relevant Experience</div>
                              {(resumeData.experience||[]).map((job,i)=>(
                                <div key={i} style={{marginBottom:"7pt"}}>
                                  <div style={{fontWeight:700,fontSize:"10pt"}}>{job.title}</div>
                                  <div style={{display:"flex",justifyContent:"space-between"}}>
                                    <span style={{fontStyle:"italic",fontSize:"9pt",color:"#555"}}>{job.employer}</span>
                                    <span style={{fontSize:"8.5pt",color:"#888"}}>{job.dates}</span>
                                  </div>
                                  {(job.bullets||[]).map((b,j)=>(
                                    <div key={j} style={{fontSize:"9pt",paddingLeft:"10pt",marginTop:"2pt",lineHeight:1.55}}>• {b}</div>
                                  ))}
                                </div>
                              ))}
                            </div>
                            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"1.5rem"}}>
                              <div>
                                <div style={{fontSize:"8.5pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".12em",color:"#1a3a6b",marginBottom:"5pt",borderBottom:"1px solid #ddd",paddingBottom:"3pt"}}>Education</div>
                                {(resumeData.education||[]).map((e,i)=>(
                                  <div key={i} style={{fontSize:"9pt",marginBottom:"4pt"}}>
                                    <strong>{e.degree}</strong>
                                    <div style={{color:"#555",fontSize:"8.5pt"}}>{e.school} {e.year}</div>
                                  </div>
                                ))}
                              </div>
                              <div>
                                <div style={{fontSize:"8.5pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".12em",color:"#1a3a6b",marginBottom:"5pt",borderBottom:"1px solid #ddd",paddingBottom:"3pt"}}>Certifications</div>
                                {(resumeData.certifications||[]).map((cert,i)=>(
                                  <div key={i} style={{fontSize:"9pt",marginBottom:"3pt"}}>■ {cert}</div>
                                ))}
                              </div>
                            </div>
                          </div>
                        )}
                      </div>
                    
) : (
                      <div style={{width:"100%",maxWidth:"760px",background:"#fff",boxShadow:"0 4px 20px rgba(0,0,0,.15)",padding:"2rem 2.4rem",fontFamily:"Arial,sans-serif",fontSize:"10pt",color:"#1a1a1a"}}>
                        {resume.split("\\n").map((line,i)=>{
                          const t=line.trim();
                          if(!t) return <div key={i} style={{height:"6pt"}}/>;
                          const isH=t===t.toUpperCase()&&t.length>3&&t.length<60&&!/[0-9@|]/.test(t);
                          const isB=t.startsWith("\u2022")||t.startsWith("-");
                          const clean=t.replace(/^#+\s*/,"").replace(/\*\*/g,"");
                          if(i===0) return <div key={i} style={{fontSize:"18pt",fontWeight:700,marginBottom:"4pt"}}>{clean}</div>;
                          if(isH) return <div key={i} style={{fontSize:"9.5pt",fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",borderBottom:"1.5px solid #333",paddingBottom:"2pt",margin:"12pt 0 4pt"}}>{clean}</div>;
                          if(isB) return <div key={i} style={{paddingLeft:".9rem",marginBottom:"2pt",lineHeight:1.55}}>{clean}</div>;
                          return <div key={i} style={{lineHeight:1.55,marginBottom:"1pt"}}>{clean}</div>;
                        })}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}
            {(resume||resumeData)&&!loading.resume&&(atsLoading||atsAnalysis)&&(
              <div style={{marginTop:"1.5rem"}}>
                {atsLoading&&(
                  <div className="card">
                    <div className="ch"><h3>Analyzing ATS Compatibility...</h3></div>
                    <div className="cb" style={{textAlign:"center",padding:"1.5rem"}}><div className="spin"/><span style={{fontSize:".85rem",color:"var(--slate)"}}>Checking keyword match, formatting, and optimization...</span></div>
                  </div>
                )}
                {atsAnalysis&&!atsAnalysis.error&&(
                  <>
                    <div className="card">
                      <div className="ch"><h3>ATS Compatibility Score</h3></div>
                      <div className="cb">
                        <div style={{display:"flex",alignItems:"center",gap:"1.5rem",flexWrap:"wrap"}}>
                          <div className="ats-score-ring" style={{border:"5px solid",borderColor:atsAnalysis.atsScore>=80?"var(--green)":atsAnalysis.atsScore>=60?"#e67e22":"var(--red)",color:atsAnalysis.atsScore>=80?"var(--green)":atsAnalysis.atsScore>=60?"#e67e22":"var(--red)"}}>
                            {atsAnalysis.atsScore}
                          </div>
                          <div style={{flex:1}}>
                            <div style={{fontWeight:700,fontSize:"1rem",color:"var(--navy)",marginBottom:".3rem"}}>
                              {atsAnalysis.atsScore>=85?"Excellent — High Pass Rate":atsAnalysis.atsScore>=70?"Good — Should Pass Most ATS":atsAnalysis.atsScore>=55?"Fair — May Get Filtered":"Needs Work — High Filter Risk"}
                            </div>
                            <div style={{fontSize:".84rem",color:"var(--slate)",lineHeight:1.6}}>{atsAnalysis.verdict}</div>
                          </div>
                        </div>
                        {atsAnalysis.scoreBreakdown&&(
                          <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(150px,1fr))",gap:".6rem",marginTop:"1rem"}}>
                            {Object.entries(atsAnalysis.scoreBreakdown).map(([k,v])=>(
                              <div key={k} style={{textAlign:"center"}}>
                                <div style={{fontSize:".68rem",textTransform:"uppercase",letterSpacing:".08em",color:"var(--dim)",marginBottom:".2rem"}}>{k.replace(/([A-Z])/g," $1").trim()}</div>
                                <div className="grade-bar"><div className="grade-fill" style={{width:v+"%",background:v>=80?"var(--green)":v>=60?"#e67e22":"var(--red)"}}/></div>
                                <div style={{fontSize:".75rem",fontWeight:700,color:v>=80?"var(--green)":v>=60?"#e67e22":"var(--red)",marginTop:".15rem"}}>{v}/100</div>
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                    </div>
                    <div className="card">
                      <div className="ch"><h3>Keywords Analysis</h3></div>
                      <div className="cb">
                        {(atsAnalysis.keywordsFound||[]).length>0&&(
                          <div style={{marginBottom:".75rem"}}>
                            <div style={{fontSize:".75rem",fontWeight:700,color:"var(--green)",marginBottom:".4rem",letterSpacing:".06em",textTransform:"uppercase"}}>Keywords Found ({(atsAnalysis.keywordsFound||[]).length})</div>
                            <div className="keywords-grid">
                              {(atsAnalysis.keywordsFound||[]).map((kw,i)=>(<span key={i} className="keyword-chip keyword-found">{kw}</span>))}
                            </div>
                          </div>
                        )}
                        {(atsAnalysis.keywordsMissing||[]).length>0&&(
                          <div>
                            <div style={{fontSize:".75rem",fontWeight:700,color:"var(--red)",marginBottom:".4rem",letterSpacing:".06em",textTransform:"uppercase"}}>Missing Keywords ({(atsAnalysis.keywordsMissing||[]).length})</div>
                            <div className="keywords-grid">
                              {(atsAnalysis.keywordsMissing||[]).map((kw,i)=>(<span key={i} className="keyword-chip keyword-missing">{kw}</span>))}
                            </div>
                            <div className="hint" style={{marginTop:".5rem"}}>Consider adding these keywords to your resume or re-generating with the job description pasted above.</div>
                          </div>
                        )}
                      </div>
                    </div>
                    {(atsAnalysis.improvements||[]).length>0&&(
                      <div className="card">
                        <div className="ch"><h3>Suggested Improvements</h3></div>
                        <div className="cb">
                          {(atsAnalysis.improvements||[]).map((imp,i)=>(
                            <div key={i} className={"review-item "+(imp.priority==="high"?"review-high":imp.priority==="medium"?"review-med":"review-low")}>
                              <div style={{display:"flex",alignItems:"center",gap:".4rem",marginBottom:".2rem"}}>
                                <span style={{fontSize:".68rem",fontWeight:700,textTransform:"uppercase",letterSpacing:".06em",
                                  color:imp.priority==="high"?"var(--red)":imp.priority==="medium"?"#e67e22":"var(--green)"}}>
                                  {imp.priority} priority
                                </span>
                              </div>
                              <div style={{fontSize:".84rem",color:"var(--text)",lineHeight:1.55}}>{imp.suggestion}</div>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </>
                )}
              </div>
            )}
            {(resume||resumeData)&&(
              <div style={{display:"flex",justifyContent:"center",margin:".5rem 0 1rem",gap:".75rem",flexWrap:"wrap"}}>
                <button className="btn-primary" style={{width:"auto",padding:".6rem 1.6rem",fontSize:".9rem"}}
                  onClick={()=>{
                    if(!currentUser){setShowAuth(true);return;}
                    handleSaveResume();
                  }}>
                  💾 Save Resume to Profile
                </button>
                {resume&&!atsLoading&&(
                  <button className="btn-sec" style={{fontSize:".82rem"}} onClick={()=>runAtsAnalysis(resume)}>
                    📊 Re-Analyze ATS Score
                  </button>
                )}
              </div>
            )}
            <div className="nav-row"><button className="btn-sec" onClick={()=>setTab(1)}>← Career Pathways</button><div/></div>
          </div>}
          {tab===3 && <div className="panel on">
            <div className="intro"><strong>Cover Letter Builder & Resume Review.</strong> Generate a tailored cover letter and get AI-powered feedback on your resume.</div>
            {(!resume&&!resumeData)&&(
              <div style={{background:"#fff8e0",border:"1px solid #f0c040",borderRadius:"6px",padding:".85rem 1rem",marginBottom:"1rem",fontSize:".88rem",color:"#5a3a00",display:"flex",alignItems:"center",gap:".6rem"}}>
                <span style={{fontSize:"1.2rem"}}>💡</span>
                <span>Generate your resume on the <button style={{background:"none",border:"none",color:"#1a3a6b",fontWeight:700,cursor:"pointer",padding:0,textDecoration:"underline"}} onClick={()=>setTab(2)}>Build Resume tab</button> first to unlock the best results.</span>
              </div>
            )}
            <div className="card" style={{marginBottom:"1.2rem"}}>
              <div className="ch"><h3>✉ Cover Letter Builder</h3></div>
              <div className="cb">
                <div className="g3" style={{marginBottom:"1rem"}}>
                  <div className="field">
                    <label>Job Title Applying For</label>
                    <input placeholder="e.g. Operations Manager" value={coverLetterJob.title}
                      onChange={e=>setCoverLetterJob(j=>({...j,title:e.target.value}))}/>
                  </div>
                  <div className="field">
                    <label>Company Name</label>
                    <input placeholder="e.g. Amazon, Booz Allen, VA" value={coverLetterJob.company}
                      onChange={e=>setCoverLetterJob(j=>({...j,company:e.target.value}))}/>
                  </div>
                </div>
                <div className="field" style={{marginBottom:"1rem"}}>
                  <label>Job Description <span style={{fontWeight:400,color:"var(--dim)"}}>(paste key requirements for best results)</span></label>
                  <textarea rows={4} placeholder="Paste the job description or key requirements here..." value={coverLetterJob.description}
                    onChange={e=>setCoverLetterJob(j=>({...j,description:e.target.value}))}
                    style={{width:"100%",resize:"vertical",padding:".55rem .75rem",border:"1.5px solid #c0d0e4",borderRadius:"4px",fontFamily:"inherit",fontSize:".88rem",boxSizing:"border-box"}}/>
                </div>
                {hasAccess?(
                  <button className="btn-primary" onClick={genCoverLetter} disabled={coverLetterLoading}
                    style={{marginBottom:"1rem"}}>
                    {coverLetterLoading?"✍ Writing your cover letter...":"✉ Generate Cover Letter"}
                  </button>
                ):(
                <button onClick={()=>setShowPaywall(true)} style={{width:"100%",padding:".75rem",background:"linear-gradient(135deg,#f0c040,#e0a820)",border:"none",borderRadius:"6px",color:"#0d1f3c",fontWeight:700,fontSize:".95rem",cursor:"pointer",letterSpacing:".03em"}}>🔒 Unlock AI Tools — $15/mo</button>
                )}
                {coverLetter&&(
                  <>
                    <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:".5rem"}}>
                      <div style={{fontWeight:700,fontSize:".85rem",color:"#1a3a6b"}}>Your Cover Letter</div>
                      <div style={{display:"flex",gap:".4rem"}}>
                        <button className="btn-sec" style={{fontSize:".75rem"}} onClick={()=>{
                          navigator.clipboard.writeText(coverLetter);
                          setCopiedCL(true); setTimeout(()=>setCopiedCL(false),2000);
                        }}>{copiedCL?"✓ Copied!":"Copy"}</button>
                        <button className="btn-sec" style={{fontSize:".75rem"}} onClick={()=>{
                          const blob=new Blob([coverLetter],{type:"text/plain"});
                          const a=document.createElement("a"); a.href=URL.createObjectURL(blob);
                          a.download=(personal.name||"veteran")+"-cover-letter.txt"; a.click();
                        }}>Download</button>
                      </div>
                    </div>
                    <div className="cl-output">{coverLetter}</div>
                    <div style={{display:"flex",gap:".5rem",marginTop:".6rem"}}>
                      <button className="btn-sec" style={{fontSize:".8rem"}} onClick={genCoverLetter}>↺ Regenerate</button>
                      <button className="btn-primary" style={{fontSize:".8rem"}} onClick={saveCoverLetter}>💾 Save Cover Letter</button>
                    </div>
                  </>
                )}
              </div>
            </div>
            <div className="card">
              <div className="ch"><h3>📊 Resume Score & Review</h3></div>
              <div className="cb">
                <p style={{fontSize:".88rem",color:"var(--dim)",margin:"0 0 1rem"}}>
                  Get an AI-powered score and actionable feedback on your resume — just like a recruiter would see it. Use your generated resume below, or upload an existing one.
                </p>
                <div style={{background:"#f8fafc",border:"1.5px dashed #b0c4d8",borderRadius:"8px",padding:"1rem",marginBottom:"1rem"}}>
                  <div style={{fontWeight:700,fontSize:".85rem",color:"#1a3a6b",marginBottom:".4rem"}}>📎 Upload Your Resume (optional)</div>
                  <div style={{fontSize:".78rem",color:"var(--dim)",marginBottom:".6rem"}}>Accepts PDF, Word (.docx), or plain text (.txt)</div>
                  <input type="file" accept=".pdf,.doc,.docx,.txt"
                    style={{display:"none"}} id="resume-upload-input"
                    onChange={async(e)=>{
                      const file = e.target.files[0];
                      if(!file) return;
                      setUploadProcessing(true);
                      setUploadedFileName(file.name);
                      const finalize = (txt) => { setUploadedResumeText(txt); setUploadProcessing(false); };
                      try {
                        if(file.type==="text/plain"||file.name.endsWith(".txt")) {
                          finalize(await file.text());
                        } else if(file.name.endsWith(".pdf")) {
                          const reader = new FileReader();
                          reader.onload = (ev)=>{
                            try {
                              const arr = new Uint8Array(ev.target.result);
                              const raw = new TextDecoder("utf-8","ignore").decode(arr);
                              // Extract readable text runs from PDF binary stream
                              const runs = (raw.match(/[\x20-\x7E\n\r\t]{6,}/g)||[])
                                .filter(s=>{ const t=s.trim(); return t.length>5 && t.split(" ").length>1 && !/^[\d\.\s\-\/]+$/.test(t) && !/^[A-Z0-9]{15,}/.test(t); })
                                .join(" ").replace(/\s+/g," ").trim().slice(0,6000);
                              finalize(runs.length>120 ? runs : "[PDF text could not be auto-extracted. Please COPY all text from your PDF (Ctrl+A, Ctrl+C) and paste it into the text box below for scoring.]");
                            } catch(e) { finalize("[Could not read PDF — please paste your resume text in the box below.]"); }
                          };
                          reader.readAsArrayBuffer(file);
                        } else if(file.name.endsWith(".docx")||file.name.endsWith(".doc")) {
                          const reader = new FileReader();
                          reader.onload = async(ev)=>{
                            try {
                              if(typeof mammoth!=="undefined") {
                                const result = await mammoth.extractRawText({arrayBuffer:ev.target.result});
                                const txt = (result.value||"").replace(/\s+/g," ").trim();
                                finalize(txt.length>80 ? txt.slice(0,6000) : "[Word doc appears empty or is heavily formatted. Try File > Save As > Plain Text (.txt) in Word, then upload that.]");
                              } else {
                                // Fallback without mammoth
                                const arr = new Uint8Array(ev.target.result);
                                const raw = new TextDecoder("utf-8","ignore").decode(arr);
                                const runs = (raw.match(/[a-zA-Z][a-zA-Z ,\.]{8,}/g)||[]).filter(t=>t.split(" ").length>2).join(" ").slice(0,4000);
                                finalize(runs.length>80 ? runs : "[Could not extract Word doc text. Please paste your resume in the text box below.]");
                              }
                            } catch(e) { finalize("[Could not read Word doc — paste your resume text below.]"); }
                          };
                          reader.readAsArrayBuffer(file);
                        } else {
                          finalize(await file.text());
                        }
                      } catch(err) { finalize("[Could not read file — paste your resume text below.]"); }
                    }}
                  />
                  <div style={{display:"flex",gap:".5rem",alignItems:"center",flexWrap:"wrap"}}>
                    <button className="btn-sec" style={{fontSize:".82rem"}}
                      onClick={()=>document.getElementById("resume-upload-input").click()}>
                      {uploadProcessing?"Processing...":"📎 Choose File"}
                    </button>
                    {uploadedFileName&&(
                      <div style={{display:"flex",alignItems:"center",gap:".4rem"}}>
                        <span style={{fontSize:".8rem",color:"#1a7a40",fontWeight:600}}>✓ {uploadedFileName}</span>
                        <button onClick={()=>{setUploadedFileName("");setUploadedResumeText("");document.getElementById("resume-upload-input").value="";}}
                          style={{background:"none",border:"none",color:"#c0392b",cursor:"pointer",fontSize:".85rem"}}>✕</button>
                      </div>
                    )}
                  </div>
                  {uploadedResumeText&&(
                    <div style={{marginTop:".6rem",background:"#fff",border:"1px solid #d0daea",borderRadius:"4px",padding:".5rem .7rem",fontSize:".75rem",color:"#3a5070",maxHeight:"80px",overflowY:"auto",lineHeight:1.5}}>
                      <strong style={{color:"#1a3a6b"}}>Preview</strong> <span style={{color:"var(--dim)",fontSize:".7rem"}}>({uploadedResumeText.length} chars extracted)</span><br/>{uploadedResumeText.slice(0,300)}...
                    </div>
                  )}
                  {!uploadedResumeText&&(
                    <div style={{marginTop:".6rem"}}>
                      <div style={{fontSize:".75rem",color:"var(--dim)",marginBottom:".3rem"}}>Or paste your resume text directly:</div>
                      <textarea rows={4} placeholder="Paste your resume here..."
                        style={{width:"100%",resize:"vertical",padding:".5rem .7rem",border:"1px solid #c0d0e4",borderRadius:"4px",fontFamily:"inherit",fontSize:".8rem",boxSizing:"border-box"}}
                        onChange={e=>setUploadedResumeText(e.target.value)}/>
                    </div>
                  )}
                </div>
                {(!resume&&!resumeData&&!uploadedResumeText)&&(
                  <div style={{background:"#fff8e0",border:"1px solid #f0c040",borderRadius:"6px",padding:".75rem",marginBottom:"1rem",fontSize:".82rem",color:"#5a3a00"}}>
                    💡 Generate your resume on the <button style={{background:"none",border:"none",color:"#1a3a6b",fontWeight:700,cursor:"pointer",padding:0,textDecoration:"underline"}} onClick={()=>setTab(2)}>Build Resume tab</button> first, or upload/paste your existing resume above.
                  </div>
                )}
                {hasAccess?(
                  <button className="btn-primary" onClick={runResumeReview} disabled={reviewLoading||(!resume&&!resumeData&&!uploadedResumeText)} style={{marginBottom:"1rem"}}>
                    {reviewLoading?"🔍 Analyzing your resume...":"📊 Score My Resume"}
                  </button>
                ):(
                <button onClick={()=>setShowPaywall(true)} style={{width:"100%",padding:".75rem",background:"linear-gradient(135deg,#f0c040,#e0a820)",border:"none",borderRadius:"6px",color:"#0d1f3c",fontWeight:700,fontSize:".95rem",cursor:"pointer",letterSpacing:".03em"}}>🔒 Unlock AI Tools — $15/mo</button>
                )}
                {resumeReview&&resumeReview.error&&(
                  <div style={{background:"#fff5f5",border:"1px solid #f0c0c0",borderRadius:"4px",padding:".75rem",color:"#a00",fontSize:".85rem"}}>{resumeReview.error}</div>
                )}
                {resumeReview&&!resumeReview.error&&(
                  <>
                    <div style={{textAlign:"center",padding:"1rem 0 .5rem"}}>
                      <div className="score-ring" style={{borderColor:resumeScore>=80?"#1a7a40":resumeScore>=65?"#e67e22":"#c0392b"}}>
                        <div className="score-num" style={{color:resumeScore>=80?"#1a7a40":resumeScore>=65?"#e67e22":"#c0392b"}}>{resumeScore}</div>
                        <div className="score-lbl">out of 100</div>
                      </div>
                      <div style={{fontWeight:700,fontSize:"1rem",color:"#1a3a6b",marginBottom:".2rem"}}>
                        {resumeScore>=85?"Excellent Resume 🏆":resumeScore>=75?"Strong Resume ✅":resumeScore>=65?"Good — Needs Polish ⚡":"Needs Work 🔧"}
                      </div>
                      <div style={{fontSize:".82rem",color:"var(--dim)",maxWidth:"400px",margin:"0 auto"}}>{resumeReview.verdict}</div>
                    </div>
                    <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:".75rem",margin:"1rem 0"}}>
                      {Object.values(resumeReview.grades||{}).map((g,i)=>(
                        <div key={i} style={{background:"#f8fafc",border:"1px solid #e0e8f0",borderRadius:"6px",padding:".7rem .9rem"}}>
                          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:".3rem"}}>
                            <div style={{fontSize:".78rem",fontWeight:600,color:"#1a3a6b"}}>{g.label}</div>
                            <div style={{fontSize:".85rem",fontWeight:800,color:g.score>=80?"#1a7a40":g.score>=65?"#e67e22":"#c0392b"}}>{g.score}</div>
                          </div>
                          <div className="grade-bar">
                            <div className="grade-fill" style={{width:g.score+"%",background:g.score>=80?"#1a7a40":g.score>=65?"#e67e22":"#c0392b"}}/>
                          </div>
                        </div>
                      ))}
                    </div>
                    {(resumeReview.strengths||[]).length>0&&(
                      <div style={{marginBottom:"1rem"}}>
                        <div style={{fontWeight:700,fontSize:".85rem",color:"#1a7a40",marginBottom:".4rem"}}>✅ What's Working</div>
                        {(resumeReview.strengths||[]).map((s,i)=>(
                          <div key={i} style={{fontSize:".83rem",color:"#2a5a3a",padding:".3rem 0 .3rem .8rem",borderLeft:"2px solid #1a7a40",marginBottom:".3rem"}}>{s}</div>
                        ))}
                      </div>
                    )}
                    {(resumeReview.improvements||[]).length>0&&(
                      <div style={{marginBottom:"1rem"}}>
                        <div style={{fontWeight:700,fontSize:".85rem",color:"#1a3a6b",marginBottom:".5rem"}}>🔧 Improvements</div>
                        {(resumeReview.improvements||[]).map((item,i)=>(
                          <div key={i} className={"review-item "+(item.priority==="HIGH"?"review-high":item.priority==="MEDIUM"?"review-med":"review-low")}>
                            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:".2rem"}}>
                              <div style={{fontWeight:700,fontSize:".82rem"}}>{item.issue}</div>
                              <span style={{fontSize:".65rem",fontWeight:700,padding:".1rem .4rem",borderRadius:"3px",background:item.priority==="HIGH"?"#c0392b":item.priority==="MEDIUM"?"#e67e22":"#1a7a40",color:"#fff"}}>{item.priority}</span>
                            </div>
                            <div style={{fontSize:".8rem",color:"#3a5070",lineHeight:1.5}}>{item.fix}</div>
                          </div>
                        ))}
                      </div>
                    )}
                    {(resumeReview.missingKeywords||[]).length>0&&(
                      <div>
                        <div style={{fontWeight:700,fontSize:".85rem",color:"#1a3a6b",marginBottom:".4rem"}}>🔑 Add These Keywords</div>
                        <div style={{display:"flex",flexWrap:"wrap",gap:".35rem"}}>
                          {(resumeReview.missingKeywords||[]).map((kw,i)=>(
                            <span key={i} style={{background:"#e8edf5",border:"1px solid #1a3a6b",borderRadius:"3px",padding:".2rem .55rem",fontSize:".78rem",color:"#1a3a6b",fontWeight:600}}>{kw}</span>
                          ))}
                        </div>
                      </div>
                    )}
                    <button className="btn-sec" style={{marginTop:"1rem",fontSize:".8rem"}} onClick={runResumeReview}>
                      ↺ Re-analyze
                    </button>
                    <button className="btn-primary" style={{marginLeft:".5rem",fontSize:".8rem"}} onClick={saveScore}>💾 Save Score Report</button>
                  </>
                )}
              </div>
            </div>
            <div className="nav-row">
              <button className="btn-sec" onClick={()=>setTab(2)}>← Build Resume</button>
              <button className="btn-sec" onClick={()=>setTab(5)}>My Profile →</button>
            </div>
          </div>}
          {tab===4 && <div className="panel on">
            <div className="job-analyzer-card">
              <div style={{display:"flex",alignItems:"center",gap:".5rem",marginBottom:".6rem"}}>
                <span style={{fontSize:"1.2rem"}}>🎯</span>
                <div>
                  <div style={{fontWeight:700,fontSize:".95rem",color:"var(--navy)"}}>Quick Job Match Analyzer</div>
                  <div style={{fontSize:".78rem",color:"var(--slate)"}}>Paste a job posting URL to see how well you match</div>
                </div>
              </div>
              <div style={{display:"flex",gap:".5rem",alignItems:"flex-start"}}>
                <div style={{flex:1}}>
                  <input placeholder="Paste a job posting URL (Indeed, LinkedIn, USAJobs, etc.)" value={jobAnalyzerUrl} onChange={e=>setJobAnalyzerUrl(e.target.value)}
                    style={{width:"100%",padding:".55rem .9rem",border:"1.5px solid #b0c4e0",borderRadius:"8px",fontSize:".88rem",fontFamily:"'Inter',sans-serif",background:"#fff"}}
                    onKeyDown={e=>{if(e.key==="Enter")analyzeJobUrl();}}/>
                </div>
                <button className="btn-primary" style={{width:"auto",margin:0,padding:".55rem 1.2rem",fontSize:".85rem",whiteSpace:"nowrap"}}
                  onClick={analyzeJobUrl} disabled={jobAnalyzerLoading||!jobAnalyzerUrl.trim()}>
                  {jobAnalyzerLoading?"Analyzing...":"Analyze This Job"}
                </button>
              </div>
              {jobAnalyzerLoading&&(<div style={{textAlign:"center",padding:"1rem"}}><div className="spin"/><span style={{fontSize:".82rem",color:"var(--slate)"}}>Analyzing job posting against your profile...</span></div>)}
              {jobAnalyzerResult&&!jobAnalyzerResult.error&&(
                <div className="job-match-result">
                  <div className="job-match-header">
                    <div>
                      <div style={{fontSize:"1rem",fontWeight:700}}>{jobAnalyzerResult.jobTitle||"Job Analysis"}</div>
                      <div style={{fontSize:".78rem",opacity:.8}}>{jobAnalyzerResult.company||""}{jobAnalyzerResult.salaryEstimate&&jobAnalyzerResult.salaryEstimate!=="unknown"?" · "+jobAnalyzerResult.salaryEstimate:""}</div>
                    </div>
                    <div style={{textAlign:"center"}}>
                      <div style={{fontSize:"1.8rem",fontWeight:800,lineHeight:1,color:jobAnalyzerResult.matchScore>=75?"#4ade80":jobAnalyzerResult.matchScore>=50?"#f0c040":"#ff6b6b"}}>{jobAnalyzerResult.matchScore}</div>
                      <div style={{fontSize:".65rem",letterSpacing:".08em",textTransform:"uppercase",opacity:.7}}>Match</div>
                    </div>
                  </div>
                  <div className="job-match-body">
                    <div style={{fontSize:".85rem",color:"var(--text)",lineHeight:1.65,marginBottom:".75rem",padding:".5rem",background:"#f8fafd",borderRadius:"6px"}}>{jobAnalyzerResult.verdict}</div>
                    {(jobAnalyzerResult.strengths||[]).length>0&&(
                      <div className="job-match-section">
                        <h4>Your Strengths</h4>
                        {jobAnalyzerResult.strengths.map((s,i)=>(<div key={i} className="match-item"><span className="match-strength">✓</span><span>{s}</span></div>))}
                      </div>
                    )}
                    {(jobAnalyzerResult.gaps||[]).length>0&&(
                      <div className="job-match-section">
                        <h4>Gaps to Address</h4>
                        {jobAnalyzerResult.gaps.map((g,i)=>(<div key={i} className="match-item"><span className="match-gap">✗</span><span>{g}</span></div>))}
                      </div>
                    )}
                    {(jobAnalyzerResult.actionItems||[]).length>0&&(
                      <div className="job-match-section">
                        <h4>Action Items</h4>
                        {jobAnalyzerResult.actionItems.map((a,i)=>(<div key={i} className="match-item"><span className="match-action">▶</span><span>{a}</span></div>))}
                      </div>
                    )}
                    <div style={{display:"flex",gap:".5rem",marginTop:".75rem",flexWrap:"wrap"}}>
                      <button className="btn-sec" style={{fontSize:".78rem"}} onClick={()=>{upT("title",jobAnalyzerResult.jobTitle||"");if(jobAnalyzerResult.company)setTargetCompany(jobAnalyzerResult.company);setTab(2);}}>Build Resume for This Job</button>
                      <button className="btn-sec" style={{fontSize:".78rem"}} onClick={()=>{setPrepJob({title:jobAnalyzerResult.jobTitle||"",company:jobAnalyzerResult.company||"",type:"behavioral"});setRetentionTab("interview");}}>Prep Interview</button>
                    </div>
                  </div>
                </div>
              )}
              {jobAnalyzerResult&&jobAnalyzerResult.error&&(
                <div className="api-err" style={{marginTop:".75rem"}}>{jobAnalyzerResult.error}</div>
              )}
            </div>
            <div style={{display:"flex",gap:".4rem",flexWrap:"wrap",marginBottom:"1.2rem",borderBottom:"2px solid #e0e8f0",paddingBottom:".7rem"}}>
              {[
                {id:"tracker",label:"📋 Job Tracker"},
                {id:"interview",label:"🎤 Interview Prep"},
                {id:"followup",label:"📧 Follow-Up Emails"},
                {id:"timeline",label:"🗓 Transition Timeline"},
                {id:"checkin",label:"📊 Weekly Check-In"},
              ].map(t=>(
                <button key={t.id} onClick={()=>setRetentionTab(t.id)}
                  style={{padding:".45rem .9rem",borderRadius:"20px",border:"1.5px solid",cursor:"pointer",fontSize:".82rem",fontWeight:retentionTab===t.id?700:400,
                    background:retentionTab===t.id?"#1a3a6b":"#fff",
                    color:retentionTab===t.id?"#fff":"#3a5070",
                    borderColor:retentionTab===t.id?"#1a3a6b":"#d0daea"}}>
                  {t.label}
                </button>
              ))}
            </div>
            {retentionTab==="tracker"&&(
              <div>
                <div style={{background:"linear-gradient(135deg,#f0f4ff,#e8edf5)",border:"1.5px solid #b0c4e0",borderRadius:"8px",padding:"1rem 1.2rem",marginBottom:"1rem",display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:".75rem"}}>
                  <div>
                    <div style={{fontWeight:700,fontSize:".88rem",color:"#1a3a6b",marginBottom:".2rem"}}>🔖 Save Jobs From Any Job Board</div>
                    <div style={{fontSize:".78rem",color:"#5a7090",lineHeight:1.5}}>Drag the button to your browser bookmarks bar. Then click it on any Indeed, LinkedIn, ZipRecruiter, or USAJobs listing to instantly save it here.</div>
                  </div>
                  <a href="javascript:(function(){var t=document.title||'';var u=window.location.href;var co='';var ti='';if(t.match(/jobs[,\s]|employment\s*[\|,]/i)&&!t.match(/\bat\b/i)){alert('Please open a specific job listing first, then click the bookmarklet. You appear to be on a search results page.');return;}var m1=t.match(/^(.+?)\s*[-\u2013]\s*(.+?)\s*[-\u2013|]/);if(m1){ti=m1[1].trim();co=m1[2].trim();}var m2=t.match(/^(.+?)\s+at\s+(.+?)\s*(\||$)/i);if(m2){ti=m2[1].trim();co=m2[2].split('|')[0].trim();}var m3=t.match(/^(.+?)\s*\|\s*USAJOBS/i);if(m3){ti=m3[1].trim();co='U.S. Government';}if(!ti){var m4=t.match(/^(.+?)\s*\|/);if(m4)ti=m4[1].trim();else ti=t.slice(0,80);}co=co.replace(/\s*(indeed|linkedin|glassdoor|ziprecruiter|usajobs)\s*/ig,'').replace(/[-|].*$/,'').trim();var base='https://veterancareerpath.com';var p='?addjob=1&title='+encodeURIComponent(ti)+'&company='+encodeURIComponent(co)+'&link='+encodeURIComponent(u);window.open(base+'/app.html'+p,'_blank');})()"
                    onClick={e=>e.preventDefault()}
                    draggable="true"
                    style={{display:"inline-block",background:"linear-gradient(135deg,#1a3a6b,#1e4a8a)",color:"#f0c040",fontWeight:700,fontSize:".82rem",padding:".5rem 1rem",borderRadius:"6px",textDecoration:"none",whiteSpace:"nowrap",cursor:"grab",border:"2px dashed #f0c040",flexShrink:0}}
                    title="Drag this to your bookmarks bar">
                    🔖 Save Job to Tracker
                  </a>
                </div>
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"1rem",flexWrap:"wrap",gap:".5rem"}}>
                  <div>
                    <h3 style={{margin:0,color:"#1a3a6b",fontFamily:"'Bebas Neue',sans-serif",letterSpacing:".08em",fontSize:"1.2rem"}}>Job Application Tracker</h3>
                    <div style={{fontSize:".78rem",color:"var(--dim)"}}>{jobApps.length} applications tracked</div>
                  </div>
                  <button className="btn-primary" style={{width:"auto",padding:".45rem 1rem"}} onClick={()=>setShowAddJob(s=>!s)}>
                    {showAddJob?"✕ Cancel":"+ Add Application"}
                  </button>
                </div>
                {showAddJob&&(
                  <div style={{background:"#f0f4ff",border:"1.5px solid #1a3a6b",borderRadius:"8px",padding:"1rem",marginBottom:"1rem"}}>
                    <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:".6rem",marginBottom:".6rem"}}>
                      <div className="field" style={{marginBottom:0}}><label>Company</label>
                        <input placeholder="e.g. Amazon, Booz Allen" value={newJob.company} onChange={e=>setNewJob(j=>({...j,company:e.target.value}))}/>
                      </div>
                      <div className="field" style={{marginBottom:0}}><label>Job Title</label>
                        <input placeholder="e.g. Operations Manager" value={newJob.title} onChange={e=>setNewJob(j=>({...j,title:e.target.value}))}/>
                      </div>
                      <div className="field" style={{marginBottom:0}}><label>Date Applied</label>
                        <input type="date" value={newJob.date} onChange={e=>setNewJob(j=>({...j,date:e.target.value}))}/>
                      </div>
                      <div className="field" style={{marginBottom:0}}><label>Status</label>
                        <select value={newJob.status} onChange={e=>setNewJob(j=>({...j,status:e.target.value}))}>
                          {["Applied","Interview Scheduled","Interview Done","Offer Received","Accepted","Rejected","Withdrawn"].map(s=>(
                            <option key={s}>{s}</option>
                          ))}
                        </select>
                      </div>
                    </div>
                    <div className="field" style={{marginBottom:".6rem"}}><label>Job Posting URL (optional)</label>
                      <input placeholder="https://..." value={newJob.link} onChange={e=>setNewJob(j=>({...j,link:e.target.value}))}/>
                    </div>
                    <div className="field" style={{marginBottom:".6rem"}}><label>Notes</label>
                      <div className="field" style={{marginBottom:0}}><label>Source</label>
                        <select value={newJob.source||""} onChange={e=>setNewJob(j=>({...j,source:e.target.value}))} style={{width:"100%"}}>
                          <option value="">-- Select Board --</option>
                          <option value="Indeed">Indeed</option>
                          <option value="ZipRecruiter">ZipRecruiter</option>
                          <option value="LinkedIn">LinkedIn</option>
                          <option value="USAJobs">USAJobs</option>
                          <option value="ClearanceJobs">ClearanceJobs</option>
                          <option value="Handshake">Handshake</option>
                          <option value="Direct">Direct / Company Site</option>
                          <option value="Other">Other</option>
                        </select>
                      </div>
                      <input placeholder="Recruiter name, salary range, next steps..." value={newJob.notes} onChange={e=>setNewJob(j=>({...j,notes:e.target.value}))}/>
                    </div>
                    <button className="btn-primary" style={{width:"auto"}} onClick={()=>{
                      if(!newJob.company||!newJob.title) return;
                      saveJobs([...jobApps,{...newJob,id:Date.now(),date:newJob.date||new Date().toISOString().slice(0,10)}]);
                      setNewJob({company:"",title:"",date:"",status:"Applied",notes:"",link:""});
                      setShowAddJob(false);
                    }}>Save Application</button>
                  </div>
                )}
                {jobApps.length===0?(
                  <div style={{textAlign:"center",padding:"3rem 1rem",color:"var(--dim)"}}>
                    <div style={{fontSize:"3rem",marginBottom:"1rem"}}>📋</div>
                    <div style={{fontWeight:700,marginBottom:".5rem",color:"#1a3a6b"}}>Track every application</div>
                    <div style={{fontSize:".85rem"}}>Add your first job application to start tracking your search progress.</div>
                  </div>
                ):(
                  <>
                    <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(110px,1fr))",gap:".6rem",marginBottom:"1rem"}}>
                      {[
                        {label:"Applied",val:jobApps.length,color:"#1a3a6b"},
                        {label:"Interviews",val:jobApps.filter(j=>j.status.includes("Interview")).length,color:"#e67e22"},
                        {label:"Offers",val:jobApps.filter(j=>j.status==="Offer Received"||j.status==="Accepted").length,color:"#1a7a40"},
                        {label:"Response Rate",val:Math.round((jobApps.filter(j=>j.status!=="Applied"&&j.status!=="Rejected").length/Math.max(1,jobApps.length))*100)+"%",color:"#1a3a6b"},
                      ].map((s,i)=>(
                        <div key={i} className="stat-card" style={{cursor:s.label==="Resumes Built"?"pointer":"default"}}
                          onClick={()=>{if(s.label==="Resumes Built"){setTab(2);window.scrollTo(0,0);}}}>
                          <div className="stat-num" style={{color:s.color}}>{s.val}</div>
                          <div className="stat-lbl">{s.label}</div>
                          {s.label==="Resumes Built"&&<div style={{fontSize:".65rem",color:"#8aa0b8",marginTop:".2rem"}}>Click to view →</div>}
                        </div>
                      ))}
                    </div>
                    <div style={{overflowX:"auto"}}>
                      <table className="tracker-table">
                        <thead><tr>
                          <th>Company</th><th>Role</th><th>Date</th><th>Status</th><th>Notes</th><th></th>
                        </tr></thead>
                        <tbody>
                          {[...jobApps].sort((a,b)=>b.id-a.id).map(job=>(
                            <tr key={job.id}>
                              <td><strong>{job.company}</strong>{job.link&&<a href={job.link} target="_blank" style={{marginLeft:".4rem",fontSize:".72rem",color:"#1a3a6b"}}>↗</a>}</td>
                              <td>{job.title}</td>
                              <td style={{whiteSpace:"nowrap",fontSize:".78rem",color:"var(--dim)"}}>{job.date}</td>
                              <td>
                                <select value={job.status}
                                  onChange={e=>saveJobs(jobApps.map(j=>j.id===job.id?{...j,status:e.target.value}:j))}
                                  style={{fontSize:".75rem",padding:".2rem .4rem",border:"1px solid #d0daea",borderRadius:"4px",cursor:"pointer"}}>
                                  {["Applied","Interview Scheduled","Interview Done","Offer Received","Accepted","Rejected","Withdrawn"].map(s=>(
                                    <option key={s}>{s}</option>
                                  ))}
                                </select>
                              </td>
                              <td style={{fontSize:".78rem",color:"#3a5070",maxWidth:"180px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{job.notes}</td>
                              <td style={{whiteSpace:"nowrap"}}>
                                <button style={{fontSize:".65rem",padding:".2rem .4rem",background:"#e8f0fe",border:"1px solid #1a3a6b",borderRadius:"4px",color:"#1a3a6b",cursor:"pointer",marginRight:".2rem"}}
                                  onClick={()=>{setPrepJob({title:job.title,company:job.company,type:"behavioral"});setRetentionTab("interview");}}>🎤 Interview</button>
                                <button style={{fontSize:".65rem",padding:".2rem .4rem",background:"#e8f0fe",border:"1px solid #1a3a6b",borderRadius:"4px",color:"#1a3a6b",cursor:"pointer",marginRight:".2rem"}}
                                  onClick={()=>{setFollowupJob({title:job.title,company:job.company});setRetentionTab("followup");}}>✉ Email</button>
                              </td>
                              <td><button onClick={()=>saveJobs(jobApps.filter(j=>j.id!==job.id))} style={{background:"none",border:"none",color:"#c0392b",cursor:"pointer",fontSize:".85rem"}}>✕</button></td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </>
                )}
              </div>
            )}
            {retentionTab==="interview"&&(
              <div>
                <h3 style={{color:"#1a3a6b",fontFamily:"'Bebas Neue',sans-serif",letterSpacing:".08em",fontSize:"1.2rem",marginTop:0}}>Interview Prep</h3>
                <p style={{fontSize:".88rem",color:"var(--dim)",margin:"0 0 1rem"}}>Get AI-generated questions and answer strategies tailored to your military background and target role.</p>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:".6rem",marginBottom:".6rem"}}>
                  <div className="field" style={{marginBottom:0}}><label>Job Title Interviewing For</label>
                    <input placeholder="e.g. Operations Manager" value={prepJob.title} onChange={e=>setPrepJob(j=>({...j,title:e.target.value}))}/>
                  </div>
                  <div className="field" style={{marginBottom:0}}><label>Company</label>
                    <input placeholder="e.g. Amazon, VA, Booz Allen" value={prepJob.company} onChange={e=>setPrepJob(j=>({...j,company:e.target.value}))}/>
                  </div>
                </div>
                <div className="field" style={{marginBottom:"1rem"}}><label>Interview Type</label>
                  <select value={prepJob.type} onChange={e=>setPrepJob(j=>({...j,type:e.target.value}))}>
                    <option value="behavioral">Behavioral (Tell me about a time...)</option>
                    <option value="technical">Technical / Skills-Based</option>
                    <option value="government">Government / Federal (USAJobs / STAR format)</option>
                    <option value="executive">Leadership / Executive Panel</option>
                    <option value="phone">Phone Screen / Initial Recruiter Call</option>
                  </select>
                </div>
                {hasAccess?(
                  <button className="btn-primary" onClick={genInterviewPrep} disabled={prepLoading} style={{marginBottom:"1rem"}}>
                    {prepLoading?"🎤 Preparing your questions...":"🎤 Generate Interview Questions"}
                  </button>
                ):(
                <button onClick={()=>setShowPaywall(true)} style={{width:"100%",padding:".75rem",background:"linear-gradient(135deg,#f0c040,#e0a820)",border:"none",borderRadius:"6px",color:"#0d1f3c",fontWeight:700,fontSize:".95rem",cursor:"pointer",letterSpacing:".03em"}}>🔒 Unlock AI Tools — $15/mo</button>
                )}
                {prepQuestions.length>0&&(
                  <>
                    <div style={{fontWeight:700,fontSize:".82rem",color:"var(--dim)",marginBottom:".75rem",letterSpacing:".06em",textTransform:"uppercase"}}>
                      {prepQuestions.length} Questions for {prepJob.title||"your interview"} {prepJob.company?"at "+prepJob.company:""}
                    </div>
                    {prepQuestions.map((q,i)=>(
                      <div key={i} className="prep-card">
                        <div className="prep-q">Q{i+1}: {q.question}</div>
                        {q.whyAsked&&<div style={{fontSize:".74rem",color:"#8aa0b8",marginBottom:".4rem",fontStyle:"italic"}}>Why they ask: {q.whyAsked}</div>}
                        <div className="prep-a">{q.answerStrategy}</div>
                        {q.starExample&&(
                          <div style={{background:"#f0f4ff",border:"1px solid #d0daea",borderRadius:"4px",padding:".5rem .7rem",marginTop:".5rem",fontSize:".78rem",color:"#3a5070",lineHeight:1.6}}>
                            <strong style={{color:"#1a3a6b"}}>STAR Example: </strong>{q.starExample}
                          </div>
                        )}
                        {q.tip&&<div className="prep-tip">💡 {q.tip}</div>}
                      </div>
                    ))}
                    <button className="btn-sec" style={{fontSize:".8rem",marginTop:".5rem"}} onClick={genInterviewPrep}>↺ Regenerate</button>
                  </>
                )}
              </div>
            )}
            {retentionTab==="followup"&&(
              <div>
                <h3 style={{color:"#1a3a6b",fontFamily:"'Bebas Neue',sans-serif",letterSpacing:".08em",fontSize:"1.2rem",marginTop:0}}>Follow-Up Email Generator</h3>
                <p style={{fontSize:".88rem",color:"var(--dim)",margin:"0 0 1rem"}}>Professional emails for every stage of the hiring process — thank-you, check-in, negotiation, or withdrawal.</p>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:".6rem",marginBottom:".6rem"}}>
                  <div className="field" style={{marginBottom:0}}><label>Company</label>
                    <input placeholder="e.g. Lockheed Martin" value={followupCtx.company} onChange={e=>setFollowupCtx(f=>({...f,company:e.target.value}))}/>
                  </div>
                  <div className="field" style={{marginBottom:0}}><label>Role</label>
                    <input placeholder="e.g. Systems Engineer" value={followupCtx.role} onChange={e=>setFollowupCtx(f=>({...f,role:e.target.value}))}/>
                  </div>
                  <div className="field" style={{marginBottom:0}}><label>Interviewer / Recruiter Name</label>
                    <input placeholder="e.g. Sarah Johnson" value={followupCtx.interviewerName} onChange={e=>setFollowupCtx(f=>({...f,interviewerName:e.target.value}))}/>
                  </div>
                  <div className="field" style={{marginBottom:0}}><label>Interview / Last Contact Date</label>
                    <input type="date" value={followupCtx.date} onChange={e=>setFollowupCtx(f=>({...f,date:e.target.value}))}/>
                  </div>
                </div>
                <div className="field" style={{marginBottom:"1rem"}}><label>Email Type</label>
                  <select value={followupCtx.outcome} onChange={e=>setFollowupCtx(f=>({...f,outcome:e.target.value}))}>
                    <option value="thank-you">Thank-You After Interview</option>
                    <option value="follow-up">Follow-Up (No Response After 1 Week)</option>
                    <option value="negotiation">Salary Negotiation</option>
                    <option value="withdraw">Withdraw Application</option>
                  </select>
                </div>
                {hasAccess?(
                  <button className="btn-primary" onClick={genFollowupEmail} disabled={followupLoading} style={{marginBottom:"1rem"}}>
                    {followupLoading?"✍ Writing your email...":"📧 Generate Email"}
                  </button>
                ):(
                <button onClick={()=>setShowPaywall(true)} style={{width:"100%",padding:".75rem",background:"linear-gradient(135deg,#f0c040,#e0a820)",border:"none",borderRadius:"6px",color:"#0d1f3c",fontWeight:700,fontSize:".95rem",cursor:"pointer",letterSpacing:".03em"}}>🔒 Unlock AI Tools — $15/mo</button>
                )}
                {followupEmail&&(
                  <>
                    <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:".5rem"}}>
                      <div style={{fontWeight:700,fontSize:".85rem",color:"#1a3a6b"}}>Your Email</div>
                      <div style={{display:"flex",gap:".4rem"}}>
                        <button className="btn-sec" style={{fontSize:".75rem"}} onClick={()=>{navigator.clipboard.writeText(followupEmail);setCopiedFollowup(true);setTimeout(()=>setCopiedFollowup(false),2000);}}>
                          {copiedFollowup?"✓ Copied!":"Copy"}
                        </button>
                        <button className="btn-sec" style={{fontSize:".75rem"}} onClick={genFollowupEmail}>↺ Regenerate</button>
                      </div>
                    </div>
                    <div className="cl-output">{followupEmail}</div>
                    <button className="btn-primary" style={{marginTop:".6rem",fontSize:".8rem"}} onClick={saveEmail}>💾 Save Email</button>
                  </>
                )}
              </div>
            )}
            {retentionTab==="timeline"&&(
              <div>
                <h3 style={{color:"#1a3a6b",fontFamily:"'Bebas Neue',sans-serif",letterSpacing:".08em",fontSize:"1.2rem",marginTop:0}}>Transition Timeline</h3>
                <p style={{fontSize:".88rem",color:"var(--dim)",margin:"0 0 1rem"}}>Your complete military-to-civilian transition checklist. Check off each step as you complete it.</p>
                {[
                  {phase:"6-12 Months Before ETS",color:"#c0392b",items:[
                    {id:"tap",label:"Complete TAP (Transition Assistance Program)",desc:"Mandatory 5-day program. Must complete at least 90 days before ETS. Includes resume, job search, VA benefits, and financial planning modules.me writing, VA benefits, job search basics"},
                    {id:"dd214",label:"Request DD-214 and service records",desc:"You will need these for VA claims, hiring preferences, and education benefits"},
                    {id:"varating",label:"File VA disability claim",desc:"Start early — the process takes 3-6 months on average"},
                    {id:"gibill",label:"Apply for GI Bill (Chapter 33 or 30)",desc:"Covers tuition, housing allowance, and books for school or certifications"},
                  ]},
                  {phase:"3-6 Months Before ETS",color:"#e67e22",items:[
                    {id:"linkedin",label:"Create or update LinkedIn profile",desc:"Connect with veteran hiring programs and recruiters proactively"},
                    {id:"resume",label:"Build your civilian resume",desc:"Use this tool to generate and refine your resume"},
                    {id:"network",label:"Start networking — veteran groups, LinkedIn, base programs",desc:"80% of jobs are filled through connections, not job postings"},
                    {id:"skillbridge",label:"Apply for SkillBridge or DoD Internship",desc:"Work at a civilian company while still in uniform — paid by DoD"},
                    {id:"clearance",label:"Document your security clearance",desc:"Get a clearance verification letter from your security manager"},
                  ]},
                  {phase:"1-3 Months Before ETS",color:"#1a3a6b",items:[
                    {id:"applying",label:"Apply to 5+ jobs per week",desc:"Use USAJobs for government roles, LinkedIn and Indeed for civilian"},
                    {id:"benefits",label:"Sign up for TRICARE and other transitioning benefits",desc:"Healthcare coverage continues for a period after separation"},
                    {id:"housing",label:"Confirm housing plan post-separation",desc:"BAH ends at separation — plan ahead for rent/mortgage"},
                    {id:"references",label:"Line up 3 professional references",desc:"Officers, NCOs, or civilians who can speak to your leadership"},
                  ]},
                  {phase:"After ETS",color:"#1a7a40",items:[
                    {id:"unemployment",label:"File for unemployment if needed",desc:"You may qualify — visit your state workforce agency"},
                    {id:"voc_rehab",label:"Explore Vocational Rehabilitation (Chapter 31)",desc:"If you have a service-connected disability, VR&E can fund your education or training"},
                    {id:"interview_ready",label:"Use Interview Prep for every callback",desc:"Prepare specifically for each company and role"},
                    {id:"hired",label:"Accept your offer and celebrate 🎖",desc:"You earned this. The skills you built will serve you for life."},
                  ]},
                ].map((phase,pi)=>(
                  <div key={pi} style={{marginBottom:"1.5rem"}}>
                    <div style={{fontWeight:700,fontSize:".8rem",letterSpacing:".1em",textTransform:"uppercase",color:phase.color,marginBottom:".6rem",paddingBottom:".3rem",borderBottom:"2px solid "+phase.color}}>{phase.phase}</div>
                    {phase.items.map((item,ii)=>(
                      <div key={item.id} className="tl-item" style={{cursor:"pointer"}} onClick={()=>saveTl(item.id,!tlChecks[item.id])}>
                        <div className={"tl-dot "+(tlChecks[item.id]?"tl-done":"tl-pending")}>
                          {tlChecks[item.id]?"✓":"○"}
                        </div>
                        <div className="tl-content" style={{opacity:tlChecks[item.id]?.6:1}}>
                          <h4 style={{textDecoration:tlChecks[item.id]?"line-through":"none"}}>{item.label}</h4>
                          <p>{item.desc}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            )}
            {retentionTab==="checkin"&&(
              <div>
                <h3 style={{color:"#1a3a6b",fontFamily:"'Bebas Neue',sans-serif",letterSpacing:".08em",fontSize:"1.2rem",marginTop:0}}>Weekly Progress Check-In</h3>
                <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(130px,1fr))",gap:".75rem",marginBottom:"1.5rem"}}>
                  {[
                    {label:"Jobs Applied",val:jobApps.length,icon:"📋",color:"#1a3a6b"},
                    {label:"Interviews",val:jobApps.filter(j=>j.status.includes("Interview")).length,icon:"🎤",color:"#e67e22"},
                    {label:"Offers",val:jobApps.filter(j=>j.status==="Offer Received"||j.status==="Accepted").length,icon:"🏆",color:"#1a7a40"},
                    {label:"Timeline Done",val:Object.values(tlChecks).filter(Boolean).length+"/16",icon:"🗓",color:"#8a6000"},
                    {label:"Resumes Built",val:savedResumes.length,icon:"📄",color:"#1a3a6b"},
                  ].map((s,i)=>(
                    <div key={i} className="stat-card">
                      <div style={{fontSize:"1.5rem",marginBottom:".3rem"}}>{s.icon}</div>
                      <div className="stat-num" style={{color:s.color,fontSize:"1.6rem"}}>{s.val}</div>
                      <div className="stat-lbl">{s.label}</div>
                    </div>
                  ))}
                </div>
                <div className="card">
                  <div className="ch"><h3>📊 Your Job Search Health</h3></div>
                  <div className="cb">
                    {jobApps.length===0&&(
                      <div style={{color:"var(--dim)",fontSize:".88rem"}}>Start tracking your applications on the Job Tracker to see your search health score here.</div>
                    )}
                    {jobApps.length>0&&(
                      <div style={{display:"flex",flexDirection:"column",gap:".8rem"}}>
                        {jobApps.filter(j=>j.status.includes("Interview")).length===0&&jobApps.length>=5&&(
                          <div style={{background:"#fff8e0",border:"1px solid #f0c040",borderRadius:"6px",padding:".75rem",fontSize:".85rem",color:"#5a3a00"}}>
                            ⚡ <strong>Low response rate.</strong> You have {jobApps.length} applications but no interviews yet. Consider tailoring your resume more specifically to each job posting, or try the Resume Review tool.
                          </div>
                        )}
                        {jobApps.filter(j=>j.status.includes("Interview")).length>0&&jobApps.filter(j=>j.status==="Offer Received"||j.status==="Accepted").length===0&&(
                          <div style={{background:"#e8f8ee",border:"1px solid #b0e0c0",borderRadius:"6px",padding:".75rem",fontSize:".85rem",color:"#1a5a30"}}>
                            ✅ <strong>Getting interviews!</strong> Use the Interview Prep tool before each one. Focus on translating your military experience into business outcomes.
                          </div>
                        )}
                        {jobApps.filter(j=>j.status==="Offer Received"||j.status==="Accepted").length>0&&(
                          <div style={{background:"#f0f8ff",border:"1px solid #1a3a6b",borderRadius:"6px",padding:".75rem",fontSize:".85rem",color:"#1a3a6b"}}>
                            🏆 <strong>Offer on the table!</strong> Use the Follow-Up Email generator to send a professional negotiation email. Most veterans leave $5,000-$15,000 on the table by not negotiating.
                          </div>
                        )}
                        <div style={{fontSize:".82rem",color:"var(--dim)"}}>
                          🎯 Goal: Apply to <strong>5 jobs per week</strong> · Response rate target: <strong>15%+</strong> · Average veteran job search: <strong>3-5 months</strong>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
                <div className="card" style={{marginTop:"1rem"}}>
                  <div className="ch"><h3>🔗 Quick Actions</h3></div>
                  <div className="cb" style={{display:"flex",flexWrap:"wrap",gap:".5rem"}}>
                    {[
                      {label:"+ Log Application",action:()=>{setRetentionTab("tracker");setShowAddJob(true);}},
                      {label:"🎤 Prep for Interview",action:()=>setRetentionTab("interview")},
                      {label:"📧 Write Follow-Up",action:()=>setRetentionTab("followup")},
                      {label:"📋 Resume Builder",action:()=>setTab(2)},
                      {label:"✉ Cover Letter",action:()=>setTab(3)},
                    ].map((a,i)=>(
                      <button key={i} className="btn-sec" style={{fontSize:".82rem"}} onClick={a.action}>{a.label}</button>
                    ))}
                  </div>
                </div>
              </div>
            )}
            <div className="nav-row" style={{marginTop:"1.5rem"}}>
              <button className="btn-sec" onClick={()=>setTab(3)}>← Cover Letter</button>
              <button className="btn-sec" onClick={()=>setTab(5)}>My Profile →</button>
            </div>
          </div>}
          {tab===99 && <div className="panel on">
            <div className="crisis-banner">
              <div style={{fontSize:"2rem",flexShrink:0}}>🆘</div>
              <div style={{flex:1}}>
                <h3>If You Are in Crisis — You Are Not Alone</h3>
                <p>The transition out of service is one of the hardest things a veteran faces. If you are struggling — mentally, emotionally, or financially — real help is available right now, 24/7, from people who understand military service.</p>
                <div style={{display:"flex",gap:".5rem",flexWrap:"wrap"}}>
                  <a href="tel:988" className="res-contact red">📞 Call or Text 988 (Veterans Press 1)</a>
                  <a href="https://www.veteranscrisisline.net/get-help-now/chat/" target="_blank" className="res-contact red">💬 Chat Online</a>
                  <a href="sms:838255" className="res-contact red">📱 Text 838255</a>
                </div>
                <div style={{fontSize:".75rem",marginTop:".5rem",opacity:.85}}>Veterans Crisis Line · Free · Confidential · Available 24/7/365</div>
              </div>
            </div>
            {/* AdSense placeholder - re-enable after approval */}
            <div style={{background:"linear-gradient(135deg,#0a1628,#1a3a6b)",border:"2px solid rgba(200,150,10,.4)",borderRadius:"12px",padding:"1.5rem 1.75rem",marginBottom:"1.5rem",boxShadow:"0 4px 20px rgba(0,0,0,.2)"}}>
              <div style={{display:"flex",gap:"1rem",alignItems:"flex-start",marginBottom:"1rem"}}>
                <div style={{fontSize:"2rem",flexShrink:0}}>🏠</div>
                <div>
                  <div style={{fontFamily:"'Bebas Neue',sans-serif",fontSize:"1.3rem",letterSpacing:".1em",color:"#f0c040",marginBottom:".3rem"}}>Are You a Veteran Experiencing Homelessness?</div>
                  <p style={{color:"#c0d8f0",fontSize:".88rem",lineHeight:1.7,margin:0}}>
                    There is <strong style={{color:"#f0c040"}}>absolutely no shame</strong> in reaching out for help.
                    You answered the call when your country needed you — now let us answer yours.
                    Fill out the form below and the Veteran Career Path team will personally reach out
                    to help you build a resume, create an action plan, and connect you with resources
                    in your area. <strong style={{color:"#f0c040"}}>Your service matters and so do you.</strong>
                  </p>
                </div>
              </div>
              {!showHomelessForm&&!homelessSubmitted&&(
                <button onClick={()=>setShowHomelessForm(true)}
                  style={{background:"linear-gradient(135deg,#c8960a,#e8aa10)",border:"none",borderRadius:"8px",color:"#0a1628",fontWeight:700,fontSize:".95rem",padding:".7rem 1.5rem",cursor:"pointer"}}>
                  🤝 Request Help — We've Got You
                </button>
              )}
              {homelessSubmitted&&(
                <div style={{background:"rgba(26,122,64,.25)",border:"1px solid rgba(26,122,64,.5)",borderRadius:"8px",padding:"1rem 1.25rem"}}>
                  <div style={{fontWeight:700,fontSize:"1rem",color:"#90e8b0",marginBottom:".4rem"}}>✓ Message received. You are not alone.</div>
                  <div style={{fontSize:".86rem",color:"#c0f0d0",lineHeight:1.7}}>
                    We will reach out within 24–48 hours with local resources and next steps.
                    In the meantime, start filling out your profile in the app — we will have a
                    resume ready for you when we connect.
                  </div>
                </div>
              )}
              {showHomelessForm&&!homelessSubmitted&&(
                <div style={{background:"rgba(255,255,255,.05)",border:"1px solid rgba(255,255,255,.12)",borderRadius:"8px",padding:"1.25rem",marginTop:".75rem"}}>
                  <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:".75rem",marginBottom:".75rem"}}>
                    <div className="field" style={{marginBottom:0}}>
                      <label style={{color:"#a0c0e0"}}>Your Name</label>
                      <input placeholder="First Last" value={homelessForm.name}
                        onChange={e=>setHomelessForm(f=>({...f,name:e.target.value}))}
                        style={{background:"rgba(255,255,255,.08)",border:"1px solid rgba(255,255,255,.2)",color:"#fff"}}/>
                    </div>
                    <div className="field" style={{marginBottom:0}}>
                      <label style={{color:"#a0c0e0"}}>Branch of Service</label>
                      <input placeholder="e.g. U.S. Army, U.S. Marines" value={homelessForm.branch}
                        onChange={e=>setHomelessForm(f=>({...f,branch:e.target.value}))}
                        style={{background:"rgba(255,255,255,.08)",border:"1px solid rgba(255,255,255,.2)",color:"#fff"}}/>
                    </div>
                    <div className="field" style={{marginBottom:0}}>
                      <label style={{color:"#a0c0e0"}}>Your Current Location <span style={{color:"#f0c040"}}>*</span></label>
                      <input placeholder="City, State — e.g. Newport News, VA" value={homelessForm.location}
                        onChange={e=>setHomelessForm(f=>({...f,location:e.target.value}))}
                        style={{background:"rgba(255,255,255,.08)",border:"1px solid rgba(255,255,255,.2)",color:"#fff"}}/>
                      <span style={{fontSize:".72rem",color:"#80a8d0",marginTop:".25rem",display:"block"}}>We use your location to find nearby VA offices, shelters, and employment resources</span>
                    </div>
                    <div className="field" style={{marginBottom:0}}>
                      <label style={{color:"#a0c0e0"}}>Best Way to Reach You</label>
                      <input placeholder="Email or phone number" value={homelessForm.email}
                        onChange={e=>setHomelessForm(f=>({...f,email:e.target.value}))}
                        style={{background:"rgba(255,255,255,.08)",border:"1px solid rgba(255,255,255,.2)",color:"#fff"}}/>
                    </div>
                  </div>
                  <div className="field" style={{marginBottom:"1rem"}}>
                    <label style={{color:"#a0c0e0"}}>Tell us about your situation (optional — share only what you are comfortable with)</label>
                    <textarea placeholder="Current living situation, what kind of work you are looking for, any urgent needs we should know about..." value={homelessForm.situation}
                      onChange={e=>setHomelessForm(f=>({...f,situation:e.target.value}))}
                      style={{background:"rgba(255,255,255,.08)",border:"1px solid rgba(255,255,255,.2)",color:"#fff",minHeight:"80px"}}/>
                  </div>
                  <div style={{display:"flex",gap:".75rem",flexWrap:"wrap",marginBottom:"1rem"}}>
                    <button onClick={async()=>{
                        if(!homelessForm.location){alert("Please enter your current location so we can find resources near you.");return;}
                        try{
                          await fetch("https://formspree.io/f/REPLACE_WITH_FORMSPREE_ID",{
                            method:"POST",
                            headers:{"Content-Type":"application/json"},
                            body:JSON.stringify({
                              subject:"HOMELESS VETERAN OUTREACH — "+homelessForm.location,
                              name:homelessForm.name||"(not provided)",
                              branch:homelessForm.branch||"(not provided)",
                              location:homelessForm.location,
                              contact:homelessForm.email||"(not provided)",
                              situation:homelessForm.situation||"(not provided)"
                            })
                          });
                        }catch(e){}
                        setHomelessSubmitted(true);
                        setShowHomelessForm(false);
                      }}
                      style={{background:"linear-gradient(135deg,#c8960a,#e8aa10)",border:"none",borderRadius:"8px",color:"#0a1628",fontWeight:700,fontSize:".9rem",padding:".65rem 1.5rem",cursor:"pointer"}}>
                      ✓ Send — We Will Reach Out Within 24–48 Hours
                    </button>
                    <button onClick={()=>setShowHomelessForm(false)}
                      style={{background:"transparent",border:"1px solid rgba(255,255,255,.2)",borderRadius:"8px",color:"#a0c0e0",fontSize:".85rem",padding:".65rem 1rem",cursor:"pointer"}}>
                      Cancel
                    </button>
                  </div>
                  <div style={{padding:".85rem 1rem",background:"rgba(192,57,43,.15)",border:"1px solid rgba(192,57,43,.3)",borderRadius:"8px"}}>
                    <div style={{fontWeight:700,color:"#f08080",fontSize:".82rem",marginBottom:".4rem"}}>🆘 Need immediate help right now?</div>
                    <div style={{fontSize:".8rem",color:"#c0b0b0",lineHeight:1.8}}>
                      <strong style={{color:"#fff"}}>VA Homeless Veterans Hotline: 1-877-4AID-VET (1-877-424-3838)</strong> — 24/7<br/>
                      <strong style={{color:"#fff"}}>HUD-VASH Program</strong> — Contact your local VA medical center for housing vouchers<br/>
                      <strong style={{color:"#fff"}}>211</strong> — Dial 211 for local shelter, food, and emergency services<br/>
                      <strong style={{color:"#fff"}}>SSVF (Supportive Services for Veteran Families)</strong> — google.com/search?q=SSVF+near+me
                    </div>
                  </div>
                </div>
              )}
            </div>
            <div className="res-filter-bar">
              {["All","Mental Health","Benefits & VA","Financial","Education","Employment","Housing","Legal","Family","Substance Use"].map(f=>(
                <button key={f} className={"res-filter-btn"+(resFilter===f?" active":"")} onClick={()=>setResFilter(f)}>{f}</button>
              ))}
            </div>
            {[
              {
                category:"Mental Health & Crisis Support",
                tag:"Mental Health",
                icon:"🧠",
                resources:[
                  {name:"Veterans Crisis Line",desc:"Free, confidential support for veterans in crisis. Call 988 and press 1, text 838255, or chat online. Available 24/7. Staffed by VA-trained responders, many of whom are veterans themselves.",contact:"Call 988 → Press 1",href:"tel:988",color:"red",tags:["Mental Health","Crisis"]},
                  {name:"Make the Connection",desc:"Real stories from veterans who have faced mental health challenges. Find local VA mental health services, peer support, and community programs across the country.",contact:"maketheconnection.net",href:"https://www.maketheconnection.net",color:"green",tags:["Mental Health"]},
                  {name:"VA Mental Health Services",desc:"VA offers free mental health care to veterans including therapy, medication, PTSD treatment, depression, anxiety, military sexual trauma (MST) counseling, and more. You do NOT need a service-connected disability rating to access mental health care.",contact:"va.gov/mental-health",href:"https://www.va.gov/health-care/health-needs-conditions/mental-health/",color:"green",tags:["Mental Health","Benefits & VA"]},
                  {name:"Headstrong (Free Mental Health for Post-9/11 Vets)",desc:"Free, stigma-free mental health treatment for post-9/11 veterans and their families. No VA enrollment required. Works with private therapists across the country. Completely confidential.",contact:"giveanhourhq.org/headstrong",href:"https://www.giveanhourhq.org/headstrong",color:"green",tags:["Mental Health"]},
                  {name:"Team Red White & Blue",desc:"Connects veterans to their community through physical and social activity. Chapters nationwide. Research shows social connection through physical activity is one of the most effective tools against veteran isolation and depression.",contact:"teamrwb.org",href:"https://www.teamrwb.org",color:"green",tags:["Mental Health"]},
                  {name:"PTSD Coach App (VA)",desc:"Free app developed by VA to help veterans manage PTSD symptoms with tools, education, and self-assessments. Available on iOS and Android.",contact:"ptsd.va.gov/appvid/mobile/ptsdcoach.asp",href:"https://www.ptsd.va.gov/appvid/mobile/ptsdcoach.asp",color:"green",tags:["Mental Health"]},
                ]
              },
              {
                category:"VA Benefits & Claims",
                tag:"Benefits & VA",
                icon:"🏛",
                resources:[
                  {name:"VA.gov — Benefits Hub",desc:"Official hub for all VA benefits: disability compensation, pension, education (GI Bill), home loans, life insurance, health care enrollment, and more.",contact:"va.gov",href:"https://www.va.gov",color:"green",tags:["Benefits & VA"]},
                  {name:"Disabled American Veterans (DAV)",desc:"Free VSO (Veterans Service Organization) that helps veterans file and appeal VA disability claims. A DAV accredited claims agent can significantly increase your rating and get back pay you are owed.",contact:"dav.org",href:"https://www.dav.org",color:"green",tags:["Benefits & VA"]},
                  {name:"VFW Veterans Benefits Center",desc:"Free VSO with accredited claims agents nationwide. They have helped veterans recover billions in retroactive disability pay. No cost ever.",contact:"vfw.org/assistance",href:"https://www.vfw.org/assistance/va-claims-separation-benefits",color:"green",tags:["Benefits & VA"]},
                  {name:"VA Vocational Rehabilitation (VR&E / Chapter 31)",desc:"If you have a service-connected disability, VA may pay 100% of education or job training costs, provide job placement assistance, and a monthly subsistence allowance while you train.",contact:"va.gov/careers-employment/vocational-rehabilitation",href:"https://www.va.gov/careers-employment/vocational-rehabilitation/",color:"green",tags:["Benefits & VA","Education","Employment"]},
                  {name:"Benefits.gov — Federal Benefits Finder",desc:"Search all federal benefits you may be eligible for based on your situation — veterans, family, low income, disability, housing and more.",contact:"benefits.gov",href:"https://www.benefits.gov",color:"green",tags:["Benefits & VA"]},
                ]
              },
              {
                category:"Financial Assistance",
                tag:"Financial",
                icon:"💰",
                resources:[
                  {name:"Operation Homefront — Emergency Assistance",desc:"Provides emergency financial assistance to active duty, Guard, Reserve, and veterans. Helps with rent, utilities, food, auto repair, and more. No repayment required.",contact:"operationhomefront.org",href:"https://www.operationhomefront.org/get-help/programs/",color:"gold",tags:["Financial"]},
                  {name:"USA Cares",desc:"Emergency financial assistance for post-9/11 veterans and military families facing hardship. Helps with rent, mortgage, utilities, and basic needs.",contact:"usacares.org",href:"https://usacares.org",color:"gold",tags:["Financial"]},
                  {name:"VA Pension — Low Income Veterans",desc:"If you served during wartime and have limited income, you may qualify for VA Pension — a monthly payment regardless of disability rating.",contact:"va.gov/pension",href:"https://www.va.gov/pension/",color:"green",tags:["Financial","Benefits & VA"]},
                  {name:"SNAP (Food Assistance)",desc:"Veterans facing food insecurity may qualify for SNAP benefits. Many veterans are surprised to learn they qualify. Apply through your state's social services agency.",contact:"fns.usda.gov/snap",href:"https://www.fns.usda.gov/snap/recipient/eligibility",color:"gold",tags:["Financial"]},
                  {name:"VFW Emergency Loans & Grants",desc:"VFW offers interest-free emergency loans and unrepayable grants to veterans in financial crisis through their National Veterans Service program.",contact:"vfw.org",href:"https://www.vfw.org",color:"green",tags:["Financial"]},
                ]
              },
              {
                category:"Education & Training",
                tag:"Education",
                icon:"🎓",
                resources:[
                  {name:"GI Bill (Chapter 33 / Post-9/11)",desc:"Covers tuition, housing allowance (BAH at E-5 rate), and $1,000/year for books. Use it for college, trade school, flight training, on-the-job training, and more. Transfer to dependents is possible.",contact:"va.gov/education/about-gi-bill-benefits",href:"https://www.va.gov/education/about-gi-bill-benefits/",color:"green",tags:["Education","Benefits & VA"]},
                  {name:"DoD SkillBridge",desc:"Work at a civilian company for up to 180 days before ETS while still receiving military pay and benefits. Over 10,000 partner companies including Amazon, Microsoft, and hundreds of trades programs.",contact:"skillbridge.defense.gov",href:"https://skillbridge.osd.mil",color:"green",tags:["Education","Employment"]},
                  {name:"Helmets to Hardhats",desc:"Connects veterans to registered apprenticeships in the construction trades — electrical, plumbing, pipefitting, ironwork, and more. Union wages, free training, lifetime career.",contact:"helmetstohardhats.org",href:"https://www.helmetstohardhats.org",color:"gold",tags:["Education","Employment"]},
                  {name:"MyCAA Scholarship (Military Spouses)",desc:"Up to $4,000 in scholarships for military spouses pursuing portable career training, licenses, or degrees.",contact:"mycaa.com",href:"https://mycaa.com",color:"green",tags:["Education"]},
                  {name:"Troops to Teachers",desc:"Helps veterans and transitioning service members become certified teachers — covering certification fees and offering bonuses in high-need schools.",contact:"proudtoserveagain.com",href:"https://www.proudtoserveagain.com",color:"green",tags:["Education","Employment"]},
                ]
              },
              {
                category:"Employment & Hiring",
                tag:"Employment",
                icon:"💼",
                resources:[
                  {name:"Hire Heroes USA",desc:"Free career coaching, resume writing, and job placement services for veterans and military spouses. Their coaches are veterans themselves. Average salary for placed veterans: $62,000+.",contact:"hireheroesusa.org",href:"https://www.hireheroesusa.org",color:"green",tags:["Employment"]},
                  {name:"USAJobs.gov — Federal Employment",desc:"All federal government jobs. Veterans get 5-10 point preference. Many roles are set aside exclusively for veterans. Create a profile and upload your resume.",contact:"usajobs.gov",href:"https://www.usajobs.gov",color:"green",tags:["Employment"]},
                  {name:"RecruitMilitary",desc:"Job fairs and online job board specifically for veterans. Top employers attend specifically to hire veterans — Walmart, Home Depot, defense contractors, law enforcement agencies.",contact:"recruitmilitary.com",href:"https://recruitmilitary.com",color:"green",tags:["Employment"]},
                  {name:"ClearanceJobs",desc:"Job board for cleared professionals. If you hold or held a security clearance, your value in the defense contractor market is significant — often $80K-$150K+ roles.",contact:"clearancejobs.com",href:"https://www.clearancejobs.com",color:"gold",tags:["Employment"]},
                  {name:"American Corporate Partners (ACP)",desc:"Free one-on-one mentorship pairing veterans with executives from major corporations. Get career advice, networking, and guidance from senior leaders.",contact:"acp-usa.org",href:"https://www.acp-usa.org",color:"green",tags:["Employment"]},
                ]
              },
              {
                category:"Housing Assistance",
                tag:"Housing",
                icon:"🏠",
                resources:[
                  {name:"VA Home Loan",desc:"No down payment required, no private mortgage insurance, competitive interest rates. One of the most powerful benefits earned through service. Available for purchase, refinance, or adapted housing.",contact:"va.gov/housing-assistance/home-loans",href:"https://www.va.gov/housing-assistance/home-loans/",color:"green",tags:["Housing","Benefits & VA"]},
                  {name:"HUD-VASH (Veteran Housing Vouchers)",desc:"If you are homeless or at risk of homelessness, HUD-VASH provides housing vouchers and VA case management. Call your local VA or 988 (Press 1) to access.",contact:"va.gov/homeless",href:"https://www.va.gov/homeless/hud-vash.asp",color:"red",tags:["Housing"]},
                  {name:"National Call Center for Homeless Veterans",desc:"24/7 hotline connecting homeless or at-risk veterans to housing services, case management, and emergency assistance.",contact:"Call 877-4AID-VET",href:"tel:18774243838",color:"red",tags:["Housing"]},
                  {name:"Operation Homefront — Housing",desc:"Transitional and permanent housing programs for veterans and military families in need.",contact:"operationhomefront.org",href:"https://www.operationhomefront.org",color:"gold",tags:["Housing","Financial"]},
                ]
              },
              {
                category:"Legal Assistance",
                tag:"Legal",
                icon:"⚖️",
                resources:[
                  {name:"Veterans Legal Services",desc:"Free legal help for veterans with VA disability appeals, discharge upgrades, benefits denials, and more. Upgrading a discharge can unlock thousands in back pay and benefits.",contact:"veteranslegalservices.org",href:"https://www.veteranslegalservices.org",color:"green",tags:["Legal"]},
                  {name:"National Veterans Legal Services Program",desc:"Provides free legal representation for veterans in VA benefit appeals. Has won millions in back benefits for veterans who were wrongly denied.",contact:"nvlsp.org",href:"https://www.nvlsp.org",color:"green",tags:["Legal"]},
                  {name:"Discharge Upgrade",desc:"If you received less than honorable discharge and believe it was unjust, you can apply for an upgrade. An upgraded discharge can restore VA benefits worth tens of thousands of dollars.",contact:"militaryonesource.mil",href:"https://www.militaryonesource.mil/legal/military-legal-matters/discharge-upgrade-applications/",color:"gold",tags:["Legal","Benefits & VA"]},
                ]
              },
              {
                category:"Family & Caregiver Support",
                tag:"Family",
                icon:"👨‍👩‍👧",
                resources:[
                  {name:"VA Caregiver Support Program",desc:"If you care for a veteran with a serious injury or illness, you may qualify for a monthly stipend, health insurance, and mental health services through the Program of Comprehensive Assistance for Family Caregivers (PCAFC).",contact:"va.gov/family-member-benefits/comprehensive-assistance-for-family-caregivers",href:"https://www.va.gov/family-member-benefits/comprehensive-assistance-for-family-caregivers/",color:"green",tags:["Family","Benefits & VA"]},
                  {name:"Military OneSource",desc:"Free 24/7 support for service members and their families — counseling, financial coaching, tax prep, legal services, relocation assistance, and more. Available up to 365 days after separation.",contact:"militaryonesource.mil",href:"https://www.militaryonesource.mil",color:"green",tags:["Family"]},
                  {name:"TAPS — Tragedy Assistance Program for Survivors",desc:"Support for families who have lost a loved one in military service. Grief counseling, peer mentors, and survivor benefits guidance.",contact:"taps.org",href:"https://www.taps.org",color:"red",tags:["Family","Mental Health"]},
                ]
              },
              {
                category:"Substance Use & Recovery",
                tag:"Substance Use",
                icon:"💙",
                resources:[
                  {name:"VA Substance Use Disorder Treatment",desc:"Free inpatient and outpatient treatment for alcohol and drug dependency. VA treats substance use as a medical condition, not a moral failing. Call your local VA or the Veterans Crisis Line.",contact:"va.gov/health-care/health-needs-conditions/substance-use-problems",href:"https://www.va.gov/health-care/health-needs-conditions/substance-use-problems/",color:"green",tags:["Substance Use","Mental Health","Benefits & VA"]},
                  {name:"SAMHSA National Helpline",desc:"Free, confidential, 24/7 treatment referral and information service for substance use disorders. Call 1-800-662-4357.",contact:"Call 1-800-662-4357",href:"tel:18006624357",color:"red",tags:["Substance Use"]},
                  {name:"Veteran Recovery Centers",desc:"Residential and outpatient recovery programs specifically for veterans. Peer support from fellow veterans in recovery who understand military culture.",contact:"va.gov/find-locations/?facilityType=benefits",href:"https://www.va.gov/find-locations/?facilityType=benefits",color:"green",tags:["Substance Use"]},
                ]
              },
            ].filter(section => resFilter==="All" || section.tag===resFilter).map((section,si)=>(
              <div key={si} className="res-section">
                <div className="res-section-title">{section.icon} {section.category}</div>
                {section.resources.filter(r => resFilter==="All" || r.tags.includes(resFilter)).map((r,ri)=>(
                  <div key={ri} className="res-card">
                    <div className="res-body">
                      <div style={{display:"flex",alignItems:"center",gap:".5rem",marginBottom:".2rem",flexWrap:"wrap"}}>
                        <div className="res-name">{r.name}</div>
                        {r.tags.map(t=><span key={t} className="res-tag">{t}</span>)}
                      </div>
                      <div className="res-desc">{r.desc}</div>
                      <a href={r.href} target={r.href.startsWith("tel:")||r.href.startsWith("sms:")?"_self":"_blank"} className={"res-contact "+r.color}>
                        {r.href.startsWith("tel:")?"📞 ":r.href.startsWith("sms:")?"📱 ":"🔗 "}{r.contact}
                      </a>
                    </div>
                  </div>
                ))}
              </div>
            ))}
            <div style={{background:"#f0f4ff",border:"1px solid #c0d0e4",borderRadius:"8px",padding:"1rem 1.2rem",marginTop:"1rem",fontSize:".82rem",color:"#3a5070",lineHeight:1.7}}>
              <strong style={{color:"#1a3a6b"}}>📌 A note from Veteran Career Path:</strong> This resource page exists because we know the transition is more than just a job search. You served. You sacrificed. And you deserve support in every area of your life — not just your career. If you know a veteran who needs help, please share these resources with them.
            </div>
            <div className="nav-row" style={{marginTop:"1.5rem"}}>
              <button className="btn-sec" onClick={()=>setTab(4)}>← Job Search Hub</button>
              <button className="btn-sec" onClick={()=>setTab(5)}>My Profile →</button>
            </div>
          </div>}
          <MyProfileTab tab={tab} currentUser={currentUser} setShowAuth={setShowAuth} personal={personal} hasAccess={hasAccess} hasUnsaved={hasUnsaved} milExperiences={milExperiences} BRANCH_EMBLEMS={BRANCH_EMBLEMS} BRANCH_COLORS={BRANCH_COLORS} RANKS={RANKS} RankInsignia={RankInsignia} careers={careers} openCareerDetail={openCareerDetail} setTab={setTab} resume={resume} savedResumes={savedResumes} handleDeleteResume={handleDeleteResume} savedCoverLetters={savedCoverLetters} savedEmails={savedEmails} savedScores={savedScores} handleDeleteSaved={handleDeleteSaved} handleLogout={handleLogout} handleSaveProfile={handleSaveProfile} handleSaveResume={handleSaveResume} showToast={showToast} setShowPaywall={setShowPaywall} savedPaths={savedPaths} setSavedPaths={setSavedPaths} />
        </div>
      </div>
      {/* ── AI TOOLS QUICK NAV DRAWER ── */}
      <div className="tools-overlay" id="tools-overlay" onClick={()=>closeToolsDrawer()}></div>
      <button className="tools-fab" id="tools-fab" onClick={()=>openToolsDrawer()} title="AI Tools">🛠️</button>
      <div className="tools-drawer" id="tools-drawer">
        <div className="tools-drawer-header">
          <span className="tools-drawer-title">AI Career Tools</span>
          <button className="tools-drawer-close" onClick={()=>closeToolsDrawer()}>✕</button>
        </div>
        <div className="tools-drawer-body">
          <div className="tools-drawer-section">Inside This App</div>
          <a className="tools-drawer-link active-tool" href="#" onClick={(e)=>{e.preventDefault();setTab(0);closeToolsDrawer();}}>
            <span className="tdl-icon">👤</span>
            <span className="tdl-text"><span className="tdl-name">Profile & Qualifications</span><span className="tdl-sub">Your military background, MOS, clearance</span></span>
          </a>
          <a className="tools-drawer-link active-tool" href="#" onClick={(e)=>{e.preventDefault();setTab(1);closeToolsDrawer();}}>
            <span className="tdl-icon">🎯</span>
            <span className="tdl-text"><span className="tdl-name">Career Pathways</span><span className="tdl-sub">AI-matched career recommendations</span></span>
          </a>
          <a className="tools-drawer-link active-tool" href="#" onClick={(e)=>{e.preventDefault();setTab(2);closeToolsDrawer();}}>
            <span className="tdl-icon">📄</span>
            <span className="tdl-text"><span className="tdl-name">AI Resume Builder</span><span className="tdl-sub">5 templates, ATS-optimized</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link active-tool" href="#" onClick={(e)=>{e.preventDefault();setTab(3);closeToolsDrawer();}}>
            <span className="tdl-icon">✉️</span>
            <span className="tdl-text"><span className="tdl-name">Cover Letter & Review</span><span className="tdl-sub">AI cover letters + resume score</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link active-tool" href="#" onClick={(e)=>{e.preventDefault();setTab(4);closeToolsDrawer();}}>
            <span className="tdl-icon">🔍</span>
            <span className="tdl-text"><span className="tdl-name">Job Search Hub</span><span className="tdl-sub">Tracker, interview prep, follow-ups</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <div className="tools-drawer-section">Standalone AI Tools</div>
          <a className="tools-drawer-link" href="/tools-job-match.html">
            <span className="tdl-icon">🎯</span>
            <span className="tdl-text"><span className="tdl-name">Job Match Analyzer</span><span className="tdl-sub">Paste any job posting, get honest score</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/tools-federal-resume.html">
            <span className="tdl-icon">🏛</span>
            <span className="tdl-text"><span className="tdl-name">Federal Resume Builder</span><span className="tdl-sub">USAJobs-format with KSAs</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/tools-interview-simulator.html">
            <span className="tdl-icon">🎤</span>
            <span className="tdl-text"><span className="tdl-name">Interview Simulator</span><span className="tdl-sub">STAR coaching for any role</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/tools-linkedin-builder.html">
            <span className="tdl-icon">🔗</span>
            <span className="tdl-text"><span className="tdl-name">LinkedIn Optimizer</span><span className="tdl-sub">Civilian-language profile rewrite</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/tools-salary-negotiator.html">
            <span className="tdl-icon">💰</span>
            <span className="tdl-text"><span className="tdl-name">Salary Negotiator</span><span className="tdl-sub">Scripts + clearance leverage tactics</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/tools-cert-advisor.html">
            <span className="tdl-icon">📊</span>
            <span className="tdl-text"><span className="tdl-name">Certification Advisor</span><span className="tdl-sub">Which certs to pursue + GI Bill use</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <div className="tools-drawer-section">More AI Tools — $15/mo</div>
          <a className="tools-drawer-link" href="/va-claim-builder.html">
            <span className="tdl-icon">🏥</span>
            <span className="tdl-text"><span className="tdl-name">VA Claim Builder</span><span className="tdl-sub">Diagnostic codes, ratings, C&P prep</span></span>
            <span className="tdl-badge">NEW</span>
          </a>
          <a className="tools-drawer-link" href="/career-assessment-full.html">
            <span className="tdl-icon">🧠</span>
            <span className="tdl-text"><span className="tdl-name">VCP PathFinder™ Pro</span><span className="tdl-sub">60-question RIASEC + AI profile blend</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/mos-career-translator.html">
            <span className="tdl-icon">🔄</span>
            <span className="tdl-text"><span className="tdl-name">Real MOS Experience Translator</span><span className="tdl-sub">AI translates any MOS to civilian titles</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/dd214-decoder.html">
            <span className="tdl-icon">📋</span>
            <span className="tdl-text"><span className="tdl-name">DD-214 Decoder</span><span className="tdl-sub">Every benefit your discharge unlocks</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/clearance-job-match.html">
            <span className="tdl-icon">🔐</span>
            <span className="tdl-text"><span className="tdl-name">Clearance Job Match</span><span className="tdl-sub">Cleared roles + real salary data</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/linkedin-profile-rewriter.html">
            <span className="tdl-icon">🔵</span>
            <span className="tdl-text"><span className="tdl-name">LinkedIn Profile Rewriter</span><span className="tdl-sub">Full civilian rewrite, ready to paste</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/federal-resume-builder-ai.html">
            <span className="tdl-icon">🏛</span>
            <span className="tdl-text"><span className="tdl-name">Federal Resume AI Builder</span><span className="tdl-sub">OPM-format, USAJobs-ready</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/salary-negotiation-roleplay.html">
            <span className="tdl-icon">🎯</span>
            <span className="tdl-text"><span className="tdl-name">Salary Negotiation Role-Play</span><span className="tdl-sub">Practice with AI hiring manager</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/transition-timeline-planner.html">
            <span className="tdl-icon">📅</span>
            <span className="tdl-text"><span className="tdl-name">Transition Timeline Planner</span><span className="tdl-sub">Week-by-week ETS action plan</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/veteran-business-funding.html">
            <span className="tdl-icon">💼</span>
            <span className="tdl-text"><span className="tdl-name">Veteran Business Funding</span><span className="tdl-sub">SBA + grants you actually qualify for</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <a className="tools-drawer-link" href="/va-home-loan-analyzer.html">
            <span className="tdl-icon">🏠</span>
            <span className="tdl-text"><span className="tdl-name">VA Home Loan Analyzer</span><span className="tdl-sub">Buy vs rent + funding fee math</span></span>
            <span className="tdl-badge">AI</span>
          </a>
          <div className="tools-drawer-section">Free Tools</div>
          <a className="tools-drawer-link" href="/federal-jobs-search.html">
            <span className="tdl-icon">🏛</span>
            <span className="tdl-text"><span className="tdl-name">Federal Job Search</span><span className="tdl-sub">Live USAJobs filtered listings</span></span>
            <span className="tdl-badge free">Free</span>
          </a>
          <a className="tools-drawer-link" href="/veteran-salary-data.html">
            <span className="tdl-icon">💵</span>
            <span className="tdl-text"><span className="tdl-name">Salary Data by MOS</span><span className="tdl-sub">Crowdsourced real veteran salaries</span></span>
            <span className="tdl-badge free">Free</span>
          </a>
        </div>
        <div className="tools-drawer-footer">
          <a href="https://veterancareerpath.com" target="_blank">← Back to VeteranCareerPath.com</a>
        </div>
      </div>
      {!hasAccess&&<div style={{position:"fixed",bottom:0,left:0,right:0,background:"linear-gradient(135deg,#0d1f3c,#1a3a6b)",color:"#fff",zIndex:99999,boxShadow:"0 -2px 16px rgba(0,0,0,.4)"}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:".5rem 1rem .3rem",flexWrap:"wrap",gap:".4rem"}}>
          <div style={{fontSize:".72rem",color:"#f0c040",fontWeight:700,letterSpacing:".06em",textTransform:"uppercase"}}>🔒 $15/mo · 16 AI Tools</div>
          <button onClick={()=>setShowPaywall(true)} style={{background:"linear-gradient(135deg,#c8960a,#e8aa10)",border:"none",borderRadius:"6px",color:"#0a1628",fontWeight:700,fontSize:".82rem",padding:".4rem 1rem",cursor:"pointer",whiteSpace:"nowrap",flexShrink:0}}>Subscribe — $15/month →</button>
        </div>
        <div style={{display:"flex",overflowX:"auto",gap:".4rem",padding:".2rem 1rem .5rem",scrollbarWidth:"none"}}>
          {[
            {icon:"📄",name:"AI Resume Builder"},
            {icon:"🎯",name:"Career Match"},
            {icon:"✉️",name:"Cover Letter Generator"},
            {icon:"🎤",name:"Interview Prep"},
            {icon:"💼",name:"LinkedIn Optimizer"},
            {icon:"🏛️",name:"Federal Resume"},
            {icon:"💰",name:"Salary Negotiator"},
            {icon:"📋",name:"Job Tracker"}
          ].map(t=>(
            <div key={t.name} style={{display:"flex",alignItems:"center",gap:".25rem",background:"rgba(255,255,255,.08)",border:"1px solid rgba(255,255,255,.12)",borderRadius:"20px",padding:".18rem .6rem",whiteSpace:"nowrap",flexShrink:0}}>
              <span style={{fontSize:".75rem"}}>{t.icon}</span>
              <span style={{fontSize:".68rem",fontWeight:600,color:"#e0eaf8"}}>{t.name}</span>
            </div>
          ))}
        </div>
      </div>}
{/* No trial — $15/month subscription only */}
      {saveToast&&<div className="save-toast">{saveToast}</div>}
      {showClipboardModal&&(
        <div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.55)",zIndex:50000,display:"flex",alignItems:"flex-end",justifyContent:"center",padding:"0"}}
          onClick={e=>e.target===e.currentTarget&&setShowClipboardModal(false)}>
          <div style={{background:"#fff",borderRadius:"16px 16px 0 0",width:"100%",maxWidth:"520px",padding:"1.5rem",boxShadow:"0 -8px 32px rgba(0,0,0,.2)"}}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"1rem"}}>
              <div style={{fontFamily:"'Bebas Neue',sans-serif",fontSize:"1.2rem",letterSpacing:".1em",color:"#1a3a6b"}}>📋 Add Job to Tracker</div>
              <button onClick={()=>setShowClipboardModal(false)} style={{background:"none",border:"none",fontSize:"1.4rem",cursor:"pointer",color:"#8aa0b8"}}>✕</button>
            </div>
            <div style={{fontSize:".82rem",color:"#5a7090",marginBottom:"1rem",padding:".6rem .8rem",background:"#f0f4ff",borderRadius:"8px",border:"1px solid #d0daea"}}>
              💡 We read your clipboard to pre-fill this form. Edit anything that looks wrong.
            </div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:".75rem",marginBottom:".75rem"}}>
              <div className="field" style={{marginBottom:0}}>
                <label>Job Title</label>
                <input placeholder="e.g. Operations Manager" value={clipboardParsed.title}
                  onChange={e=>setClipboardParsed(p=>({...p,title:e.target.value}))}/>
              </div>
              <div className="field" style={{marginBottom:0}}>
                <label>Company</label>
                <input placeholder="e.g. Amazon, VA, Boeing" value={clipboardParsed.company}
                  onChange={e=>setClipboardParsed(p=>({...p,company:e.target.value}))}/>
              </div>
            </div>
            <div className="field" style={{marginBottom:"1rem"}}>
              <label>Job URL (optional)</label>
              <input placeholder="https://..." value={clipboardParsed.link}
                onChange={e=>setClipboardParsed(p=>({...p,link:e.target.value}))}/>
            </div>
            <button className="btn-primary" style={{margin:0}} onClick={()=>{
              if(!clipboardParsed.title&&!clipboardParsed.company){
                alert("Please enter at least a job title or company name.");return;
              }
              const entry = {
                id:Date.now(), title:clipboardParsed.title, company:clipboardParsed.company,
                link:clipboardParsed.link, date:new Date().toISOString().slice(0,10),
                status:"Applied", notes:"", source:"Mobile"
              };
              saveJobs([entry,...jobApps]);
              setShowClipboardModal(false);
              showToast("✓ Job saved to tracker — "+( clipboardParsed.title||clipboardParsed.company));
              setClipboardParsed({title:"",company:"",link:""});
            }}>
              ✓ Save to Job Tracker
            </button>
          </div>
        </div>
      )}
      {tab===4&&retentionTab==="tracker"&&(
        <button
          onClick={openClipboardCapture}
          style={{
            position:"fixed",bottom:"5rem",right:"1.25rem",
            width:"58px",height:"58px",borderRadius:"50%",
            background:"linear-gradient(135deg,#1a3a6b,#1e4a8a)",
            color:"#f0c040",border:"3px solid #f0c040",
            fontSize:"1.5rem",cursor:"pointer",zIndex:9000,
            boxShadow:"0 4px 20px rgba(26,58,107,.4)",
            display:"flex",alignItems:"center",justifyContent:"center",
            transition:"transform .2s,box-shadow .2s"
          }}
          title="Tap to add a job — reads your clipboard automatically"
          onMouseEnter={e=>e.currentTarget.style.transform="scale(1.1)"}
          onMouseLeave={e=>e.currentTarget.style.transform="scale(1)"}
        >
          ➕
        </button>
      )}
    </>
  );
}
    ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));
    hideLoading();
</script>
  <footer style="background:#0d1f3c;color:#a0b8d0;text-align:center;padding:1.5rem 1rem;font-size:.78rem;margin-top:2rem;word-wrap:break-word;">
    <div style="margin-bottom:.6rem;">
      <a href="https://veterancareerpath.com/about.html" target="_blank" style="color:#a0b8d0;text-decoration:none;margin:0 .5rem;">About</a>
      <span style="color:#3a5070;">|</span>
      <a href="https://veterancareerpath.com/privacy-policy.html" target="_blank" style="color:#a0b8d0;text-decoration:none;margin:0 .5rem;">Privacy Policy</a>
      <span style="color:#3a5070;">|</span>
      <a href="https://veterancareerpath.com/terms.html" target="_blank" style="color:#a0b8d0;text-decoration:none;margin:0 .5rem;">Terms of Service</a>
      <span style="color:#3a5070;">|</span>
      <a href="https://veterancareerpath.com/contact.html" style="color:#a0b8d0;text-decoration:none;margin:0 .5rem;">Contact Us</a>
    <div style="color:#3a5070;font-size:.72rem;text-align:center;line-height:1.8;">
      © 2026 Veteran Career Path • Not affiliated with the U.S. Department of Veterans Affairs or any government agency.<br>
      Built by a Veteran, for Veterans. • <a href="https://veterancareerpath.com/privacy-policy.html" style="color:#5a7090;">Privacy Policy</a> • <a href="https://veterancareerpath.com/terms.html" style="color:#5a7090;">Terms of Service</a>
    </div>
<script src="/vcp-rank-insignia.js"></script>
<script src="/vcp-components.js"></script>
<script defer src="/vcp-scout.js"></script>
<script defer src="/vcp-errors.js"></script>
</body>
</html>

Admin Setup

{selectedCareer.title}

💼 {exp.type}

Refine Your Target (optional)

Your Career Matches

Saved Resumes

📝 Saved Cover Letters

✉️ Saved Emails

📊 Saved Score Reports

Resume Score Report

Overall Score: "+r.score+"/100 — "+r.label+"

Summary

Quick Links

Account & Subscription

🧭 Saved Assessment Results

⭐ Saved Career Paths

Personal Information

Military Service History

🔐 Security Clearance