// Contact page with form validation + stylized map
function Contact() {
  const D = window.MS_DATA;
  const [form, setForm] = React.useState({ name: "", email: "", phone: "", msg: "", ack: false });
  const [errs, setErrs] = React.useState({});
  const [captcha, setCaptcha] = React.useState(false);
  const [sent, setSent] = React.useState(false);

  const set = (k, v) => { setForm({ ...form, [k]: v }); if (errs[k]) setErrs({ ...errs, [k]: null }); };

  const formatPhone = (v) => {
    const d = v.replace(/\D/g, "").slice(0, 10);
    if (d.length < 4) return d;
    if (d.length < 7) return `(${d.slice(0,3)}) ${d.slice(3)}`;
    return `(${d.slice(0,3)}) ${d.slice(3,6)}-${d.slice(6)}`;
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim() || !form.name.trim().includes(" ")) e.name = "Please enter your first and last name.";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Please enter a valid email address.";
    if (form.phone.replace(/\D/g,"").length !== 10) e.phone = "Please enter a 10-digit phone number.";
    if (form.msg.trim().length < 20) e.msg = "Please provide at least a brief description (20+ characters).";
    if (!form.ack) e.ack = "Acknowledgement required.";
    if (!captcha) e.captcha = "Please verify you are not a robot.";
    return e;
  };

  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrs(e);
    if (Object.keys(e).length === 0) {
      setTimeout(() => setSent(true), 300);
    }
  };

  return (
    <main data-screen-label="Contact page">
      <section className="page-head container">
        <span className="eyebrow"><span className="rule"></span>Inquiries · Contact</span>
        <h1>Learn how <em>our firm</em><br/>can help you.</h1>
        <p className="lead">Communications through this form do not create an attorney-client relationship. For matters requiring immediate counsel, please contact the office directly by telephone.</p>
      </section>

      <section className="contact-wrap container">
        <div className="contact-grid">
          <div className="contact-info">
            <div className="block">
              <div className="k">Physical Office</div>
              <div className="v">1660 Hickory Loop<br/>Las Cruces, New Mexico 88005</div>
            </div>
            <div className="block">
              <div className="k">Mailing Address</div>
              <div className="v">P.O. Box 2699<br/>Las Cruces, New Mexico 88004-2699</div>
            </div>
            <div className="block">
              <div className="k">Telephone · Email</div>
              <div className="v small">{D.firm.phone}<br/>{D.firm.email}</div>
            </div>
            <div className="block" style={{borderBottom: "none"}}>
              <div className="k">Hours</div>
              <div className="v small">Monday – Friday · 8:30 am – 5:30 pm MST<br/>By appointment outside office hours</div>
            </div>

            <div className="map-wrap">
              <svg className="svgmap" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
                <defs>
                  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#CDC6B8" strokeWidth="0.5"/>
                  </pattern>
                </defs>
                <rect width="800" height="500" fill="#EFEAE0"/>
                <rect width="800" height="500" fill="url(#grid)"/>
                {/* Roads */}
                <path d="M 0 320 C 200 300, 400 340, 800 310" stroke="#FBF9F4" strokeWidth="18" fill="none"/>
                <path d="M 0 320 C 200 300, 400 340, 800 310" stroke="#CDC6B8" strokeWidth="1" fill="none"/>
                <path d="M 380 0 L 420 500" stroke="#FBF9F4" strokeWidth="12" fill="none"/>
                <path d="M 380 0 L 420 500" stroke="#CDC6B8" strokeWidth="0.5" fill="none"/>
                <path d="M 0 150 L 800 170" stroke="#FBF9F4" strokeWidth="8" fill="none"/>
                <path d="M 200 0 C 250 200, 150 300, 300 500" stroke="#FBF9F4" strokeWidth="8" fill="none"/>
                <path d="M 600 0 C 550 200, 650 300, 500 500" stroke="#FBF9F4" strokeWidth="6" fill="none"/>
                {/* Parcels */}
                <rect x="450" y="200" width="120" height="80" fill="#E8E1D3" stroke="#CDC6B8" strokeWidth="0.5"/>
                <rect x="230" y="360" width="100" height="80" fill="#E8E1D3" stroke="#CDC6B8" strokeWidth="0.5"/>
                <rect x="500" y="360" width="140" height="60" fill="#E8E1D3" stroke="#CDC6B8" strokeWidth="0.5"/>
                {/* Labels */}
                <text x="20" y="330" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#6B6257" letterSpacing="1">HICKORY LOOP</text>
                <text x="440" y="20" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#6B6257" letterSpacing="1">N MAIN ST</text>
              </svg>
              <div className="pin-label">Mynatt Springer P.C.</div>
              <div className="pin"><div className="dot"></div></div>
            </div>
          </div>

          <div>
            <form className="form" onSubmit={submit}>
              {sent ? (
                <div className="form-success">
                  <div className="seal"><CheckIcon /></div>
                  <h3>Thank you.</h3>
                  <p>We have received your inquiry and will respond within one business day. A copy has been sent to <strong>{form.email}</strong>.</p>
                </div>
              ) : (
                <>
                  <h3>Send an inquiry</h3>
                  <p className="sub">All fields required. Responses within one business day.</p>

                  <div className={`field ${errs.name ? "err" : ""}`}>
                    <label>Name<span className="req">*</span></label>
                    <input type="text" value={form.name} onChange={(e) => set("name", e.target.value)} placeholder="First Last"/>
                    {errs.name && <div className="errmsg">{errs.name}</div>}
                  </div>

                  <div className={`field ${errs.email ? "err" : ""}`}>
                    <label>Email address<span className="req">*</span></label>
                    <input type="email" value={form.email} onChange={(e) => set("email", e.target.value)} placeholder="you@company.com"/>
                    {errs.email && <div className="errmsg">{errs.email}</div>}
                  </div>

                  <div className={`field ${errs.phone ? "err" : ""}`}>
                    <label>Phone number<span className="req">*</span></label>
                    <input type="tel" value={form.phone} onChange={(e) => set("phone", formatPhone(e.target.value))} placeholder="(xxx) xxx-xxxx"/>
                    {errs.phone && <div className="errmsg">{errs.phone}</div>}
                  </div>

                  <div className={`field ${errs.msg ? "err" : ""}`}>
                    <label>Brief description of your situation<span className="req">*</span></label>
                    <textarea rows="5" value={form.msg} onChange={(e) => set("msg", e.target.value)} placeholder="Nature of matter, jurisdiction, deadlines if any."></textarea>
                    <div className="help">{form.msg.length} / 20+ characters</div>
                    {errs.msg && <div className="errmsg">{errs.msg}</div>}
                  </div>

                  <div className={`field ${errs.ack ? "err" : ""}`} style={{margin: "8px 0 0"}}>
                    <label className="check">
                      <input type="checkbox" checked={form.ack} onChange={(e) => set("ack", e.target.checked)} />
                      <span>The use of the Internet or this form for communication with the firm does not establish an attorney-client relationship.</span>
                    </label>
                    {errs.ack && <div className="errmsg">{errs.ack}</div>}
                  </div>

                  <div className="captcha">
                    <div className={`cbox ${captcha ? "on" : ""}`} onClick={() => setCaptcha(!captcha)}>{captcha && <CheckIcon/>}</div>
                    <span>I'm not a robot</span>
                    <span style={{marginLeft: "auto", fontFamily: "var(--mono)", fontSize: 10}}>reCAPTCHA</span>
                  </div>
                  {errs.captcha && <div className="errmsg" style={{marginTop: -14, marginBottom: 12}}>{errs.captcha}</div>}

                  <button type="submit" className="btn btn-primary" style={{width: "100%", justifyContent: "center", marginTop: 10}}>
                    Submit inquiry <ArrowIcon className="arrow"/>
                  </button>
                </>
              )}
            </form>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Contact = Contact;