// ============================================================
// Acqua Riacho Verde — Interactive: Lot map + Interest form
// ============================================================

// ---- Lot data (fake) ----
const LOTES = [
  { id: "A1", x: 8,  y: 14, w: 13, h: 16, status: "vendido",    area: 225, preco: "R$ 135.000", nota: "Esquina próxima à entrada." },
  { id: "A2", x: 23, y: 14, w: 13, h: 16, status: "disponivel", area: 250, preco: "R$ 148.000", nota: "Vista para os jardins." },
  { id: "A3", x: 38, y: 14, w: 13, h: 16, status: "reservado",  area: 280, preco: "R$ 165.000", nota: "Próximo à área de lazer." },
  { id: "A4", x: 53, y: 14, w: 13, h: 16, status: "disponivel", area: 310, preco: "R$ 182.000", nota: "Lote amplo, bem arborizado." },
  { id: "B1", x: 8,  y: 36, w: 13, h: 16, status: "disponivel", area: 350, preco: "R$ 210.000", nota: "Frente para o riacho natural." },
  { id: "B2", x: 23, y: 36, w: 13, h: 16, status: "disponivel", area: 370, preco: "R$ 220.000", nota: "Frente para o riacho natural." },
  { id: "B3", x: 38, y: 36, w: 13, h: 16, status: "vendido",    area: 390, preco: "R$ 232.000", nota: "Beira d'água, esquina." },
  { id: "B4", x: 53, y: 36, w: 13, h: 16, status: "disponivel", area: 400, preco: "R$ 240.000", nota: "Maior lote, beira do riacho." },
];

const STATUS_LABEL = { disponivel: "Disponível", reservado: "Reservado", vendido: "Vendido" };

function MapaLotes({ onNav }) {
  const [sel, setSel] = React.useState(LOTES[4]);
  return (
    <section className="arv-section lotes" id="lotes">
      <div className="arv-section-head">
        <span className="arv-eyebrow">Mapa de lotes</span>
        <h2>Escolha o seu lugar</h2>
        <p className="arv-section-sub">Clique em um lote para ver disponibilidade, metragem e valor.</p>
      </div>
      <div className="arv-lotes-grid">
        <div className="arv-map">
          <div className="arv-map-river"><i className="ph ph-waves"></i> Riacho natural</div>
          {LOTES.map((l) => (
            <button
              key={l.id}
              className={"arv-lot " + l.status + (sel.id === l.id ? " active" : "")}
              style={{ left: l.x + "%", top: l.y + "%", width: l.w + "%", height: l.h + "%" }}
              onClick={() => setSel(l)}
            >{l.id}</button>
          ))}
          <div className="arv-map-legend">
            <span><i className="ph ph-circle-fill disp"></i> Disponível</span>
            <span><i className="ph ph-circle-fill res"></i> Reservado</span>
            <span><i className="ph ph-circle-fill vend"></i> Vendido</span>
          </div>
        </div>
        <aside className="arv-lot-panel">
          <div className={"arv-lot-badge " + sel.status}>{STATUS_LABEL[sel.status]}</div>
          <h3>Lote {sel.id}</h3>
          <p className="arv-lot-nota">{sel.nota}</p>
          <div className="arv-lot-rows">
            <div><span>Quadra</span><strong>{sel.id[0]}</strong></div>
            <div><span>Área</span><strong>{sel.area} m²</strong></div>
            <div><span>Valor</span><strong className="price">{sel.preco}</strong></div>
          </div>
          <button
            className="arv-btn primary full"
            disabled={sel.status === "vendido"}
            onClick={() => onNav("contato")}
          >
            {sel.status === "vendido" ? "Lote indisponível" : "Tenho interesse"} {sel.status !== "vendido" && <i className="ph ph-arrow-right"></i>}
          </button>
        </aside>
      </div>
    </section>
  );
}

const MSG_PADRAO = "Olá! Tenho interesse no condomínio Acqua Riacho Verde e gostaria de saber mais sobre os lotes disponíveis, valores e condições de pagamento.";
const MSG_VISITA = "Gostaria de agendar uma visita para conhecer os lotes disponíveis…";

