/* global React, Reveal, SectionLabel, Check, HexTick, ApisMark, Lockup, ArrowUp, IconContact */
const { useState: useContactState } = React;

function Contact() {
  const [status, setStatus] = useContactState("idle"); // idle | submitting | success | error
  const [errors, setErrors] = useContactState({});

  function validate(data) {
    const e = {};
    if (!data.name?.trim()) e.name = "Please add your name.";
    if (!data.email?.trim()) e.email = "Please add your email.";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email = "That email doesn't look right.";
    return e;
  }

  // Live: posts enquiries to Formspree (form xkoagvdq) → your inbox.
  async function handleSubmit(ev) {
    ev.preventDefault();
    const form = ev.currentTarget;
    const fd = new FormData(form);
    const data = Object.fromEntries(fd.entries());
    const e = validate(data);
    setErrors(e);
    if (Object.keys(e).length) return;
    // Honeypot — bots fill this hidden field; silently "succeed".
    if (data._gotcha) { setStatus("success"); form.reset(); return; }
    setStatus("submitting");
    try {
      const res = await fetch("https://formspree.io/f/xkoagvdq", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: fd,
      });
      if (res.ok) { setStatus("success"); form.reset(); }
      else { setStatus("error"); }
    } catch (_) {
      setStatus("error");
    }
  }

  return (
    <section id="contact" style={{ position: "relative", scrollMarginTop: 80, padding: "112px 0" }}>
      <div className="wrap">
        <div className="contact-grid" style={{ display: "grid", gap: 48 }}>
          {/* Invitation */}
          <div style={{ paddingTop: 8 }}>
            <Reveal><SectionLabel index="05">Contact</SectionLabel></Reveal>
            <Reveal delay={0.05}>
              <h2 className="h1" style={{ marginTop: 30, marginBottom: 0 }}>Let's find your <span style={{ color: "var(--accent-bright)" }}>next move</span></h2>
            </Reveal>
            <Reveal delay={0.1}>
              <p style={{ marginTop: 24, maxWidth: "28rem", fontSize: "var(--fluid-base)", lineHeight: 1.6, color: "var(--text-body-2)" }}>
                Stuck on where to start, or ready to scale what you've begun? Tell us where you are with AI and what you're trying to do. You'll get a straight read on the smartest next move: no pitch, no jargon. Every message gets a personal reply.
              </p>
            </Reveal>
            <Reveal delay={0.15}>
              <ul style={{ marginTop: 36, listStyle: "none", padding: 0, display: "flex", flexDirection: "column", gap: 14 }}>
                {["A straight read on your smartest next move", "Senior people only, no junior team, no intermediaries", "A reply within one business day"].map((t) => (
                  <li key={t} style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
                    <span style={{ position: "relative", top: 1 }}><HexTick size={11} color="rgba(79,124,255,.85)" /></span>
                    <span style={{ fontSize: "var(--fluid-sm)", lineHeight: 1.55, color: "var(--text-body)" }}>{t}</span>
                  </li>
                ))}
              </ul>
            </Reveal>
            <Reveal delay={0.2}>
              <p className="contact-direct" style={{ marginTop: 36, alignItems: "center", gap: 12 }}>
                <span style={{ height: 1, width: 30, background: "rgba(79,124,255,.5)" }} aria-hidden="true" />
                <span className="kicker" style={{ fontSize: 11, color: "var(--text-muted)" }}>Direct line · no intermediaries</span>
              </p>
            </Reveal>
          </div>

          {/* Form */}
          <Reveal delay={0.1}>
            <div style={{ position: "relative", borderRadius: "var(--radius-card)", border: "1px solid rgba(255,255,255,.08)", background: "rgba(15,17,23,.5)", padding: 32, boxShadow: "var(--shadow-card)", overflow: "hidden" }}>
              <span aria-hidden="true" style={{ position: "absolute", right: -20, top: -20, opacity: 0.5, pointerEvents: "none" }}>
                <ApisMark size={84} outer="rgba(255,255,255,.05)" center="rgba(79,124,255,.16)" lit={false} />
              </span>
              {status === "success" ? (
                <div style={{ position: "relative", minHeight: 340, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center" }}>
                  <div style={{ height: 56, width: 56, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(79,124,255,.15)", color: "var(--accent-bright)" }}>
                    <Check size={28} sw={2} />
                  </div>
                  <p style={{ marginTop: 20, fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 500, color: "#fff" }}>Thanks. We'll be in touch shortly.</p>
                  <button type="button" onClick={() => setStatus("idle")} className="focus-ring link-underline"
                    style={{ marginTop: 16, background: "none", border: "none", fontSize: 14, fontWeight: 500, color: "var(--text-body-2)", cursor: "pointer" }}>Send another message</button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} noValidate style={{ position: "relative", display: "flex", flexDirection: "column", gap: 20 }}>
                  <input type="hidden" name="_subject" value="New enquiry — Applied Decisions website" />
                  <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ display: "none" }} />
                  <div className="field-row" style={{ display: "grid", gap: 20 }}>
                    <div>
                      <label htmlFor="name" className="form-label">Name</label>
                      <input id="name" name="name" type="text" className="field focus-ring" placeholder="Your name"
                        style={errors.name ? { borderColor: "rgba(248,113,113,.6)" } : undefined} />
                      {errors.name && <p className="form-err">{errors.name}</p>}
                    </div>
                    <div>
                      <label htmlFor="email" className="form-label">Email</label>
                      <input id="email" name="email" type="email" className="field focus-ring" placeholder="you@company.com"
                        style={errors.email ? { borderColor: "rgba(248,113,113,.6)" } : undefined} />
                      {errors.email && <p className="form-err">{errors.email}</p>}
                    </div>
                  </div>
                  <div>
                    <label htmlFor="company" className="form-label">Company <span style={{ textTransform: "none", letterSpacing: 0, color: "var(--text-faint)" }}>(optional)</span></label>
                    <input id="company" name="company" type="text" className="field focus-ring" placeholder="Company name" />
                  </div>
                  <div>
                    <label htmlFor="message" className="form-label">What are you working on?</label>
                    <textarea id="message" name="message" rows={4} className="field focus-ring" style={{ resize: "none" }}
                      placeholder="A sentence or two about where you are with AI and what you're hoping to do." />
                  </div>
                  <button type="submit" disabled={status === "submitting"} className="btn-primary focus-ring"
                    style={{ justifyContent: "center", width: "100%", opacity: status === "submitting" ? 0.6 : 1, cursor: status === "submitting" ? "not-allowed" : "pointer" }}>
                    {status === "submitting" ? "Sending…" : "Send message"}
                  </button>
                  {status === "error" && (
                    <p style={{ margin: 0, fontSize: 13, color: "rgba(248,113,113,.95)" }}>
                      Something went wrong sending that. Please try again, or email us directly.
                    </p>
                  )}
                </form>
              )}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ position: "relative", borderTop: "1px solid rgba(255,255,255,.08)", paddingTop: 64, paddingBottom: 40 }}>
      <div className="wrap">
        <div className="footer-top" style={{ display: "flex", gap: 40 }}>
          <a href="#top" className="focus-ring" style={{ display: "inline-flex", alignItems: "center", gap: 18, textDecoration: "none" }}>
            <ApisMark size={48} />
            <span style={{ display: "flex", flexDirection: "column", lineHeight: 0.92 }}>
              <span className="footer-wm" style={{ fontFamily: "var(--font-display)", fontWeight: 600, letterSpacing: "-0.045em", color: "#fff" }}>Applied</span>
              <span className="footer-wm" style={{ fontFamily: "var(--font-display)", fontWeight: 600, letterSpacing: "-0.045em", color: "var(--accent-bright)" }}>Decisions<span style={{ color: "var(--accent)" }}>.</span></span>
            </span>
          </a>
          <a href="#top" className="focus-ring link-underline"
            style={{ display: "inline-flex", alignItems: "center", gap: 8, alignSelf: "flex-start", textDecoration: "none", fontSize: 14, fontWeight: 500, color: "var(--text-body-2)" }}>
            Back to top
            <ArrowUp size={16} sw={2} />
          </a>
        </div>
        <div className="footer-meta" style={{ marginTop: 48, display: "flex", gap: 12, borderTop: "1px solid rgba(255,255,255,.06)", paddingTop: 24 }}>
          <p className="kicker" style={{ fontSize: 11, color: "var(--text-muted)", margin: 0 }}>AI Strategy &amp; Build · For SMBs</p>
          <p className="kicker" style={{ fontSize: 11, color: "var(--text-muted)", margin: 0 }}>© 2026 Applied Decisions · All rights reserved</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer });