// Contact / request-a-quote page — info column + full form.

const HfContactField = ({ lang, k, name, children }) =>
  <label className="hf-field">
    <span>{hfT(lang, k)}</span>
    {children || <input type="text" name={name} />}
  </label>;

function HfContact({ lang, setLang }) {
  const [status, setStatus] = React.useState("idle"); // idle | sending | error | sent
  const sent = status === "sent";
  const [inquiry, setInquiry] = React.useState("tractor");

  const onSubmit = (e) => {
    e.preventDefault();
    const formEl = e.target;
    setStatus("sending");
    wsSubmitForm(formEl, "Quote request — " + inquiry, { inquiry_type: inquiry })
      .then(() => setStatus("sent"))
      .catch(() => setStatus("error"));
  };

  const info = [
    ["pg_ci_general", "info@westenstar-zirai.com.tr", true],
    ["pg_ci_parts", "parts@westenstar-zirai.com.tr", true],
    ["pg_ci_logistics", "logistics@westenstar-zirai.com.tr", true],
    ["pg_ci_phone", hfT(lang, "hi_cta_call"), true],
    ["pg_ci_hq", hfT(lang, "hi_foot_addr1"), false]];


  return (
    <HfPage>
      <HfHeader lang={lang} setLang={setLang} active="contact" />
      <HfPageHero lang={lang}
        crumbKey="hi_nav_contact" eyebrowKey="hi_cta_band_kicker"
        titleKey="contact_title" subKey="contact_sub"
        counter="24 H REPLY" />

      <section className="hf-section">
        <div className="hf-contact-grid">
          {/* Info */}
          <div className="hf-contact-info">
            {info.map(([k, v, mono]) =>
              <div key={k} className="hf-contact-line">
                <span className="k">{hfT(lang, k)}</span>
                <span className={"v" + (mono ? " mono" : "")}>
                  {v.includes("@") ?
                    <a href={"mailto:" + v} style={{ color: "inherit" }}>{v}</a> :
                    v.startsWith("+") ?
                      <a href={"tel:" + v.replace(/[^+\d]/g, "")} style={{ color: "inherit" }}>{v}</a> :
                      v}
                </span>
              </div>
            )}
          </div>

          {/* Form */}
          <div className="hf-form">
            {sent ?
              <div className="hf-form-sent">
                <div className="hf-eyebrow hf-eyebrow-red">{hfT(lang, "req_sent_title")}</div>
                <h3 className="hf-h3">{hfT(lang, "req_sent_title")}</h3>
                <p className="hf-body">{hfT(lang, "req_sent")}</p>
                <button className="hf-btn primary" onClick={() => setStatus("idle")}>OK</button>
              </div> :
              <form onSubmit={onSubmit}>
                <div className="hf-form-grid">
                  <HfContactField lang={lang} k="form_name" name="name" />
                  <HfContactField lang={lang} k="form_company" name="company" />
                  <HfContactField lang={lang} k="form_country">
                    <select name="country">
                      <option>{hfT(lang, "form_pick")}</option>
                      <option>{hfT(lang, "regions_africa")}</option>
                      <option>{hfT(lang, "regions_me")}</option>
                      <option>{hfT(lang, "regions_ea")}</option>
                    </select>
                  </HfContactField>
                  <HfContactField lang={lang} k="form_email"><input type="email" name="email" /></HfContactField>
                  <HfContactField lang={lang} k="form_phone"><input type="tel" name="phone" /></HfContactField>
                  <HfContactField lang={lang} k="form_model">
                    <select name="model">
                      <option>{hfT(lang, "form_pick")}</option>
                      <option>{hfT(lang, "hi_m_x8_name")}</option>
                      <option>{hfT(lang, "hi_m_x7_name")}</option>
                      <option>{hfT(lang, "hi_m_g_name")}</option>
                    </select>
                  </HfContactField>
                </div>

                <div className="hf-field" style={{ marginTop: 18 }}>
                  <span>{hfT(lang, "form_inquiry")}</span>
                  <div className="hf-seg">
                    {[["tractor", "form_inquiry_tractor"], ["parts", "form_inquiry_parts"], ["service", "form_inquiry_service"]].map(([v, k]) =>
                      <button key={v} type="button" className={inquiry === v ? "on" : ""} onClick={() => setInquiry(v)}>
                        {hfT(lang, k)}
                      </button>
                    )}
                  </div>
                </div>

                <label className="hf-field" style={{ marginTop: 18 }}>
                  <span>{hfT(lang, "pg_form_msg")}</span>
                  <textarea name="message" rows={4}></textarea>
                </label>

                {status === "error" &&
                  <p className="hf-small" style={{ color: "var(--hf-red)", marginTop: 14 }}>{hfT(lang, "pg_form_error")}</p>}

                <div className="hf-form-foot">
                  <p className="hf-small" style={{ maxWidth: 340 }}>{hfT(lang, "pg_form_note")}</p>
                  <button type="submit" className="hf-btn primary lg" disabled={status === "sending"}>
                    {status === "sending" ? hfT(lang, "pg_form_sending") : hfT(lang, "form_send")} <span className="arrow"></span>
                  </button>
                </div>
              </form>}
          </div>
        </div>
      </section>

      <HfFooter lang={lang} />
    </HfPage>);
}

Object.assign(window, { HfContact });