const {Button,Input,Select}=NS;
/* ---- CONFIG COMERCIAL: valores indicativos a validar pela direção ---- */
const PRICING={base:[2200,5400,11500,21000],mult:{Essencial:1,'Contínuo':1.85,Integral:3.15},spread:.18,replaceFactor:7.5};
const SECTORS=[
  ['hotel','Hotel ou alojamento','quartos','building-2'],
  ['escritorio','Escritório ou edifício de serviços','postos de trabalho','briefcase'],
  ['auditorio','Auditório, teatro ou sala de eventos','lugares','theater'],
  ['restauracao','Restaurante ou espaço de refeições','lugares sentados','utensils'],
  ['saude','Hospital, clínica ou unidade de saúde','salas e gabinetes','stethoscope'],
  ['educacao','Escola ou universidade','salas e auditórios','graduation-cap'],
  ['condominio','Condomínio ou edifício em gestão','frações','building'],
  ['residencial','Habitação particular','—','home']];
const DIM=[['s','Até 50','p'],['m','50 a 200','p'],['l','200 a 500','p'],['xl','Mais de 500','p']];
const MATS=[['alcatifa','Alcatifa ou pavimento têxtil'],['estofos','Estofos e sofás'],['cadeiras','Cadeiras operativas ou de plateia'],['cortinados','Cortinados e blackout'],['colchoes','Colchões'],['tapetes','Tapetes e zonas de entrada']];
const SIT=[
  ['nenhuma','Não existe manutenção definida','Interviemos apenas quando o problema já é visível.',3],
  ['reativo','Fornecedor pontual e reativo','Contratamos serviços isolados, sem calendário.',2],
  ['rever','Contrato ativo a rever','Já temos contrato, mas queremos comparar ou melhorar.',1],
  ['abertura','Abertura, remodelação ou novo edifício','Vamos definir a manutenção desde o início.',2]];
const WIN=[
  ['livre','Podemos encerrar áreas durante o dia','',0],
  ['noites','Apenas noites, fins de semana ou pausas','',2],
  ['nunca','A operação nunca pode parar','',3]];
