const {Button,Input,Select}=NS;
function Visita(){
  const lead=useLeadForm('cleanepel-visita');
  const reviewCount=useReviewCount();
  const steps=[
    ['Confirmação em 24h úteis','O gestor de conta contacta-o para agendar a visita numa data conveniente.'],
    ['Visita à instalação','Avaliamos materiais, estado de conservação e condicionantes operacionais. Duração típica: 45–90 minutos.'],
    ['Proposta por escrito','Âmbito, calendário, condições e prazos de resposta, entregues em poucos dias úteis.']];
  return <div>
    <PageHero crumb="Pedido de visita técnica" eyebrow="Visita técnica" title="O primeiro passo de qualquer contrato sério." lead="Sem compromisso e sem custo. Nenhuma proposta é feita à distância — porque nenhuma instalação é igual a outra."/>
    <section className="section" data-screen-label="Pedido"><div className="wrap grid2" style={{alignItems:'start',gridTemplateColumns:'minmax(0,1fr) minmax(0,1.1fr)'}}>
      <div>
        <div className="eyebrow" style={{marginBottom:24}}>O que acontece a seguir</div>
        <div className="hairline-list" style={{borderBottom:'1px solid var(--border-subtle)'}}>
          {steps.map(([t,d],i)=><div key={t} style={{display:'flex',gap:24}}>
            <div className="step-num" style={{fontSize:36}}>0{i+1}</div>
            <div><h3 style={{fontSize:'var(--fs-h3)',fontWeight:600,margin:'0 0 6px'}}>{t}</h3><p style={{fontSize:15,margin:0,maxWidth:400}}>{d}</p></div>
          </div>)}
        </div>
        <ul className="tick-list" style={{marginTop:32}}>
          {['Sem compromisso de contratação','Resposta comercial em 24 horas úteis',reviewCount+' avaliações 5 estrelas no Google'].map(s=><li key={s}><Icon name="check" size={18} color="var(--gold-600)"/>{s}</li>)}
        </ul>
      </div>
      {lead.sent?<div style={{background:'#fff',border:'1px solid var(--border-subtle)',borderTop:'2px solid var(--gold-500)',boxShadow:'var(--shadow-2)',padding:36}}>
        <div className="dg-badge" style={{color:'var(--cyan-600)'}}>Pedido registado</div>
        <h2 style={{fontSize:'var(--fs-h2)',fontWeight:600,margin:'20px 0 0'}}>Pedido de visita enviado. Contacto em 24 horas úteis.</h2>
        <div className="gold-rule"></div>
        <p style={{margin:'22px 0 28px'}}>Um gestor de conta irá contactá-lo para agendar a visita técnica numa data conveniente para a sua operação.</p>
        <Button variant="secondary" size="lg" onClick={lead.reset}>Fazer novo pedido</Button>
      </div>:<form onSubmit={lead.onSubmit} style={{background:'#fff',border:'1px solid var(--border-subtle)',borderTop:'2px solid var(--gold-500)',boxShadow:'var(--shadow-2)',padding:36,display:'grid',gap:18}}>
        <h2 style={{fontSize:'var(--fs-h3)',fontWeight:600,margin:0}}>Pedir visita técnica</h2>
        <div style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)',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>
        <Input name="company" label="Empresa" placeholder="Nome da empresa" required/>
        <div style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)',gap:18}}>
          <Input name="email" type="email" label="Email profissional" placeholder="nome@empresa.pt" required/>
          <Input name="phone" type="tel" label="Telefone" placeholder="+351"/>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)',gap:18}}>
          <Select name="facilityType" label="Tipo de instalação" options={['Hotel','Escritório','Auditório ou teatro','Hospital ou clínica','Escola','Restaurante','Condomínio','Outro']}/>
          <Select name="size" label="Dimensão aproximada" options={['Até 50 postos / lugares','50–200','200–500','Mais de 500']}/>
        </div>
        <FormTextarea name="message" rows={3} label="Notas (opcional)" placeholder="Condicionantes de horário, materiais específicos, prazos"/>
        <Button type="submit" variant="primary" size="lg" disabled={lead.sending}>{lead.sending?'A enviar…':'Enviar pedido de visita'}</Button>
        <p className="muted" style={{fontSize:13,margin:0}}>Os seus dados são utilizados exclusivamente para agendar a visita técnica.</p>
      </form>}
    </div></section>
  </div>;
}
registerPage('visita', Visita);