/* global React */
const { useState: useStateFCTA, useEffect: useEffectFCTA } = React;

function FinalCTA() {
  const [email, setEmail] = useStateFCTA("");
  const [state, setState] = useStateFCTA("idle"); // idle | submitting | success | error
  const [count, setCount] = useStateFCTA(null);
  const [errorMsg, setErrorMsg] = useStateFCTA("");

  useEffectFCTA(() => {
    fetch("/api/count")
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d && typeof d.count === "number") setCount(d.count); })
      .catch(() => {});
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    const v = email.trim();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) {
      setErrorMsg("Please enter a valid email.");
      setState("error");
      return;
    }
    setState("submitting");
    setErrorMsg("");
    try {
      const r = await fetch("/signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: v }),
      });
      const d = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(d.error || "Server error");
      if (typeof d.count === "number") setCount(d.count);
      setState("success");
      if (window.dataLayer) {
        window.dataLayer.push({ event: "waitlist_signup", email_domain: v.split("@")[1] || "" });
      }
    } catch (err) {
      setErrorMsg(err.message || "Could not submit. Please try again.");
      setState("error");
    }
  };

  return (
    <section className="final-cta" id="final-cta">
      <div className="mono" style={{ marginBottom: "2rem" }}>10 · Ready when you are</div>
      <h2 className="final-cta__big display">
        Run your<br />
        corridor<br />
        <em>like you mean it.</em>
      </h2>

      {state === "success" ? (
        <div className="final-cta__success" style={{ maxWidth: "640px", padding: "1.5rem 1.75rem", border: "1px solid rgba(255,255,255,0.12)", borderRadius: "12px", background: "rgba(255,255,255,0.03)", marginTop: "1rem" }}>
          <div className="mono" style={{ color: "var(--accent, #FBBF24)", fontSize: "0.72rem", letterSpacing: "0.14em", marginBottom: "0.5rem" }}>● YOU&apos;RE ON THE LIST</div>
          <div style={{ fontSize: "1.05rem", lineHeight: 1.5 }}>
            Thanks. We&apos;ll be in touch from <strong>info@cygnik.com</strong> within 1 business day.
            {typeof count === "number" && (
              <span style={{ display: "block", marginTop: "0.5rem", fontFamily: "var(--mono)", fontSize: "0.78rem", color: "var(--muted)" }}>
                {count} carrier{count === 1 ? "" : "s"} on the waitlist.
              </span>
            )}
          </div>
        </div>
      ) : (
        <form id="waitlist" className="final-cta__form" onSubmit={submit} style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "stretch", maxWidth: "640px", marginTop: "0.5rem" }}>
          <input
            type="email"
            name="email"
            placeholder="you@yourfleet.com"
            value={email}
            onChange={(e) => { setEmail(e.target.value); if (state === "error") setState("idle"); }}
            required
            autoComplete="email"
            disabled={state === "submitting"}
            style={{
              flex: "1 1 280px",
              minWidth: "240px",
              padding: "0.95rem 1.1rem",
              fontSize: "1rem",
              fontFamily: "var(--sans, system-ui)",
              color: "var(--paper)",
              background: "rgba(255,255,255,0.04)",
              border: "1px solid rgba(255,255,255,0.16)",
              borderRadius: "10px",
              outline: "none",
            }}
          />
          <button type="submit" className="btn btn--solid" disabled={state === "submitting"} style={{ minWidth: "200px" }}>
            {state === "submitting" ? "Joining…" : <>Get early access <Arrow /></>}
          </button>
          {state === "error" && (
            <div className="mono" style={{ width: "100%", fontSize: "0.72rem", color: "#F87171", letterSpacing: "0.08em", marginTop: "0.25rem" }}>
              {errorMsg}
            </div>
          )}
          {typeof count === "number" && state !== "error" && (
            <div className="mono" style={{ width: "100%", fontSize: "0.72rem", color: "var(--muted)", letterSpacing: "0.14em", marginTop: "0.25rem" }}>
              {count} carrier{count === 1 ? "" : "s"} on the waitlist
            </div>
          )}
        </form>
      )}

      <div className="final-cta__cta" style={{ marginTop: "1.5rem" }}>
        <a href="tel:+18887771672" className="btn">Talk to a human · (888) 777-1672</a>
        <a href="#" className="btn" onClick={(e) => { e.preventDefault(); window.__scrollToId && window.__scrollToId("roi"); }}>Run the ROI calc</a>
      </div>

      <div style={{ marginTop: "4rem", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem", fontFamily: "var(--mono)", fontSize: "0.7rem", color: "var(--muted)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
        <div>Suite 400 – 1940 Eglinton Ave E, Scarborough ON M1L 4R1 · <span className="maple" /></div>
        <div>Est. 2026 · Built on the corridor</div>
      </div>
    </section>
  );
}

Object.assign(window, { FinalCTA });