https://serialkillercalendar.com/Faq.v3.js

1function Faq() {
2  const [sent, setSent] = React.useState(false);
3  const [busy, setBusy] = React.useState(false);
4  const [err, setErr] = React.useState(false);
5  const [challengeErr, setChallengeErr] = React.useState(false);
6  const openedAt = React.useRef(Date.now());
7  // Arithmetic challenge: defeats the scripted form-fillers that get past a honeypot,
8  // at a fraction of the friction of reCAPTCHA. Regenerated per page load.
9  const challenge = React.useRef({
10    a: 2 + Math.floor(Math.random() * 7),
11    b: 2 + Math.floor(Math.random() * 7)
12  });
13  const submit = e => {
14    e.preventDefault();
15    if (busy) return;
16    const f = e.target;
17    // Two invisible gates. Bots fill every field they find and submit almost instantly;
18    // people leave the hidden one alone and take longer than three seconds to type.
19    // On a hit we show the normal success state so the bot learns nothing and stops retrying.
20    const trapped = f.elements._honey && f.elements._honey.value !== "";
21    const tooFast = Date.now() - openedAt.current < 3000;
22    if (trapped || tooFast) {
23      setSent(true);
24      return;
25    }
26    const want = challenge.current.a + challenge.current.b;
27    if (parseInt(f.elements.human.value, 10) !== want) {
28      setChallengeErr(true);
29      return;
30    }
31    setChallengeErr(false);
32    setBusy(true);
33    setErr(false);
34    fetch("https://formsubmit.co/ajax/[email protected]", {
35      method: "POST",
36      headers: {
37        "Content-Type": "application/json",
38        Accept: "application/json"
39      },
40      body: JSON.stringify({
41        name: f.elements.name.value,
42        email: f.elements.email.value,
43        message: f.elements.message.value,
44        _subject: "Serial Killer Magazine, contact form",
45        _honey: "",
46        _template: "table"
47      })
48    }).then(r => {
49      if (!r.ok) throw new Error();
50      return r.json();
51    }).then(() => {
52      setSent(true);
53    }).catch(() => {
54      setErr(true);
55    }).finally(() => setBusy(false));
56  };
57  return /*#__PURE__*/React.createElement("section", {
58    id: "faq",
59    className: "bg-[var(--bone-200)] pt-[50px] pb-[calc(50px+clamp(34px,4vw,72px))]"
60  }, /*#__PURE__*/React.createElement("div", {
61    className: "vfShell"
62  }, /*#__PURE__*/React.createElement("div", {
63    className: "grid grid-cols-12 gap-6"
64  }, /*#__PURE__*/React.createElement("div", {
65    className: "col-span-12 lg:col-span-5 text-left"
66  }, /*#__PURE__*/React.createElement("div", {
67    style: {
68      width: "fit-content",
69      maxWidth: "100%"
70    }
71  }, /*#__PURE__*/React.createElement("h2", {
72    style: {
73      fontSize: "clamp(38px,4.5vw,70px)",
74      lineHeight: 1.08
75    }
76  }, "Looking for new", /*#__PURE__*/React.createElement("br", null), "Artists and Writers"), /*#__PURE__*/React.createElement("div", {
77    className: "mt-6"
78  }, /*#__PURE__*/React.createElement(SectionLabel, {
79    style: {
80      fontSize: "19px",
81      color: "#a80000"
82    }
83  }, "Serial Killer Magazine"))), /*#__PURE__*/React.createElement("p", {
84    className: "mt-6 max-w-[52ch] text-[var(--text-body)]",
85    style: {
86      fontSize: "var(--fs-lead)",
87      lineHeight: "var(--lh-lead)"
88    }
89  }, "We\u2019re always looking for talented new artists and writers to contribute to Serial Killer Magazine. Whether you create original artwork, write compelling true crime stories, or have a unique perspective to share, we\u2019d love to hear from you. Join our growing community of contributors and help bring the darker side of history to life.")), /*#__PURE__*/React.createElement("div", {
90    className: "col-span-12 lg:col-span-6 lg:col-start-7 mt-10 lg:mt-0 vfReveal",
91    "data-anim": "right"
92  }, sent ? /*#__PURE__*/React.createElement(Toast, {
93    tone: "pass"
94  }, "Message sent. We will get back to you soon.") : /*#__PURE__*/React.createElement("form", {
95    className: "vfContactForm flex flex-col gap-7",
96    onSubmit: submit
97  }, /*#__PURE__*/React.createElement("style", null, "#faq .vfContactForm .vfField__label{font-size:17px;letter-spacing:.12em}#faq .vfContactForm .vfField__req{font-size:17px;color:#a80000}"), /*#__PURE__*/React.createElement("div", {
98    "aria-hidden": "true",
99    style: {
100      position: "absolute",
101      left: "-5000px",
102      width: "1px",
103      height: "1px",
104      overflow: "hidden"
105    }
106  }, /*#__PURE__*/React.createElement("label", null, "Leave this field empty", /*#__PURE__*/React.createElement("input", {
107    type: "text",
108    name: "_honey",
109    tabIndex: -1,
110    autoComplete: "off",
111    defaultValue: ""
112  }))), /*#__PURE__*/React.createElement(Input, {
113    label: "Name",
114    name: "name",
115    required: true,
116    placeholder: "Your name"
117  }), /*#__PURE__*/React.createElement(Input, {
118    label: "Email",
119    name: "email",
120    type: "email",
121    required: true,
122    placeholder: "[email protected]"
123  }), /*#__PURE__*/React.createElement("label", {
124    className: "flex flex-col gap-3"
125  }, /*#__PURE__*/React.createElement("span", {
126    className: "font-[var(--font-mono)] text-[17px] tracking-[.12em] uppercase text-[var(--text-muted)] flex justify-between gap-3"
127  }, "Message", /*#__PURE__*/React.createElement("span", {
128    className: "vfField__req"
129  }, "required")), /*#__PURE__*/React.createElement("textarea", {
130    rows: "6",
131    name: "message",
132    required: true,
133    placeholder: "What can we help with?",
134    className: "w-full",
135    style: {
136      background: "var(--bone-100)",
137      border: "1px solid var(--line-strong)",
138      padding: "14px 16px",
139      fontFamily: "var(--font-text)",
140      fontSize: "16px",
141      color: "var(--text-body)",
142      resize: "vertical"
143    }
144  })), /*#__PURE__*/React.createElement("label", {
145    className: "flex flex-col gap-3"
146  }, /*#__PURE__*/React.createElement("span", {
147    className: "font-[var(--font-mono)] text-[17px] tracking-[.12em] uppercase text-[var(--text-muted)] flex justify-between gap-3"
148  }, /*#__PURE__*/React.createElement("span", null, "Spam check: what is ", challenge.current.a, " + ", challenge.current.b, "?"), /*#__PURE__*/React.createElement("span", {
149    className: "vfField__req"
150  }, "required")), /*#__PURE__*/React.createElement("input", {
151    name: "human",
152    type: "text",
153    inputMode: "numeric",
154    required: true,
155    autoComplete: "off",
156    placeholder: "Answer",
157    className: "w-full",
158    style: {
159      background: "var(--bone-100)",
160      border: "1px solid " + (challengeErr ? "#a80000" : "var(--line-strong)"),

161      padding: "14px 16px",
162      fontFamily: "var(--font-text)",
163      fontSize: "16px",
164      color: "var(--text-body)",
165      maxWidth: "180px"
166    }
167  }), challengeErr ? /*#__PURE__*/React.createElement("span", {
168    style: {
169      color: "#a80000",
170      fontSize: "16px"
171    }
172  }, "That is not the right answer. Please try again.") : null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
173    variant: "primary",
174    size: "lg",
175    as: "button",
176    type: "submit",
177    className: "vfBtnRed",
178    style: {
179      background: "#a80000",
180      borderColor: "#a80000",
181      cursor: "pointer"
182    }
183  }, /*#__PURE__*/React.createElement("span", {
184    className: "vfRoll"
185  }, /*#__PURE__*/React.createElement("i", null, busy ? "Sending\u2026" : "Send Message"), /*#__PURE__*/React.createElement("i", {
186    "aria-hidden": "true"
187  }, busy ? "Sending\u2026" : "Send Message"))))), err ? /*#__PURE__*/React.createElement("p", {
188    className: "mt-4 m-0",
189    style: {
190      color: "#a80000",
191      fontSize: "15px"
192    }
193  }, "Something went wrong sending your message. Please try again.") : null)), sent ? /*#__PURE__*/React.createElement("div", {
194    role: "dialog",
195    "aria-modal": "true",
196    "aria-label": "Message sent",
197    className: "fixed inset-0 z-50 flex items-center justify-center",
198    style: {
199      background: "rgba(14,12,11,.6)"
200    },
201    onClick: () => setSent(false)
202  }, /*#__PURE__*/React.createElement("div", {
203    className: "bg-[var(--bone-100)] border border-[var(--line-strong)] p-10 text-center",
204    style: {
205      maxWidth: "420px",
206      width: "90%"
207    },
208    onClick: e => e.stopPropagation()
209  }, /*#__PURE__*/React.createElement("h3", {
210    className: "m-0",
211    style: {
212      fontSize: "28px"
213    }
214  }, "Message Sent"), /*#__PURE__*/React.createElement("p", {
215    className: "mt-4 mb-0 text-[var(--text-body)]",
216    style: {
217      fontSize: "16px",
218      lineHeight: 1.6
219    }
220  }, "Thanks for reaching out. We will get back to you soon."), /*#__PURE__*/React.createElement("div", {
221    className: "mt-7 flex justify-center"
222  }, /*#__PURE__*/React.createElement(Button, {
223    variant: "primary",
224    as: "button",
225    type: "button",
226    className: "vfBtnRed",
227    style: {
228      background: "#a80000",
229      borderColor: "#a80000",
230      cursor: "pointer"
231    },
232    onClick: () => setSent(false)
233  }, /*#__PURE__*/React.createElement("span", {
234    className: "vfRoll"
235  }, /*#__PURE__*/React.createElement("i", null, "Close"), /*#__PURE__*/React.createElement("i", {
236    "aria-hidden": "true"
237  }, "Close")))))) : null));
238}
239window.Faq = Faq;