const SECTOR_ITEMS=[
  {id:'hoteis',icon:'building-2',title:'Hotéis e alojamento',desc:'A experiência do hóspede começa nos têxteis: alcatifas de corredor, estofos do lobby, cortinados.',scope:['Manutenção contínua de áreas comuns e quartos','Intervenções em janelas de baixa ocupação','Padrão de execução ao nível do setor'],services:['Higienização de alcatifas e pavimentos têxteis','Higienização de estofos empresariais','Manutenção têxtil para hotéis'],link:'#servicos'},
  {id:'restauracao',icon:'utensils',title:'Restaurantes',desc:'Estofos e bancos corridos sujeitos a uso intensivo diário, sem margem para fechar a sala.',scope:['Higienização em janelas noturnas','Impermeabilização contra derrames','Ciclos curtos e regulares'],services:['Higienização de estofos empresariais','Impermeabilização técnica de têxteis','Planos de manutenção preventiva'],link:'#servicos'},
  {id:'saude',icon:'stethoscope',title:'Hospitais e clínicas',desc:'Ambientes com requisitos de higiene elevados e zero tolerância a interrupções.',scope:['Produtos e métodos adequados a ambientes de saúde','Planeamento por alas e serviços','Registo documental de cada intervenção'],services:['Higienização de cadeiras corporativas','Higienização de estofos empresariais','Higienização de cortinados e blackout'],link:'#servicos'},
  {id:'educacao',icon:'graduation-cap',title:'Escolas e universidades',desc:'Auditórios, bibliotecas e salas com utilização intensiva e calendários letivos rígidos.',scope:['Intervenções em períodos de pausa letiva','Grandes volumes executados em poucos dias','Planos anuais alinhados com o calendário escolar'],services:['Higienização de auditórios e teatros','Manutenção de alcatifas e pavimentos têxteis','Higienização de cadeiras e estofos'],link:'#servicos'},
  {id:'cultura',icon:'theater',title:'Auditórios e teatros',desc:'Centenas de lugares, eventos consecutivos e prazos que não se negoceiam.',scope:['Plateias completas entre eventos','Equipas dimensionadas ao volume','Relatório final por intervenção'],services:['Higienização de cadeiras de plateia','Manutenção de alcatifas e pavimentos têxteis','Higienização de tapetes e corredores têxteis'],link:'#servicos'},
  {id:'escritorios',icon:'briefcase',title:'Escritórios e empresas',desc:'O estado dos postos de trabalho comunica cultura — a colaboradores, clientes e candidatos.',scope:['Cadeiras e estofos por pisos e alas','Execução fora do horário de expediente','Planos plurianuais com calendário fixo'],services:['Higienização de cadeiras corporativas','Higienização de sofás e estofos empresariais','Manutenção de alcatifas e tapetes comerciais'],link:'#servicos'},
  {id:'condominios',icon:'building',title:'Condomínios premium',desc:'Zonas comuns que sustentam o valor do edifício e a expectativa dos condóminos.',scope:['Alcatifas e estofos de entradas e salas comuns','Coordenação com a administração','Manutenção recorrente programada'],services:['Manutenção de alcatifas e pavimentos têxteis','Higienização de estofos e sofás de zonas comuns','Impermeabilização técnica de estofos'],link:'#servicos'}
];
function SectorRow({id,icon,title,desc,scope=[],services=[],link='#servicos',i}){
  const scopeItems = Array.isArray(scope) ? scope : [];
  const serviceItems = Array.isArray(services) ? services : [];

  return <details id={id} style={{borderTop:'1px solid var(--border-subtle)',padding:'36px 0'}}>
    <summary style={{listStyle:'none',cursor:'pointer',display:'grid',gridTemplateColumns:'72px minmax(0,1.1fr) auto',gap:28,alignItems:'center'}}>
      <div style={{display:'grid',justifyItems:'start',gap:12}}>
        <div className="step-num">0{i+1}</div>
        <Icon name={icon} size={26}/>
      </div>
      <div>
        <div style={{fontFamily:'var(--font-display)',fontSize:'var(--fs-h2)',fontWeight:600,color:'var(--navy-800)',lineHeight:1.15,margin:'0 0 8px'}}>{title}</div>
        <div style={{fontSize:16,margin:0,maxWidth:540,color:'var(--text-body)'}}>{desc}</div>
      </div>
      <div className="eyebrow" style={{margin:0,textAlign:'right',color:'var(--gray-400)'}}>Ver detalhe</div>
    </summary>
    <div style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)',gap:28,marginTop:28,paddingLeft:72}}>
      <div style={{background:'#fff',border:'1px solid var(--border-subtle)',boxShadow:'var(--shadow-1)',padding:24}}>
        <div className="eyebrow" style={{marginBottom:14}}>O que costuma funcionar melhor</div>
        <ul className="tick-list">
          {scopeItems.map((s)=><li key={s}><Icon name="check" size={18} color="var(--gold-600)"/>{s}</li>)}
        </ul>
      </div>
      <div style={{background:'var(--surface-subtle)',border:'1px solid var(--border-subtle)',padding:24}}>
        <div className="eyebrow" style={{marginBottom:14}}>Serviços CLEANEPEL mais indicados</div>
        <div style={{display:'grid',gap:12}}>
          {serviceItems.map((service)=><div key={service} style={{display:'flex',gap:10,alignItems:'flex-start'}}><Icon name="sparkles" size={18} color="var(--cyan-600)"/><span style={{fontSize:15}}>{service}</span></div>)}
        </div>
        <div style={{display:'flex',gap:16,flexWrap:'wrap',marginTop:18,alignItems:'center'}}>
          <a href={link} style={{fontFamily:'var(--font-display)',fontWeight:500,fontSize:13.5}}>Ver todos os serviços →</a>
          <span className="muted" style={{fontSize:13}}>Escolha o setor, depois confirmamos o plano na visita técnica.</span>
        </div>
      </div>
    </div>
  </details>;
}
function Setores(){
  return <div>
    <PageHero crumb="Setores de atuação" eyebrow="Setores de atuação" title="Cada setor tem as suas regras. Conhecemos todas." lead="O que muda entre um hotel e um hospital não é o padrão de qualidade — é o planeamento, o método e os requisitos. A proposta reflete sempre o setor."/>
    <section className="section" data-screen-label="Setores"><div className="wrap">
      <div style={{borderBottom:'1px solid var(--border-subtle)'}}>
        {SECTOR_ITEMS.map((sector,i)=><SectorRow key={sector.id} id={sector.id} icon={sector.icon} title={sector.title} desc={sector.desc} scope={sector.scope} services={sector.services} link={sector.link} i={i}/>) }
      </div>
    </div></section>
    <section className="section section-dark" data-screen-label="Escala"><div className="wrap grid2" style={{alignItems:'center'}}>
      <SectionHead dark eyebrow="Capacidade" title="Dimensionados para operações em escala" lead="Equipas próprias, equipamento profissional e logística preparada para instalações com centenas de cadeiras, quartos e lugares sentados." style={{marginBottom:0}}/>
      <div style={{display:'flex',gap:64,justifyContent:'flex-end',flexWrap:'wrap'}}>
        <Stat n="+120" l="auditórios higienizados"/><Stat n="+15.000" l="cadeiras por ano"/><Stat n="7" l="setores servidos"/>
      </div>
    </div></section>
    <CTABand title="O seu setor não está na lista?" lead="Se a instalação tem têxteis com utilização profissional, temos um plano para ela. Fale connosco." secondary="Falar com a equipa comercial"/>
  </div>;
}
registerPage('setores', Setores);