{/* Header */}

{titleLbl}

{applicant.name} · {applicant.rating}

{/* ── Calendar ── */}

{dateLbl}

{/* Month navigation */}

{(monthNamesFull[lang]||monthNamesFull.en)[calMonth]} {calYear}

{/* Weekday headers */}

{(weekdayLabels[lang]||weekdayLabels.en).map((d,i) => (

{d}

))}

{/* Day cells */}

{cells.map((day, i) => { if (!day) return

; const isPast = (calYear < NOW_YEAR) || (calYear === NOW_YEAR && calMonth < NOW_MONTH) || (calYear === NOW_YEAR && calMonth === NOW_MONTH && day < NOW_DAY); const isSel = isSelInView && selDate.day === day; const isToday = calYear === NOW_YEAR && calMonth === NOW_MONTH && day === NOW_DAY; return ( ); })}

{/* ── Time slots ── */}

{timeLbl}

{slots.map(slot => { const on = selTime === slot; return ( ); })}

{/* ── Summary preview ── */}

{tr(dayDisplay, lang)} · {selTime}

{noteLbl}

{/* ── Confirm button ── */}

); } // ── Applicant Profile Preview Sheet ─────────────────────────── function ApplicantProfileSheet({ open, onClose, applicant, lang='en' }) { const [reviewLang, setReviewLang] = React.useState(lang); React.useEffect(() => { if (open) setReviewLang(lang); }, [open, lang]); if (!applicant) return null; const badgeCfg = (jobs) => { if (jobs >= 100) return { label:'EXPERT', bg:'oklch(0.93 0.06 80)', color:'oklch(0.40 0.18 80)' }; if (jobs >= 20) return { label:'RELIABLE', bg:'var(--pg-aqua-100)', color:'var(--pg-aqua-700)' }; return { label:'ROOKIE', bg:'var(--pg-blue-100)', color:'var(--pg-blue-700)' }; }; const badge = badgeCfg(applicant.jobs); const mockReviews = [ { from:'Carlos M.', rating:Math.min(5, Math.round(applicant.rating)), when:{en:'2 weeks ago', pt:'2 semanas atrás', es:'hace 2 semanas'}, text:{en:'Excellent work, arrived on time and left everything spotless.', pt:'Excelente trabalho, chegou no horário e deixou tudo impecável.', es:'Excelente trabajo, llegó a tiempo y dejó todo impecable.'} }, { from:'Ana R.', rating:Math.max(4, Math.round(applicant.rating) - (applicant.rating < 4.8 ? 1 : 0)), when:{en:'1 month ago', pt:'1 mês atrás', es:'hace 1 mes'}, text:{en:'Very communicative throughout the whole coverage.', pt:'Muito comunicativo durante toda a cobertura.', es:'Muy comunicativo durante toda la cobertura.'} }, ...(applicant.jobs >= 30 ? [{ from:'Pedro S.', rating:5, when:{en:'2 months ago', pt:'2 meses atrás', es:'hace 2 meses'}, text:{en:'Already hired 3 times. Always reliable and professional.', pt:'Já contratei 3 vezes. Sempre confiável e profissional.', es:'Ya lo contraté 3 veces. Siempre confiable y profesional.'} }] : []), ]; const LANGS = ['en','pt','es']; const LANG_LABELS = {en:'EN', pt:'PT', es:'ES'}; // ── Localized labels ────────────────────────── const sectionLbl = (en, pt, es) => lang==='pt' ? pt : lang==='es' ? es : en; const CarIcon = (c='var(--pg-ink-500)') => ( ); const LicenseIcon = (c='var(--pg-ink-500)') => ( ); const ToolIcon = (c='var(--pg-ink-500)') => ( ); const BriefcaseIcon = (c='var(--pg-ink-500)') => Icon.briefcase(13, c); const hasProfile = applicant.age || applicant.region || applicant.hasCar !== undefined; const hasExp = applicant.experience && applicant.experience.length > 0; // Chip helper for yes/no fields const YesNoChip = ({yes, yesLabel, noLabel, icon}) => ( {icon(yes ? 'var(--pg-aqua-700)' : 'var(--pg-ink-400)')} {yes ? yesLabel : noLabel} ); return (

{/* Header */}

{applicant.name}

{badge.label} {applicant.rating}

{/* Stats row */}

{[ { val:applicant.jobs, label:sectionLbl('Jobs done','Jobs feitos','Jobs hechos') }, { val:`${applicant.rating}★`, label:sectionLbl('Rating','Avaliação','Calificación') }, { val:applicant.jobs>=100?'3+yr':applicant.jobs>=30?'1+yr':'<1yr', label:sectionLbl('On platform','Na plataforma','En plataforma') }, ].map((s,i) => (

{s.val}

{s.label.toUpperCase()}

))}

{/* ── PROFILE DETAILS ── */} {hasProfile && (

{sectionLbl('PROFILE','PERFIL','PERFIL')}

{/* Age */} {applicant.age && ( {applicant.age} {sectionLbl('yrs','anos','años')} )} {/* Region */} {applicant.region && ( {Icon.pin(12,'var(--pg-ink-500)')} {applicant.region} )} {/* Car */} {applicant.hasCar !== undefined && ( )} {/* License */} {applicant.hasLicense !== undefined && ( )}

)} {/* ── EQUIPMENT ── */} {applicant.hasEquipment !== undefined && (

{sectionLbl('EQUIPMENT','EQUIPAMENTOS','EQUIPOS')}

{applicant.hasEquipment && applicant.equipment ? (

{(tr(applicant.equipment, lang) || []).map((eq, i) => ( {ToolIcon('var(--pg-blue-600)')} {eq} ))}

) : ( {ToolIcon()} {sectionLbl('No equipment','Sem equipamentos','Sin equipos')} )}

)} {/* ── WORK EXPERIENCE ── */} {hasExp && (

{sectionLbl('WORK EXPERIENCE','EXPERIÊNCIA','EXPERIENCIA')}

{applicant.experience.map((exp, i) => (

{tr(exp.role, lang)}

{BriefcaseIcon('var(--pg-ink-400)')} {exp.company}

{tr(exp.duration, lang)}

{tr(exp.desc, lang)}

))}

)} {/* ── NOTE (if any) ── */} {applicant.note && (

{sectionLbl('NOTE FROM APPLICANT','NOTA DO CANDIDATO','NOTA DEL CANDIDATO')}

"{tr(applicant.note, lang)}"

)} {/* ── REVIEWS ── */}

{sectionLbl('REVIEWS','AVALIAÇÕES','RESEÑAS')} ({mockReviews.length})

{LANGS.map(l => ( ))}

{mockReviews.map((r,i) => (

{r.from}

{r.when[reviewLang]}

"{r.text[reviewLang]}"

))}

); } // ── Identity Verification ───────────────────────────────────── function VerificationSheet({ open, onClose, lang='en' }) { const [done, setDone] = React.useState([]); const steps = [ { id:'id', icon: Icon.user, title: {en:'Government ID', pt:'Documento Oficial', es:'ID Oficial'}, sub: {en:'Passport, driver\'s license or state ID', pt:'Passaporte, CNH ou RG', es:'Pasaporte, licencia o ID'}, time: '~2 min' }, { id:'selfie', icon: Icon.user, title: {en:'Selfie verification', pt:'Selfie de verificação', es:'Selfie de verificación'}, sub: {en:'Live photo to match your ID', pt:'Foto ao vivo para confirmar documento', es:'Foto en vivo para confirmar tu ID'}, time: '~1 min' }, { id:'bg', icon: Icon.shield, title: {en:'Background check', pt:'Verificação de antecedentes', es:'Verificación de antecedentes'}, sub: {en:'Instant results via our partner', pt:'Resultado imediato pelo nosso parceiro', es:'Resultado inmediato por nuestro socio'}, time: '~5 min' }, ]; const headLbl = lang==='pt' ? 'Verificação de identidade' : lang==='es' ? 'Verificación de identidad' : 'Identity Verification'; const descLbl = lang==='pt' ? 'Piscineiros verificados recebem 40% mais contatos e aparecem primeiro nos resultados.' : lang==='es' ? 'Los técnicos verificados reciben 40% más contactos y aparecen primero en los resultados.' : 'Verified pool guys get 40% more contacts and appear first in search results.'; const allDone = done.length === steps.length; const score = Math.round(60 + (done.length / steps.length) * 40); const scoreWid = `${score}%`; const trustLbl = lang==='pt' ? 'PONTUAÇÃO DE CONFIANÇA' : lang==='es' ? 'PUNTUACIÓN DE CONFIANZA' : 'TRUST SCORE'; const leftLbl = (n) => lang==='pt' ? `${n} etapa${n!==1?'s':''} restante${n!==1?'s':''}` : lang==='es' ? `${n} paso${n!==1?'s':''} más` : `${n} step${n!==1?'s':''} left for max score`; const verifiedLbl = lang==='pt' ? 'Verificado' : lang==='es' ? 'Verificado' : 'Verified'; const doneLbl = lang==='pt' ? 'Conta verificada!' : lang==='es' ? '¡Cuenta verificada!' : 'Account verified!'; const doneSubLbl = lang==='pt' ? 'Seu perfil aparece como verificado para outros usuários.' : lang==='es' ? 'Tu perfil aparece como verificado para otros.' : 'Your profile appears as verified to other users.'; return (

{/* Header */}

{headLbl}

{allDone ? (

{Icon.shield(22,'var(--pg-aqua-700)')}

{doneLbl}

{doneSubLbl}

) : (

{descLbl}

)} {/* Steps */}

{steps.map((step, idx) => { const isDone = done.includes(step.id); const prevDone = idx === 0 || done.includes(steps[idx-1].id); const available = prevDone && !isDone; return ( ); })}

{/* Trust score card */}

{trustLbl}

{score}

/100

