/* ============================================================
   CONTACT OVERLAY
   ============================================================ */
function Contact({ open, onClose }) {
  const { SplitWords } = window;
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: "", email: "", message: "" });

  useEffect(() => {
    if (!open) { setSent(false); }
    document.body.style.overflow = open ? "hidden" : "";
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open, onClose]);

  const valid = form.name.trim() && /\S+@\S+\.\S+/.test(form.email) && form.message.trim().length > 4;

  return (
    <div className={"contact-overlay" + (open ? " open" : "")} aria-hidden={!open}>
      <div className="contact-bg" onClick={onClose}></div>
      <div className="contact-panel">
        <button className="contact-close" onClick={onClose} aria-label="Close">
          <svg viewBox="0 0 24 24" width="26" height="26" fill="none"><path d="M5 5l14 14M19 5L5 19" stroke="currentColor" strokeWidth="1.4"/></svg>
        </button>

        {!sent ? (
          <div className="contact-inner">
            <div className="contact-left">
              <span className="tag">[ Contact ]</span>
              <h2 className="display contact-title">
                Let's <span className="em">work</span> together
              </h2>
              <div className="contact-detail">
                <a className="ul-in mono" href="mailto:hello@dylanjeppesen.com">hello@dylanjeppesen.com</a>
                <span className="label">Birkerød, Denmark — replies within a day</span>
              </div>
            </div>

            <form className="contact-form" onSubmit={(e) => { e.preventDefault(); if (valid) setSent(true); }}>
              <Field label="Your name" value={form.name}
                onChange={(v) => setForm({ ...form, name: v })} />
              <Field label="Email" type="email" value={form.email}
                onChange={(v) => setForm({ ...form, email: v })} />
              <Field label="What can I help with?" textarea value={form.message}
                onChange={(v) => setForm({ ...form, message: v })} />
              <button className={"btn contact-send" + (valid ? "" : " off")} type="submit" disabled={!valid}>
                Send message <window.ArrowRight s={20} />
              </button>
            </form>
          </div>
        ) : (
          <div className="contact-sent">
            <span className="tag">[ Sent ]</span>
            <h2 className="display">Thank you, <span className="em">{form.name.split(" ")[0]}.</span></h2>
            <p className="body-lg" style={{ maxWidth: "30ch" }}>Your message landed safely. I'll get back to you within a day.</p>
            <button className="ul-in" onClick={onClose}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

function Field({ label, value, onChange, type = "text", textarea }) {
  const [focus, setFocus] = useState(false);
  const active = focus || value;
  return (
    <label className={"field" + (active ? " active" : "")}>
      <span className="field-label">{label}</span>
      {textarea ? (
        <textarea
          value={value} rows={3}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          onChange={(e) => onChange(e.target.value)}
        />
      ) : (
        <input
          type={type} value={value}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          onChange={(e) => onChange(e.target.value)}
        />
      )}
    </label>
  );
}

Object.assign(window, { Contact });