/* Contact.jsx — email anchor + subscribe form.
 *
 * Edit the headline / body / placeholder copy directly below.
 * The form currently is local-only (sets a "RECEIVED" state on submit) —
 * wire it to a real endpoint in the onSubmit handler when ready.
 */

function ContactBlock() {
  const [submitted, setSubmitted] = React.useState(false);
  const [email, setEmail] = React.useState("");

  const eyebrow  = "Contact";
  const headline = "Get in touch.";
  const body     = "Research collaboration, hiring, or partnership inquiries. " +
                   "Email is the fastest path; expect a reply within two business days.";
  const subLabel = "Subscribe";
  const subNote  = "Quarterly research digest. Unsubscribe anytime.";

  return (
    <section id="contact" style={{ padding: "56px 96px 104px", background: "var(--paper)" }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
        <div style={{ paddingBottom: 48 }}>
          <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.42em",
                         color: "var(--terra-deep)", textTransform: "uppercase" }}>
            {eyebrow}
          </span>
          <h2 style={{ margin: "16px 0 0", fontFamily: "var(--title)", fontWeight: 500,
                       fontSize: 52, letterSpacing: "0.01em", lineHeight: 1.1,
                       color: "var(--ink)", textWrap: "pretty",
                       textTransform: "none", padding: 0 }}>
            {headline}
          </h2>
          <p style={{ margin: "24px 0 0", fontFamily: "var(--display)", fontSize: 16,
                      lineHeight: 1.55, color: "var(--ink-dim)", maxWidth: 460 }}>
            {body}
          </p>
          <a href="mailto:contact@zondamarkets.com"
             style={{ display: "inline-block", marginTop: 32,
                      fontFamily: "var(--title)", fontSize: 24, fontWeight: 500,
                      letterSpacing: "0.01em",
                      color: "var(--ink)", borderBottom: "1px solid var(--ink)",
                      paddingBottom: 4 }}>
            contact@zondamarkets.com
          </a>
        </div>
        <div style={{ maxWidth: 640, fontFamily: "var(--mono)" }}>
          <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.32em",
                         color: "var(--terra-deep)", textTransform: "uppercase" }}>
            {subLabel}
          </span>
          <p style={{ margin: "14px 0 0", fontFamily: "var(--display)", fontSize: 15,
                      lineHeight: 1.55, color: "var(--ink-dim)", maxWidth: 460 }}>
            {subNote}
          </p>
          {!submitted ? (
            <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}
                  style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 16 }}>
              <input type="email" placeholder="your@email.com" required
                     value={email} onChange={(e) => setEmail(e.target.value)}
                     style={{ background: "transparent", border: 0,
                              borderBottom: "1px solid var(--ink-faint)",
                              padding: "12px 0", fontFamily: "var(--mono)",
                              fontSize: 16, color: "var(--ink)", outline: "none",
                              borderRadius: 0 }} />
              <button type="submit"
                      style={{ alignSelf: "flex-start", marginTop: 12,
                               fontFamily: "var(--title)", fontWeight: 500, fontSize: 12,
                               letterSpacing: "0.04em", padding: "12px 22px",
                               background: "var(--ink)", color: "var(--paper)",
                               border: 0, borderRadius: 0, cursor: "pointer" }}>
                Subscribe →
              </button>
            </form>
          ) : (
            <div style={{ marginTop: 24, fontFamily: "var(--mono)", fontSize: 16,
                          color: "var(--terra-deep)", lineHeight: 1.55 }}>
              <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.32em",
                             textTransform: "uppercase", color: "var(--terra-deep)",
                             display: "block", marginBottom: 8 }}>RECEIVED</span>
              {email} — confirmation in your inbox shortly.
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ContactBlock });