/* WAITLIST — split CTA: hiring firm vs candidate */

function FormCard({ tone, kind, title, subtitle, cta, ctaLoading, placeholder, onSubmit, submitted, submittedMessage, loading, ctaHref }) {
  const [val, setVal] = React.useState("");
  const [err, setErr] = React.useState("");
  const isFirm = tone === "firm";
  const trimmed = val.trim();
  const disabled = loading || trimmed.length === 0;

  const submit = (e) => {
    e.preventDefault();
    if (disabled) return;
    const v = trimmed;
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
    if (!ok) {setErr("that doesn't look like an email");return;}
    setErr("");
    Promise.resolve(onSubmit(v)).catch((e) => setErr(e && e.message ? e.message : "something went wrong"));
  };

  return (
    <form onSubmit={submit}
    className={`relative border-2 border-ink p-6 md:p-8 ${isFirm ? "bg-orange text-cream hs-green" : "bg-cream text-ink hs"} min-h-[360px] flex flex-col`}>
      <div className="flex items-center justify-between mb-2 pr-12">
        <span className={`font-mono text-[11px] ${isFirm ? "bg-cream text-ink" : "bg-ink text-cream"} px-2 py-0.5`}>
          {isFirm ? "PRIMARY" : "SECONDARY"}
        </span>
        <span className="font-mono text-[11px] opacity-80">{kind}</span>
      </div>

      <h3 className="font-display font-bold text-[36px] md:text-[48px] leading-[1] mt-3 tracking-tight">
        {title}
      </h3>
      <p className={`mt-3 text-sm md:text-base max-w-md ${isFirm ? "text-cream/90" : "text-ink-2"}`}>{subtitle}</p>

      <div className="mt-auto pt-8">
        {ctaHref ?
        <a href={ctaHref} target="_blank" rel="noopener noreferrer"
          className={`flex items-center justify-center font-mono text-xs uppercase tracking-wider border-2 px-5 py-4 btn-chunky w-full ${isFirm ? "bg-ink text-cream border-cream hs-cream btn-chunky-cream" : "bg-ink text-cream border-ink hs-orange"}`}>
            {cta} <span className="arr ml-2">→</span>
          </a> :
        submitted ?
        <div className={`up-in border-2 ${isFirm ? "border-cream bg-cream text-ink" : "border-ink bg-ink text-cream"} p-4 font-mono text-sm`}>
            ✓ {submittedMessage || (isFirm ? "Got it. A founder will reach out within 24h." : "You're in. Watch your inbox.")}
          </div> :

        <>
            <label className="block font-mono text-[11px] mb-2 opacity-80">your work email</label>
            <div className="flex flex-col sm:flex-row gap-3">
              <input
              type="email"
              value={val}
              disabled={loading}
              onChange={(e) => {setVal(e.target.value);setErr("");}}
              placeholder={placeholder}
              className={`flex-1 border-2 ${isFirm ? "border-cream bg-cream text-ink placeholder:text-ink/40" : "border-ink bg-cream placeholder:text-ink/30"} px-4 py-3 font-mono text-sm outline-none focus:translate-x-[1px] focus:-translate-y-[1px] disabled:opacity-60`} />
            
              <button type="submit"
            disabled={disabled}
            className={`font-mono text-xs uppercase tracking-wider border-2 px-5 py-3 btn-chunky ${isFirm ? "bg-ink text-cream border-cream hs-cream btn-chunky-cream" : "bg-ink text-cream border-ink hs-orange"} disabled:opacity-50 disabled:cursor-not-allowed disabled:translate-x-0 disabled:translate-y-0`}>
                {loading ? (ctaLoading || "JOINING…") : <>{cta} <span className="arr">→</span></>}
              </button>
            </div>
            {err && <div className={`mt-2 font-mono text-[11px] ${isFirm ? "bg-ink text-cream" : "bg-ink text-cream"} inline-block px-2 py-0.5`}>! {err}</div>}
          </>
        }
      </div>

      {/* retro corner */}
      <div className="absolute top-0 right-0 w-10 h-10 border-l-2 border-b-2 border-ink" aria-hidden />
    </form>);

}

function Waitlist() {
  const [firmDone, setFirmDone] = React.useState(false);
  const [candDone, setCandDone] = React.useState(false);
  const [candLoading, setCandLoading] = React.useState(false);
  const [candMsg, setCandMsg] = React.useState("");

  const submitCandidate = async (email) => {
    setCandLoading(true);
    try {
      const body = `email=${encodeURIComponent(email)}&userGroup=${encodeURIComponent("cubicle-newsletter")}`;
      const res = await fetch("https://app.loops.so/api/newsletter-form/cmoudekux03o30izil7macynu", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body,
      });
      if (!res.ok) throw new Error("submission failed — try again");
      setCandMsg("You're in. Watch your inbox.");
      setCandDone(true);
    } catch (e) {
      setCandLoading(false);
      throw e;
    }
  };

  return (
    <section id="waitlist" data-snap className="relative bg-cream">
      <div className="max-w-[1400px] mx-auto px-5 md:px-8 py-20 md:py-28">
        <div className="flex items-center justify-between font-mono text-sm md:text-base mb-10" aria-hidden="true">
          <span>07 / REACH OUT</span>
          <span>GIVE US A TRY</span>
        </div>

        <div className="grid lg:grid-cols-12 gap-8 items-end mb-10">
          <h2 className="lg:col-span-8 font-display font-bold tracking-tight leading-[0.95] text-[44px] md:text-[72px] lg:text-[96px]">
            Ready when <br />
            <span className="text-orange">you are.</span>
          </h2>
          <p className="lg:col-span-4 text-base md:text-lg text-ink-2 max-w-md">

          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-8 md:gap-10">
          <FormCard
            tone="firm"
            kind=""
            title="Book a demo."
            subtitle="30-minute call with a founder. We'll walk you through a live session and talk pricing."
            cta="Book demo"
            ctaHref="https://form.typeform.com/to/AQnu6FVK"
            onSubmit={() => setFirmDone(true)}
            submitted={firmDone} />
          
          <FormCard
            tone="candidate"
            kind=""
            title="Curious about cubicle?"
            subtitle="Drop your email and we'll send practice scenarios, build updates, and the occasional thing we find cool."
            cta="Join email list"
            ctaLoading="JOINING…"
            placeholder="you@somewhere.com"
            onSubmit={submitCandidate}
            loading={candLoading}
            submittedMessage={candMsg}
            submitted={candDone} />
          
        </div>

        {/* footer */}
        <footer className="mt-20 border-t-2 border-ink pt-8 grid md:grid-cols-3 gap-6 font-mono text-xs">
          <div className="flex items-center gap-3">
            <img src={window.__resources.logo} className="w-8 h-8 pixelated" alt="cubicle" />
            <div>
              <div className="font-pixel text-blue text-2xl leading-none">cubicle</div>
              <div className="opacity-60">building for the future of jobs</div>
            </div>
          </div>
          <div className="opacity-70">
            contact@cubicleapp.com · cambridge, ma
          </div>
          <div className="md:text-right opacity-70">
            <a href="blog.html" className="hover:text-blue underline">Blog</a> · © 2026 cubicle, Inc.
          </div>
        </footer>
      </div>

      {/* bottom pixel strip */}
      <div className="pix-div" />
    </section>);

}

window.Waitlist = Waitlist;