{leftLbl(steps.length - done.length)}

); } // ── Push Notifications permission ───────────────────────────── function PushNotifSheet({ open, onClose, lang='en', onEnabled }) { const [state, setState] = React.useState('idle'); // idle | requesting | enabled | denied const PUSH_LBL_MAP = { en: { title:'Push Notifications', sub:'Stay ahead of the competition — get jobs the moment they\'re posted.', types:['New Quick Pool in your region','Application accepted/rejected','New message from a poster','Route & vacation updates'], allow:'Enable Notifications', later:'Maybe later', enabledTitle:'Notifications enabled!', enabledSub:'You\'ll be notified of new jobs instantly.', }, pt: { title:'Notificacoes Push', sub:'Fique a frente da concorrencia — receba trabalhos no momento em que forem publicados.', types:['Nova Piscina Rapida na sua regiao','Candidatura aceita/rejeitada','Nova mensagem de um anunciante','Atualizacoes de rota e ferias'], allow:'Ativar Notificacoes', later:'Talvez mais tarde', enabledTitle:'Notificacoes ativadas!', enabledSub:'Voce sera notificado de novos trabalhos instantaneamente.', }, es: { title:'Notificaciones Push', sub:'Adelantate a la competencia — recibe trabajos en el momento en que se publican.', types:['Nueva Piscina Rapida en tu region','Postulacion aceptada/rechazada','Nuevo mensaje de un anunciante','Actualizaciones de ruta y vacaciones'], allow:'Activar Notificaciones', later:'Quizas despues', enabledTitle:'Notificaciones activadas!', enabledSub:'Recibiras notificaciones de nuevos trabajos al instante.', }, }; const lbl = PUSH_LBL_MAP[lang] || PUSH_LBL_MAP.en; const handleAllow = () => { setState('requesting'); setTimeout(() => { setState('enabled'); if (onEnabled) onEnabled(); }, 1200); }; return (

{state === 'enabled' ? (

{Icon.check(28,'var(--pg-aqua-700)')}

{lbl.enabledTitle}

{lbl.enabledSub}

) : ( <>

{Icon.bell(24,'#fff')}

{lbl.title}

{lbl.sub}

{lbl.types.map((type, i) => (

{Icon.bolt(15,'var(--pg-blue-700)')}

{type}

))}

)}

); } // ── Notifications ───────────────────────────────────────────── function NotificationsSheet({ open, onClose, lang='en' }) { const t = STRINGS[lang]; const whenMap = { justNow:t.justNow, min8:'8m', hours2:'2h', yesterday:t.yesterday }; return (

{t.notifsTitle}

{NOTIFICATIONS.map(n => { const title = n.kind==='message' ? `${n.who} ${t[n.titleKey]}` : t[n.titleKey]; const body = n.kind==='message' ? tr(n.quote, lang) : n.kind==='apply' ? `${n.who} ${t[n.bodyKey]}` : n.kind==='rating' ? `${n.who} ${t[n.bodyKey]}` : t[n.bodyKey]; return (

{n.kind==='job' && Icon.bolt(18,'#fff')} {n.kind==='message' && Icon.msg(16,'#fff')} {n.kind==='apply' && Icon.check(16,'#fff')} {n.kind==='rating' && Icon.star(15,'#fff',true)}

{title}

{whenMap[n.whenKey]}

{body}

{n.unread && }

); })}

); } // ── Paywall ─────────────────────────────────────────────────── function PaywallSheet({ open, onClose, setUser, lang='en' }) { const t = STRINGS[lang]; const [tier, setTier] = React.useState('premium'); const features = [ { f:t.payF1, free:false, prem:true, pro:true }, { f:t.payF2, free:false, prem:true, pro:true }, { f:t.payF3, free:false, prem:false, pro:true }, { f:t.payF4, free:false, prem:true, pro:true }, { f:t.payF5, free:false, prem:false, pro:true }, { f:t.payF6, free:false, prem:false, pro:true }, ]; const month = lang==='pt'?'/mês':lang==='es'?'/mes':'/month'; return (

{Icon.crown(28,'#fff')}

{t.payTitle}

{t.paySub}

{tier==='pro'?'POOLGUY PRO':t.premium.toUpperCase()}

${tier==='pro'?'19.99':'9.99'} {month}

{tier==='pro'?t.paySave:t.payTrial}

{tier==='pro' && {t.payBest}}

{features.map((f,i)=>{ const has = tier==='pro'?f.pro:f.prem; return (

{has?Icon.check(13,'var(--pg-aqua-700)'):Icon.x(11,'var(--pg-ink-400)')}

{f.f}

); })}

{t.cancelAnytime}
{t.restore}

); } // ── Post Menu ───────────────────────────────────────────────── function PostMenuSheet({ open, onClose, onPickQuickPool, lang='en' }) { const t = STRINGS[lang]; const items = [ { ic:Icon.bolt, title:t.pmQuickPool, sub:t.pmQuickPoolSub, kind:'aqua', onClick:onPickQuickPool }, { ic:Icon.cart, title:t.pmSellEq, sub:t.pmSellEqSub, kind:'blue' }, { ic:Icon.cart, title:t.pmRentEq, sub:t.pmRentEqSub, kind:'blue' }, { ic:Icon.pin, title:t.pmSellRoute, sub:t.pmSellRouteSub,kind:'blue' }, { ic:Icon.cal, title:t.pmVacCover, sub:t.pmVacCoverSub, kind:'blue' }, { ic:Icon.briefcase, title:t.pmHireTech, sub:t.pmHireTechSub, kind:'blue' }, ]; return (

{t.whatPost}

{items.map((it,i)=>( ))}

); } // ── Toast ───────────────────────────────────────────────────── function Toast({ message, kind='success' }) { if (!message) return null; return (

{kind==='success' && Icon.check(18,'#fff')}

{message}

); } // ── Wallet Sheet ────────────────────────────────────────────── function WalletSheet({ open, onClose, lang='en' }) { const [tab, setTab] = React.useState('pending'); const d = WALLET_DATA; const walletLbl = lang==='pt' ? 'Carteira' : lang==='es' ? 'Cartera' : 'Wallet'; const weekLbl = lang==='pt' ? 'Esta semana' : lang==='es' ? 'Esta semana' : 'This week'; const monthLbl = lang==='pt' ? 'Este mês' : lang==='es' ? 'Este mes' : 'This month'; const pendingLbl = lang==='pt' ? 'A receber' : lang==='es' ? 'Por cobrar' : 'Pending'; const historyLbl = lang==='pt' ? 'Histórico' : lang==='es' ? 'Historial' : 'History'; const withdrawLbl = lang==='pt' ? 'Sacar fundos' : lang==='es' ? 'Retirar fondos' : 'Withdraw funds'; const balanceLbl = lang==='pt' ? 'Saldo disponível' : lang==='es' ? 'Saldo disponible' : 'Available balance'; const minLbl = lang==='pt' ? 'Mín. $50 para sacar' : lang==='es' ? 'Mín. $50 para retirar' : 'Min. $50 to withdraw'; const awaitLbl = lang==='pt' ? 'Aguardando liberação' : lang==='es' ? 'Esperando liberación' : 'Awaiting release'; const dayKeys = lang==='pt' ? ['D','S','T','Q','Q','S','S'] : lang==='es' ? ['D','L','M','X','J','V','S'] : ['S','M','T','W','T','F','S']; const dayAmts = [0, 55, 45, 110, 0, 85, 45]; const maxAmt = Math.max(...dayAmts); const ArrowUp = (s=16,c='currentColor') => ( ); const ArrowDown = (s=16,c='currentColor') => ( ); return (

{walletLbl}

{/* Balance hero */}

{balanceLbl.toUpperCase()}

${d.balance}

{weekLbl.toUpperCase()}

${d.weekEarnings}

{monthLbl.toUpperCase()}

${d.monthEarnings}

{/* Sparkline */}

{dayAmts.map((amt,i) => (

0?'rgba(255,255,255,0.65)':'rgba(255,255,255,0.18)'}}/>

{dayKeys[i]}

))}

{/* Withdraw CTA */}

{minLbl}

{/* Tabs */}

{tab==='pending' && (

{d.pending.map(p => (

{tr(p.title, lang)}

{p.client} · {tr(p.date, lang)}

${p.amount}

{awaitLbl}

))}

)} {tab==='history' && (

{d.history.map(h => (

{h.type==='credit' ? ArrowUp(16,'var(--pg-aqua-700)') : ArrowDown(16,'oklch(0.45 0.18 20)')}

{tr(h.title, lang)}

{tr(h.date, lang)}

{h.type==='credit'?'+':'-'}${h.amount}

))}

)}

); } // ── Work Lifecycle Sheet ────────────────────────────────────── function WorkLifecycleSheet({ open, onClose, app, lang='en', onReview }) { const stageOf = (s) => ({ paid:3, completed:2, in_progress:1 }[s] ?? 0); const [stage, setStage] = React.useState(0); const [photo, setPhoto] = React.useState(null); const [advancing, setAdvancing] = React.useState(false); React.useEffect(() => { if (open && app) { setStage(stageOf(app.status)); setPhoto(null); setAdvancing(false); } }, [open, app]); if (!app) return null; const stageNames = { en: ['Hired', 'In Progress', 'Completed', 'Paid'], pt: ['Contratado', 'Em Andamento', 'Concluído', 'Pago'], es: ['Contratado', 'En Progreso', 'Completado', 'Pagado'], }; const sn = stageNames[lang] || stageNames.en; const startLbl = lang==='pt' ? 'Iniciar trabalho' : lang==='es' ? 'Iniciar trabajo' : 'Start job'; const photoLbl = lang==='pt' ? 'Tirar foto de conclusão' : lang==='es' ? 'Tomar foto final' : 'Take completion photo'; const markDoneLbl = lang==='pt' ? 'Marcar como concluído' : lang==='es' ? 'Marcar completado' : 'Mark as complete'; const awaitPayLbl = lang==='pt' ? 'Aguardando liberação do pagamento…' : lang==='es' ? 'Esperando liberación del pago…' : 'Awaiting payment release…'; const paidLbl = lang==='pt' ? 'Pagamento recebido!' : lang==='es' ? '¡Pago recibido!' : 'Payment received!'; const reviewLbl = lang==='pt' ? 'Avaliar o contratante' : lang==='es' ? 'Calificar al contratante' : 'Rate the client'; const detailLbl = lang==='pt' ? 'Detalhes do trabalho' : lang==='es' ? 'Detalle del trabajo' : 'Job details'; const simLbl = lang==='pt' ? 'Toque para simular foto' : lang==='es' ? 'Toca para simular foto' : 'Tap to simulate photo'; const closeLbl = lang==='pt' ? 'Fechar' : lang==='es' ? 'Cerrar' : 'Close'; const CameraIcon = (s=20,c='currentColor') => ( ); const DollarIcon = (s=20,c='currentColor') => ( ); const handleStart = () => setStage(1); const handleTakePhoto = () => { const lock = (Date.now() % 9) + 1; setPhoto(`https://loremflickr.com/400/280/swimming,pool,service?lock=${lock}`); }; const handleMarkDone = () => { setAdvancing(true); setTimeout(() => setStage(2), 400); setTimeout(() => { setStage(3); setAdvancing(false); }, 2000); }; const amtStr = app.price ? `$${app.price}` : (lang==='pt'?'Negociável':lang==='es'?'Negociable':'Negotiable'); // stepper visual const stepIcons = [Icon.check, Icon.bolt, CameraIcon, DollarIcon]; const stepBg = (i) => { if (stage > i) return 'var(--pg-aqua-500)'; if (stage === i) return 'var(--pg-blue-500)'; return 'var(--pg-ink-100)'; }; const stepIconColor = (i) => (stage >= i ? '#fff' : 'var(--pg-ink-400)'); const connBg = (i) => stage > i ? 'var(--pg-aqua-400)' : 'var(--pg-ink-200)'; return (

