const {S,Head,I,P}=window.WFA;
const {UIButton,UIInput,UICard,UIAvatar,UIPill,UITabs,UIStat,UIBanner,UIModal,UITable,UICheckbox}=window.XCOPEDesignSystem_bf80f1;

// today is fixed for the mock so expiry maths is stable
const PF_TODAY=new Date(2026,6,25);
const pfDays=iso=>Math.round((new Date(iso)-PF_TODAY)/86400000);
const pfFmt=iso=>{const d=new Date(iso),m=["jan","fev","mar","abr","mai","jun","jul","ago","set","out","nov","dez"];return d.getDate()+" "+m[d.getMonth()]+" "+d.getFullYear();};
// status derived from expiry: <0 expirado, <=30 a expirar, else válido
const pfState=iso=>{if(!iso)return null;const n=pfDays(iso);
  if(n<0)return{tone:"danger",label:"Expirado há "+Math.abs(n)+" dias",n};
  if(n<=30)return{tone:"warning",label:"Expira em "+n+" dias",n};  return{tone:"success",label:"Válido",n};};

const PF_ID=[
  {id:"cc",name:"Cartão de Cidadão",num:"12345678 9 ZZ4",exp:"2026-08-14",note:"Documento de identificação",img:true,req:"Obrigatório"},
  {id:"nif",name:"Número de contribuinte (NIF)",num:"241 553 908",exp:null,note:"Autoridade Tributária"},
  {id:"niss",name:"Segurança Social (NISS)",num:"11 2233 4455 6",exp:null,note:"Segurança Social"},
];
const PF_CERTS=[
  {id:"carta",name:"Carta de condução",cat:"Categorias B, C",num:"P-4471902",exp:"2029-03-02",fn:"Deslocações em serviço"},
  {id:"adr",name:"Certificado ADR",cat:"Mercadorias perigosas · cisternas",num:"ADR-88213",exp:"2026-08-09",fn:"Necessário para a função de transporte"},
  {id:"cam",name:"Certificado de aptidão médica",cat:"Medicina do trabalho",num:"CAM-2025-441",exp:"2026-09-30",fn:"Exigido anualmente"},
  {id:"seg",name:"Formação em segurança no trabalho",cat:"Nível II · 35h",num:"FST-19023",exp:"2026-06-12",fn:"Renovação bienal"},
  {id:"cqm",name:"CAM de motorista (CQM)",cat:"Transporte de mercadorias",num:"CQM-77410",exp:"2027-11-20",fn:"Condução profissional"},
];
const PF_PAY=[
  {m:"Junho 2026",gross:"3 450,00 €",net:"2 418,73 €",date:"2026-06-28",extra:"Subsídio de alimentação 160,60 €"},
  {m:"Maio 2026",gross:"3 450,00 €",net:"2 402,10 €",date:"2026-05-28",extra:""},
  {m:"Abril 2026",gross:"3 450,00 €",net:"2 402,10 €",date:"2026-04-28",extra:""},
  {m:"Março 2026",gross:"3 450,00 €",net:"2 402,10 €",date:"2026-03-28",extra:""},
  {m:"Fevereiro 2026",gross:"3 450,00 €",net:"2 402,10 €",date:"2026-02-27",extra:""},
  {m:"Janeiro 2026",gross:"3 300,00 €",net:"2 318,44 €",date:"2026-01-28",extra:"Atualização salarial a partir de fevereiro"},
];
const PF_ANNUAL=[["Declaração de rendimentos 2025","IRS · Modelo 3"],["Declaração de retenções 2025","Entregue em janeiro"],["Mapa de férias 2026","Aprovado"]];
const PF_DOCS=[
  {n:"Contrato de trabalho sem termo.pdf",t:"Contrato",d:"03 mar 2021",sig:"Assinado"},
  {n:"Aditamento · atualização salarial.pdf",t:"Contrato",d:"12 jan 2026",sig:"Por assinar"},
  {n:"Política de teletrabalho.pdf",t:"Política",d:"01 ago 2026",sig:"Por ler"},
  {n:"Código de conduta.pdf",t:"Política",d:"14 fev 2024",sig:"Lido"},
  {n:"Acordo de confidencialidade.pdf",t:"Contrato",d:"03 mar 2021",sig:"Assinado"},
];

