/* global React, Icon, WA_LINK */

const Contact = ({ setPage }) => {
  const [purpose, setPurpose] = React.useState("Comprar");

  return (
    <div className="bn-page contact-page">
      <div className="contact-grid">
        {/* Left: info */}
        <div className="contact-left">
          <div className="section-num" style={{ marginBottom: 20 }}>FALE COM A BENE</div>
          <h1>Estamos<br/>aqui para<br/><em><i style={{ fontStyle: "italic" }}>ouvir</i></em>.</h1>
          <p className="lead">
            Vendas, locação, avaliação ou só uma conversa sobre o mercado imobiliário em Ijuí — escolha o canal mais confortável para você.
          </p>

          <div className="contact-info">
            <div className="contact-info-item">
              <div className="lbl">Endereço</div>
              <div className="val">Rua Bento Gonçalves, 371</div>
              <div className="sub">Centro · Ijuí / RS · CEP 98700-000</div>
            </div>
            <div className="contact-info-item">
              <div className="lbl">Horário de atendimento</div>
              <div className="val">Seg–Sex · 09h às 18h</div>
              <div className="sub">Sábado · 09h às 12h · Domingo sob agendamento</div>
            </div>
            <div className="contact-info-item">
              <div className="lbl">Registros</div>
              <div className="val">CRECI/RS 47.107</div>
              <div className="sub">Filiada SINDIMÓVEIS-RS · COFECI</div>
            </div>
          </div>

          <div className="contact-channels">
            <a className="contact-channel wa" href={WA_LINK} target="_blank" rel="noopener">
              <div className="ico"><Icon name="wa" size={18} /></div>
              <div>
                <div className="lbl">WhatsApp</div>
                <div className="val">Iniciar conversa</div>
              </div>
            </a>
            <div className="contact-channel">
              <div className="ico"><Icon name="phone" size={16} /></div>
              <div>
                <div className="lbl">Telefone</div>
                <div className="val">(55) 3333‑2222</div>
              </div>
            </div>
            <div className="contact-channel">
              <div className="ico"><Icon name="mail" size={14} /></div>
              <div>
                <div className="lbl">E-mail</div>
                <div className="val">contato@imoveisbene.com.br</div>
              </div>
            </div>
            <div className="contact-channel">
              <div className="ico"><Icon name="pin" size={14} /></div>
              <div>
                <div className="lbl">Visite a sede</div>
                <div className="val">Ver no mapa</div>
              </div>
            </div>
          </div>
        </div>

        {/* Right: form */}
        <div className="contact-right">
          <div className="contact-form">
            <h2>Conte um pouco<br/>sobre o que <em><i style={{ fontStyle: "italic" }}>você busca</i></em>.</h2>
            <p className="sub">Respondemos em até 30 minutos, em horário comercial.</p>

            <div className="chip-row">
              {["Comprar", "Alugar", "Vender meu imóvel", "Investir", "Avaliação"].map(p => (
                <div key={p} className={`chip ${purpose === p ? "active" : ""}`} onClick={() => setPurpose(p)}>{p}</div>
              ))}
            </div>

            <div className="row">
              <div className="fld">
                <label>Nome</label>
                <input type="text" placeholder="Seu nome completo" />
              </div>
              <div className="fld">
                <label>WhatsApp</label>
                <input type="tel" placeholder="(55) 9 9999‑9999" />
              </div>
            </div>
            <div className="row">
              <div className="fld">
                <label>E-mail</label>
                <input type="email" placeholder="seu@email.com" />
              </div>
              <div className="fld">
                <label>Como prefere contato?</label>
                <select>
                  <option>WhatsApp</option>
                  <option>Telefone</option>
                  <option>E-mail</option>
                  <option>Presencial</option>
                </select>
              </div>
            </div>
            {purpose === "Comprar" || purpose === "Alugar" || purpose === "Investir" ? (
              <div className="row">
                <div className="fld">
                  <label>Tipo de imóvel</label>
                  <select>
                    <option>Casa</option>
                    <option>Apartamento</option>
                    <option>Cobertura</option>
                    <option>Comercial</option>
                    <option>Terreno</option>
                    <option>Rural</option>
                  </select>
                </div>
                <div className="fld">
                  <label>Faixa de investimento</label>
                  <select>
                    <option>Até R$ 500.000</option>
                    <option>R$ 500.000 – R$ 1M</option>
                    <option>R$ 1M – R$ 2,5M</option>
                    <option>R$ 2,5M – R$ 5M</option>
                    <option>Acima de R$ 5M</option>
                  </select>
                </div>
              </div>
            ) : null}
            <div className="row" style={{ gridTemplateColumns: "1fr" }}>
              <div className="fld">
                <label>Mensagem</label>
                <textarea placeholder="Conte sobre o estilo de vida que busca, prazos, prioridades…"></textarea>
              </div>
            </div>

            <div className="submit-row">
              <div className="privacy">
                Ao enviar, você concorda com nossa política de privacidade. Não compartilhamos seus dados.
              </div>
              <button className="btn btn-gold">Enviar mensagem <Icon name="arrow" size={12} /></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.Contact = Contact;