{/* Header */}

{detailLbl}

{/* Job summary card */}

{tr(app.title, lang)}

{Icon.pin(11,'var(--pg-ink-400)')} {app.loc} · {app.poster}

{amtStr}

{/* Progress stepper */}

{[0,1,2,3].map(i => (

{stepIcons[i](16, stepIconColor(i))}

=i?'var(--pg-ink-900)':'var(--pg-ink-400)', lineHeight:1.2}}>{sn[i]}

{i < 3 && (

)} ))}

{/* ── Stage 0: Hired ── */} {stage === 0 && (

{Icon.check(18,'#fff')}

{lang==='pt'?'Você foi contratado!':lang==='es'?'¡Fuiste contratado!':'You\'re hired!'}

{lang==='pt'?'Confirme o início quando chegar no local. O pagamento será liberado após a conclusão.':lang==='es'?'Confirma el inicio al llegar al lugar. El pago se liberará al completar.':'Confirm start when you arrive on-site. Payment will be released upon completion.'}

)} {/* ── Stage 1: In Progress ── */} {stage === 1 && (

{Icon.bolt(18,'var(--pg-blue-600)')}

{lang==='pt'?'Tire uma foto ao concluir todos os serviços.':lang==='es'?'Toma una foto al finalizar los servicios.':'Take a photo when all services are complete.'}

{/* Photo area */}

{photo ? (

{Icon.check(12,'#fff')} {lang==='pt'?'Foto salva':lang==='es'?'Foto guardada':'Photo saved'}

) : (

{CameraIcon(34,'var(--pg-ink-400)')}

{photoLbl}

{simLbl}

)}

)} {/* ── Stage 2: Completed — awaiting payment ── */} {stage === 2 && (

{DollarIcon(22,'oklch(0.45 0.18 80)')}

{awaitPayLbl}

{lang==='pt'?'O cliente está liberando o pagamento em escrow. Isso leva alguns segundos.':lang==='es'?'El cliente está liberando el pago en escrow. Tarda unos segundos.':'The client is releasing the escrowed payment. This takes a few seconds.'}

)} {/* ── Stage 3: Paid ── */} {stage === 3 && (

{DollarIcon(36,'var(--pg-aqua-700)')}

{paidLbl}

{amtStr}

{lang==='pt'?'Valor adicionado à sua carteira PoolGuyPro.':lang==='es'?'Importe añadido a tu cartera PoolGuyPro.':'Amount added to your PoolGuyPro wallet.'}

)}

); } // ── Review Sheet ────────────────────────────────────────────── function ReviewSheet({ open, onClose, app, lang='en', onSubmitDone }) { const [rating, setRating] = React.useState(0); const [hover, setHover] = React.useState(0); const [comment, setComment] = React.useState(''); const [submitted, setSubmitted] = React.useState(false); React.useEffect(() => { if (open) { setRating(0); setHover(0); setComment(''); setSubmitted(false); } }, [open]); const titleLbl = lang==='pt' ? 'Avaliar o contratante' : lang==='es' ? 'Calificar al contratante' : 'Rate the client'; const reviewPh = lang==='pt' ? 'Compartilhe sua experiência com este trabalho…' : lang==='es' ? 'Comparte tu experiencia con este trabajo…' : 'Share your experience with this job…'; const submitLbl = lang==='pt' ? 'Enviar avaliação' : lang==='es' ? 'Enviar reseña' : 'Submit review'; const sentLbl = lang==='pt' ? 'Avaliação enviada!' : lang==='es' ? '¡Reseña enviada!' : 'Review submitted!'; const sentSubLbl= lang==='pt' ? 'Obrigado! Sua avaliação ajuda a comunidade de pool guys.' : lang==='es' ? '¡Gracias! Tu reseña ayuda a la comunidad.' : 'Thanks! Your review helps the pool guy community.'; const skipLbl = lang==='pt' ? 'Pular por agora' : lang==='es' ? 'Omitir por ahora' : 'Skip for now'; const starLabels = { en: ['Terrible','Bad','OK','Good','Excellent'], pt: ['Péssimo','Ruim','Ok','Bom','Excelente'], es: ['Pésimo','Malo','Ok','Bueno','Excelente'], }; const sLabels = (starLabels[lang] || starLabels.en); const handleSubmit = () => { setSubmitted(true); setTimeout(() => { if(onSubmitDone) onSubmitDone(); onClose(); }, 1800); }; const displayed = hover || rating; return (

{submitted ? (

{Icon.check(30,'var(--pg-aqua-700)')}

{sentLbl}

{sentSubLbl}

) : ( <>

{titleLbl}

{app && (

{app.poster}

{tr(app.title, lang)}

)} {/* Star picker */}

{[1,2,3,4,5].map(s => ( ))}

{displayed > 0 && (

{sLabels[displayed-1]}

)}

setComment(e.target.value)}
              placeholder={reviewPh}
              rows={3}
              style={{
                width:'100%', borderRadius:12, border:'1px solid var(--pg-ink-200)',
                padding:'12px 14px', fontSize:14, fontFamily:'inherit',
                resize:'none', outline:'none', background:'var(--pg-ink-50)',
                boxSizing:'border-box', color:'var(--pg-ink-900)', lineHeight:1.5,
              }}
            />

<button onClick={handleSubmit}
              disabled={rating===0}
              className="pg-btn pg-btn-primary"
              style={{width:'100%', height:52, fontSize:16, marginTop:14, opacity:rating>0?1:0.45}}>
              {Icon.star(18,'#fff',true)} {submitLbl}
            </button>
            <button onClick={onClose} style={{width:'100%', padding:'10px', border:'none', background:'transparent', color:'var(--pg-ink-500)', fontSize:13, cursor:'pointer', fontFamily:'inherit'}}>
              {skipLbl}
            </button>
          </>
        )}
      </div>
    </Sheet>
  );
}

// ── Apply to Job Sheet ────────────────────────────────────────
function ApplyJobSheet({ open, onClose, job, user, lang='en', onSubmit, onEditProfile }) {
  const [note,      setNote]      = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);

React.useEffect(() => {
    if (open) { setNote(''); setSubmitted(false); }
  }, [open]);

if (!job) return null;

const s = (en, pt, es) => lang==='pt' ? pt : lang==='es' ? es : en;

const handleSubmit = () => {
    setSubmitted(true);
    setTimeout(() => onSubmit && onSubmit(), 2000);
  };

// ── Icon helpers ──
  const CarIcon = (c='var(--pg-ink-500)') => (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 17H3a2 2 0 01-2-2V9a2 2 0 012-2h1l3-4h9l3 4h1a2 2 0 012 2v6a2 2 0 01-2 2h-2"/>
      <circle cx="7.5" cy="17.5" r="1.5"/><circle cx="16.5" cy="17.5" r="1.5"/>
    </svg>
  );
  const LicenseIcon = (c='var(--pg-ink-500)') => (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="6" width="20" height="13" rx="2"/>
      <path d="M7 10h4M7 14h6M15 10h2v4h-2z"/>
    </svg>
  );
  const ToolIcon = (c='var(--pg-ink-500)') => (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 7a4 4 0 1 0-5 5l-6 6 3 3 6-6a4 4 0 0 0 5-5l-3 3-3-3z"/>
    </svg>
  );

const Chip = ({icon, label, green}) => (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:5,
      fontSize:12, fontWeight:600, padding:'5px 10px', borderRadius:999,
      background: green ? 'var(--pg-aqua-100)' : 'var(--pg-ink-100)',
      color:      green ? 'var(--pg-aqua-800)' : 'var(--pg-ink-600)',
    }}>
      {icon} {label}
    </span>
  );

const equipment = (tr(user.equipment, lang) || []);
  const hasExp    = user.experience && user.experience.length > 0;

