function ServiceGroup({num,eyebrow,title,lead,items,mp4Src,posterSrc,videoAlt,flip,sub}){
  const img=<div className="service-media">
    <video className="service-media-video" autoPlay muted loop playsInline preload="metadata" poster={posterSrc} aria-label={videoAlt || ('Video — '+title)}>
      <source src={mp4Src} type="video/mp4" />
      O seu navegador nao suporta video HTML5.
    </video>
  </div>;
  const txt=<div>
    <SectionHead num={num} eyebrow={eyebrow} title={title} lead={lead} style={{marginBottom:28}}/>
    <div className="hairline-list">
      {items.map(([t,d])=><div key={t}>
        <h3 style={{fontSize:17,fontFamily:'var(--font-display)',fontWeight:600,margin:'0 0 6px',color:'var(--navy-800)'}}>{t}</h3>
        <p style={{fontSize:15,margin:0,maxWidth:480}}>{d}</p>
      </div>)}
    </div>
  </div>;
  return <section className={'section'+(sub?' section-sub':'')} data-screen-label={eyebrow}><div className="wrap grid2" style={{alignItems:'start'}}>
    {flip?[img,txt].map((x,i)=><React.Fragment key={i}>{x}</React.Fragment>):[txt,img].map((x,i)=><React.Fragment key={i}>{x}</React.Fragment>)}
  </div></section>;
}
function Servicos(){
  return <div>
    <PageHero crumb="Serviços" eyebrow="Serviços" title="Conservação têxtil, orientada à operação da sua empresa." lead="Todos os serviços são executados por equipas próprias, com métodos definidos por análise técnica e planeamento que respeita o funcionamento da instalação."/>
    <ServiceGroup num="01" eyebrow="Ambientes de trabalho" title="Escritórios e postos de trabalho" mp4Src="assets/mp4-files/office-space-cleanepel.mp4" posterSrc="assets/Cleanepel-Marcelo-speaking-phone.png" videoAlt="Equipa CLEANEPEL em operacao em espaco de escritorio" lead="O mobiliário de trabalho é o têxtil mais utilizado de qualquer organização — e o mais visível para colaboradores e visitantes."
      items={[['Cadeiras corporativas','Higienização programada por pisos e alas, executada fora do horário de expediente. Postos prontos na manhã seguinte.'],['Estofos empresariais','Sofás, cadeirões e estofos de receção — as primeiras superfícies que um visitante avalia.'],['Escritórios completos','Planos integrados de cadeiras, estofos, alcatifas, tapetes e cortinados para edifícios de serviços.']]}/>
    <ServiceGroup sub flip num="02" eyebrow="Grandes superfícies" title="Auditórios, alcatifas e tapetes comerciais" mp4Src="assets/mp4-files/office-carpet-cleaning-cleanepel.mp4" posterSrc="assets/cleanepel-mattress-washer-2.JPG" videoAlt="Limpeza tecnica de alcatifa em superficie corporativa" lead="Superfícies de grande dimensão exigem logística, faseamento e prazos rigorosos."
      items={[['Auditórios e teatros','Plateias completas higienizadas entre eventos, com relatório final de intervenção.'],['Alcatifas','Tratamento por zonas com secagem controlada, planeado para não interromper a circulação.'],['Tapetes comerciais','Manutenção regular de zonas de entrada e passagem — a primeira impressão de qualquer edifício.']]}/>
    <ServiceGroup num="03" eyebrow="Hotelaria e restauração" title="Hotéis, restaurantes e alojamento" mp4Src="assets/mp4-files/restaurant-cleaning-cleanepel.mp4" posterSrc="assets/cleanepel-mattress-washer.JPG" videoAlt="Operacao CLEANEPEL em ambiente de restauracao" lead="No setor da hospitalidade, o estado dos têxteis é parte da experiência do hóspede — e da reputação da casa."
      items={[['Hotéis','Alcatifas de corredores, estofos de áreas comuns, cabeceiras e cortinados, ao padrão do setor.'],['Restaurantes','Cadeiras, bancos corridos e estofos higienizados em janelas noturnas, sem afetar o serviço.'],['Alojamento local','Manutenção recorrente de unidades geridas profissionalmente.']]}/>
    <ServiceGroup sub flip num="04" eyebrow="Proteção e continuidade" title="Impermeabilização, prevenção e projetos especiais" mp4Src="assets/mp4-files/restaurant-chairs-cleaned-cleanepel.mp4" posterSrc="assets/cleanepel-mattress-setup.JPG" videoAlt="Higienizacao de cadeiras e estofos em operacao tecnica" lead="A conservação não termina na higienização: protege-se, planeia-se e antecipa-se."
      items={[['Impermeabilização técnica','Proteção de estofos e têxteis contra derrames e desgaste, prolongando os ciclos de manutenção.'],['Planos de manutenção preventiva','Calendários trimestrais, semestrais ou anuais com gestor de conta dedicado e relatórios periódicos.'],['Projetos especiais','Operações de grande escala — reaberturas, remodelações, auditorias de estado de conservação.']]}/>
    <CTABand title="Cada instalação exige um plano próprio." lead="A visita técnica define o âmbito certo — sem pacotes genéricos, sem estimativas à distância." secondary="Falar com a equipa comercial"/>
  </div>;
}
registerPage('servicos', Servicos);