// Contact section — form + location card
function Contact() {
  const [sent, setSent] = useState(false);
  const ref = useReveal();
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="de-section de-contact" id="contact">
      <div className="de-container de-contact__grid">
        <div className="de-contact__left de-reveal is-in" ref={ref}>
          <div className="de-eyebrow">Contact · Begin a Brief</div>
          <h2 className="de-contact__heading">
            Got a project<br/>in <em>mind?</em>
          </h2>
          <p className="de-contact__lead">
            Tell us about the brief. We respond to every inquiry within two business days,
            usually with a short call to understand the scope and timeline.
          </p>

          <div className="de-contact__details">
            <div className="de-contact__detail">
              <Icon name="mail" size={18}/>
              <div>
                <div className="de-contact__detail-label">Email</div>
                <div>info@digit.estate</div>
              </div>
            </div>
            <div className="de-contact__detail">
              <Icon name="phone" size={18}/>
              <div>
                <div className="de-contact__detail-label">Telephone</div>
                <div>+971 02 — 44 88 991</div>
              </div>
            </div>
            <div className="de-contact__detail">
              <Icon name="pin" size={18}/>
              <div>
                <div className="de-contact__detail-label">Atelier</div>
                <div>Al Otaibah, Hamdan Street, Abu Dhabi</div>
              </div>
            </div>
          </div>
        </div>

        <div className="de-contact__right de-reveal de-reveal-3 is-in">
          {!sent ? (
            <form className="de-contact__form" onSubmit={submit}>
              <div className="de-field">
                <label>Full Name</label>
                <input required placeholder="Your name"/>
              </div>
              <div className="de-field">
                <label>Email</label>
                <input required type="email" placeholder="you@residence.com"/>
              </div>
              <div className="de-field">
                <label>Project Type</label>
                <input placeholder="Villa, penthouse, estate…"/>
              </div>
              <div className="de-field">
                <label>Tell us about the brief</label>
                <textarea rows="5" placeholder="Location, scope, timeline."></textarea>
              </div>
              <button className="de-btn de-btn--primary" type="submit">
                Send Inquiry <span className="arrow"></span>
              </button>
            </form>
          ) : (
            <div className="de-contact__sent">
              <Icon name="arrowDL" size={48}/>
              <h3>Thank you.</h3>
              <p>Your message is on its way to the atelier. We'll reply within two business days.</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;