const {Button,Input,Select}=NS;
function Contacto(){
  const lead=useLeadForm('cleanepel-contacto');
  const details=[['mail','Email','Cleanepel@gmail.com'],['phone','Telefone','+351 961 885 961 · dias úteis, 9h–18h'],['map-pin','Sede','Norte de Portugal · atuação em todo o país'],['calendar-check','Visita técnica','Marcação em 24 horas úteis, sem compromisso']];
  return <div>
    <PageHero crumb="Contacto" eyebrow="Contacto" title="Fale com a equipa comercial." lead="Respondemos a todos os pedidos em 24 horas úteis. Para avaliação de instalações, recomendamos o pedido direto de visita técnica."/>
    <section className="section" data-screen-label="Contacto"><div className="wrap grid2" style={{alignItems:'start'}}>
      <div style={{height:700}}>
        <img src="assets/Cleanepel-Marcelo-speaking-phone.png" alt="Fotografia das instalações e viatura CLEANEPEL" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}} />
      </div>
      <div style={{display:'grid',gap:24}}>
        {lead.sent?<div style={{background:'#fff',border:'1px solid var(--border-subtle)',borderTop:'2px solid var(--gold-500)',boxShadow:'var(--shadow-1)',padding:36}}>
          <div className="dg-badge" style={{color:'var(--cyan-600)'}}>Mensagem enviada</div>
          <h2 style={{fontSize:'var(--fs-h2)',fontWeight:600,margin:'20px 0 0'}}>Obrigado. Respondemos em 24 horas úteis.</h2>
          <div className="gold-rule"></div>
          <p style={{margin:'22px 0 28px'}}>A sua mensagem chegou à equipa comercial. Um gestor de conta irá contactá-lo pelo email ou telefone indicados.</p>
          <Button variant="secondary" size="lg" onClick={lead.reset}>Enviar outra mensagem</Button>
        </div>:<form onSubmit={lead.onSubmit} style={{background:'#fff',border:'1px solid var(--border-subtle)',borderTop:'2px solid var(--gold-500)',boxShadow:'var(--shadow-1)',padding:36,display:'grid',gap:18}}>
          <h2 style={{fontSize:'var(--fs-h3)',fontWeight:600,margin:0}}>Enviar mensagem</h2>
          <Input name="name" label="Nome" placeholder="O seu nome" required minLength={2}/>
          <Input name="company" label="Empresa" placeholder="Nome da empresa"/>
          <Input name="email" type="email" label="Email profissional" placeholder="nome@empresa.pt" required/>
          <Input name="phone" type="tel" label="Telefone" placeholder="+351"/>
          <Select name="subject" label="Assunto" options={['Pedido de proposta','Contrato de manutenção','Projeto especial','Parceria','Outro']}/>
          <FormTextarea name="message" label="Mensagem" placeholder="Descreva brevemente a sua instalação ou necessidade" required/>
          <Button type="submit" variant="primary" size="lg" disabled={lead.sending}>{lead.sending?'A enviar…':'Enviar mensagem'}</Button>
          <p className="muted" style={{fontSize:13,margin:0}}>Os seus dados são utilizados exclusivamente para responder a este pedido.</p>
        </form>}
      </div>
    </div>
    <div className="wrap" style={{marginTop:28}}>
      <div style={{background:'#fff',border:'1px solid var(--border-subtle)',boxShadow:'var(--shadow-1)',padding:28}}>
        <h3 style={{fontSize:18,fontFamily:'var(--font-display)',fontWeight:600,margin:'0 0 18px',color:'var(--navy-800)'}}>Detalhes de contacto</h3>
        <div className="hairline-list">
          {details.map(([ic,t,d])=><div key={t} style={{display:'flex',gap:20,alignItems:'flex-start',padding:'14px 0',borderTop:'1px solid var(--border-subtle)'}}>
            <Icon name={ic} size={22}/>
            <div><h4 style={{fontSize:16,fontFamily:'var(--font-display)',fontWeight:600,margin:'0 0 4px',color:'var(--navy-800)'}}>{t}</h4><p style={{fontSize:15,margin:0}}>{d}</p></div>
          </div>)}
        </div>
      </div>
    </div></section>
  </div>;
}
registerPage('contacto', Contacto);