/* eslint-disable */
// Contact page

function ContactPage() {
  useReveal();
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(false);
  const [form, setForm] = React.useState({
    name: "", email: "", phone: "", matter: "Estate Planning", message: ""
  });
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const EMAILJS_SERVICE_ID  = "service_zecaxqq";
  const EMAILJS_TEMPLATE_ID = "template_mbojh5i";
  const EMAILJS_PUBLIC_KEY  = "EhX6r41N46kdykAE_";

  const onSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(false);
    try {
      await emailjs.send(
        EMAILJS_SERVICE_ID,
        EMAILJS_TEMPLATE_ID,
        {
          name:    form.name,
          email:   form.email,
          phone:   form.phone,
          matter:  form.matter,
          message: form.message
        },
        { publicKey: EMAILJS_PUBLIC_KEY }
      );
      setSent(true);
    } catch (err) {
      setError(err?.text || err?.message || JSON.stringify(err) || "Unknown error");
    } finally {
      setLoading(false);
    }
  };

  return (
    <React.Fragment>
      <Nav current="contact" />

      <section className="page-hero">
        <div className="inner">
          <div className="crumb reveal">
            <a href="Home.html">Home</a>
            <span className="sep">/</span>
            <span>Contact</span>
          </div>
          <h1 className="reveal d1">Begin the <em>conversation.</em></h1>
          <p className="ld reveal d2">
            Initial consultations are confidential and complimentary. Submit an inquiry below or call our office directly.
          </p>
        </div>
      </section>

      <section className="contact-grid">
        <div className="contact-info reveal">
          <div className="block">
            <div className="lab">Office</div>
            <div className="val">
              6081 Hamilton Blvd, Suite 600<br/>
              Allentown, PA 18106
              <small>By appointment · Visitor parking available</small>
            </div>
          </div>
          <div className="block">
            <div className="lab">Telephone</div>
            <div className="val">
              <a href="tel:6104003147">610.400.3147</a>
            </div>
          </div>
          <div className="block">
            <div className="lab">Email</div>
            <div className="val">
              <a href="mailto:a.ahmed@theahmedlaw.com">a.ahmed@theahmedlaw.com</a>
            </div>
          </div>
          <div className="block">
            <div className="lab">WhatsApp</div>
            <div className="val">
              <a href="https://wa.me/16104003147" target="_blank" rel="noopener noreferrer" className="wa-contact-btn">
                <svg width="18" height="18" viewBox="0 0 32 32" fill="currentColor" style={{flexShrink:0}}>
                  <path d="M16 2C8.268 2 2 8.268 2 16c0 2.478.648 4.804 1.781 6.82L2 30l7.38-1.742A13.934 13.934 0 0 0 16 30c7.732 0 14-6.268 14-14S23.732 2 16 2zm0 2c6.628 0 12 5.372 12 12S22.628 28 16 28a11.93 11.93 0 0 1-6.094-1.664l-.436-.265-4.383 1.034.993-4.262-.29-.458A11.934 11.934 0 0 1 4 16C4 9.372 9.372 4 16 4zm-3.64 5.887c-.213 0-.553.08-.844.397-.29.317-1.108 1.083-1.108 2.641s1.134 3.065 1.292 3.278c.158.213 2.217 3.384 5.376 4.622 2.663 1.05 3.202.842 3.78.79.579-.053 1.866-.763 2.13-1.5.264-.737.264-1.37.185-1.503-.08-.132-.292-.212-.61-.371-.317-.159-1.866-.92-2.156-1.026-.29-.106-.502-.159-.713.159-.21.317-.818 1.026-1.003 1.238-.185.213-.37.24-.688.08-.317-.159-1.338-.493-2.549-1.573-.942-.84-1.578-1.876-1.762-2.193-.185-.318-.02-.49.139-.647.142-.143.317-.371.476-.557.158-.185.21-.317.316-.529.106-.213.053-.397-.026-.556-.08-.159-.705-1.722-.975-2.358-.254-.607-.516-.53-.713-.54a13.3 13.3 0 0 0-.608-.013z"/>
                </svg>
                Message us on WhatsApp
              </a>
            </div>
          </div>
          <div className="block">
            <div className="lab">Hours</div>
            <div className="val">
              Monday – Friday · 9 AM to 5 PM
              <small>Evenings &amp; weekends by appointment</small>
            </div>
          </div>
          <div className="block">
            <div className="lab">Service Area</div>
            <div className="val">
              Pennsylvania &amp; New Jersey
              <small>Remote consultations available</small>
            </div>
          </div>

          <div className="contact-map reveal d1">
            <iframe
              src="https://maps.google.com/maps?q=The+Ahmed+Law+Group+PLLC+Allentown+PA&output=embed"
              style={{width:"100%",height:"100%",border:"none",display:"block"}}
              allowFullScreen
              loading="lazy"
            />
          </div>
        </div>

        <div className="contact-form-wrap reveal d1">
          {!sent ? (
            <form onSubmit={onSubmit}>
              <h3>Request a <em>private</em> consultation</h3>
              <p className="sub">Tell us a little about the matter. All consultations are confidential.</p>

              <div className="fields-2">
                <div className="field">
                  <label>Full Name</label>
                  <input required type="text" value={form.name} onChange={update("name")} placeholder="Jane Doe" />
                </div>
                <div className="field">
                  <label>Telephone</label>
                  <input type="tel" value={form.phone} onChange={update("phone")} placeholder="610.000.0000" />
                </div>
              </div>

              <div className="field">
                <label>Email Address</label>
                <input required type="email" value={form.email} onChange={update("email")} placeholder="you@domain.com" />
              </div>

              <div className="field">
                <label>Area of Counsel</label>
                <select value={form.matter} onChange={update("matter")}>
                  <option>Estate Planning</option>
                  <option>Real Estate Law</option>
                  <option>Business Law</option>
                  <option>Civil Litigation</option>
                  <option>General Inquiry</option>
                </select>
              </div>

              <div className="field">
                <label>Brief Summary</label>
                <textarea value={form.message} onChange={update("message")} placeholder="A sentence or two about your matter. Please do not share confidential details until counsel has been formally engaged." />
              </div>

              <button type="submit" className="btn btn-primary" disabled={loading}>
                {loading ? "Sending…" : <>Send Inquiry <span className="arr">→</span></>}
              </button>

              {error && (
                <p style={{color:"#c0392b",marginTop:12,fontSize:14}}>
                  Something went wrong. Please try again or email us directly at <a href="mailto:a.ahmed@theahmedlaw.com">a.ahmed@theahmedlaw.com</a>.
                </p>
              )}

              <p className="legal">
                Submitting this form does not create an attorney-client relationship.
                Please do not share confidential information until counsel has been formally engaged.
              </p>
            </form>
          ) : (
            <div className="contact-success">
              <div className="mk">✓</div>
              <h3 style={{fontFamily:"var(--serif)",fontSize:34,letterSpacing:"-0.018em"}}>Thank you, {form.name.split(" ")[0] || "we received your note"}.</h3>
              <p>Your inquiry has been received. Our office will be in touch with you shortly.</p>
            </div>
          )}
        </div>
      </section>

      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ContactPage />);