const {Table,Card}=NS;
function Includes(){
  const items=[
    ['user-check','Gestor de conta dedicado','Um interlocutor único que conhece a instalação, o histórico e o calendário.'],
    ['calendar-days','Calendário anual fixo','Todas as intervenções do ano definidas à partida, ajustáveis à sazonalidade.'],
    ['timer','Prazos de resposta definidos','Tempos de resposta contratualizados para pedidos pontuais e ocorrências.'],
    ['file-text','Relatório por intervenção','Âmbito executado, registo fotográfico e recomendações técnicas.'],
    ['search-check','Auditoria de qualidade','Verificações periódicas do estado de conservação, com registo documental.'],
    ['lock','Condições estáveis','Valores e âmbito fixados por contrato. Sem surpresas no orçamento anual.']];
  return <section className="section" data-screen-label="O que inclui"><div className="wrap">
    <SectionHead num="01" eyebrow="O que está incluído" title="Um contrato é mais do que um preço por serviço" lead="É a garantia de que a conservação da instalação deixa de ser um problema seu — com estrutura, prazos e responsabilidades definidos."/>
    <div className="grid3">
      {items.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>;
}
function Plans(){
  return <section className="section section-sub" data-screen-label="Planos"><div className="wrap">
    <SectionHead num="02" eyebrow="Modelos de contrato" title="Três níveis de acompanhamento" lead="O plano certo depende da utilização da instalação e da criticidade dos materiais — a visita técnica define a recomendação."/>
    <Table columns={['Plano','Frequência','Âmbito','Reporte']} rows={[
      ['Essencial','Anual','Estofos e cadeiras','Relatório por intervenção'],
      ['Contínuo','Semestral','Estofos, cadeiras e alcatifas','Relatório + registo fotográfico'],
      ['Integral','Trimestral','Todos os têxteis da instalação','Relatório mensal + auditoria de qualidade']]}/>
    <p className="muted" style={{fontSize:14,marginTop:20}}>Todos os planos incluem gestor de conta dedicado e prazos de resposta contratualizados. Projetos especiais e impermeabilização podem ser integrados em qualquer plano.</p>
  </div></section>;
}
function Path(){
  const steps=[
    ['Visita técnica','Avaliação da instalação, dos materiais e do estado de conservação. Sem compromisso.'],
    ['Proposta contratual','Âmbito, calendário anual, condições e prazos de resposta — tudo por escrito.'],
    ['Arranque planeado','Primeira intervenção agendada em janela definida consigo. A partir daí, o calendário cumpre-se.']];
  return <section className="section" data-screen-label="Como se chega ao contrato"><div className="wrap">
    <SectionHead num="03" eyebrow="Como se chega ao contrato" title="Do primeiro contacto ao calendário em execução"/>
    <div className="grid3">
      {steps.map(([t,d],i)=><div key={t} style={{borderTop:'1px solid var(--border-subtle)',paddingTop:24}}>
        <div className="step-num">0{i+1}</div>
        <h3 style={{fontSize:'var(--fs-h3)',fontWeight:600,margin:'16px 0 8px'}}>{t}</h3>
        <p style={{fontSize:15,margin:0}}>{d}</p>
      </div>)}
    </div>
  </div></section>;
}
function Contratos(){
  return <div>
    <PageHero crumb="Contratos de manutenção" eyebrow="Contratos de manutenção" title="Previsibilidade contratual, ano após ano." lead="Os têxteis de uma instalação degradam-se de forma previsível. A manutenção também deve ser previsível: calendário fixo, âmbito definido e reporte auditável."/>
    <Includes/><Plans/><Path/>
    <CTABand title="Um contrato começa sempre por uma visita técnica." lead="Avaliamos a instalação e recomendamos o plano adequado — sem pacotes genéricos, sem compromisso." secondary="Falar com a equipa comercial"/>
  </div>;
}
registerPage('contratos', Contratos);