function FormularioInteresse() {
  const [aba, setAba] = React.useState("corretor");
  const [form, setForm] = React.useState({ nome: "", tel: "", email: "", dia: "", horario: "" });
  const [focus, setFocus] = React.useState("");
  const [errors, setErrors] = React.useState({});

  function setField(k, v) {
    setForm(function(prev) { var n = Object.assign({}, prev); n[k] = v; return n; });
    if (errors[k]) setErrors(function(prev) { var n = Object.assign({}, prev); delete n[k]; return n; });
  }

  function validate() {
    var e = {};
    if (!form.nome.trim()) e.nome = "Nome é obrigatório.";
    if (!form.email.trim()) e.email = "E-mail é obrigatório.";
    setErrors(e);
    return Object.keys(e).length === 0;
  }

  var visitaInfo = aba === "visita" && (form.dia || form.horario)
    ? "\nDia preferido: " + (form.dia || "—") + "\nHorário preferido: " + (form.horario || "—")
    : "";

  var mailBody = encodeURIComponent(
    "Nome: " + form.nome + "\nTelefone: " + form.tel + "\nE-mail: " + form.email + visitaInfo
  );
  var mailHref = "mailto:contato@acquariachoverde.com.br?subject=Interesse%20em%20Lote%20%E2%80%94%20Acqua%20Riacho%20Verde&body=" + mailBody;

  var waMsg = aba === "visita"
    ? "Olá! Meu nome é " + form.nome + ". Gostaria de agendar uma visita ao condomínio Acqua Riacho Verde." + visitaInfo
    : "Olá! Meu nome é " + form.nome + ". Tenho interesse no condomínio Acqua Riacho Verde e gostaria de saber mais sobre os lotes disponíveis.";
  var waHref = "https://wa.me/5598988262156?text=" + encodeURIComponent(waMsg);

  var DIAS = ["Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado", "Domingo"];
  var HORARIOS = ["Manhãs", "Tardes", "Noites", "Manhãs e Tardes", "Tardes e Noites", "Qualquer Horário"];

  return (
    <section className="arv-section contato" id="contato">
      <div className="arv-contato-grid">
        <div className="arv-contato-intro">
          <span className="arv-eyebrow light">Fale conosco</span>
          <h2>Agende sua visita</h2>
          <p>Entre em contato pelo canal de sua preferência. Estamos disponíveis para apresentar o empreendimento, esclarecer dúvidas e agendar sua visita.</p>
          <ul className="arv-contato-list">
            <li><i className="ph ph-phone"></i> (98) 99105-1950</li>
            <li><i className="ph ph-whatsapp-logo"></i> (98) 98826-2156 via WhatsApp</li>
            <li><i className="ph ph-map-pin"></i> Barreirinhas, Maranhão</li>
          </ul>
        </div>

        <div className="arv-contato-card">
          {/* Abas */}
          <div className="arv-form-tabs">
            <button className={"arv-form-tab" + (aba === "corretor" ? " active" : "")} onClick={function() { setAba("corretor"); setForm({ nome: "", email: "", tel: "", msg: "" }); }} type="button">
              <i className="ph ph-chat-circle-text"></i> Falar com Corretor
            </button>
            <button className={"arv-form-tab" + (aba === "visita" ? " active" : "")} onClick={function() { setAba("visita"); setForm({ nome: "", email: "", tel: "", msg: "" }); }} type="button">
              <i className="ph ph-calendar-check"></i> Agendar Visita
            </button>
          </div>

          <form onSubmit={function(e) { e.preventDefault(); }}>
            {/* Linha 1: Nome + Telefone */}
            <div className="arv-field-row">
              <div className="arv-field">
                <label>Seu Nome</label>
                <div className={"arv-input" + (focus === "nome" ? " focus" : "") + (errors.nome ? " error" : "")}>
                  <i className="ph ph-user"></i>
                  <input type="text" value={form.nome} placeholder="Seu nome completo"
                    onChange={function(e) { setField("nome", e.target.value); }}
                    onFocus={function() { setFocus("nome"); }} onBlur={function() { setFocus(""); }} />
                </div>
                {errors.nome && <span className="arv-field-error">{errors.nome}</span>}
              </div>
              <div className="arv-field">
                <label>Seu Telefone</label>
                <div className={"arv-input" + (focus === "tel" ? " focus" : "")}>
                  <i className="ph ph-phone"></i>
                  <input type="tel" value={form.tel} placeholder="(98) 9____-____" maxLength={11}
                    onChange={function(e) { setField("tel", e.target.value.replace(/\D/g, "").slice(0, 11)); }}
                    onFocus={function() { setFocus("tel"); }} onBlur={function() { setFocus(""); }} />
                </div>
              </div>
            </div>

            {/* Linha 2: Email */}
            <div className="arv-field">
              <label>Seu E-mail</label>
              <div className={"arv-input" + (focus === "email" ? " focus" : "") + (errors.email ? " error" : "")}>
                <i className="ph ph-envelope-simple"></i>
                <input type="email" value={form.email} placeholder="voce@email.com"
                  onChange={function(e) { setField("email", e.target.value); }}
                  onFocus={function() { setFocus("email"); }} onBlur={function() { setFocus(""); }} />
              </div>
              {errors.email && <span className="arv-field-error">{errors.email}</span>}
            </div>

            {/* Extras da aba Agendar Visita */}
            {aba === "visita" && (
              <div className="arv-field-row">
                <div className="arv-field">
                  <label>Dia da semana</label>
                  <div className={"arv-input arv-select-wrap" + (focus === "dia" ? " focus" : "")}>
                    <i className="ph ph-calendar-blank"></i>
                    <select value={form.dia}
                      onChange={function(e) { setField("dia", e.target.value); }}
                      onFocus={function() { setFocus("dia"); }} onBlur={function() { setFocus(""); }}>
                      <option value="">Selecione…</option>
                      {DIAS.map(function(d) { return <option key={d} value={d}>{d}</option>; })}
                    </select>
                  </div>
                </div>
                <div className="arv-field">
                  <label>Horário preferido</label>
                  <div className={"arv-input arv-select-wrap" + (focus === "horario" ? " focus" : "")}>
                    <i className="ph ph-clock"></i>
                    <select value={form.horario}
                      onChange={function(e) { setField("horario", e.target.value); }}
                      onFocus={function() { setFocus("horario"); }} onBlur={function() { setFocus(""); }}>
                      <option value="">Selecione…</option>
                      {HORARIOS.map(function(h) { return <option key={h} value={h}>{h}</option>; })}
                    </select>
                  </div>
                </div>
              </div>
            )}

            {/* Botões */}
            <div className="arv-form-actions">
              <button
                type="button"
                onClick={function() {
                  if (validate()) {
                    var a = document.createElement('a');
                    a.href = mailHref;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                  }
                }}
                className="arv-btn arv-btn-mail full"
              >
                <i className="ph ph-envelope-simple"></i> Enviar Mensagem
              </button>
              <a
                href={waHref}
                target="_blank"
                rel="noopener noreferrer"
                onClick={function(e) { if (!validate()) e.preventDefault(); }}
                className="arv-btn arv-btn-wa full"
              >
                <i className="ph ph-whatsapp-logo"></i> Falar por WhatsApp
              </a>
            </div>

              <p className="arv-form-note">Todos os direitos reservados.</p>
          </form>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MapaLotes, FormularioInteresse });