/* global React */
(function () {
const { useState } = React;
const { Reveal } = window;

const PROFILE_OPTS = ['Construtora', 'Pessoa física', 'Licitação pública', 'Outro'];
const SERVICE_OPTS = ['Orçamento avulso', 'BIM', 'Licitação', 'Auditoria', 'Consultoria contínua', 'Não sei ainda'];

function ContactPage() {
  const [profile, setProfile] = useState('');
  const [services, setServices] = useState([]);
  const [form, setForm] = useState({ name: '', email: '', phone: '', company: '', message: '' });
  const [consent, setConsent] = useState(false);
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const [touched, setTouched] = useState({});

  const validate = (data, prof, ok) => {
    const e = {};
    if (!data.name.trim()) e.name = 'Como podemos te chamar?';
    if (!data.email.trim()) e.email = 'Precisamos de um e-mail';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email = 'E-mail parece inválido';
    if (!data.message.trim() || data.message.trim().length < 20) e.message = 'Conta um pouco mais (mín. 20 caracteres)';
    if (!prof) e.profile = 'Selecione um perfil';
    if (!ok) e.consent = 'É obrigatório autorizar o tratamento dos dados';
    return e;
  };

  const onChange = (k, v) => {
    const next = { ...form, [k]: v };
    setForm(next);
    if (touched[k]) setErrors(validate(next, profile, consent));
  };

  const toggleService = (s) => {
    setServices(services.includes(s) ? services.filter(x => x !== s) : [...services, s]);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    setTouched({ name: true, email: true, message: true, consent: true });
    const errs = validate(form, profile, consent);
    setErrors(errs);
    if (Object.keys(errs).length === 0) {
      setSubmitted(true);
    }
  };

  return (
    <main>
      <section className="page-header">
        <div className="container">
          <span className="eyebrow">Contato · resposta em até 48h</span>
          <h1 className="display h-xxl">Manda os <em>arquivos.</em><br/>A gente <em>orça.</em></h1>
          <p className="lede">
            Edital, plantas, memorial ou só uma ideia inicial. Em até 48h úteis te respondemos
            com prazo, valor e abordagem. Sem cadastro, sem CRM, sem follow-up chato.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="contact-grid">
            {/* INFO ============ */}
            <div className="contact-info">
              <div className="contact-block">
                <h4>↘ Direto</h4>
                <p><a href="mailto:contato@perfectconsulting.com.br">comercial@perfectconsulting.com.br</a></p>
              </div>
              <div className="contact-block">
                <h4>↘ Telefone</h4>
                <p>(31) 98881-7140<br/>WhatsApp · seg-sex 9h-18h</p>
              </div>
              {/* <div className="contact-block">
                <h4>↘ Escritório</h4>
                <p>Av. Paulista, 000<br/>Bela Vista · São Paulo / SP<br/>01310-000</p>
              </div> */}{/*SOMENTE UTILZIAR ESTE ESPAÇO APÓS EXISTIR ESCRITÓRIO FISICO */}


              <div style={{ marginTop: 40, padding: '20px 24px', background: 'var(--bg-elev)', border: '1px solid var(--line)' }}>
                <div className="muted-meta" style={{ marginBottom: 6 }}>SLA de resposta</div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 36, lineHeight: 1, color: 'var(--orange)', fontStyle: 'italic' }}>&lt; 48h</div>
                <div className="muted-meta" style={{ marginTop: 8 }}>
                  Em dias úteis. Casos urgentes:<br/>resposta em até 12h.
                </div>
              </div>
            </div>

            {/* FORM ============ */}
            <div>
              {!submitted ? (
                <form className="form" onSubmit={onSubmit} noValidate>
                  <div className="muted-meta" style={{ marginBottom: 20 }}>Entre em contato</div>

                  <div className="field" style={{ marginBottom: 24 }}>
                    <label>Qual seu perfil? <span className="req">*</span></label>
                    <div className="chip-group">
                      {PROFILE_OPTS.map(p => (
                        <button
                          type="button"
                          key={p}
                          className={'chip' + (profile === p ? ' selected' : '')}
                          onClick={() => { setProfile(p); setErrors(validate(form, p, consent)); }}
                        >{p}</button>
                      ))}
                    </div>
                    {errors.profile && touched.profile && <div className="field-hint" style={{ color: '#D14A2C' }}>{errors.profile}</div>}
                  </div>

                  <div className="form-row">
                    <div className={'field' + (errors.name && touched.name ? ' error' : '')}>
                      <label>Nome <span className="req">*</span></label>
                      <input
                        type="text"
                        value={form.name}
                        onChange={(e) => onChange('name', e.target.value)}
                        onBlur={() => { setTouched({ ...touched, name: true }); setErrors(validate(form, profile, consent)); }}
                        placeholder="Seu nome completo"
                      />
                      {errors.name && touched.name && <div className="field-hint">{errors.name}</div>}
                    </div>
                    <div className={'field' + (errors.email && touched.email ? ' error' : '')}>
                      <label>E-mail <span className="req">*</span></label>
                      <input
                        type="email"
                        value={form.email}
                        onChange={(e) => onChange('email', e.target.value)}
                        onBlur={() => { setTouched({ ...touched, email: true }); setErrors(validate(form, profile, consent)); }}
                        placeholder="nome@email.com"
                      />
                      {errors.email && touched.email && <div className="field-hint">{errors.email}</div>}
                    </div>
                  </div>

                  <div className="form-row">
                    <div className="field">
                      <label>Telefone / WhatsApp</label>
                      <input
                        type="tel"
                        value={form.phone}
                        onChange={(e) => onChange('phone', e.target.value)}
                        placeholder="(11) 90000-0000"
                      />
                    </div>
                    <div className="field">
                      <label>Empresa / órgão</label>
                      <input
                        type="text"
                        value={form.company}
                        onChange={(e) => onChange('company', e.target.value)}
                        placeholder="Opcional"
                      />
                    </div>
                  </div>

                  <div className="field" style={{ marginBottom: 18 }}>
                    <label>Serviços de interesse</label>
                    <div className="chip-group">
                      {SERVICE_OPTS.map(s => (
                        <button
                          type="button"
                          key={s}
                          className={'chip' + (services.includes(s) ? ' selected' : '')}
                          onClick={() => toggleService(s)}
                        >{s}</button>
                      ))}
                    </div>
                  </div>

                  <div className="form-row form-row--full">
                    <div className={'field' + (errors.message && touched.message ? ' error' : '')}>
                      <label>Conta um pouco sobre o projeto <span className="req">*</span></label>
                      <textarea
                        value={form.message}
                        onChange={(e) => onChange('message', e.target.value)}
                        onBlur={() => { setTouched({ ...touched, message: true }); setErrors(validate(form, profile, consent)); }}
                        placeholder="Tipo de obra, prazo, se tem edital, se há plantas disponíveis…"
                      ></textarea>
                      {errors.message && touched.message
                        ? <div className="field-hint">{errors.message}</div>
                        : <div className="field-hint">{form.message.length} caracteres</div>}
                    </div>
                  </div>

                  <div className={'lgpd-consent' + (errors.consent && touched.consent ? ' error' : '')}>
                    <label>
                      <input
                        type="checkbox"
                        checked={consent}
                        onChange={(e) => {
                          setConsent(e.target.checked);
                          setTouched({ ...touched, consent: true });
                          setErrors(validate(form, profile, e.target.checked));
                        }}
                      />
                      <span>
                        Autorizo a Perfect Consulting a tratar meus dados pessoais para fins de
                        elaboração de proposta comercial e contato sobre o briefing enviado,
                        nos termos da <a onClick={(e) => { e.preventDefault(); navigate('privacidade'); }} href="#/privacidade">Política de Privacidade</a> e
                        da Lei nº 13.709/2018 (LGPD). O consentimento pode ser revogado a qualquer momento.
                        <span className="req"> *</span>
                      </span>
                    </label>
                    {errors.consent && touched.consent && <div className="field-hint" style={{ color: '#D14A2C', marginTop: 6, paddingLeft: 28 }}>{errors.consent}</div>}
                  </div>

                  <div className="form-actions">
                    <button type="submit" className="btn">
                      Enviar briefing <span className="arr">→</span>
                    </button>
                  </div>
                </form>
              ) : (
                <div className="form">
                  <div className="form-success">
                    <div className="check">✓</div>
                    <h2 className="display h-l" style={{ marginBottom: 12 }}>
                      Recebido. <em>Obrigado.</em>
                    </h2>
                    <p className="lede" style={{ margin: '0 auto', textAlign: 'center' }}>
                      Em até 24h úteis, {form.name.split(' ')[0]}, te respondemos no e-mail <strong style={{ color: 'var(--ink)' }}>{form.email}</strong> com a próxima etapa.
                    </p>
                    <div className="muted-meta" style={{ marginTop: 32 }}>
                      Protocolo · PC-{Date.now().toString(36).toUpperCase()}
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.ContactPage = ContactPage;
})();