// jsx/Closing.jsx — final inverted contact block with a working enquiry form.
// The form posts to Web3Forms (no backend needed on this static site).
//
// ⚙️ TO GO LIVE: replace WEB3FORMS_KEY below with the access key from
// https://web3forms.com (sign up with luke@zarco.uk, copy the key). Until
// then the form falls back to opening an email. The key is a public client
// key by design (safe to commit); it only routes submissions to your inbox.
const WEB3FORMS_KEY = "8dbf9704-206d-46ad-a1c8-a7be306c2b66";

function ContactForm() {
  const [status, setStatus] = React.useState("idle"); // idle | submitting | success | error | unconfigured

  async function onSubmit(e) {
    e.preventDefault();
    const form = e.currentTarget;
    if (WEB3FORMS_KEY.indexOf("REPLACE_WITH") === 0) {
      // Not connected yet: hand off to email with the details prefilled.
      const get = (n) => encodeURIComponent((form.elements[n] && form.elements[n].value) || "");
      const body = `Name: ${get("name")}%0D%0ACompany: ${get("company")}%0D%0AEmail: ${get("email")}%0D%0A%0D%0A${get("message")}`;
      window.location.href = `mailto:luke@zarco.uk?subject=Discovery%20call%20enquiry&body=${body}`;
      setStatus("unconfigured");
      return;
    }
    setStatus("submitting");
    const data = new FormData(form);
    data.append("access_key", WEB3FORMS_KEY);
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: data,
      });
      const json = await res.json();
      setStatus(json.success ? "success" : "error");
    } catch (_) {
      setStatus("error");
    }
  }

  if (status === "success") {
    return (
      <div className="contact-card contact-success">
        <div className="contact-success-mark" aria-hidden="true">✓</div>
        <h3>Thanks, that's in.</h3>
        <p>We'll reply within one working day to find a time that works.</p>
      </div>
    );
  }

  return (
    <form className="contact-card contact-form" onSubmit={onSubmit}>
      <input type="hidden" name="subject" value="New enquiry from the Zarco website" />
      <input type="hidden" name="from_name" value="Zarco website" />
      {/* honeypot: hidden from people, catches bots */}
      <input type="checkbox" name="botcheck" className="contact-hp" tabIndex="-1" autoComplete="off" aria-hidden="true" />

      <div className="contact-field">
        <label htmlFor="cf-name">Name</label>
        <input id="cf-name" name="name" type="text" required autoComplete="name" placeholder="Your name" />
      </div>
      <div className="contact-row">
        <div className="contact-field">
          <label htmlFor="cf-email">Work email</label>
          <input id="cf-email" name="email" type="email" required autoComplete="email" placeholder="you@company.com" />
        </div>
        <div className="contact-field">
          <label htmlFor="cf-company">Company</label>
          <input id="cf-company" name="company" type="text" autoComplete="organization" placeholder="Company name" />
        </div>
      </div>
      <div className="contact-field">
        <label htmlFor="cf-message">What are you trying to do?</label>
        <textarea id="cf-message" name="message" rows="4" required placeholder="A sentence or two on the problem or the idea."></textarea>
      </div>

      <button type="submit" className="btn btn-primary contact-submit" disabled={status === "submitting"}>
        {status === "submitting" ? "Sending…" : "Send & book a call"}
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17L17 7M7 7h10v10"/></svg>
      </button>

      {status === "error" && (
        <p className="contact-msg contact-msg-err">Something went wrong. Please email <a href="mailto:luke@zarco.uk">luke@zarco.uk</a>.</p>
      )}
      {status === "unconfigured" && (
        <p className="contact-msg">Opening your email app. Or reach us directly at <a href="mailto:luke@zarco.uk">luke@zarco.uk</a>.</p>
      )}
      <p className="contact-fineprint">No spam. We reply within one working day, UK hours.</p>
    </form>
  );
}