// Success screen
  if (submitted) {
    return (
      <Sheet open={open} onClose={onClose} height="auto">
        <div style={{padding:'20px 20px 50px', textAlign:'center'}}>
          <div style={{
            width:72, height:72, borderRadius:'50%',
            background:'var(--pg-aqua-100)', margin:'0 auto 16px',
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            {Icon.check(32,'var(--pg-aqua-700)')}
          </div>
          <div style={{fontSize:22, fontWeight:700, letterSpacing:'-0.02em', marginBottom:8}}>
            {s('Application sent!','Candidatura enviada!','¡Postulación enviada!')}
          </div>
          <div style={{fontSize:14, color:'var(--pg-ink-500)', lineHeight:1.55, maxWidth:260, margin:'0 auto'}}>
            {s(`${job.company} will review your profile and get in touch.`,
               `${job.company} vai analisar seu perfil e entrar em contato.`,
               `${job.company} revisará tu perfil y se pondrá en contacto.`)}
          </div>
        </div>
      </Sheet>
    );
  }

return (
    <Sheet open={open} onClose={onClose} height="92%">
      <div style={{padding:'6px 18px 44px'}}>

{/* Header */}
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18}}>
          <h2 style={{margin:0, fontSize:18, fontWeight:700, letterSpacing:'-0.01em'}}>
            {s('Apply for job','Candidatar-se','Postularse')}
          </h2>
          <button onClick={onClose} style={{border:'none', background:'var(--pg-ink-100)', width:30, height:30, borderRadius:'50%', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center'}}>
            {Icon.x(16,'var(--pg-ink-700)')}
          </button>
        </div>

{/* Job card */}
        <div style={{
          padding:'13px 14px', borderRadius:14, marginBottom:22,
          background:'var(--pg-blue-900)',
          display:'flex', alignItems:'center', gap:12,
        }}>
          <div style={{
            width:44, height:44, borderRadius:12, flexShrink:0,
            background:'rgba(255,255,255,0.12)',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontWeight:800, fontSize:18, color:'#fff',
            fontFamily:'var(--pg-font-display)',
          }}>{job.company[0]}</div>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontSize:15, fontWeight:700, color:'#fff', letterSpacing:'-0.01em', marginBottom:2}}>{job.company}</div>
            <div style={{fontSize:12.5, color:'rgba(255,255,255,0.65)'}}>{tr(job.role, lang)} · {job.loc}</div>
          </div>
          <div style={{textAlign:'right', flexShrink:0}}>
            <div style={{fontFamily:'var(--pg-font-display)', fontSize:15, fontWeight:700,
              color:'oklch(0.88 0.16 90)', letterSpacing:'-0.01em'}}>{tr(job.pay, lang)}</div>
            <div style={{fontSize:11, color:'rgba(255,255,255,0.45)', marginTop:1}}>{tr(job.type, lang)}</div>
          </div>
        </div>

{/* Profile summary — auto-filled */}
        <div style={{marginBottom:20}}>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10}}>
            <div style={{fontSize:11, fontWeight:700, color:'var(--pg-ink-400)', letterSpacing:'0.06em'}}>
              {s('YOUR PROFILE (auto-filled)','SEU PERFIL (preenchido automaticamente)','TU PERFIL (llenado automáticamente)')}
            </div>
            <span onClick={onEditProfile} style={{fontSize:11, color:'var(--pg-blue-500)', fontWeight:600, cursor:'pointer'}}>
              {s('Edit profile','Editar perfil','Editar perfil')} →
            </span>
          </div>

{/* Name */}
          <div style={{
            display:'flex', alignItems:'center', gap:10,
            padding:'11px 14px', borderRadius:12,
            background:'var(--pg-blue-50)', border:'0.5px solid var(--pg-blue-100)',
            marginBottom:10,
          }}>
            <Avatar name={user.name} size={38}/>
            <div>
              <div style={{fontSize:14, fontWeight:700, color:'var(--pg-ink-900)'}}>{user.name}</div>
              <div style={{display:'flex', alignItems:'center', gap:4, marginTop:2}}>
                <Stars rating={user.rating} size={10}/>
                <span style={{fontSize:11.5, color:'var(--pg-ink-500)', fontWeight:600}}>{user.rating} · {user.reviews} {s('reviews','avaliações','reseñas')}</span>
              </div>
            </div>
          </div>

{/* Basic info chips */}
          <div style={{display:'flex', flexWrap:'wrap', gap:6, marginBottom:10}}>
            {user.age && (
              <Chip icon={
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--pg-ink-500)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="8" r="5"/><path d="M3 21v-1a9 9 0 0118 0v1"/>
                </svg>
              } label={`${user.age} ${s('yrs','anos','años')}`}/>
            )}
            {user.region && (
              <Chip icon={Icon.pin(12,'var(--pg-ink-500)')} label={user.region}/>
            )}
            <Chip
              icon={CarIcon(user.hasCar ? 'var(--pg-aqua-700)' : 'var(--pg-ink-400)')}
              label={user.hasCar ? s('Own vehicle','Veículo próprio','Vehículo propio') : s('No vehicle','Sem veículo','Sin vehículo')}
              green={user.hasCar}/>
            <Chip
              icon={LicenseIcon(user.hasLicense ? 'var(--pg-aqua-700)' : 'var(--pg-ink-400)')}
              label={user.hasLicense ? s("Valid driver's license",'CNH válida','Licencia válida') : s('No license','Sem CNH','Sin licencia')}
              green={user.hasLicense}/>
          </div>

{/* Equipment */}
          {equipment.length > 0 && (
            <div style={{marginBottom:10}}>
              <div style={{fontSize:10.5, fontWeight:700, color:'var(--pg-ink-400)', letterSpacing:'0.06em', marginBottom:6}}>
                {s('EQUIPMENT','EQUIPAMENTOS','EQUIPOS')}
              </div>
              <div style={{display:'flex', flexWrap:'wrap', gap:5}}>
                {equipment.map((eq,i) => (
                  <span key={i} style={{
                    display:'inline-flex', alignItems:'center', gap:4,
                    fontSize:11.5, fontWeight:600, padding:'4px 9px', borderRadius:999,
                    background:'var(--pg-blue-50)', border:'0.5px solid var(--pg-blue-200)',
                    color:'var(--pg-blue-800)',
                  }}>
                    {ToolIcon('var(--pg-blue-600)')} {eq}
                  </span>
                ))}
              </div>
            </div>
          )}

