// PipCastEoi — "Collaborate with PiP Cast" guest expression-of-interest form.
// Sits inside the PiPCast section on the Clinicians page. Submissions go to
// support@kidlink.net.au via our own serverless function (api/pipcast.js),
// same private Resend pipeline as the contact form.

function PipCastEoi() {
  const [open, setOpen] = useState(false);
  const [status, setStatus] = useState("idle"); // idle | sending | submitted | error

  const inputStyle = {
    width: "100%", padding: "12px 14px",
    fontFamily: "var(--kl-font-body)", fontSize: "var(--kl-text-regular)",
    color: "var(--kl-fg-1)", background: "var(--kl-white)",
    border: "1px solid var(--kl-border)", borderRadius: "var(--kl-radius-form)",
    boxSizing: "border-box",
  };
  const labelStyle = { display: "block", fontSize: "var(--kl-text-small)", fontWeight: 600, marginBottom: 6 };
  const hintStyle = { fontSize: "var(--kl-text-small)", color: "var(--kl-fg-2)", marginTop: 6, lineHeight: 1.5 };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const form = e.target;
    if (form._gotcha && form._gotcha.value) { setStatus("submitted"); return; }
    setStatus("sending");
    try {
      const res = await fetch("/api/pipcast", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          name: form.name.value,
          profession: form.profession.value,
          workplace: form.workplace.value,
          location: form.location.value,
          email: form.email.value,
          website: form.website.value,
          socials: form.socials.value,
          bring: form.bring.value,
          pitch: form.pitch.value,
          other: form.other.value,
          ack_no_guarantee: form.ack_no_guarantee.checked,
          ack_review_consent: form.ack_review_consent.checked,
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.success === true) {
        setStatus("submitted");
        if (window.klTrack) window.klTrack("pipcast_eoi_submit", {});
        form.reset();
      } else {
        setStatus("error");
      }
    } catch (err) {
      setStatus("error");
    }
  };

  const Field = ({ id, label, required, children }) => (
    <div>
      <label htmlFor={id} style={labelStyle}>{label}{required && <span aria-hidden="true" style={{ color: "var(--kl-plum)" }}> *</span>}</label>
      {children}
    </div>
  );

  return (
    <div style={{ marginTop: 64, background: "var(--kl-card-bg)", border: "var(--kl-card-border)", borderRadius: "var(--kl-radius-card-lg)", boxShadow: "var(--kl-card-shadow)", padding: "clamp(28px, 4vw, 44px)" }}>
      <div className="kl-split" style={{ gap: 48, alignItems: "flex-start" }}>
        <div style={{ maxWidth: 520 }}>
          <Eyebrow>Collaborate with PiP Cast</Eyebrow>
          <h3 style={{ fontSize: "var(--kl-text-h3)", marginTop: 12, marginBottom: 16, lineHeight: 1.15 }}>Are you interested in collaborating with us here at PiP Cast?</h3>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 16 }}>
            We love to collaborate with other clinicians and hear different perspectives. After all, that's what this podcast is all about!
          </p>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 20 }}>
            If you'd like to be considered as a guest, please complete the form. Our team will review every submission and be in touch soon after your submission.
          </p>
          <h4 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 10 }}>What we value</h4>
          <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.6, color: "var(--kl-fg-2)" }}>
            PiP Cast is produced by Kid Link OT for paediatric allied health clinicians. Our work is grounded in neuroaffirming, family-centred practice, and in a commitment to ongoing learning as clinicians, and we look for guests who share these values.
          </p>
          {!open && (
            <div style={{ marginTop: 24 }}>
              <Button variant="primary" iconRight={<ChevronRight />} onClick={() => setOpen(true)}>Express your interest</Button>
            </div>
          )}
        </div>

        <div>
          {status === "submitted" ? (
            <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 16, minHeight: 240, justifyContent: "center" }}>
              <MIcon name="check_circle" size={48} />
              <h4 style={{ fontSize: "var(--kl-text-h4)" }}>Thanks, we've got your expression of interest</h4>
              <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.5, color: "var(--kl-fg-2)" }}>
                Our team reviews every submission and will be in touch.
              </p>
            </div>
          ) : open ? (
            <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <div aria-hidden="true" style={{ position: "absolute", left: "-5000px" }}>
                <input type="text" name="_gotcha" tabIndex={-1} defaultValue="" autoComplete="off" />
              </div>
              <Field id="eoi-name" label="Full name" required>
                <input id="eoi-name" name="name" type="text" required autoComplete="name" style={inputStyle} />
              </Field>
              <Field id="eoi-profession" label="Profession / position" required>
                <input id="eoi-profession" name="profession" type="text" required style={inputStyle} />
              </Field>
              <Field id="eoi-workplace" label="Workplace or practice name">
                <input id="eoi-workplace" name="workplace" type="text" style={inputStyle} />
              </Field>
              <Field id="eoi-location" label="Location (suburb/city, state/country)">
                <input id="eoi-location" name="location" type="text" style={inputStyle} />
              </Field>
              <Field id="eoi-email" label="Email address" required>
                <input id="eoi-email" name="email" type="email" required autoComplete="email" style={inputStyle} />
              </Field>
              <Field id="eoi-website" label="Website">
                <input id="eoi-website" name="website" type="text" style={inputStyle} />
              </Field>
              <Field id="eoi-socials" label="Social media accounts (please include links)">
                <textarea id="eoi-socials" name="socials" rows={2} style={{ ...inputStyle, resize: "vertical" }} />
              </Field>
              <Field id="eoi-bring" label="1. What would you bring to PiP Cast as a guest?" required>
                <textarea id="eoi-bring" name="bring" rows={4} required style={{ ...inputStyle, resize: "vertical" }} />
                <p style={hintStyle}>Think topics, special interest areas or clinical experience you'd love to share with paediatric clinicians.</p>
              </Field>
              <Field id="eoi-pitch" label="2. Do you have an episode idea you'd like to pitch, or anything you'd like to promote (e.g. courses, products, services)?">
                <textarea id="eoi-pitch" name="pitch" rows={4} style={{ ...inputStyle, resize: "vertical" }} />
                <p style={hintStyle}>Promotion isn't a barrier. We just like to be transparent with our listeners.</p>
              </Field>
              <Field id="eoi-other" label="3. Anything else you'd like to share with us?">
                <textarea id="eoi-other" name="other" rows={3} style={{ ...inputStyle, resize: "vertical" }} />
              </Field>

              <label style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: "var(--kl-text-small)", lineHeight: 1.5, cursor: "pointer" }}>
                <input id="eoi-ack1" name="ack_no_guarantee" type="checkbox" required style={{ marginTop: 3, accentColor: "var(--kl-plum)" }} />
                <span>I understand that submitting this form does not guarantee a guest spot.</span>
              </label>
              <label style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: "var(--kl-text-small)", lineHeight: 1.5, cursor: "pointer" }}>
                <input id="eoi-ack2" name="ack_review_consent" type="checkbox" required style={{ marginTop: 3, accentColor: "var(--kl-plum)" }} />
                <span>I consent to the PiP Cast team reviewing my website and public social media as part of the selection process, and to my details being stored by Kid Link OT for this purpose.</span>
              </label>

              <div>
                <Button variant="primary" type="submit" disabled={status === "sending"} iconRight={<ChevronRight />}>
                  {status === "sending" ? "Sending…" : "Submit expression of interest"}
                </Button>
              </div>
              {status === "error" && (
                <p style={{ fontSize: "var(--kl-text-small)", color: "var(--kl-plum)", fontWeight: 600 }}>
                  Sorry, something went wrong sending your submission. Please try again, or email us at support@kidlink.net.au.
                </p>
              )}
            </form>
          ) : (
            <img
              src="../../assets/logos/PIP-Cast-Logo-Draft-v3.jpg"
              alt=""
              loading="lazy"
              style={{ width: "100%", maxWidth: 360, aspectRatio: "1 / 1", objectFit: "cover", display: "block", marginInline: "auto", borderRadius: "var(--kl-radius-card)", opacity: 0.92 }}
            />
          )}
        </div>
      </div>
    </div>
  );
}

window.PipCastEoi = PipCastEoi;