// Contact + Footer — minimal, mono. Posts to /contact (Cloudflare Pages Function),
// which relays to info@justahouse.co via MailChannels.

const CONTACT_ENDPOINT = "/contact";

const ContactSection = () => {
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [form, setForm] = React.useState({ name: "", email: "", brief: "", _gotcha: "" });
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError(null);
    setSubmitting(true);
    try {
      const res = await fetch(CONTACT_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) {
        setSent(true);
        setForm({ name: "", email: "", brief: "", _gotcha: "" });
      } else {
        setError(data.error || "Could not send. Try again or email info@justahouse.co.");
      }
    } catch {
      setError("Network error. Try again or email info@justahouse.co.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <SectionWrap id="contact" label="Contact" padding="128px 0 96px">
      <SectionHeader
        index="04"
        eyebrow="Contact Us"
        title={<>Talk<br />to us.</>}
        meta="REPLY · 2 BUSINESS DAYS"
      />

      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 96,
        alignItems: "start",
      }}>
        {/* Left — pitch + contact details */}
        <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
          <p style={{
            fontFamily: "var(--jh-font-serif)",
            fontSize: 22,
            lineHeight: 1.45,
            color: "var(--jh-fg)",
            margin: 0,
            maxWidth: "32ch",
          }}>
            If your budget is real and your problem is specific, write to us.
            <span style={{ color: "var(--jh-fg-2)" }}> No pitch decks. No discovery calls. A sentence is enough.</span>
          </p>

          <dl style={{
            margin: 0,
            display: "grid",
            gridTemplateColumns: "120px 1fr",
            gap: 0,
            borderTop: "1px solid var(--jh-rule-strong)",
          }}>
            {[
              ["Email",    "info@justahouse.co"],
              ["Studio",   "Miami · Portland"],
              ["Booking",  "Q3 2026 onward"],
              ["NDA",      "Mutual on request"],
            ].map(([k, v], i) => (
              <React.Fragment key={i}>
                <dt style={{
                  fontFamily: "var(--jh-font-mono)",
                  fontSize: 11,
                  letterSpacing: "0.22em",
                  textTransform: "uppercase",
                  color: "var(--jh-fg-3)",
                  padding: "16px 0",
                  borderBottom: "1px solid var(--jh-rule)",
                  margin: 0,
                }}>{k}</dt>
                <dd style={{
                  fontFamily: "var(--jh-font-mono)",
                  fontSize: 14,
                  letterSpacing: "0.04em",
                  color: "var(--jh-fg)",
                  padding: "16px 0",
                  borderBottom: "1px solid var(--jh-rule)",
                  margin: 0,
                }}>{v}</dd>
              </React.Fragment>
            ))}
          </dl>
        </div>

        {/* Right — form */}
        <div>
          {sent ? (
            <div style={{
              padding: 32,
              border: "1px solid var(--jh-amber)",
              background: "var(--jh-amber-tint)",
              display: "flex", flexDirection: "column", gap: 12,
            }}>
              <span style={{
                fontFamily: "var(--jh-font-mono)",
                fontSize: 11,
                letterSpacing: "0.22em",
                textTransform: "uppercase",
                color: "var(--jh-amber)",
              }}>MESSAGE SENT.</span>
              <p style={{ fontFamily: "var(--jh-font-serif)", fontSize: 16, color: "var(--jh-fg)", margin: 0 }}>
                We'll write back inside two business days. Usually faster.
              </p>
              <div style={{ marginTop: 12 }}>
                <Button variant="ghost" onClick={() => setSent(false)}>← Send another</Button>
              </div>
            </div>
          ) : (
            <form
              onSubmit={handleSubmit}
              style={{ display: "flex", flexDirection: "column", gap: 24 }}
            >
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
                <Field label="Name" value={form.name} onChange={update("name")} placeholder="Producer / Sup" />
                <Field label="Email" type="email" value={form.email} onChange={update("email")} placeholder="hello@studio.co" />
              </div>
              <Field
                label="Brief"
                multiline
                value={form.brief}
                onChange={update("brief")}
                placeholder="Twelve hero comp shots, 4K. Tight schedule."
                help="A sentence is enough. We'll write back."
              />
              {/* Honeypot — invisible to humans, bots fill it in. */}
              <input
                type="text"
                name="_gotcha"
                tabIndex={-1}
                autoComplete="off"
                value={form._gotcha}
                onChange={update("_gotcha")}
                style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }}
                aria-hidden="true"
              />
              {error && (
                <div style={{
                  padding: "12px 16px",
                  border: "1px solid var(--jh-error)",
                  background: "rgba(168,90,58,0.08)",
                  fontFamily: "var(--jh-font-mono)",
                  fontSize: 12,
                  letterSpacing: "0.04em",
                  color: "var(--jh-error)",
                }}>{error}</div>
              )}
              <div style={{ display: "flex", gap: 12, marginTop: 8, alignItems: "center" }}>
                <Button variant="amber">{submitting ? "Sending…" : "Send →"}</Button>
                <Button variant="ghost" onClick={(e) => { e.preventDefault(); setForm({ name: "", email: "", brief: "", _gotcha: "" }); setError(null); }}>Clear</Button>
                {submitting && (
                  <span style={{
                    fontFamily: "var(--jh-font-mono)",
                    fontSize: 10,
                    letterSpacing: "0.22em",
                    textTransform: "uppercase",
                    color: "var(--jh-fg-3)",
                  }}>TRANSMITTING…</span>
                )}
              </div>
            </form>
          )}
        </div>
      </div>
    </SectionWrap>
  );
};
window.ContactSection = ContactSection;

const Footer = () => (
  <footer style={{
    padding: "48px var(--jh-gutter)",
    display: "flex",
    alignItems: "center",
    flexWrap: "wrap",
    gap: 24,
    fontFamily: "var(--jh-font-mono)",
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--jh-fg-3)",
  }}>
    <Wordmark noun="HOUSE" size={18} />
    <span>·</span>
    <span>EST. 2024</span>
    <span>·</span>
    <span>MIAMI · PORTLAND</span>
    <span style={{ marginLeft: "auto", display: "flex", gap: 24 }}>
      <a href="mailto:info@justahouse.co" style={{ color: "var(--jh-fg-3)", borderBottom: "none" }}>INFO@JUSTAHOUSE.CO</a>
      <span>© 2026</span>
    </span>
  </footer>
);
window.Footer = Footer;