{/* Experience */}
          {hasExp && (
            <div>
              <div style={{fontSize:10.5, fontWeight:700, color:'var(--pg-ink-400)', letterSpacing:'0.06em', marginBottom:6}}>
                {s('WORK EXPERIENCE','EXPERIÊNCIA','EXPERIENCIA')}
              </div>
              <div style={{display:'flex', flexDirection:'column', gap:7}}>
                {user.experience.map((exp, i) => (
                  <div key={i} style={{
                    padding:'10px 12px', borderRadius:10,
                    background:'var(--pg-ink-50)', border:'0.5px solid var(--pg-ink-200)',
                    borderLeft:'3px solid var(--pg-blue-400)',
                  }}>
                    <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:8, marginBottom:3}}>
                      <div>
                        <div style={{fontSize:13, fontWeight:700, color:'var(--pg-ink-900)'}}>{tr(exp.role, lang)}</div>
                        <div style={{fontSize:11.5, color:'var(--pg-ink-500)', marginTop:1}}>{exp.company}</div>
                      </div>
                      <span style={{fontSize:11, fontWeight:700, color:'var(--pg-blue-600)',
                        background:'var(--pg-blue-50)', padding:'2px 7px', borderRadius:5, flexShrink:0}}>
                        {tr(exp.duration, lang)}
                      </span>
                    </div>
                    <p style={{margin:0, fontSize:11.5, color:'var(--pg-ink-600)', lineHeight:1.45}}>
                      {tr(exp.desc, lang)}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

{/* Optional note */}
        <div style={{marginBottom:22}}>
          <div style={{fontSize:11, fontWeight:700, color:'var(--pg-ink-400)', letterSpacing:'0.06em', marginBottom:8}}>
            {s('MESSAGE TO EMPLOYER (optional)','MENSAGEM PARA O EMPREGADOR (opcional)','MENSAJE AL EMPLEADOR (opcional)')}
          </div>
          <textarea
            value={note}
            onChange={e=>setNote(e.target.value)}
            placeholder={s(
              'Tell them why you\'re a great fit, your availability, or anything else relevant…',
              'Diga por que você é o candidato ideal, sua disponibilidade ou qualquer outro detalhe relevante…',
              'Cuéntales por qué eres ideal para el puesto, tu disponibilidad u otros detalles relevantes…'
            )}
            rows={3}
            style={{
              width:'100%', boxSizing:'border-box', padding:'12px 14px',
              borderRadius:12, border:'1px solid var(--pg-ink-200)',
              background:'var(--pg-ink-50)', fontSize:13.5, fontFamily:'inherit',
              color:'var(--pg-ink-900)', lineHeight:1.5,
              resize:'none', outline:'none',
            }}
          />
        </div>

{/* Submit */}
        <button onClick={handleSubmit} className="pg-btn pg-btn-primary"
          style={{width:'100%', height:54, fontSize:16, borderRadius:14, gap:8}}>
          {Icon.check(18,'#fff')}
          {s('Send application','Enviar candidatura','Enviar postulación')}
        </button>
        <div style={{textAlign:'center', marginTop:10, fontSize:11.5, color:'var(--pg-ink-400)', lineHeight:1.5}}>
          {s('Your profile data will be shared with the employer.',
             'Seus dados de perfil serão compartilhados com o empregador.',
             'Tus datos de perfil serán compartidos con el empleador.')}
        </div>
      </div>
    </Sheet>
  );
}

// ── Hiring Application Detail Sheet ──────────────────────────
function HiringAppDetailSheet({ open, onClose, app, lang='en' }) {
  if (!app) return null;

const isPending  = app.status === 'pending';
  const isAccepted = app.status === 'accepted';
  const isRejected = app.status === 'rejected';

const statusCfg = isPending ? {
    bg:'oklch(0.96 0.05 68)', border:'oklch(0.85 0.10 68)',
    iconBg:'oklch(0.88 0.14 68)', color:'oklch(0.42 0.18 68)',
    emoji:'⏳', title:appliedLbl, sub:waitingLbl,
  } : isAccepted ? {
    bg:'var(--pg-aqua-50)', border:'var(--pg-aqua-200)',
    iconBg:'var(--pg-aqua-100)', color:'var(--pg-aqua-800)',
    emoji:'🎉', title:hiredLbl, sub:hiredSubLbl,
  } : {
    bg:'oklch(0.97 0.02 20)', border:'oklch(0.88 0.08 20)',
    iconBg:'oklch(0.92 0.05 20)', color:'oklch(0.42 0.18 20)',
    emoji:'✕', title:rejectedLbl, sub:'',
  };

const PhoneIcon = (color='#fff') => (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.01 2.18 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z"/>
    </svg>
  );
  const EmailIcon = (color='var(--pg-aqua-700)') => (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
      <polyline points="22,6 12,13 2,6"/>
    </svg>
  );
  const CalIcon = (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--pg-aqua-700)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
      <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
    </svg>
  );

return (
    <Sheet open={open} onClose={onClose} height="auto">
      <div style={{padding:'6px 20px 44px'}}>

{/* Drag + close */}
        <div style={{display:'flex', justifyContent:'flex-end', marginBottom:16}}>
          <button onClick={onClose} style={{border:'none', background:'var(--pg-ink-100)', width:30, height:30, borderRadius:'50%', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center'}}>
            {Icon.x(16,'var(--pg-ink-700)')}
          </button>
        </div>

{/* Company header */}
        <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:18}}>
          <div style={{
            width:52, height:52, borderRadius:14, flexShrink:0,
            background:'var(--pg-blue-100)',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontWeight:800, fontSize:22, color:'var(--pg-blue-700)',
            fontFamily:'var(--pg-font-display)',
          }}>
            {app.company[0]}
          </div>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontSize:18, fontWeight:700, letterSpacing:'-0.015em', color:'var(--pg-ink-900)'}}>{app.company}</div>
            <div style={{fontSize:14, color:'var(--pg-ink-600)', marginTop:1, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{tr(app.title, lang)}</div>
          </div>
        </div>

{/* Meta chips */}
        <div style={{display:'flex', gap:7, flexWrap:'wrap', marginBottom:20}}>
          <span style={{display:'inline-flex', alignItems:'center', gap:4, fontSize:12, color:'var(--pg-ink-500)', padding:'4px 10px', borderRadius:999, background:'var(--pg-ink-100)'}}>
            {Icon.pin(11,'var(--pg-ink-400)')} {app.loc}
          </span>
          <span style={{display:'inline-flex', alignItems:'center', gap:4, fontSize:12, fontWeight:700, color:'var(--pg-blue-700)', padding:'4px 10px', borderRadius:999, background:'var(--pg-blue-50)'}}>
            {tr(app.pay, lang)}
          </span>
          {app.jobType && (
            <span style={{fontSize:12, color:'var(--pg-ink-500)', padding:'4px 10px', borderRadius:999, background:'var(--pg-ink-100)'}}>
              {tr(app.jobType, lang)}
            </span>
          )}
        </div>

{/* Status banner */}
        <div style={{
          borderRadius:14, padding:'14px 16px', marginBottom:20,
          background:statusCfg.bg, border:`0.5px solid ${statusCfg.border}`,
        }}>
          <div style={{display:'flex', alignItems:'center', gap:10}}>
            <div style={{
              width:38, height:38, borderRadius:11, flexShrink:0,
              background:statusCfg.iconBg,
              display:'flex', alignItems:'center', justifyContent:'center', fontSize:18,
            }}>
              {statusCfg.emoji}
            </div>
            <div>
              <div style={{fontSize:15, fontWeight:700, color:statusCfg.color, letterSpacing:'-0.01em'}}>{statusCfg.title}</div>
              {statusCfg.sub && <div style={{fontSize:12, color:statusCfg.color, opacity:0.72, marginTop:2}}>{statusCfg.sub}</div>}
            </div>
          </div>
          {isPending && (
            <div style={{marginTop:10, paddingTop:10, borderTop:`0.5px solid ${statusCfg.border}`, fontSize:12, color:statusCfg.color, opacity:0.68}}>
              {appliedOnLbl}
            </div>
          )}
        </div>

{/* Rejected: reason */}
        {isRejected && app.rejectReason && (
          <div style={{marginBottom:20, padding:'12px 14px', borderRadius:12, background:'oklch(0.97 0.02 20)', border:'0.5px solid oklch(0.88 0.08 20)'}}>
            <div style={{fontSize:10.5, fontWeight:700, letterSpacing:'0.07em', color:'oklch(0.55 0.15 20)', marginBottom:7}}>
              {reasonLbl.toUpperCase()}
            </div>
            <div style={{fontSize:13, color:'var(--pg-ink-600)', lineHeight:1.55, fontStyle:'italic'}}>
              "{tr(app.rejectReason, lang)}"
            </div>
          </div>
        )}

{/* Accepted: start date */}
        {isAccepted && app.startDate && (
          <div style={{
            marginBottom:14, padding:'12px 14px', borderRadius:12,
            background:'var(--pg-aqua-50)', border:'0.5px solid var(--pg-aqua-200)',
            display:'flex', alignItems:'center', gap:10,
          }}>
            <div style={{width:38, height:38, borderRadius:10, background:'var(--pg-aqua-100)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
              {CalIcon}
            </div>
            <div>
              <div style={{fontSize:10.5, fontWeight:700, letterSpacing:'0.07em', color:'var(--pg-ink-400)'}}>{startLbl.toUpperCase()}</div>
              <div style={{fontSize:16, fontWeight:700, color:'var(--pg-aqua-800)', letterSpacing:'-0.01em'}}>{tr(app.startDate, lang)}</div>
            </div>
          </div>
        )}

{/* Accepted: contact */}
        {isAccepted && app.contact && (
          <div style={{marginBottom:14, padding:'12px 14px', borderRadius:12, background:'var(--pg-blue-50)', border:'0.5px solid var(--pg-blue-100)'}}>
            <div style={{fontSize:10.5, fontWeight:700, letterSpacing:'0.07em', color:'var(--pg-ink-400)', marginBottom:10}}>
              {contactLbl.toUpperCase()}
            </div>
            <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:10}}>
              <Avatar name={app.contact.name} size={32}/>
              <span style={{fontSize:14, fontWeight:700, color:'var(--pg-ink-900)'}}>{app.contact.name}</span>
            </div>
            <a href={`tel:${app.contact.phone}`} style={{display:'flex', alignItems:'center', gap:8, textDecoration:'none', padding:'7px 0', borderTop:'0.5px solid var(--pg-blue-100)'}}>
              <div style={{width:28, height:28, borderRadius:8, background:'var(--pg-blue-500)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                {PhoneIcon('#fff')}
              </div>
              <span style={{fontSize:14, fontWeight:700, color:'var(--pg-blue-700)'}}>{app.contact.phone}</span>
            </a>
            {app.contact.email && (
              <a href={`mailto:${app.contact.email}`} style={{display:'flex', alignItems:'center', gap:8, textDecoration:'none', padding:'7px 0', borderTop:'0.5px solid var(--pg-blue-100)'}}>
                <div style={{width:28, height:28, borderRadius:8, background:'var(--pg-aqua-100)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                  {EmailIcon()}
                </div>
                <span style={{fontSize:13, fontWeight:600, color:'var(--pg-aqua-700)'}}>{app.contact.email}</span>
              </a>
            )}
          </div>
        )}

{/* Accepted: perks */}
        {isAccepted && app.perks && (
          <div style={{marginBottom:22}}>
            <div style={{fontSize:10.5, fontWeight:700, letterSpacing:'0.07em', color:'var(--pg-ink-400)', marginBottom:8}}>
              {perksLbl.toUpperCase()}
            </div>
            <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
              {(tr(app.perks, lang) || []).map((perk, i) => (
                <span key={i} style={{fontSize:12, fontWeight:600, padding:'4px 11px', borderRadius:999, background:'var(--pg-aqua-100)', color:'var(--pg-aqua-800)'}}>
                  ✓ {perk}
                </span>
              ))}
            </div>
          </div>
        )}

{/* CTA buttons */}
        {isAccepted && (
          <button className="pg-btn pg-btn-aqua" style={{width:'100%', height:52, fontSize:15, borderRadius:14}}>
            {messageLbl}
          </button>
        )}
        {isPending && (
          <button className="pg-btn pg-btn-ghost" style={{width:'100%', height:46, fontSize:14, borderRadius:14, color:'var(--pg-danger)'}}>
            {withdrawLbl}
          </button>
        )}
        {isRejected && (
          <button onClick={onClose} className="pg-btn pg-btn-primary" style={{width:'100%', height:52, fontSize:15, borderRadius:14}}>
            {lookMoreLbl}
          </button>
        )}
      </div>
    </Sheet>
  );
}

// ── Edit Profile Sheet ────────────────────────────────────────
function EditProfileSheet({ open, onClose, user, setUser, lang='en' }) {
  const s = (en, pt, es) => lang==='pt' ? pt : lang==='es' ? es : en;

const [name,         setName]         = React.useState('');
  const [age,          setAge]          = React.useState('');
  const [region,       setRegion]       = React.useState('');
  const [regionFocus,  setRegionFocus]  = React.useState(false);
  const [hasCar,       setHasCar]       = React.useState(false);
  const [hasLicense,   setHasLicense]   = React.useState(false);
  const [hasEquipment, setHasEquipment] = React.useState(false);
  const [equipment,    setEquipment]    = React.useState([]);
  const [eqInput,      setEqInput]      = React.useState('');
  const [experience,   setExperience]   = React.useState([]);
  const [addingExp,    setAddingExp]    = React.useState(false);
  const [newExp,       setNewExp]       = React.useState({company:'', role:'', duration:'', desc:''});

const REGION_LIST = [
    'Fort Lauderdale, FL','Weston, FL','Plantation, FL','Davie, FL','Sunrise, FL',
    'Pembroke Pines, FL','Hollywood, FL','Miramar, FL','Coral Springs, FL','Pompano Beach, FL',
    'Boca Raton, FL','Deerfield Beach, FL','Margate, FL','Tamarac, FL','Oakland Park, FL',
    'Hallandale Beach, FL','Dania Beach, FL','Lauderhill, FL','Lauderdale Lakes, FL','North Lauderdale, FL',
    'Miami, FL','Miami Beach, FL','Hialeah, FL','Doral, FL','Kendall, FL',
    'Coral Gables, FL','Aventura, FL','North Miami Beach, FL','Opa-locka, FL','Miami Lakes, FL',
    'Homestead, FL','Miami Gardens, FL','Cutler Bay, FL','Palmetto Bay, FL','Pinecrest, FL',
    'West Palm Beach, FL','Boca Raton, FL','Boynton Beach, FL','Delray Beach, FL','Lake Worth, FL',
    'Wellington, FL','Palm Beach Gardens, FL','Jupiter, FL','Riviera Beach, FL','Royal Palm Beach, FL',
    'Naples, FL','Cape Coral, FL','Fort Myers, FL','Bonita Springs, FL','Marco Island, FL',
    'Broward County, FL','Miami-Dade County, FL','Palm Beach County, FL',
  ];

const regionSuggestions = region.trim().length >= 2
    ? REGION_LIST.filter(r => r.toLowerCase().includes(region.toLowerCase())).slice(0, 6)
    : [];

React.useEffect(() => {
    if (!open || !user) return;
    setName(user.name || '');
    setAge(user.age ? String(user.age) : '');
    setRegion(user.region || '');
    setHasCar(!!user.hasCar);
    setHasLicense(!!user.hasLicense);
    setHasEquipment(!!user.hasEquipment);
    setEquipment([...(user.equipment ? (tr(user.equipment, lang) || []) : [])]);
    setExperience((user.experience || []).map(exp => ({
      company:  exp.company || '',
      role:     tr(exp.role, lang) || '',
      duration: tr(exp.duration, lang) || '',
      desc:     tr(exp.desc, lang) || '',
    })));
    setAddingExp(false);
    setNewExp({company:'', role:'', duration:'', desc:''});
    setEqInput('');
  }, [open]);

const addEquipment = () => {
    const v = eqInput.trim();
    if (v && !equipment.includes(v)) setEquipment(p => [...p, v]);
    setEqInput('');
  };

const inp = {
    width:'100%', boxSizing:'border-box', padding:'10px 12px', borderRadius:10,
    border:'1px solid var(--pg-ink-200)', background:'#fff', fontSize:14,
    fontFamily:'inherit', outline:'none', color:'var(--pg-ink-900)',
  };

const SecLbl = ({children}) => (
    <div style={{fontSize:11, fontWeight:700, color:'var(--pg-ink-400)',
      letterSpacing:'0.06em', marginBottom:10}}>{children}</div>
  );

// Toggle switch
  const Toggle = ({on, onChange}) => (
    <button onClick={()=>onChange(!on)} style={{
      width:46, height:27, borderRadius:14, border:'none', cursor:'pointer',
      background: on ? 'var(--pg-aqua-500)' : 'var(--pg-ink-300)',
      position:'relative', padding:0, flexShrink:0, transition:'background .18s',
    }}>
      <div style={{
        width:21, height:21, borderRadius:'50%', background:'#fff',
        position:'absolute', top:3, left: on ? 22 : 3,
        transition:'left .18s', boxShadow:'0 1px 4px rgba(0,0,0,0.22)',
      }}/>
    </button>
  );

const ToggleRow = ({label, sub, on, onChange}) => (
    <div style={{display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'11px 14px', borderRadius:11, background:'var(--pg-ink-50)',
      border:'0.5px solid var(--pg-ink-200)', marginBottom:8}}>
      <div style={{flex:1, minWidth:0, paddingRight:12}}>
        <div style={{fontSize:13.5, fontWeight:600, color:'var(--pg-ink-900)'}}>{label}</div>
        {sub && <div style={{fontSize:11.5, color:'var(--pg-ink-400)', marginTop:1}}>{sub}</div>}
      </div>
      <Toggle on={on} onChange={onChange}/>
    </div>
  );

return (
    <Sheet open={open} onClose={onClose} height="95%">
      <div style={{padding:'6px 18px 52px'}}>

{/* Header */}
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:22}}>
          <h2 style={{margin:0, fontSize:18, fontWeight:700, letterSpacing:'-0.01em'}}>
            {s('Edit profile','Editar perfil','Editar perfil')}
          </h2>
          <button onClick={onClose} style={{border:'none', background:'var(--pg-ink-100)', width:30, height:30, borderRadius:'50%', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center'}}>
            {Icon.x(16,'var(--pg-ink-700)')}
          </button>
        </div>

{/* ── BASIC INFO ── */}
        <div style={{marginBottom:22}}>
          <SecLbl>{s('BASIC INFO','INFORMAÇÕES BÁSICAS','INFORMACIÓN BÁSICA')}</SecLbl>

<label style={{fontSize:12, fontWeight:600, color:'var(--pg-ink-600)', display:'block', marginBottom:4}}>
            {s('Full name','Nome completo','Nombre completo')}
          </label>
          <input value={name} onChange={e=>setName(e.target.value)}
            style={{...inp, marginBottom:10}} placeholder="Lucas Mendes"/>

<div style={{display:'flex', gap:8}}>
            <div style={{flex:'0 0 88px'}}>
              <label style={{fontSize:12, fontWeight:600, color:'var(--pg-ink-600)', display:'block', marginBottom:4}}>
                {s('Age','Idade','Edad')}
              </label>
              <input value={age} onChange={e=>setAge(e.target.value.replace(/\D/g,''))}
                style={inp} placeholder="31" inputMode="numeric"/>
            </div>
            <div style={{flex:1, position:'relative'}}>
              <label style={{fontSize:12, fontWeight:600, color:'var(--pg-ink-600)', display:'block', marginBottom:4}}>
                {s('City / Region','Cidade / Região','Ciudad / Región')}
              </label>
              <input value={region} onChange={e=>setRegion(e.target.value)}
                onFocus={()=>setRegionFocus(true)}
                onBlur={()=>setTimeout(()=>setRegionFocus(false), 150)}
                style={{...inp, borderBottomLeftRadius: regionFocus && regionSuggestions.length > 0 ? 0 : undefined,
                  borderBottomRightRadius: regionFocus && regionSuggestions.length > 0 ? 0 : undefined}}
                placeholder="Fort Lauderdale, FL"/>
              {regionFocus && regionSuggestions.length > 0 && (
                <div style={{
                  position:'absolute', top:'100%', left:0, right:0, zIndex:999,
                  background:'#fff', border:'1px solid var(--pg-blue-300)',
                  borderTop:'none', borderRadius:'0 0 10px 10px',
                  boxShadow:'0 6px 16px rgba(15,30,60,0.12)',
                  overflow:'hidden',
                }}>
                  {regionSuggestions.map((r, i) => (
                    <button key={i} onMouseDown={()=>{ setRegion(r); setRegionFocus(false); }}
                      style={{
                        display:'flex', alignItems:'center', gap:8, width:'100%',
                        padding:'9px 12px', border:'none', background:'transparent',
                        cursor:'pointer', fontFamily:'inherit', textAlign:'left',
                        fontSize:13, color:'var(--pg-ink-800)', fontWeight:500,
                        borderBottom: i < regionSuggestions.length-1 ? '0.5px solid var(--pg-ink-100)' : 'none',
                      }}
                      onMouseEnter={e=>e.currentTarget.style.background='var(--pg-blue-50)'}
                      onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                      {Icon.pin(12,'var(--pg-blue-400)')}
                      <span>{r}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>

{/* ── RESOURCES ── */}
        <div style={{marginBottom:22}}>
          <SecLbl>{s('RESOURCES','RECURSOS','RECURSOS')}</SecLbl>
          <ToggleRow
            label={s('Own vehicle','Veículo próprio','Vehículo propio')}
            sub={s('Car, truck or van','Carro, caminhonete ou van','Carro, camioneta o van')}
            on={hasCar} onChange={setHasCar}/>
          <ToggleRow
            label={s("Valid driver's license",'CNH válida','Licencia de conducir válida')}
            sub={s('State-issued driving license','CNH emitida pelo estado','Licencia emitida por el estado')}
            on={hasLicense} onChange={setHasLicense}/>
        </div>

{/* ── EQUIPMENT ── */}
        <div style={{marginBottom:22}}>
          <SecLbl>{s('EQUIPMENT','EQUIPAMENTOS','EQUIPOS')}</SecLbl>
          <ToggleRow
            label={s('I have my own equipment','Possuo equipamentos próprios','Tengo equipo propio')}
            sub={s('Pump, vacuum, test kits…','Bomba, aspirador, kits de teste…','Bomba, aspiradora, kits de prueba…')}
            on={hasEquipment}
            onChange={v=>{ setHasEquipment(v); if(!v) setEquipment([]); }}/>

{hasEquipment && (
            <>
              {equipment.length > 0 && (
                <div style={{display:'flex', flexWrap:'wrap', gap:6, marginBottom:9}}>
                  {equipment.map((eq,i) => (
                    <span key={i} style={{
                      display:'inline-flex', alignItems:'center', gap:5, fontSize:12, fontWeight:600,
                      padding:'5px 9px', borderRadius:999,
                      background:'var(--pg-blue-50)', border:'0.5px solid var(--pg-blue-200)', color:'var(--pg-blue-800)',
                    }}>
                      {eq}
                      <button onClick={()=>setEquipment(p=>p.filter((_,j)=>j!==i))} style={{
                        border:'none', background:'transparent', cursor:'pointer',
                        padding:0, color:'var(--pg-blue-500)', lineHeight:1, fontSize:15,
                      }}>×</button>
                    </span>
                  ))}
                </div>
              )}
              <div style={{display:'flex', gap:8}}>
                <input value={eqInput} onChange={e=>setEqInput(e.target.value)}
                  onKeyDown={e=>{if(e.key==='Enter'){e.preventDefault();addEquipment();}}}
                  placeholder={s('e.g. Pentair VS pump','ex: Bomba Pentair VS','ej: Bomba Pentair VS')}
                  style={{...inp, flex:1}}/>
                <button onClick={addEquipment} style={{
                  height:42, padding:'0 14px', borderRadius:10, border:'none',
                  background:'var(--pg-blue-500)', color:'#fff',
                  fontWeight:700, fontSize:13, cursor:'pointer', fontFamily:'inherit', flexShrink:0,
                }}>
                  {s('Add','Adicionar','Agregar')}
                </button>
              </div>
            </>
          )}
        </div>

{/* ── WORK EXPERIENCE ── */}
        <div style={{marginBottom:28}}>
          <SecLbl>{s('WORK EXPERIENCE','EXPERIÊNCIA PROFISSIONAL','EXPERIENCIA LABORAL')}</SecLbl>

{experience.length > 0 && (
            <div style={{display:'flex', flexDirection:'column', gap:8, marginBottom:10}}>
              {experience.map((exp, i) => (
                <div key={i} style={{
                  padding:'11px 13px', borderRadius:11, position:'relative',
                  background:'var(--pg-ink-50)', border:'0.5px solid var(--pg-ink-200)',
                  borderLeft:'3px solid var(--pg-blue-400)',
                }}>
                  <button onClick={()=>setExperience(p=>p.filter((_,j)=>j!==i))} style={{
                    position:'absolute', top:8, right:8, border:'none',
                    background:'var(--pg-ink-200)', width:22, height:22, borderRadius:'50%',
                    cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', padding:0,
                  }}>
                    {Icon.x(10,'var(--pg-ink-600)')}
                  </button>
                  <div style={{fontSize:13, fontWeight:700, color:'var(--pg-ink-900)', paddingRight:28}}>{exp.role}</div>
                  <div style={{fontSize:12, color:'var(--pg-ink-500)', marginTop:2}}>
                    {exp.company}{exp.duration ? ` · ${exp.duration}` : ''}
                  </div>
                  {exp.desc && <div style={{fontSize:12, color:'var(--pg-ink-600)', marginTop:4, lineHeight:1.45}}>{exp.desc}</div>}
                </div>
              ))}
            </div>
          )}

{addingExp ? (
            <div style={{padding:'13px 14px', borderRadius:12, background:'var(--pg-blue-50)', border:'1px solid var(--pg-blue-200)'}}>
              <div style={{display:'flex', gap:8, marginBottom:8}}>
                <div style={{flex:1}}>
                  <label style={{fontSize:11, fontWeight:600, color:'var(--pg-ink-500)', display:'block', marginBottom:3}}>
                    {s('Company','Empresa','Empresa')} *
                  </label>
                  <input value={newExp.company} onChange={e=>setNewExp(p=>({...p,company:e.target.value}))}
                    placeholder="Aqua Solutions" style={{...inp, fontSize:13}}/>
                </div>
                <div style={{flex:'0 0 90px'}}>
                  <label style={{fontSize:11, fontWeight:600, color:'var(--pg-ink-500)', display:'block', marginBottom:3}}>
                    {s('Duration','Duração','Duración')}
                  </label>
                  <input value={newExp.duration} onChange={e=>setNewExp(p=>({...p,duration:e.target.value}))}
                    placeholder={s('2 yrs','2 anos','2 años')} style={{...inp, fontSize:13}}/>
                </div>
              </div>
              <div style={{marginBottom:8}}>
                <label style={{fontSize:11, fontWeight:600, color:'var(--pg-ink-500)', display:'block', marginBottom:3}}>
                  {s('Role / Position','Cargo / Função','Cargo / Puesto')} *
                </label>
                <input value={newExp.role} onChange={e=>setNewExp(p=>({...p,role:e.target.value}))}
                  placeholder={s('Pool Technician','Técnico de Piscinas','Técnico de Piscinas')}
                  style={{...inp, fontSize:13}}/>
              </div>
              <div style={{marginBottom:10}}>
                <label style={{fontSize:11, fontWeight:600, color:'var(--pg-ink-500)', display:'block', marginBottom:3}}>
                  {s('Description (optional)','Descrição (opcional)','Descripción (opcional)')}
                </label>
                <textarea value={newExp.desc} onChange={e=>setNewExp(p=>({...p,desc:e.target.value}))}
                  placeholder={s('Brief description…','Breve descrição…','Breve descripción…')} rows={2}
                  style={{...inp, resize:'none', fontSize:13}}/>
              </div>
              <div style={{display:'flex', gap:8}}>
                <button onClick={()=>{setAddingExp(false);setNewExp({company:'',role:'',duration:'',desc:''});}} style={{
                  flex:1, height:36, borderRadius:9, border:'1px solid var(--pg-ink-200)',
                  background:'transparent', color:'var(--pg-ink-600)',
                  fontWeight:600, fontSize:13, cursor:'pointer', fontFamily:'inherit',
                }}>{s('Cancel','Cancelar','Cancelar')}</button>
                <button onClick={addExperience}
                  disabled={!newExp.company.trim()||!newExp.role.trim()}
                  style={{
                    flex:1, height:36, borderRadius:9, border:'none',
                    background:'var(--pg-blue-500)', color:'#fff',
                    fontWeight:700, fontSize:13, cursor:'pointer', fontFamily:'inherit',
                    opacity:(!newExp.company.trim()||!newExp.role.trim())?0.4:1,
                  }}>{s('Save','Salvar','Guardar')}</button>
              </div>
            </div>
          ) : (
            <button onClick={()=>setAddingExp(true)} style={{
              width:'100%', height:42, borderRadius:10,
              border:'1.5px dashed var(--pg-blue-300)', background:'transparent',
              color:'var(--pg-blue-600)', fontWeight:600, fontSize:13,
              cursor:'pointer', fontFamily:'inherit',
              display:'flex', alignItems:'center', justifyContent:'center', gap:6,
            }}>
              {Icon.plus(14,'var(--pg-blue-600)')}
              {s('Add experience','Adicionar experiência','Agregar experiencia')}
            </button>
          )}
        </div>

{/* Save */}
        <button onClick={handleSave} className="pg-btn pg-btn-primary"
          style={{width:'100%', height:52, fontSize:15, borderRadius:14}}>
          {s('Save profile','Salvar perfil','Guardar perfil')}
        </button>
      </div>
    </Sheet>
  );
}

// ── Public user profile sheet ────────────────────────────────
function PublicProfileSheet({ open, onClose, profile, lang='en', onChat }) {
  React.useEffect(() => {
    if (open) { _lockScreen(); return () => _unlockScreen(); }
  }, [open]);
  if (!open || !profile) return null;
  const name = profile.name || 'User';
  const rating = profile.rating || 4.8;
  const reviews = profile.reviews || 0;
  const jobs = profile.jobs || reviews;
  const loc = profile.loc || 'South Florida';

const msgLbl = lang==='pt'?'Mensagem':lang==='es'?'Mensaje':'Message';
  const jobsLbl = lang==='pt'?'Trabalhos':lang==='es'?'Trabajos':'Jobs';
  const ratingLbl = lang==='pt'?'Avaliação':lang==='es'?'Calificación':'Rating';
  const verifiedLbl = lang==='pt'?'Perfil verificado':lang==='es'?'Perfil verificado':'Verified profile';

return (
    <div className="pg-sheet-backdrop" style={{zIndex:1100}} onClick={onClose}>
      <div className="pg-sheet" style={{padding:'0 0 36px', zIndex:1101}} onClick={e=>e.stopPropagation()}>
        <div className="pg-sheet-grabber"/>
        {/* Navy hero */}
        <div style={{
          background:'linear-gradient(145deg, #040D18, #071A2E)',
          padding:'20px 20px 28px', textAlign:'center', position:'relative',
        }}>
          <button onClick={onClose} style={{
            position:'absolute', top:12, right:14, border:'none',
            background:'rgba(255,255,255,0.12)', width:28, height:28, borderRadius:'50%',
            cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center',
          }}>{Icon.x(13,'#fff')}</button>

<div style={{display:'inline-block', position:'relative', marginBottom:12}}>
            <div style={{padding:3, borderRadius:'50%', background:'linear-gradient(135deg,var(--pg-aqua-500),#0D7280)'}}>
              <Avatar name={name} size={72}/>
            </div>
            <div style={{position:'absolute', bottom:2, right:2, width:20, height:20, borderRadius:'50%',
              background:'var(--pg-aqua-500)', border:'2px solid #040D18',
              display:'flex', alignItems:'center', justifyContent:'center'}}>
              {Icon.check(10,'#fff')}
            </div>
          </div>

<div style={{fontFamily:'var(--pg-font-display)', fontSize:20, fontWeight:700, color:'#fff', letterSpacing:'-0.02em'}}>{name}</div>
          <div style={{fontSize:12, color:'rgba(255,255,255,0.50)', marginTop:4, display:'flex', alignItems:'center', justifyContent:'center', gap:5}}>
            {Icon.pin(10,'rgba(255,255,255,0.45)')} {loc}
          </div>
          <div style={{marginTop:6, display:'inline-flex', alignItems:'center', gap:5,
            background:'rgba(14,186,199,0.18)', border:'1px solid rgba(14,186,199,0.35)',
            borderRadius:999, padding:'3px 10px'}}>
            {Icon.check(10,'var(--pg-aqua-400)')}
            <span style={{fontSize:10.5, fontWeight:600, color:'var(--pg-aqua-300,#6DD8F0)'}}>{verifiedLbl}</span>
          </div>

{/* Stats */}
          <div style={{display:'flex', marginTop:18, paddingTop:14, borderTop:'1px solid rgba(255,255,255,0.10)', gap:0}}>
            {[
              { val: rating, lbl: ratingLbl },
              { val: jobs,   lbl: jobsLbl },
              { val: (reviews > 50 ? '⭐ Pro' : reviews > 20 ? 'Expert' : 'Active'), lbl: 'Trust' },
            ].map((s, i, arr) => (
              <React.Fragment key={i}>
                <div style={{flex:1, textAlign:'center'}}>
                  <div style={{fontFamily:'var(--pg-font-display)', fontSize:20, fontWeight:700, color:'#fff', letterSpacing:'-0.02em', lineHeight:1}}>{s.val}</div>
                  <div style={{fontSize:9.5, color:'rgba(255,255,255,0.45)', marginTop:3, fontWeight:600, letterSpacing:'0.05em', textTransform:'uppercase'}}>{s.lbl}</div>
                </div>
                {i < arr.length-1 && <div style={{width:1, background:'rgba(255,255,255,0.12)', margin:'0 4px'}}/>}
              </React.Fragment>
            ))}
          </div>
        </div>

{/* Stars + reviews */}
        <div style={{padding:'18px 20px 0', display:'flex', flexDirection:'column', gap:14}}>
          <div style={{display:'flex', alignItems:'center', gap:10}}>
            <Stars rating={rating} size={16}/>
            <span style={{fontFamily:'var(--pg-font-display)', fontSize:16, fontWeight:700, color:'var(--pg-ink-900)'}}>{rating}</span>
            <span style={{fontSize:13, color:'var(--pg-ink-500)'}}>({reviews} {lang==='pt'?'avaliações':lang==='es'?'reseñas':'reviews'})</span>
          </div>

{/* Badge */}
          {reviews > 50 && (
            <div style={{display:'flex', alignItems:'center', gap:10, padding:'10px 14px', borderRadius:12,
              background:'linear-gradient(135deg,var(--pg-navy-800),var(--pg-blue-700))', color:'#fff'}}>
              <span style={{fontSize:22}}>⭐</span>
              <div>
                <div style={{fontSize:13, fontWeight:700}}>Pool Guy PRO</div>
                <div style={{fontSize:11, opacity:0.65, marginTop:1}}>{lang==='pt'?`${jobs}+ trabalhos concluídos`:lang==='es'?`${jobs}+ trabajos completados`:`${jobs}+ jobs completed`}</div>
              </div>
            </div>
          )}

{/* Action */}
          <button onClick={()=>{ onClose(); onChat && onChat(name); }}
            className="pg-btn pg-btn-primary" style={{width:'100%', height:50, fontSize:15, borderRadius:14, marginTop:4}}>
            {Icon.msg(16,'#fff')}
            <span style={{marginLeft:6}}>{msgLbl}</span>
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Help & Support sheet ──────────────────────────────────────
function HelpSheet({ open, onClose, lang='en' }) {
  React.useEffect(() => {
    if (open) { _lockScreen(); return () => _unlockScreen(); }
  }, [open]);
  if (!open) return null;
  const title = lang==='pt'?'Ajuda & Suporte':lang==='es'?'Ayuda y Soporte':'Help & Support';
  const items = lang==='pt' ? [
    { icon:'📖', title:'Como usar o app', sub:'Guia rápido para pool guys' },
    { icon:'💳', title:'Assinatura e pagamento', sub:'Planos, cobranças e cancelamento' },
    { icon:'🔔', title:'Notificações', sub:'Configure alertas de trabalho por região' },
    { icon:'🤝', title:'Como aplicar para vagas', sub:'Candidaturas e contato com clientes' },
    { icon:'⭐', title:'Avaliações e reputação', sub:'Como funciona o Trust Score' },
    { icon:'📧', title:'Falar com a equipe', sub:'suporte@poolguyapp.com', action: ()=>window.open('mailto:suporte@poolguyapp.com') },
  ] : lang==='es' ? [
    { icon:'📖', title:'Cómo usar la app', sub:'Guía rápida para pool guys' },
    { icon:'💳', title:'Suscripción y pago', sub:'Planes, cobros y cancelación' },
    { icon:'🔔', title:'Notificaciones', sub:'Configura alertas de trabajo por región' },
    { icon:'🤝', title:'Cómo postular a empleos', sub:'Solicitudes y contacto con clientes' },
    { icon:'⭐', title:'Reseñas y reputación', sub:'Cómo funciona el Trust Score' },
    { icon:'📧', title:'Hablar con el equipo', sub:'support@poolguyapp.com', action: ()=>window.open('mailto:support@poolguyapp.com') },
  ] : [
    { icon:'📖', title:'How to use the app', sub:'Quick guide for pool guys' },
    { icon:'💳', title:'Subscription & billing', sub:'Plans, charges and cancellation' },
    { icon:'🔔', title:'Notifications', sub:'Configure job alerts by region & day' },
    { icon:'🤝', title:'How to apply for jobs', sub:'Applications and contacting clients' },
    { icon:'⭐', title:'Reviews & reputation', sub:'How the Trust Score works' },
    { icon:'📧', title:'Contact the team', sub:'support@poolguyapp.com', action: ()=>window.open('mailto:support@poolguyapp.com') },
  ];

return (
    <div className="pg-sheet-backdrop" onClick={onClose}>
      <div className="pg-sheet" style={{padding:'0 0 36px'}} onClick={e=>e.stopPropagation()}>
        <div className="pg-sheet-grabber"/>
        <div style={{padding:'4px 18px 16px', borderBottom:'0.5px solid var(--pg-ink-200)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <h2 style={{margin:0, fontSize:18, fontWeight:700, letterSpacing:'-0.02em'}}>{title}</h2>
          <button onClick={onClose} style={{border:'none', background:'var(--pg-ink-100)', width:30, height:30, borderRadius:'50%', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center'}}>
            {Icon.x(16,'var(--pg-ink-700)')}
          </button>
        </div>
        <div style={{padding:'12px 18px 0', display:'flex', flexDirection:'column', gap:0}}>
          {items.map((item, i) => (
            <button key={i} onClick={item.action || undefined} style={{
              display:'flex', alignItems:'center', gap:14, padding:'14px 0',
              border:'none', background:'transparent', cursor: item.action?'pointer':'default',
              textAlign:'left', fontFamily:'inherit',
              borderBottom: i < items.length-1 ? '0.5px solid var(--pg-ink-100)' : 'none',
            }}>
              <div style={{width:40, height:40, borderRadius:11, background:'var(--pg-blue-50)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:20, flexShrink:0}}>
                {item.icon}
              </div>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:14, fontWeight:600, color:'var(--pg-ink-900)'}}>{item.title}</div>
                <div style={{fontSize:12, color: item.action ? 'var(--pg-blue-500)' : 'var(--pg-ink-500)', marginTop:2}}>{item.sub}</div>
              </div>
              {item.action && Icon.chev(14,'var(--pg-ink-400)')}
            </button>
          ))}
        </div>
        <div style={{textAlign:'center', padding:'20px 0 0', fontSize:11, color:'var(--pg-ink-400)'}}>
          PoolGuyX · v2.5.0 Beta
        </div>
      </div>
    </div>
  );
}

// ── Privacy sheet ─────────────────────────────────────────────
function PrivacySheet({ open, onClose, lang='en' }) {
  React.useEffect(() => {
    if (open) { _lockScreen(); return () => _unlockScreen(); }
  }, [open]);
  if (!open) return null;
  const title = lang==='pt'?'Privacidade':lang==='es'?'Privacidad':'Privacy';
  const sections = lang==='pt' ? [
    { title:'Dados coletados', body:'Coletamos apenas os dados necessários para o funcionamento do app: nome, e-mail, telefone e localização geral (condado/cidade). Nunca compartilhamos seus dados pessoais com terceiros sem sua autorização.' },
    { title:'Localização', body:'O app usa sua localização apenas para mostrar trabalhos próximos. A localização exata nunca é armazenada nem compartilhada com outros usuários.' },
    { title:'Comunicação', body:'Usamos seu e-mail para enviar notificações de trabalho e atualizações importantes. Você pode cancelar a qualquer momento nas configurações.' },
    { title:'Exclusão de conta', body:'Para excluir sua conta e todos os seus dados, entre em contato com suporte@poolguyapp.com. Processamos pedidos em até 7 dias úteis.' },
  ] : lang==='es' ? [
    { title:'Datos recopilados', body:'Solo recopilamos los datos necesarios para el funcionamiento de la app: nombre, email, teléfono y ubicación general. Nunca compartimos tus datos personales con terceros.' },
    { title:'Ubicación', body:'La app usa tu ubicación solo para mostrar trabajos cercanos. La ubicación exacta nunca se almacena ni se comparte con otros usuarios.' },
    { title:'Comunicación', body:'Usamos tu email para enviarte notificaciones de trabajo. Puedes cancelar en cualquier momento en la configuración.' },
    { title:'Eliminación de cuenta', body:'Para eliminar tu cuenta, contacta a support@poolguyapp.com. Procesamos solicitudes en hasta 7 días hábiles.' },
  ] : [
    { title:'Data collected', body:'We only collect the data necessary for the app to work: name, email, phone, and general location (county/city). We never share your personal data with third parties without your consent.' },
    { title:'Location', body:'The app uses your location only to show nearby jobs. Your exact location is never stored or shared with other users.' },
    { title:'Communication', body:'We use your email to send job notifications and important updates. You can opt out at any time in settings.' },
    { title:'Account deletion', body:'To delete your account and all your data, contact support@poolguyapp.com. We process requests within 7 business days.' },
  ];

Object.assign(window, {
  ChatSheet, NotificationsSheet, PaywallSheet, PostMenuSheet, Toast,
  LanguagePickerSheet, ApplicantsSheet, VerificationSheet, PushNotifSheet,
  WalletSheet, WorkLifecycleSheet, ReviewSheet, HiringAppDetailSheet,
  ApplyJobSheet, EditProfileSheet,
  PublicProfileSheet, HelpSheet, PrivacySheet,
});

{t.inboxTitle} {totalUnread > 0 && ( {totalUnread} )}

{t.chooseLanguage}

{t.applicantsPanelTitle}

{titleLbl}

{headLbl}

{lbl.title}

{t.notifsTitle}

{t.payTitle}

{t.whatPost}

{walletLbl}

{detailLbl}

{titleLbl}