const PF_SHARED=[
  {n:"Manual de acolhimento 2026.pdf",t:"Toda a empresa",d:"12 jan 2026"},
  {n:"Plano de formação — Pessoas.pdf",t:"Departamento Pessoas",d:"04 mai 2026"},
  {n:"Tabela salarial por categoria.pdf",t:"Direção",d:"28 fev 2026"},
  {n:"Calendário de feriados 2026.pdf",t:"Toda a empresa",d:"02 jan 2026"},
];

function PfField({l,v,mono,edit,locked,onChange}){
  if(edit&&!locked)return <div><div className="muted" style={{fontSize:"var(--ui-fs-xs)",fontWeight:600,letterSpacing:"0.04em",textTransform:"uppercase",marginBottom:6}}>{l}</div>
    <UIInput size="sm" defaultValue={typeof v==="string"?v:""} onChange={onChange}/></div>;
  return <div><div className="muted" style={{fontSize:"var(--ui-fs-xs)",fontWeight:600,letterSpacing:"0.04em",textTransform:"uppercase"}}>{l}</div>
  <div className="row" style={{marginTop:5,gap:8,fontSize:"var(--ui-fs-body)",fontWeight:500,fontFamily:mono?"var(--font-mono)":undefined}}>{v}{edit&&locked&&<span title="Só a equipa de Pessoas pode alterar" style={{display:"inline-flex"}}><I d={["M19 11H5v10h14z","M8 11V7a4 4 0 0 1 8 0v4"]} size={13} c="var(--ui-text-3)"/></span>}</div></div>;}
function PfGroup({title,children,cols=3}){return <UICard style={{marginBottom:16}}>
  <div style={{fontWeight:600,fontSize:"var(--ui-fs-h3)",marginBottom:14}}>{title}</div>
  <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(190px,1fr))",gap:"18px 20px"}}>{children}</div></UICard>;}

// a scan slot — the real app stores the image; here it shows what is on file
function PfScan({label,on}){return <div style={{flex:"1 1 150px",minWidth:0}}>
  <div style={{aspectRatio:"1.586",borderRadius:"var(--ui-r-sm)",border:"1px solid var(--ui-border)",background:"var(--ui-surface-2)",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",gap:8,color:"var(--ui-text-3)"}}>
    <I d={on?["M4 5h16v14H4z","M4 15l4-4 4 4 3-3 5 5"]:["M12 5v14M5 12h14"]} size={22}/>
    <span style={{fontSize:"var(--ui-fs-xs)",fontWeight:600}}>{on?"Digitalização":"Adicionar"}</span></div>
  <div className="muted" style={{fontSize:"var(--ui-fs-xs)",marginTop:6,textAlign:"center"}}>{label}</div></div>;}

S.profile=({initialTab})=>{
  const [pfAviso,setPfAviso]=React.useState(null);
  React.useEffect(()=>{if(!pfAviso)return;const t=setTimeout(()=>setPfAviso(null),3200);return ()=>clearTimeout(t);},[pfAviso]);
  const [t,setT]=React.useState(initialTab||"dados");const [year,setYear]=React.useState("2026");const [up,setUp]=React.useState(null);
  const [edit,setEdit]=React.useState(false);const [saved,setSaved]=React.useState(false);
  const [docs,setDocs]=React.useState(PF_DOCS.map((d,i)=>({...d,id:i})));
  const [assinar,setAssinar]=React.useState(null);const [aceito,setAceito]=React.useState(false);const [nomeAss,setNomeAss]=React.useState("");
  const [ler,setLer]=React.useState(null);
  const marcaDoc=(id,sig)=>setDocs(ds=>ds.map(d=>d.id===id?{...d,sig,d:sig==="Assinado"?"24 jul 2026":d.d}:d));
  const porTratar=docs.filter(d=>d.sig==="Por assinar"||d.sig==="Por ler").length;
  const expiring=[...PF_ID,...PF_CERTS].filter(d=>d.exp&&pfDays(d.exp)<=30).sort((a,b)=>pfDays(a.exp)-pfDays(b.exp));
  const expired=expiring.filter(d=>pfDays(d.exp)<0);
  const tabs=[["dados","Dados pessoais"],["ident","Identificação e certificações"],["recibos","Recibos"],["docs","Documentos"],["carreira","Carreira"],["beneficios","Benefícios"]];
  const badge=k=>k==="ident"&&expiring.length?" · "+expiring.length:"";

  const DocRow=d=>{const st=pfState(d.exp);return <div className="listrow" key={d.id} style={{gap:16,alignItems:"flex-start"}}>
    <div style={{width:38,height:38,borderRadius:"var(--ui-r-sm)",background:"var(--ui-surface-2)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--ui-text-3)",flexShrink:0}}><I d={P.doc} size={18}/></div>
    <div style={{flex:1,minWidth:0}}>
      <div className="row" style={{gap:8,flexWrap:"wrap"}}><span style={{fontWeight:600}}>{d.name}</span>{d.req&&<UIPill>{d.req}</UIPill>}</div>
      <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginTop:3}}>{d.cat||d.note}{d.num?" · nº "+d.num:""}</div>
      {d.fn&&<div className="muted" style={{fontSize:"var(--ui-fs-xs)",marginTop:3}}>{d.fn}</div>}
    </div>
    <div style={{textAlign:"right",flexShrink:0}}>
      {st&&<UIPill tone={st.tone} dot>{st.label}</UIPill>}
      {d.exp&&<div className="muted" style={{fontSize:"var(--ui-fs-xs)",marginTop:5}}>até {pfFmt(d.exp)}</div>}
    </div>
    <UIButton variant={!st||st.tone==="success"?"ghost":"secondary"} size="sm" onClick={()=>setUp(d)}>{!st||st.tone==="success"?"Ver":"Renovar"}</UIButton>
  </div>;};

  return <React.Fragment>
  {pfAviso&&<UIBanner tone="success" title="Feito" style={{marginBottom:16}}>{pfAviso}</UIBanner>}
  <Head title="Perfil" desc="Os teus dados, documentos e percurso na empresa" actions={edit
    ?<div className="row" style={{gap:8}}><UIButton variant="ghost" onClick={()=>setEdit(false)}>Cancelar</UIButton><UIButton onClick={()=>{setEdit(false);setSaved(true);setTimeout(()=>setSaved(false),2600);}}>Guardar</UIButton></div>
    :<UIButton variant="outline" icon={<I d={["M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"]} size={15}/>} onClick={()=>{setT("dados");setEdit(true);}}>Editar</UIButton>}/>
  {saved&&<UIBanner tone="success" title="Dados guardados" style={{marginBottom:16}}>As alterações aos teus dados pessoais foram registadas.</UIBanner>}
  {edit&&<UIBanner tone="info" title="A editar os teus dados" style={{marginBottom:16}}>Podes corrigir contactos, morada e dados bancários. Os campos com cadeado são geridos pela equipa de Pessoas.</UIBanner>}
  <UICard style={{marginBottom:18}}>
    <div className="row" style={{gap:16,flexWrap:"wrap"}}><UIAvatar name="Hugo Montenegro" size="xl" status="online"/>
    <div style={{flex:1,minWidth:200}}><div style={{fontSize:"var(--ui-fs-h2)",fontWeight:600}}>Hugo Montenegro</div>
      <div className="muted">CEO · Xcope AI · Porto</div>
      <div className="row" style={{marginTop:10,gap:8,flexWrap:"wrap"}}><UIPill tone="success" dot>Ativo</UIPill><UIPill>Desde 2021</UIPill><UIPill>Nº mecanográfico 0042</UIPill><UIPill>Contrato sem termo</UIPill></div></div>
    </div>
  </UICard>

  {expiring.length>0&&<UIBanner tone={expired.length?"danger":"warning"} title={expired.length?"Tens documentos expirados":"Documentos a expirar nos próximos 30 dias"} style={{marginBottom:18}}>
    <div>{expiring.map(d=>d.name+" ("+pfState(d.exp).label.toLowerCase()+")").join(" · ")}</div>
    <div style={{marginTop:10}}><UIButton size="sm" variant="outline" onClick={()=>setT("ident")}>Ver documentos</UIButton></div>
  </UIBanner>}

  <div style={{marginBottom:18}}>
    <UITabs value={t} onChange={setT} items={tabs.map(([v,l])=>({value:v,label:l+badge(v)}))}/>
  </div>

  <div>

  {t==="dados"&&<React.Fragment>
    <PfGroup title="Identidade">
      <PfField edit={edit} locked l="Nome completo" v="Hugo Montenegro"/><PfField edit={edit} locked l="Data de nascimento" v="14 mai 1988"/><PfField edit={edit} locked l="Nacionalidade" v="Portuguesa"/>
      <PfField edit={edit} l="Estado civil" v="Casado"/><PfField edit={edit} l="Dependentes" v="1"/><PfField edit={edit} l="Habilitações" v="Licenciatura em Gestão"/>
    </PfGroup>
    <PfGroup title="Contactos">
      <PfField edit={edit} locked l="Email profissional" v="hugo@xcope.ai"/><PfField edit={edit} l="Email pessoal" v="hugo@mail.pt"/><PfField edit={edit} l="Telemóvel" v="+351 912 000 000"/>
      <PfField edit={edit} l="Morada" v="Rua de Cedofeita 210, 4050-174 Porto"/><PfField edit={edit} l="Contacto de emergência" v="Miguel Lopes · +351 934 111 222"/><PfField edit={edit} l="Relação" v="Cônjuge"/>
    </PfGroup>
    <PfGroup title="Fiscais e bancários">
      <PfField edit={edit} locked l="NIF" v="241 553 908" mono/><PfField edit={edit} locked l="Segurança Social" v="11 2233 4455 6" mono/><PfField edit={edit} l="IBAN" v="PT50 0033 0000 4512 3456 7890 5" mono/>
      <PfField edit={edit} l="Situação fiscal" v="Casado · 1 titular"/><PfField edit={edit} locked l="Retenção na fonte" v="21,4%"/><PfField l="Fundo de pensões" v="Aderente desde 2022"/>
    </PfGroup>
    <PfGroup title="Vínculo">
      <PfField l="Tipo de contrato" v="Sem termo"/><PfField l="Data de admissão" v="03 mar 2021"/><PfField l="Antiguidade" v="5 anos e 4 meses"/>
      <PfField l="Centro de custo" v="CC-210 · Pessoas"/><PfField l="Responsável" v="Tomás Machado"/><PfField l="Horário" v="Flexível · 40h semanais"/>
    </PfGroup>
  </React.Fragment>}

  {t==="ident"&&<React.Fragment>
    <div className="grid g3" style={{marginBottom:16}}>
      <UICard><UIStat label="Documentos válidos" value={String([...PF_ID,...PF_CERTS].filter(d=>!d.exp||pfDays(d.exp)>30).length)} sublabel="sem ação necessária"/></UICard>
      <UICard><UIStat label="A expirar em 30 dias" value={String(expiring.length-expired.length)} deltaTone="warning" sublabel="renovar já"/></UICard>
      <UICard><UIStat label="Expirados" value={String(expired.length)} deltaTone={expired.length?"danger":"neutral"} sublabel="fora de validade"/></UICard>
    </div>
    <UICard style={{marginBottom:16}}>
      <div className="row" style={{marginBottom:14}}><span style={{fontWeight:600,fontSize:"var(--ui-fs-h3)"}}>Cartão de Cidadão</span><div className="spring"/>{(()=>{const s=pfState("2026-08-14");return s?<UIPill tone={s.tone} dot>{s.label}</UIPill>:null;})()}</div>
      <div className="row" style={{gap:20,alignItems:"flex-start",flexWrap:"wrap"}}>
        <div className="row" style={{gap:12,flex:"1 1 320px",minWidth:0}}><PfScan label="Frente" on/><PfScan label="Verso" on/></div>
        <div style={{flex:"1 1 260px",display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(150px,1fr))",gap:"16px 18px"}}>
          <PfField l="Número" v="12345678 9 ZZ4" mono/><PfField l="Validade" v="14 ago 2026"/><PfField l="Emitido por" v="República Portuguesa"/><PfField l="Arquivado em" v="03 mar 2021"/>
        </div>
      </div>
    </UICard>
    <UICard style={{marginBottom:16}}>
      <div style={{fontWeight:600,fontSize:"var(--ui-fs-h3)",marginBottom:6}}>Identificadores</div>
      {PF_ID.filter(d=>d.id!=="cc").map(DocRow)}
    </UICard>
    <UICard>
      <div className="row" style={{marginBottom:6}}><span style={{fontWeight:600,fontSize:"var(--ui-fs-h3)"}}>Certificações e licenças</span><div className="spring"/>
        <UIButton size="sm" variant="outline" icon={<I d={P.plus} size={15}/>} onClick={()=>setUp({name:"Nova certificação"})}>Adicionar</UIButton></div>
      <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginBottom:8}}>Requisitos da função. O aviso surge 30 dias antes da validade terminar.</div>
      {[...PF_CERTS].sort((a,b)=>pfDays(a.exp)-pfDays(b.exp)).map(DocRow)}
    </UICard>
  </React.Fragment>}

  {t==="recibos"&&<React.Fragment>
    <div className="grid g3" style={{marginBottom:16}}>
      <UICard><UIStat label="Bruto anual" value="41 400 €" sublabel="14 meses · 2026"/></UICard>
      <UICard><UIStat label="Último líquido" value="2 418,73 €" delta="+16,63" deltaTone="success" sublabel="Junho 2026"/></UICard>
      <UICard><UIStat label="Retenção acumulada" value="6 213 €" sublabel="IRS + Seg. Social"/></UICard>
    </div>
    <UICard style={{marginBottom:16}}>
      <div className="row" style={{marginBottom:12}}><span style={{fontWeight:600,fontSize:"var(--ui-fs-h3)"}}>Recibos de vencimento</span><div className="spring"/>
        <div className="row" style={{gap:6}}>{["2026","2025","2024"].map(y=><span key={y} onClick={()=>setYear(y)} style={{cursor:"pointer",fontSize:"var(--ui-fs-xs)",fontWeight:600,padding:"5px 11px",borderRadius:"var(--ui-r-pill)",border:"1px solid "+(year===y?"transparent":"var(--ui-border)"),background:year===y?"var(--ui-text)":"var(--ui-surface)",color:year===y?"var(--ui-bg)":"var(--ui-text-2)"}}>{y}</span>)}</div>
        <UIButton size="sm" variant="ghost" onClick={()=>setPfAviso("Recibos de "+year+" descarregados num único ficheiro.")}>Descarregar todos</UIButton></div>
      {PF_PAY.map(p=><div className="listrow" key={p.m} style={{gap:14}}>
        <div style={{width:38,height:38,borderRadius:"var(--ui-r-sm)",background:"var(--ui-surface-2)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--ui-text-3)",flexShrink:0}}><I d={P.doc} size={18}/></div>
        <div style={{flex:1,minWidth:0}}><div style={{fontWeight:600}}>{p.m}</div><div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginTop:2}}>Pago a {pfFmt(p.date)}{p.extra?" · "+p.extra:""}</div></div>
        <div style={{textAlign:"right",flexShrink:0}}><div className="muted" style={{fontSize:"var(--ui-fs-xs)"}}>Bruto {p.gross}</div><div style={{fontWeight:600,marginTop:2}}>{p.net}</div></div>
        <UIButton variant="ghost" size="sm" onClick={()=>setPfAviso("Recibo de "+p.mes+" aberto em PDF.")}>PDF</UIButton>
      </div>)}
    </UICard>
    <UICard>
      <div style={{fontWeight:600,fontSize:"var(--ui-fs-h3)",marginBottom:6}}>Documentos anuais</div>
      {PF_ANNUAL.map(([n,d])=><div className="listrow" key={n}><I d={P.doc} size={20} c="var(--ui-text-3)"/><div style={{flex:1}}><div style={{fontWeight:500}}>{n}</div><div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{d}</div></div><UIButton variant="ghost" size="sm" onClick={()=>setPfAviso(n+" descarregado.")}>Descarregar</UIButton></div>)}
    </UICard>
  </React.Fragment>}

  {t==="docs"&&<React.Fragment>
  <UICard style={{marginBottom:16}}>
    <div className="row" style={{marginBottom:12}}><span style={{fontWeight:600,fontSize:"var(--ui-fs-h3)"}}>Contratos e políticas</span><div className="spring"/>
      {porTratar>0?<UIPill tone="warning" dot>{porTratar} por tratar</UIPill>:<UIPill tone="success" dot>Tudo tratado</UIPill>}</div>
    {docs.map(d=><div className="listrow" key={d.id} style={{gap:14}}>
      <div style={{width:38,height:38,borderRadius:"var(--ui-r-sm)",background:"var(--ui-surface-2)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--ui-text-3)",flexShrink:0}}><I d={P.doc} size={18}/></div>
      <div style={{flex:1,minWidth:0}}><div style={{fontWeight:500}}>{d.n}</div><div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginTop:2}}>{d.t} · {d.d}</div></div>
      <UIPill tone={d.sig==="Assinado"||d.sig==="Lido"?"success":"warning"} dot>{d.sig}</UIPill>
      <UIButton variant={d.sig==="Por assinar"?"primary":"ghost"} size="sm"
        onClick={()=>{if(d.sig==="Por assinar"){setAceito(false);setNomeAss("");setAssinar(d);}else if(d.sig==="Por ler"){setLer(d);}else{setPfAviso(d.n+" descarregado.");}}}>
        {d.sig==="Por assinar"?"Assinar":d.sig==="Por ler"?"Ler":"Descarregar"}</UIButton>
    </div>)}
  </UICard>
  <UICard>
    <div style={{fontWeight:600,fontSize:"var(--ui-fs-h3)"}}>Partilhados pela empresa</div>
    <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginTop:3,marginBottom:8}}>Ficheiros que a empresa disponibilizou a ti ou ao teu departamento.</div>
    {PF_SHARED.map(d=><div className="listrow" key={d.n} style={{gap:14}}>
      <div style={{width:38,height:38,borderRadius:"var(--ui-r-sm)",background:"var(--ui-surface-2)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--ui-text-3)",flexShrink:0}}><I d={P.share} size={18}/></div>
      <div style={{flex:1,minWidth:0}}><div style={{fontWeight:500}}>{d.n}</div><div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginTop:2}}>{d.t} · {d.d}</div></div>
      <UIButton variant="ghost" size="sm" onClick={()=>setPfAviso(d.n+" descarregado.")}>Descarregar</UIButton>
    </div>)}
  </UICard>
  </React.Fragment>}

  {t==="carreira"&&<React.Fragment>
    <div className="grid g2" style={{marginBottom:16}}>
      <UICard><div style={{fontWeight:600,fontSize:"var(--ui-fs-h3)",marginBottom:12}}>Percurso</div>
        {[["2024","Expansão internacional","Direção"],["2022","Lançamento do Produto","Direção"],["2021","Fundação da Xcope · CEO","Direção"]].map(([y,e,d])=><div className="listrow" key={y}><UIPill tone="accent">{y}</UIPill><div style={{flex:1}}><div style={{fontWeight:500}}>{e}</div><div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{d}</div></div></div>)}
      </UICard>
      <UICard><div style={{fontWeight:600,fontSize:"var(--ui-fs-h3)",marginBottom:12}}>Desempenho</div>
        <div className="row" style={{gap:20,marginBottom:12,flexWrap:"wrap"}}><PfField l="Última avaliação" v="Excede · mar 2026"/><PfField l="Próxima" v="set 2026"/><PfField l="Avaliador" v="Tomás Machado"/></div>
        {[["Reduzir tempo de contratação","72%"],["Implementar plano de formação","40%"],["Rever política de teletrabalho","100%"]].map(([g,p])=><div key={g} style={{marginTop:12}}>
          <div className="row" style={{marginBottom:5}}><span style={{fontSize:"var(--ui-fs-sm)",fontWeight:500,flex:1}}>{g}</span><span className="muted" style={{fontSize:"var(--ui-fs-xs)"}}>{p}</span></div>
          <div style={{height:6,borderRadius:3,background:"var(--ui-surface-2)"}}><div style={{width:p,height:"100%",borderRadius:3,background:p==="100%"?"var(--ui-success)":"var(--ui-text)"}}></div></div></div>)}
      </UICard>
    </div>
    <UICard><div style={{fontWeight:600,fontSize:"var(--ui-fs-h3)",marginBottom:6}}>Formação</div>
      {[["Gestão de equipas híbridas","Concluído · 18h","success"],["RGPD para RH","Concluído · 6h","success"],["Liderança e feedback","Em curso · 40%","info"],["Segurança no trabalho (renovação)","Inscrição aberta","warning"]].map(([n,s,tone])=><div className="listrow" key={n}><div style={{flex:1}}><div style={{fontWeight:500}}>{n}</div><div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{s}</div></div><UIPill tone={tone} dot>{tone==="success"?"Concluído":tone==="info"?"Em curso":"Por fazer"}</UIPill></div>)}
    </UICard>
  </React.Fragment>}

  {t==="beneficios"&&<React.Fragment>
    <div className="grid g3" style={{marginBottom:16}}>
      <UICard><UIStat label="Subsídio de alimentação" value="8,60 €" sublabel="por dia útil · cartão"/></UICard>
      <UICard><UIStat label="Seguro de saúde" value="Plano B" sublabel="titular + 1 dependente"/></UICard>
      <UICard><UIStat label="Fundo de pensões" value="4 210 €" delta="+3,2%" deltaTone="success" sublabel="acumulado"/></UICard>
    </div>
    <UICard><div style={{fontWeight:600,fontSize:"var(--ui-fs-h3)",marginBottom:6}}>Benefícios ativos</div>
      {[["Seguro de saúde Multicare","Plano B · desde 2021","Ativo"],["Cartão refeição Edenred","8,60 €/dia útil","Ativo"],["Fundo de pensões","Contribuição 2% + 2%","Ativo"],["Protocolo ginásio","Desconto 30%","Disponível"],["Formação externa","1 500 €/ano","Por usar"]].map(([n,d,s])=><div className="listrow" key={n}><div style={{flex:1}}><div style={{fontWeight:500}}>{n}</div><div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{d}</div></div><UIPill tone={s==="Ativo"?"success":s==="Disponível"?"info":"neutral"} dot={s==="Ativo"}>{s}</UIPill></div>)}
    </UICard>
  </React.Fragment>}
  </div>

  {up&&<UIModal open onClose={()=>setUp(null)} title={up.name} width={440}
    footer={<React.Fragment><UIButton variant="ghost" onClick={()=>setUp(null)}>Cancelar</UIButton><UIButton onClick={()=>setUp(null)}>Submeter</UIButton></React.Fragment>}>
    <div style={{display:"flex",flexDirection:"column",gap:14}}>
      <div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Carrega o documento atualizado. A equipa de Pessoas valida em 48h.</div>
      <UIInput label="Número do documento" defaultValue={up.num||""}/>
      <UIInput label="Nova validade" placeholder="dd/mm/aaaa"/>
      <div className="row" style={{gap:12}}><PfScan label="Frente"/><PfScan label="Verso"/></div>
    </div>
  </UIModal>}

  {assinar&&<UIModal open onClose={()=>setAssinar(null)} title={"Assinar · "+assinar.n} width={600}
    footer={<div className="row" style={{gap:8}}>
      <span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Assinatura eletrónica com registo de data e hora</span><div className="spring"/>
      <UIButton variant="ghost" onClick={()=>setAssinar(null)}>Cancelar</UIButton>
      <UIButton disabled={!aceito||nomeAss.trim()!=="Hugo Montenegro"} onClick={()=>{marcaDoc(assinar.id,"Assinado");setAssinar(null);setPfAviso(assinar.n+" assinado. Vais receber uma cópia por email.");}}>Assinar documento</UIButton>
    </div>}>
    <div style={{display:"flex",flexDirection:"column",gap:16}}>
      <div style={{padding:"16px 18px",borderRadius:"var(--ui-r-md)",background:"var(--ui-surface-2)",border:"1px solid var(--ui-divider)",maxHeight:180,overflow:"auto",fontSize:"var(--ui-fs-sm)",lineHeight:1.6}}>
        <div style={{fontWeight:600,marginBottom:8}}>{assinar.n.replace(".pdf","")}</div>
        <p style={{margin:"0 0 8px"}}>Entre a Xcope AI e Hugo Montenegro é celebrado o presente aditamento ao contrato de trabalho de 3 de março de 2021.</p>
        <p style={{margin:"0 0 8px"}}>Cláusula única: a retribuição base mensal é atualizada com efeitos a 1 de janeiro de 2026, mantendo-se inalteradas as restantes condições contratuais.</p>
        <p style={{margin:0}}>Feito em duplicado, ficando cada parte com um exemplar.</p>
      </div>
      <UICheckbox label="Li e aceito o conteúdo do documento" checked={aceito} onChange={()=>setAceito(a=>!a)}/>
      <UIInput label="Escreve o teu nome completo para assinar" placeholder="Hugo Montenegro" value={nomeAss} onChange={e=>setNomeAss(e.target.value)}
        error={nomeAss&&nomeAss.trim()!=="Hugo Montenegro"?"Tem de igualar o nome do contrato: Hugo Montenegro":undefined}/>
    </div>
  </UIModal>}

  {ler&&<UIModal open onClose={()=>setLer(null)} title={ler.n} width={600}
    footer={<div className="row" style={{gap:8}}><div className="spring"/>
      <UIButton variant="ghost" onClick={()=>setLer(null)}>Fechar</UIButton>
      <UIButton onClick={()=>{marcaDoc(ler.id,"Lido");setLer(null);setPfAviso(ler.n+" marcado como lido.");}}>Marcar como lido</UIButton>
    </div>}>
    <div style={{padding:"16px 18px",borderRadius:"var(--ui-r-md)",background:"var(--ui-surface-2)",border:"1px solid var(--ui-divider)",maxHeight:260,overflow:"auto",fontSize:"var(--ui-fs-sm)",lineHeight:1.6}}>
      <div style={{fontWeight:600,marginBottom:8}}>{ler.n.replace(".pdf","")}</div>
      <p style={{margin:"0 0 8px"}}>A partir de 1 de agosto de 2026, cada colaborador pode trabalhar remotamente até 3 dias por semana, mediante acordo com o gestor direto.</p>
      <p style={{margin:"0 0 8px"}}>Os dias de presença comum de cada equipa são definidos trimestralmente e publicados no calendário. O registo de tempos de trabalho mantém-se obrigatório em regime remoto.</p>
      <p style={{margin:0}}>Esta política substitui a versão de 2024 e é revista anualmente pela equipa de Pessoas.</p>
    </div>
  </UIModal>}
  </React.Fragment>;};
// sidebar destinations that are really views of the profile — one home per feature
S["profile-documents"]=()=><S.profile initialTab="docs"/>;
S.career=()=><S.profile initialTab="carreira"/>;