function Contact() {
  const { Reveal, useMediaQuery } = window.JMK;
  const isMobile = useMediaQuery("(max-width: 768px)");
  const { Input, Tag, Button } = window.JMKStudiosDesignSystem_f6070b;
  const services = ["Creative", "Paid Media", "Consulting", "Strategy", "Other"];
  const natures = ["Personal", "Business"];
  const [selectedServices, setSelectedServices] = React.useState([]);
  const [nature, setNature] = React.useState(null);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState("");

  const toggleService = (s) => {
    setSelectedServices((prev) => prev.includes(s) ? prev.filter((x) => x !== s) : [...prev, s]);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    setError("");
    if (selectedServices.length === 0) { setError("Please tell us how we can help."); return; }
    if (!nature) { setError("Please choose a nature of service."); return; }
    setSubmitting(true);
    try {
      const res = await fetch("https://formsubmit.co/ajax/wearejmkstudios@gmail.com", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(e.target),
      });
      if (res.ok) { window.location.href = "/thankyou"; return; }
      throw new Error("bad status");
    } catch (err) {
      setSubmitting(false);
      setError("Sorry — that didn't send. Please email us at wearejmkstudios@gmail.com.");
    }
  };

  return (
    <section id="contact-us" className="jmk-stage" style={{ background: "var(--color-primary)", padding: "clamp(80px,12vw,140px) clamp(20px,5vw,64px)", overflow: "hidden" }}>
      <Reveal from="left" distance={40}>
        <p style={{ fontFamily: "var(--font-editorial)", fontStyle: "italic", fontSize: "clamp(24px,3.2vw,38px)", lineHeight: 1.25, color: "var(--ink-900)", maxWidth: 760, margin: isMobile ? "0 0 56px" : "0 0 88px" }}>
          &ldquo;The journey to success is a collective adventure&mdash;reaching out for help is the compass that guides us to new horizons.&rdquo;
        </p>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 40 : 64 }}>
        <Reveal from={isMobile ? "up" : "left"} distance={40} style={{ minWidth: 0 }}>
          <h2 style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(40px,6vw,88px)", lineHeight: 1, margin: "0 0 24px", color: "var(--ink-900)" }}>
            Get in Touch
          </h2>
          <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-lg)", color: "rgba(17,17,17,0.7)", maxWidth: 420 }}>
            Tell us what you're building. We'll get back to you within two working days.
          </p>
        </Reveal>
        <Reveal from={isMobile ? "up" : "right"} distance={40} delay={120} style={{ minWidth: 0 }}>
          <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 28, maxWidth: 440, width: "100%" }}>
            <input type="hidden" name="_subject" value="New enquiry — JMK Studios website" />
            <input type="hidden" name="_template" value="table" />
            <input type="hidden" name="_captcha" value="false" />
            <input type="text" name="_honey" tabIndex={-1} autoComplete="off" style={{ display: "none" }} />

            <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 20 }}>
              <Input label="First name*" name="First name" placeholder="First name" required />
              <Input label="Last name" name="Last name" placeholder="Last name" />
            </div>
            <Input label="Email*" name="Email" placeholder="you@company.com" type="email" required />
            <Input label="Phone*" name="Phone" placeholder="+44&hellip;" type="tel" required />

            <div>
              <span style={{ display: "block", fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", fontWeight: 600, letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--ink-500)", marginBottom: 12 }}>
                How Can We Help?*
              </span>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {services.map((s) => (
                  <Tag key={s} active={selectedServices.includes(s)} onClick={() => toggleService(s)}>{s}</Tag>
                ))}
              </div>
              <input type="hidden" name="How Can We Help" value={selectedServices.join(", ")} />
            </div>

            <div>
              <span style={{ display: "block", fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", fontWeight: 600, letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--ink-500)", marginBottom: 12 }}>
                Nature of Service*
              </span>
              <div style={{ display: "flex", gap: 8 }}>
                {natures.map((n) => (
                  <Tag key={n} active={nature === n} onClick={() => setNature(n)}>{n}</Tag>
                ))}
              </div>
              <input type="hidden" name="Nature of Service" value={nature || ""} />
            </div>

            {error && (
              <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-sm)", color: "var(--ink-900)", background: "rgba(255,255,255,0.65)", padding: "12px 16px", borderRadius: "var(--radius-md)" }}>
                {error}
              </div>
            )}

            <div>
              <Button variant="dark" size="lg" type="submit" disabled={submitting}>{submitting ? "Sending…" : "Send enquiry"}</Button>
            </div>
          </form>
        </Reveal>
      </div>
    </section>
  );
}
window.JMK = window.JMK || {};
window.JMK.Contact = Contact;