function Closing() {
  return (
    <section className="closing" id="contact">
      <div className="shell">
        <div className="closing-inner">
          <div className="closing-pitch">
            <div className="closing-mark">Get in touch</div>
            <h2 className="closing-title">
              Turn AI into <em>operational</em> advantage.
            </h2>
            <p className="closing-lede">
              Tell us where AI could save time, reduce manual work or create leverage. Thirty minutes, no obligation, UK-based.
            </p>
            <div className="closing-grid">
              <div className="closing-cell">
                <div className="closing-cell-label">When</div>
                <div className="closing-cell-value">30 minutes, any working day.</div>
              </div>
              <div className="closing-cell">
                <div className="closing-cell-label">Where</div>
                <div className="closing-cell-value">Google Meet, or your office if you're London-based.</div>
              </div>
              <div className="closing-cell">
                <div className="closing-cell-label">What you leave with</div>
                <div className="closing-cell-value">A one-page map of where AI earns its keep in your business.</div>
              </div>
            </div>
          </div>
          <div className="closing-form-col">
            <ContactForm />
          </div>
        </div>
      </div>
    </section>
  );
}

const closingCss = `
.closing { padding: clamp(96px, 14vh, 160px) 0 clamp(80px, 12vh, 128px); border-top: 1px solid var(--ink-10); }
.closing-inner {
  display: grid;
  grid-template-columns: 1.05fr minmax(380px, 460px);
  gap: 64px;
  align-items: start;
}
.closing-mark { font-size: 15px; color: var(--ink-40); font-weight: 500; margin-bottom: 26px; }
.closing-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin: 0;
}
.closing-title em {
  font-family: inherit; font-style: normal; font-weight: 400; color: var(--magenta);
}
.closing-lede {
  margin-top: 26px;
  max-width: 520px;
  color: var(--ink-60);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
}
.closing-grid {
  display: flex; flex-direction: column;
  margin-top: 44px;
  border-top: 1px solid var(--ink-10);
}
.closing-cell {
  padding: 20px 0;
  border-bottom: 1px solid var(--ink-10);
}
.closing-cell:last-child { border-bottom: none; }
.closing-cell-label {
  font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--ink-40); font-weight: 500; margin-bottom: 7px;
}
.closing-cell-value {
  font-size: 16px; line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
  text-wrap: pretty;
}

/* ── Contact form ─────────────────────────────────── */
.contact-card {
  background: var(--paper-pure);
  border: 1px solid var(--ink-10);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 24px 60px -36px rgba(14,14,14,.25);
}
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-field { margin-bottom: 16px; }
.contact-field label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--ink-60); margin-bottom: 6px;
}
.contact-field input,
.contact-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  font-family: inherit; font-size: 15px;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink-20); border-radius: var(--radius-md);
  outline: none;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: var(--ink-40); }
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px var(--magenta-wash);
}
.contact-field textarea { resize: vertical; min-height: 104px; }
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-submit { width: 100%; justify-content: center; margin-top: 4px; }
.contact-submit svg { transition: transform var(--dur-micro) var(--ease); }
.contact-submit:hover svg { transform: translate(2px, -2px); }
.contact-submit:disabled { opacity: 0.6; cursor: default; }
.contact-msg { font-size: 13px; line-height: 1.5; margin: 12px 0 0; color: var(--ink-60); }
.contact-msg a { color: var(--magenta); font-weight: 600; }
.contact-msg-err { color: var(--magenta-deep); }
.contact-fineprint { font-size: 12px; color: var(--ink-40); margin: 14px 0 0; text-align: center; }

.contact-success { text-align: center; padding: 40px 24px; }
.contact-success-mark {
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--magenta-wash); color: var(--magenta);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin: 0 auto 18px;
}
.contact-success h3 { margin: 0 0 8px; font-size: 22px; color: var(--ink); letter-spacing: -0.01em; }
.contact-success p { margin: 0; color: var(--ink-60); font-size: 15px; line-height: 1.5; }

@media (max-width: 960px) {
  .closing-inner { grid-template-columns: 1fr; gap: 40px; }
  .closing-form-col { max-width: 520px; }
}
@media (max-width: 480px) {
  .contact-row { grid-template-columns: 1fr; gap: 0; }
}
`;

window.Closing = Closing;
window.ContactForm = ContactForm; // reused standalone by the homepage night panel
window.closingCss = closingCss;