const STEPS=['Instalação','Dimensão','Materiais','Situação atual','Janela operacional'];
const fmt=n=>(Math.round(n/100)*100).toLocaleString('pt-PT');
function diagnose(a){
  const di=DIM.findIndex(d=>d[0]===a.dim), mats=a.mats.length;
  const sit=(SIT.find(s=>s[0]===a.sit)||[])[3]||0, win=(WIN.find(w=>w[0]===a.win)||[])[3]||0;
  const score=di*2+Math.min(mats,4)+sit+win;
  const plan=score>=11?'Integral':score>=7?'Contínuo':'Essencial';
  const freq={Essencial:['Anual',1,[5]],'Contínuo':['Semestral',2,[2,8]],Integral:['Trimestral',4,[1,4,7,10]]}[plan];
  const risk=sit+win>=5?['Elevado','var(--gold-600)']:sit+win>=3?['Moderado','var(--cyan-600)']:['Controlado','var(--navy-700)'];
  const mid=PRICING.base[di]*PRICING.mult[plan]*(1+Math.max(0,mats-1)*.11);
  return {plan,freq,risk,score,lo:mid*(1-PRICING.spread),hi:mid*(1+PRICING.spread),rep:mid*PRICING.replaceFactor,mats,unit:(SECTORS.find(s=>s[0]===a.setor)||[])[2]};
}
function Opt({on,onClick,title,desc}){
  return <button type="button" className="dg-opt" aria-pressed={!!on} onClick={onClick}>
    <span style={{width:16,height:16,border:'1px solid '+(on?'var(--navy-800)':'var(--border-strong)'),background:on?'var(--navy-800)':'#fff',flexShrink:0,display:'flex',alignItems:'center',justifyContent:'center'}}>{on&&<span style={{width:6,height:6,background:'#fff'}}></span>}</span>
    <span style={{flex:1}}><strong>{title}</strong>{desc&&<span className="d">{desc}</span>}</span>
  </button>;
}
function Routed(){
  return <div className="dg-panel" data-screen-label="Encaminhamento IMPEC CLEAN">
    <div className="dg-badge" style={{color:'var(--cyan-600)'}}>Encaminhamento</div>
    <h2 className="h1" style={{margin:'20px 0 0'}}>A sua necessidade é residencial, e no grupo MCI temos a empresa indicada para particulares.</h2>
    <div className="gold-rule"></div>
    <p style={{maxWidth:560,margin:'22px 0 0'}}>A CLEANEPEL trabalha exclusivamente com instalações profissionais em regime de contrato. Para habitações particulares, a empresa do grupo é a <strong>IMPEC CLEAN</strong> — a mesma equipa técnica, a mesma exigência, o serviço adequado ao seu caso.</p>
    <p className="muted" style={{fontSize:14,margin:'14px 0 28px'}}>Preferimos encaminhá-lo bem do que vender-lhe um contrato que não necessita.</p>
    <div style={{display:'flex',gap:14,flexWrap:'wrap'}}>
      <a href="https://impecclean.pt" style={{textDecoration:'none'}}><Button variant="primary" size="lg">Ir para a IMPEC CLEAN</Button></a>
      <a href="#home" style={{textDecoration:'none'}}><Button variant="secondary" size="lg">Voltar ao início</Button></a>
    </div>
  </div>;
}
function Result({a,r,onRestart}){
  const sector=SECTORS.find(s=>s[0]===a.setor)||[];
  const M=['J','F','M','A','M','J','J','A','S','O','N','D'];
  const lead=useLeadForm('cleanepel-diagnostico',()=>({diagnostico:{
    setor:sector[1],
    dimensao:((DIM.find(d=>d[0]===a.dim)||[])[1]||'')+' '+r.unit,
    materiais:a.mats.map(m=>(MATS.find(x=>x[0]===m)||[])[1]),
    situacao:(SIT.find(s=>s[0]===a.sit)||[])[1],
    janela:(WIN.find(w=>w[0]===a.win)||[])[1],
    plano:r.plan,
    frequencia:r.freq[0],
    intervencoesAno:r.freq[1],
    risco:r.risk[0],
    investimento:'€'+fmt(r.lo)+' – €'+fmt(r.hi),
  }}));
  if(lead.sent) return <div className="dg-panel" data-screen-label="Confirmação">
    <div className="dg-badge" style={{color:'var(--cyan-600)'}}>Pedido registado</div>
    <h2 className="h1" style={{margin:'20px 0 0'}}>Diagnóstico enviado. Contacto em 24 horas úteis.</h2>
    <div className="gold-rule"></div>
    <p style={{maxWidth:560,margin:'22px 0 0'}}>Recebeu por email o diagnóstico completo da sua instalação. Um gestor de conta irá contactá-lo para agendar a visita técnica que confirma o âmbito e fixa as condições contratuais.</p>
    <div style={{marginTop:28}}><a href="#contratos" style={{fontFamily:'var(--font-display)',fontWeight:500,fontSize:14}}>Entretanto, veja o que inclui um contrato CLEANEPEL →</a></div>
  </div>;
  return <div style={{display:'grid',gap:32}} data-screen-label="Resultado do diagnóstico">
    <div className="dg-panel">
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:24,flexWrap:'wrap'}}>
        <div>
          <div className="dg-badge" style={{color:'var(--cyan-600)'}}>Diagnóstico técnico preliminar</div>
          <h2 className="h1" style={{margin:'18px 0 0'}}>Plano recomendado: <span style={{color:'var(--cyan-600)'}}>{r.plan}</span></h2>
          <div className="gold-rule"></div>
        </div>
        <div className="dg-badge" style={{color:r.risk[1]}}>Risco de degradação · {r.risk[0]}</div>
      </div>
      <p style={{maxWidth:600,margin:'22px 0 34px'}}>Com base na dimensão declarada, nos {r.mats} tipos de material presentes e na janela operacional disponível, a sua instalação exige manutenção <strong>{r.freq[0].toLowerCase()}</strong> — {r.freq[1]} {r.freq[1]===1?'intervenção':'intervenções'} por ano, executadas {a.win==='nunca'?'sem qualquer interrupção da operação':a.win==='noites'?'em janelas noturnas e de fim de semana':'em janelas diurnas coordenadas'}.</p>
      <div className="grid2" style={{gap:48}}>
        <dl className="dg-kv">
          <dt>Tipo de instalação</dt><dd>{sector[1]}</dd>
          <dt>Dimensão declarada</dt><dd>{(DIM.find(d=>d[0]===a.dim)||[])[1]} {r.unit}</dd>
          <dt>Materiais em âmbito</dt><dd>{r.mats} de 6</dd>
          <dt>Frequência recomendada</dt><dd>{r.freq[0]}</dd>
          <dt>Intervenções por ano</dt><dd>{r.freq[1]}</dd>
          <dt>Reporte incluído</dt><dd>{r.plan==='Integral'?'Mensal + auditoria':r.plan==='Contínuo'?'Relatório + fotografia':'Relatório por intervenção'}</dd>
        </dl>
        <div>
          <div className="eyebrow" style={{marginBottom:14}}>Calendário-tipo do primeiro ano</div>
          <div className="dg-cal">{M.map((m,i)=><div key={i} className={r.freq[2].includes(i)?'hit':''}>{m}</div>)}</div>
          <p className="muted" style={{fontSize:13,margin:'14px 0 0'}}>Meses indicativos. O calendário definitivo é fixado na visita técnica, ajustado à sazonalidade da sua operação.</p>
        </div>
      </div>
    </div>
    <div className="grid2" style={{gap:32}}>
      <div style={{background:'var(--navy-800)',color:'#fff',padding:'36px 38px'}}>
        <div className="eyebrow" style={{color:'var(--cyan-500)'}}>Investimento anual indicativo</div>
        <div style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:40,color:'var(--gold-400)',margin:'14px 0 0',lineHeight:1.1}}>€{fmt(r.lo)} – €{fmt(r.hi)}</div>
        <p style={{color:'var(--gray-200)',fontSize:14,margin:'14px 0 0'}}>Plano {r.plan}, âmbito completo, todas as intervenções do ano incluídas. Valor fixado por contrato — sem revisões durante o período acordado.</p>
      </div>
      <div style={{border:'1px solid var(--border-subtle)',background:'var(--surface-subtle)',padding:'36px 38px'}}>
        <div className="eyebrow">O custo de não manter</div>
        <div style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:40,color:'var(--navy-800)',margin:'14px 0 0',lineHeight:1.1}}>≈ €{fmt(r.rep)}</div>
        <p style={{fontSize:14,margin:'14px 0 0'}}>Estimativa de substituição dos mesmos materiais quando a degradação se torna irreversível. A manutenção planeada adia essa despesa em anos — e é a razão pela qual {98}% dos nossos contratos são renovados.</p>
      </div>
    </div>
    <div className="dg-panel">
      <h3 style={{fontSize:'var(--fs-h2)',fontWeight:600,margin:0}}>Receber o diagnóstico completo e agendar a visita técnica</h3>
      <p style={{maxWidth:560,margin:'12px 0 28px'}}>Enviamos o dossiê técnico com âmbito detalhado, calendário e condições contratuais. A visita técnica confirma os valores — sem compromisso.</p>
      <form onSubmit={lead.onSubmit} style={{display:'grid',gap:18,maxWidth:620}}>
        <div className="grid2" style={{gap:18}}><Input name="name" label="Nome" placeholder="O seu nome" required minLength={2}/><Input name="role" label="Função" placeholder="Ex.: Facility Manager"/></div>
        <div className="grid2" style={{gap:18}}><Input name="company" label="Empresa" placeholder="Nome da empresa" required/><Input name="email" type="email" label="Email profissional" placeholder="nome@empresa.pt" required/></div>
        <div className="grid2" style={{gap:18}}><Input name="phone" type="tel" label="Telefone" placeholder="+351"/><Select name="horizon" label="Horizonte de decisão" options={['Este mês','Próximo trimestre','Este ano','Ainda a estudar']}/></div>
        <div style={{display:'flex',gap:14,flexWrap:'wrap',marginTop:6}}>
          <Button type="submit" variant="primary" size="lg" disabled={lead.sending}>{lead.sending?'A enviar…':'Receber diagnóstico e agendar visita'}</Button>
          <Button variant="secondary" size="lg" onClick={onRestart}>Refazer diagnóstico</Button>
        </div>
        <p className="muted" style={{fontSize:13,margin:0}}>Seis campos, porque já sabemos o essencial sobre a sua instalação. Os dados servem exclusivamente para preparar a visita.</p>
      </form>
    </div>
  </div>;
}
function Diagnostico(){
  const params=new URLSearchParams(window.__ROUTEQ||location.search);
  const pre=SECTORS.some(s=>s[0]===params.get('setor'))?params.get('setor'):null;
  const [a,setA]=React.useState({setor:pre,dim:null,mats:[],sit:null,win:null});
  const [i,setI]=React.useState(pre?1:0);
  const [done,setDone]=React.useState(false);
  const set=(k,v)=>setA(p=>({...p,[k]:v}));
  const toggleMat=m=>setA(p=>({...p,mats:p.mats.includes(m)?p.mats.filter(x=>x!==m):[...p.mats,m]}));
  const advance=()=>{if(i<4)setI(i+1);else setDone(true);};
  const pick=(k,v)=>{set(k,v);setTimeout(advance,180);};
  const restart=()=>{setA({setor:null,dim:null,mats:[],sit:null,win:null});setI(0);setDone(false);};
  const routed=a.setor==='residencial';
  const canNext=[a.setor,a.dim,a.mats.length>0,a.sit,a.win][i];
  const unit=(SECTORS.find(s=>s[0]===a.setor)||[])[2];
  const questions=[
    {q:'Que tipo de instalação pretende manter?',h:'Determina o método, os requisitos e o padrão de execução.',body:<div style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)',gap:12}}>{SECTORS.map(([k,l])=><Opt key={k} on={a.setor===k} title={l} onClick={()=>{set('setor',k);if(k!=='residencial')setTimeout(advance,180);}}/>)}</div>},
    {q:'Qual a dimensão aproximada?',h:'Define o dimensionamento de equipa e a duração de cada intervenção.',body:<div style={{display:'grid',gap:12}}>{DIM.map(([k,l])=><Opt key={k} on={a.dim===k} title={l+' '+unit} onClick={()=>pick('dim',k)}/>)}</div>},
    {q:'Que materiais têxteis existem na instalação?',h:'Selecione todos os aplicáveis. Cada material tem um ciclo de conservação próprio.',body:<div style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)',gap:12}}>{MATS.map(([k,l])=><Opt key={k} on={a.mats.includes(k)} title={l} onClick={()=>toggleMat(k)}/>)}</div>},
    {q:'Como é feita a manutenção hoje?',h:'É o principal indicador do estado de conservação atual.',body:<div style={{display:'grid',gap:12}}>{SIT.map(([k,l,d])=><Opt key={k} on={a.sit===k} title={l} desc={d} onClick={()=>pick('sit',k)}/>)}</div>},
    {q:'Que janela operacional temos disponível?',h:'Determina o faseamento — e é onde a maioria dos fornecedores falha.',body:<div style={{display:'grid',gap:12}}>{WIN.map(([k,l])=><Opt key={k} on={a.win===k} title={l} onClick={()=>pick('win',k)}/>)}</div>}];
  return <div>
    <PageHero crumb="Diagnóstico de Instalação" eyebrow="Diagnóstico de instalação · 5 perguntas, 60 segundos" title={done||routed?'Diagnóstico da sua instalação':'Antes de falarmos, deixe-nos entender a sua instalação.'} lead={done||routed?null:'Cinco perguntas técnicas. No final recebe o plano recomendado, a frequência adequada, o calendário-tipo e a faixa de investimento anual — antes de qualquer contacto comercial.'}/>
    <section className="section"><div className="wrap" style={{maxWidth:routed||done?1080:840}}>
      {routed?<Routed/>:done?<Result a={a} r={diagnose(a)} onRestart={restart}/>:<div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:12}}>
          <span className="eyebrow"><span className="num">0{i+1}</span>{STEPS[i]}</span>
          <span className="crumb">Passo {i+1} de 5</span>
        </div>
        <div className="dg-prog" style={{marginBottom:40}}>{STEPS.map((s,n)=><i key={s} className={n<i?'done':n===i?'on':''}></i>)}</div>
        <h2 className="h1" style={{margin:0}}>{questions[i].q}</h2>
        <p className="muted" style={{fontSize:15,margin:'12px 0 32px',maxWidth:560}}>{questions[i].h}</p>
        {questions[i].body}
        <div style={{display:'flex',gap:14,marginTop:32,alignItems:'center'}}>
          {i>0&&<Button variant="secondary" onClick={()=>setI(i-1)}>Anterior</Button>}
          <Button variant="primary" disabled={!canNext} onClick={advance}>{i===4?'Ver diagnóstico':'Continuar'}</Button>
          {i===2&&<span className="muted" style={{fontSize:13}}>{a.mats.length} selecionado{a.mats.length===1?'':'s'}</span>}
        </div>
      </div>}
    </div></section>
    {!done&&!routed&&<section className="section section-sub"><div className="wrap">
      <div className="grid3">
        {[['shield-check','Sem contacto comercial','O diagnóstico é apresentado no ecrã. Só pede os seus dados se quiser o dossiê completo.'],['calculator','Valores indicativos reais','Mostramos a faixa de investimento antes de falar consigo. Sem orçamentos-surpresa.'],['git-branch','Encaminhamento honesto','Se a sua necessidade não for empresarial, dizemos-lhe e indicamos a empresa certa do grupo.']].map(([ic,t,d])=><div key={t} style={{borderTop:'1px solid var(--border-subtle)',paddingTop:22}}>
          <Icon name={ic} size={24}/>
          <h3 style={{fontSize:'var(--fs-h3)',fontWeight:600,margin:'14px 0 8px'}}>{t}</h3>
          <p style={{fontSize:15,margin:0}}>{d}</p>
        </div>)}
      </div>
    </div></section>}
  </div>;
}
registerPage('diagnostico', Diagnostico);