/* ==========================================================================
   Section 07 — Write to us (contact / intake form)
   ========================================================================== */

const { useState: useStateContact } = React;

function WriteToUs() {
  const [submitted, setSubmitted] = useStateContact(false);
  const [sending, setSending] = useStateContact(false);
  const [error, setError] = useStateContact("");
  const [form, setForm] = useStateContact({
    name: "",
    email: "",
    referral: "",
    situation: "individual",
    message: "",
    consent: false,
    website: "",
  });

  const onSubmit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setError("");
    setSending(true);
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(form),
      });
      const body = await res.json().catch(() => ({}));
      if (!res.ok) {
        setError(body.error || "Something went wrong. Please try again.");
        setSending(false);
        return;
      }
      setSubmitted(true);
    } catch (err) {
      setError("Network error. Please try again.");
      setSending(false);
    }
  };

  return (
    <section className="part" id="write-to-us" data-screen-label="07 Write To Us">
      <PartHeader
        part="VI"
        title="Write to Us"
        meta="Lines W1–W5 · Prospective-client intake"
        instructions="Responses routed to a partner. No confidential numbers over email — we'll trade those after we connect."
      />

      {/* Intro panel — the referral note */}
      <div style={{
        marginTop: 28,
        border: "2px solid var(--ink)",
        background: "var(--paper-shadow)",
        padding: "22px 24px",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr auto",
          gap: 24,
          alignItems: "start",
        }}>
          <div>
            <div className="label" style={{ marginBottom: 10 }}>Line W0 &middot; Filing instructions</div>
            <h3 style={{
              fontFamily: "var(--serif)",
              fontSize: "var(--t-num)",
              fontWeight: 600,
              lineHeight: 1.2,
              letterSpacing: "-0.01em",
              marginBottom: 12,
            }}>
              Yes, we take new clients.
            </h3>
            <p style={{
              fontFamily: "var(--serif)",
              fontSize: "var(--t-body)",
              color: "var(--ink-soft)",
              lineHeight: 1.55,
              textWrap: "pretty",
            }}>
              We grow primarily by referral, so if you know someone we already work with, please mention them on Line W3 — your intake will move along faster. Inquiries without a referral are welcome too; response may be delayed.
            </p>
          </div>
        </div>
      </div>

      {!submitted ? (
        <form className="contact-form" onSubmit={onSubmit} style={{ marginTop: 28 }}>
          {/* Honeypot — hidden from humans, bots often fill it */}
          <div style={{ position: "absolute", left: "-9999px", width: 1, height: 1, overflow: "hidden" }} aria-hidden="true">
            <label>Leave this field empty
              <input type="text" tabIndex="-1" autoComplete="off" value={form.website} onChange={e => setForm({ ...form, website: e.target.value })} />
            </label>
          </div>

          <div className="field-row">
            <label>W1 · Your name</label>
            <input required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Print clearly" />
          </div>

          <div className="field-row">
            <label>W2 · Return address</label>
            <input required type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} placeholder="email@domain.com — we'll reply here only" />
          </div>

          <div className="field-row">
            <label>W3 · Referred by</label>
            <input value={form.referral} onChange={e => setForm({ ...form, referral: e.target.value })} placeholder="Name of someone we work with — optional but appreciated" />
          </div>

          <div className="field-row">
            <label>W4 · Your situation</label>
            <select value={form.situation} onChange={e => setForm({ ...form, situation: e.target.value })}>
              <option value="individual">Individual / household return</option>
              <option value="stockcomp">Stock-based compensation (RSUs / ESPPs / options / QSBS)</option>
              <option value="family">Family or investment partnership</option>
              <option value="trust">Trust or estate</option>
              <option value="business">Business return tied to my individual filings</option>
              <option value="advisory">Advisory — entity, sale, gift/estate planning</option>
              <option value="other">Other — please describe below</option>
            </select>
          </div>

          <div className="field-row" style={{ alignItems: "start" }}>
            <label>W5 · Brief description</label>
            <textarea
              rows="4"
              value={form.message}
              onChange={e => setForm({ ...form, message: e.target.value })}
              placeholder="A sentence or two about your situation. No confidential figures or account numbers, please."
            />
          </div>

          <div style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "stretch",
            marginTop: 16,
            gap: 14,
          }}>
            <label style={{
              display: "flex",
              alignItems: "flex-start",
              gap: 10,
              fontFamily: "var(--mono)",
              fontSize: "var(--t-cap)",
              color: "var(--ink-muted)",
              letterSpacing: "0.04em",
              lineHeight: 1.5,
              width: "100%",
            }}>
              <input type="checkbox" checked={form.consent} onChange={e => setForm({ ...form, consent: e.target.checked })} required style={{ marginTop: 3, flex: "0 0 auto", width: "auto" }} />
              <span>I understand this is not an engagement. No confidential data until we're engaged.</span>
            </label>
            <button className="contact-submit" type="submit" disabled={sending} style={{ alignSelf: "flex-end" }}>
              {sending ? "▸ Sending…" : "▸ Submit"}
            </button>
          </div>

          {error && (
            <div style={{
              marginTop: 16,
              padding: "10px 14px",
              border: "1px solid #c44",
              background: "#fdeaea",
              color: "#a33",
              fontFamily: "var(--mono)",
              fontSize: "var(--t-cap)",
            }}>
              {error}
            </div>
          )}
        </form>
      ) : (
        <div style={{
          marginTop: 32,
          textAlign: "center",
          padding: "40px 20px",
          border: "1px dashed var(--rule-thin)",
        }}>
          <div className="stamp large" style={{ transform: "rotate(-4deg)", marginBottom: 20 }}>Received &middot; For processing</div>
          <h3 style={{ fontFamily: "var(--serif)", fontSize: "var(--t-num)", fontWeight: 600 }}>Thank you. Your inquiry has been filed.</h3>
          <p style={{ fontFamily: "var(--serif)", fontSize: "var(--t-body)", color: "var(--ink-soft)", marginTop: 8 }}>
            A partner will read it and write back to the email you provided.
          </p>
        </div>
      )}

      {/* Office footer */}
    </section>
  );
}

Object.assign(window, { WriteToUs });