const {Button,Card}=NS;
function Hero(){
  const reviewCount=useReviewCount();
  return <section data-screen-label="Hero" style={{background:'var(--surface-subtle)',borderBottom:'1px solid var(--border-subtle)'}}>
    <div className="wrap hero-grid" style={{display:'grid',gridTemplateColumns:'minmax(0,1.05fr) minmax(0,1fr)',gap:56,alignItems:'center',padding:'88px 24px'}}>
      <div>
        <div className="eyebrow" style={{marginBottom:20}}>Higienização e manutenção têxtil para empresas</div>
        <h1 className="h-display">O património têxtil da sua empresa, sob gestão permanente.</h1>
        <p className="lead" style={{maxWidth:500,margin:'24px 0 32px'}}>Planeamos, executamos e auditamos a conservação de alcatifas, estofos e têxteis corporativos. Contratos recorrentes, prazos cumpridos, relatório de cada intervenção.</p>
        <div style={{border:'1px solid var(--border-subtle)',borderTop:'2px solid var(--gold-500)',background:'#fff',padding:'26px 28px',boxShadow:'var(--shadow-1)'}}>
          <div className="eyebrow">Diagnóstico de instalação · 60 segundos</div>
          <p style={{fontFamily:'var(--font-display)',fontWeight:500,fontSize:16,color:'var(--navy-800)',margin:'12px 0 16px'}}>Que tipo de instalação pretende manter?</p>
          <div style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)',gap:8}}>
            {[['hotel','Hotel ou alojamento'],['escritorio','Escritório'],['auditorio','Auditório ou teatro'],['saude','Clínica ou hospital'],['restauracao','Restaurante'],['condominio','Condomínio']].map(([k,l])=><a key={k} href={'#diagnostico?setor='+k} style={{textDecoration:'none',border:'1px solid var(--border-subtle)',padding:'11px 14px',fontFamily:'var(--font-display)',fontWeight:500,fontSize:13.5,color:'var(--navy-800)',transition:'border-color .15s ease'}} onMouseEnter={e=>e.currentTarget.style.borderColor='var(--cyan-500)'} onMouseLeave={e=>e.currentTarget.style.borderColor='var(--border-subtle)'}>{l}</a>)}
          </div>
          <div style={{marginTop:16,display:'flex',gap:20,alignItems:'center',flexWrap:'wrap'}}>
            <a href="#diagnostico" style={{fontSize:13.5,fontFamily:'var(--font-display)',fontWeight:500}}>Outro tipo de instalação →</a>
            <span className="muted" style={{fontSize:13}}>Recebe o plano e a faixa de investimento sem falar com ninguém.</span>
          </div>
        </div>
        <div style={{marginTop:28,paddingTop:20,borderTop:'1px solid var(--border-subtle)',fontSize:14,color:'var(--text-muted)'}}>{reviewCount} avaliações 5 estrelas no Google · Uma empresa MCI Group</div>
      </div>
      <div style={{height:460,minWidth:0}}>
        <img src="assets/cleanepel-mattress-washer.JPG" alt="Fotografia profissional da equipa CLEANEPEL em operação" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}} />
      </div>
    </div>
  </section>;
}
function Clients(){
  return <section style={{borderBottom:'1px solid var(--border-subtle)'}}><div className="wrap" style={{padding:'40px 24px'}}>
    <div style={{display:'grid',gridTemplateColumns:'auto repeat(6,minmax(0,1fr))',gap:20,alignItems:'center'}}>
      <span className="crumb" style={{marginRight:12}}>A confiança de</span>
      {[1,2,3,4,5,6].map(i=><div key={i} className="logo-slot"><image-slot id={'client-logo-'+i} shape="rect" fit="contain" placeholder="Logótipo"></image-slot></div>)}
    </div>
  </div></section>;
}
function Why(){
  const items=[
    ['file-check-2','Estrutura contratual','Âmbito, calendário e condições definidos por escrito. Sabe sempre o que será feito, quando e por quem.'],
    ['microscope','Profundidade técnica','Análise de fibras, tecidos e comportamento dos materiais antes de qualquer intervenção. Experiência de vários anos no mercado.'],
    ['clock-3','Execução sem interrupção','Intervenções planeadas fora do horário de funcionamento. A sua operação não pára.'],
    ['clipboard-check','Qualidade auditável','Relatório e registo fotográfico após cada intervenção. Resultados que pode apresentar internamente.']];
  return <section className="section" data-screen-label="Porque a CLEANEPEL"><div className="wrap">
    <SectionHead num="01" eyebrow="Porque a CLEANEPEL" title="Não vendemos limpeza. Gerimos conservação." lead="Uma instalação bem conservada protege a imagem da organização, prolonga a vida dos materiais e melhora a experiência de quem a utiliza todos os dias."/>
    <div className="grid4">
      {items.map(([ic,t,d])=><div key={t} style={{borderTop:'1px solid var(--border-subtle)',paddingTop:24}}>
        <Icon name={ic} size={24}/>
        <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 Services(){
  const items=[
    ['armchair','Cadeiras e estofos corporativos','Higienização programada de cadeiras, sofás e estofos de receção, por pisos e alas.'],
    ['theater','Auditórios e teatros','Plateias completas higienizadas fora do horário de funcionamento, com relatório final.'],
    ['building-2','Hotéis e restauração','Alcatifas, estofos e têxteis de áreas comuns, ao padrão do setor.'],
    ['layout-grid','Alcatifas e tapetes comerciais','Tratamento por zonas, com planeamento que respeita a operação diária.'],
    ['shield-check','Impermeabilização técnica','Proteção de estofos e têxteis contra derrames e desgaste, prolongando os ciclos de manutenção.'],
    ['calendar-check','Manutenção preventiva','Planos trimestrais, semestrais e anuais com calendário fixo e gestor de conta dedicado.']];
  return <section className="section section-sub" data-screen-label="Serviços"><div className="wrap">
    <SectionHead num="02" eyebrow="Serviços" title="Uma solução para cada instalação"/>
    <div className="grid3">
      {items.map(([ic,t,d])=><Card key={t} title={t}><div style={{marginBottom:10}}><Icon name={ic}/></div>{d}</Card>)}
    </div>
    <div style={{marginTop:36}}><a href="#servicos" style={{fontFamily:'var(--font-display)',fontWeight:500,fontSize:14}}>Ver todos os serviços →</a></div>
  </div></section>;
}
function Sectors(){
  const reviewCount=useReviewCount();
  const sectors=[['Hotéis','#setores'],['Escritórios','#setores'],['Hospitais e clínicas','#setores'],['Auditórios e teatros','#setores'],['Restaurantes','#setores'],['Escolas','#setores'],['Condomínios premium','#setores'],['Alojamento local','#setores']];
  return <section className="section section-dark" data-screen-label="Setores"><div className="wrap">
    <div className="grid2" style={{alignItems:'center'}}>
      <div>
        <SectionHead dark num="03" eyebrow="Setores de atuação" title="Preparados para instalações de qualquer dimensão." lead="Do escritório de 20 postos ao hotel de 300 quartos, com o mesmo padrão de execução e o mesmo nível de reporte." style={{marginBottom:0}}/>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(2,minmax(0,1fr))',gap:1,background:'rgba(255,255,255,.15)',border:'1px solid rgba(255,255,255,.15)'}}>
        {sectors.map(([s,h])=><a key={s} href={h} style={{background:'var(--navy-800)',padding:'20px 18px',fontFamily:'var(--font-display)',fontWeight:500,fontSize:14,color:'#fff'}}>{s}</a>)}
      </div>
    </div>
    <div style={{display:'flex',gap:72,marginTop:64,paddingTop:36,borderTop:'1px solid rgba(255,255,255,.15)',flexWrap:'wrap'}}>
      <Stat n={reviewCount} l="avaliações 5 estrelas no Google"/><Stat n="+15.000" l="cadeiras higienizadas por ano"/><Stat n="98%" l="dos contratos renovados"/><Stat n="24h" l="tempo de resposta comercial"/>
    </div>
  </div></section>;
}
function Process(){
  const steps=[
    ['Visita técnica','Avaliamos a instalação, os materiais e o estado de conservação. Sem compromisso.'],
    ['Plano e proposta','Âmbito, calendário, equipa e condições contratuais, por escrito e sem ambiguidade.'],
    ['Execução planeada','Intervenções fora do horário de funcionamento, com equipa uniformizada e coordenada.'],
    ['Relatório e acompanhamento','Registo de cada intervenção, auditoria de qualidade e gestor de conta dedicado.']];
  return <section className="section" data-screen-label="Como trabalhamos"><div className="wrap">
    <SectionHead num="04" eyebrow="Como trabalhamos" title="Um processo, quatro etapas, zero improviso"/>
    <div className="grid4">
      {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 Cases(){
  const cases=[
    ['case-home-1','Hotel · Porto','180 quartos, áreas comuns e restaurante em manutenção trimestral contínua desde 2023.'],
    ['case-home-2','Auditório municipal · Norte','842 lugares higienizados em duas noites, sem cancelar um único evento.']];
  return <section className="section section-sub" data-screen-label="Casos de sucesso"><div className="wrap">
    <SectionHead num="05" eyebrow="Casos de sucesso" title="Operações que falam por nós"/>
    <div className="grid2">
      {cases.map(([id,t,d])=><a key={id} href="#casos" style={{textDecoration:'none',color:'inherit'}}>
        <div style={{background:'#fff',border:'1px solid var(--border-subtle)',boxShadow:'var(--shadow-1)'}}>
          <div style={{height:280}}>
            <img src={id === 'case-home-1' ? 'assets/cleanepel-outside-van.JPG' : 'assets/cleanepel-mattress-washer-2.JPG'} alt={'Fotografia — '+t} style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}} />
          </div>
          <div style={{padding:'24px 28px 28px',borderTop:'2px solid var(--gold-500)'}}>
            <h3 style={{fontSize:'var(--fs-h3)',fontWeight:600,margin:'0 0 8px'}}>{t}</h3>
            <p style={{fontSize:15,margin:0}}>{d}</p>
          </div>
        </div>
      </a>)}
    </div>
    <div style={{marginTop:36}}><a href="#casos" style={{fontFamily:'var(--font-display)',fontWeight:500,fontSize:14}}>Ver casos de sucesso →</a></div>
  </div></section>;
}
function Stars({n}){
  return <span aria-label={n+' em 5 estrelas'} style={{color:'var(--gold-500)',letterSpacing:2,fontSize:15}}>{'★'.repeat(Math.round(n))}<span style={{color:'var(--gray-200)'}}>{'★'.repeat(5-Math.round(n))}</span></span>;
}
function timeAgo(iso){
  const days=(Date.now()-new Date(iso))/864e5;
  const rtf=new Intl.RelativeTimeFormat('pt-PT');
  if(days<1) return 'hoje';
  if(days<7) return rtf.format(-Math.floor(days),'day');
  if(days<30) return rtf.format(-Math.floor(days/7),'week');
  if(days<365) return rtf.format(-Math.floor(days/30),'month');
  return rtf.format(-Math.floor(days/365),'year');
}
function Reviews(){
  const data=useReviews();
  if(!data||!data.reviews||!data.reviews.length) return null;
  const mapsUri=data.places[0]&&data.places[0].googleMapsUri;
  return <section className="section" data-screen-label="Avaliações Google"><div className="wrap">
    <SectionHead num="06" eyebrow="Avaliações Google" title="O que dizem os nossos clientes" lead={data.rating.toFixed(1).replace('.',',')+' em 5 estrelas, com base em '+data.userRatingCount+' avaliações no Google.'}/>
    <div className="grid3">
      {data.reviews.slice(0,6).map(r=><div key={r.googleMapsUri||r.publishTime} style={{background:'#fff',border:'1px solid var(--border-subtle)',borderTop:'2px solid var(--gold-500)',padding:'24px 28px',display:'flex',flexDirection:'column',gap:14}}>
        <Stars n={r.rating}/>
        <p className="review-text" style={{fontSize:15,margin:0}}>{r.text}</p>
        <div style={{display:'flex',alignItems:'center',gap:12,marginTop:'auto',paddingTop:14,borderTop:'1px solid var(--border-subtle)'}}>
          {r.author.photoUri&&<img src={r.author.photoUri} alt="" width="36" height="36" referrerPolicy="no-referrer" style={{borderRadius:'50%'}}/>}
          <div style={{minWidth:0}}>
            <a href={r.author.uri} target="_blank" rel="noopener" style={{fontFamily:'var(--font-display)',fontWeight:500,fontSize:14,color:'var(--navy-800)'}}>{r.author.name}</a>
            <div className="muted" style={{fontSize:13}}>{timeAgo(r.publishTime)} ·<a href={r.googleMapsUri} target="_blank" rel="noopener" className="muted">Ler no Google</a></div>
          </div>
        </div>
      </div>)}
    </div>
    {mapsUri&&<div style={{marginTop:36}}><a href={mapsUri} target="_blank" rel="noopener" style={{fontFamily:'var(--font-display)',fontWeight:500,fontSize:14}}>Ver todas as avaliações no Google →</a></div>}
  </div></section>;
}
function FAQ(){
  const qs=[
    ['Trabalham fora do horário de funcionamento?','Sim. A maioria das intervenções é planeada para períodos noturnos, fins de semana ou janelas de baixa ocupação, definidos em conjunto com a sua equipa. A operação do cliente nunca é interrompida.'],
    ['Como é definido o calendário de intervenções?','Na visita técnica avaliamos os materiais, a utilização e o estado de conservação. A proposta inclui um calendário anual fixo, ajustável às necessidades sazonais da instalação.'],
    ['Que informação recebemos após cada intervenção?','Um relatório com o âmbito executado, registo fotográfico e eventuais recomendações técnicas. Nos contratos Integral, acresce uma auditoria de qualidade periódica.'],
    ['Os processos são adequados a ambientes de saúde?','Sim. Os produtos e métodos são selecionados em função do ambiente e dos requisitos de cada instalação, incluindo clínicas e unidades hospitalares.'],
    ['Qual é a dimensão mínima para um contrato?','Não definimos mínimos rígidos. Estruturamos contratos a partir da avaliação técnica de cada instalação — a proposta reflete o âmbito real, não uma tabela genérica.']];
  return <section className="section" data-screen-label="Perguntas frequentes"><div className="wrap" style={{maxWidth:880}}>
    <SectionHead num="07" eyebrow="Perguntas frequentes" title="Antes de nos contactar"/>
    <div style={{borderBottom:'1px solid var(--border-subtle)'}}>{qs.map(([q,a])=><details className="faq" key={q}><summary>{q}</summary><p>{a}</p></details>)}</div>
  </div></section>;
}
function Home(){
  return <div><Hero/><Why/><Services/><Sectors/><Process/><Cases/><Reviews/><FAQ/>
    <CTABand title="A conservação da sua instalação começa com uma visita técnica." lead="Sem compromisso. Avaliamos os materiais, o estado de conservação e apresentamos uma proposta com âmbito, calendário e condições contratuais." secondary="Falar com a equipa comercial"/>
  </div>;
}
registerPage('home', Home);