/* EquiWork website UI kit, Engage / Contact (confidential inquiry form). */
const WEB3FORMS_KEY = "7f1b13f2-bbf7-48e4-85c4-87084d1b143f";

function NotAComplaintChannel({ brief }) {
  return (
    <div className="notice-neutral">
      <p style={{ margin: 0, fontSize: brief ? 14 : 15, lineHeight: 1.6, color: "var(--ink-900)" }}>
        <strong>This is not a complaint channel.</strong>{brief
          ? " The same applies to email: an aggrieved person should approach their organisation's Internal Committee, the Local Committee of their district, or the SHe-Box portal."
          : " If you are an aggrieved person, please approach your organisation's Internal Committee, or the Local Committee of your district, which are the bodies empowered to receive and inquire into complaints under the Act. Complaints may also be filed on the Government's SHe-Box portal."}
      </p>
    </div>
  );
}

function EngageScreen() {
  const DS = window.EquiWorkDesignSystem_e8fee2;
  const { Section } = window;
  const [status, setStatus] = React.useState("idle"); // idle | submitting | success | error
  const [ack, setAck] = React.useState(false);
  const [ackError, setAckError] = React.useState(false);

  async function submit(e) {
    e.preventDefault();
    if (!ack) { setAckError(true); return; }
    const form = e.target;
    const payload = Object.fromEntries(new FormData(form).entries());
    setStatus("submitting");
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(payload),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.success !== false) setStatus("success");
      else setStatus("error");
    } catch (err) {
      setStatus("error");
    }
  }

  return (
    <Section bg="var(--parchment)" style={{ padding: "64px 24px 96px" }}>
      <div className="grid-split engage" style={{ maxWidth: 1040, margin: "0 auto" }}>
        {/* Left: reassurance */}
        <div>
          <div style={{ marginBottom: 16 }}><DS.Eyebrow>Engage</DS.Eyebrow></div>
          <h1 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 40, lineHeight: 1.18, letterSpacing: "-0.4px", color: "var(--teal-800)" }}>
            Request a confidential consultation
          </h1>
          <p style={{ margin: "18px 0 28px", fontSize: 18, lineHeight: 1.62, color: "var(--ink-800)" }}>
            Tell us, in broad terms, what your organisation needs. There is no obligation, and a first conversation is always confidential.
          </p>
          <div style={{ background: "var(--canvas)", border: "1px solid var(--hairline)", borderLeft: "3px solid var(--brass-500)", borderRadius: "var(--radius-lg)", padding: "20px 22px" }}>
            <p style={{ margin: 0, display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: "0.1px", color: "var(--brass-700)" }}>
              <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" style={{ flex: "0 0 auto" }}><rect x="3" y="7" width="10" height="7" rx="1.2" fill="none" stroke="var(--brass-700)" strokeWidth="1.4"/><path d="M5.2 7V5.2a2.8 2.8 0 0 1 5.6 0V7" fill="none" stroke="var(--brass-700)" strokeWidth="1.4"/></svg>
              How this inquiry is handled
            </p>
            <p style={{ margin: "10px 0 0", fontSize: 15, lineHeight: 1.6, color: "var(--ink-700)" }}>
              Please do not include names of individuals or details of any specific incident at this stage.
            </p>
          </div>
          <div style={{ marginTop: 20 }}><NotAComplaintChannel /></div>
        </div>

        {/* Right: the form */}
        <div>
          <div style={{ background: "var(--canvas)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-lg)", padding: 32, boxShadow: "var(--elev-2)" }}>
            {status === "success" ? (
              <div role="status" style={{ padding: "24px 8px" }}>
                <DS.StatusChip status="complete">Received</DS.StatusChip>
                <h2 style={{ margin: "16px 0 8px", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 26, color: "var(--teal-800)" }}>Thank you, your inquiry has been received.</h2>
                <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: "var(--ink-700)" }}>You will hear back within two working days, from the founder directly. Nothing you have shared will be forwarded to anyone else.</p>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                <input type="hidden" name="access_key" value={WEB3FORMS_KEY} />
                <input type="hidden" name="subject" value="EquiWork — new consultation request" />
                <input type="hidden" name="from_name" value="EquiWork website" />
                {/* Honeypot: hidden from people, filled by bots */}
                <input type="checkbox" name="botcheck" tabIndex="-1" aria-hidden="true" style={{ display: "none" }} />
                <DS.Input label="Your name" name="name" placeholder="Full name" required />
                <DS.Input label="Work email" name="email" type="email" placeholder="name@company.in" required />
                <DS.Input label="Organisation" name="organisation" placeholder="Company or institution" required />
                <div className="grid-2 tight">
                  <DS.Select label="Your role" name="role" placeholder="Select…" options={[
                    { value: "chro", label: "CHRO / HR Head" },
                    { value: "gc", label: "General Counsel" },
                    { value: "ic", label: "IC Presiding Officer / Member" },
                    { value: "founder", label: "Founder / Director" },
                    { value: "other", label: "Other" },
                  ]} />
                  <DS.Select label="Company size" name="company_size" placeholder="Select…" options={["Under 50", "50–100", "100–250", "250–500", "500+"]} />
                </div>
                <DS.Select label="What do you need?" name="requirement" placeholder="Select…" options={[
                  "Policy drafting", "IC constitution", "Training", "Compliance audit", "Inquiry hand-holding", "Retainer advisory", "Not sure yet",
                ]} />
                <DS.Textarea label="How can we help?" name="message" optional placeholder="A brief, non-identifying summary of your requirement." />
                <DS.Checkbox
                  label="I understand this form is not a complaint channel and will not include details of a specific incident here."
                  checked={ack}
                  onChange={(e) => { setAck(e.target.checked); if (e.target.checked) setAckError(false); }}
                />
                <div aria-live="polite">
                  {ackError && <p style={{ margin: 0, fontSize: 14, color: "var(--error-600)" }}>Please confirm you understand before submitting.</p>}
                  {status === "error" && <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: "var(--error-600)" }}>Something went wrong sending your message. Please email <a href="mailto:divakartomar@equiwork.in" style={{ color: "var(--brass-700)", textDecoration: "underline" }}>divakartomar@equiwork.in</a> directly.</p>}
                </div>
                <div style={{ marginTop: 4 }}>
                  <DS.Button type="submit" disabled={status === "submitting"}>{status === "submitting" ? "Sending…" : "Send inquiry"}</DS.Button>
                </div>
              </form>
            )}
          </div>
          <p style={{ margin: "18px 0 0", fontSize: 15, lineHeight: 1.6, color: "var(--ink-700)" }}>
            Prefer email? Write to <a href="mailto:divakartomar@equiwork.in" style={{ color: "var(--brass-700)", textDecoration: "underline" }}>divakartomar@equiwork.in</a>
          </p>
          <div style={{ marginTop: 14 }}><NotAComplaintChannel brief /></div>
        </div>
      </div>
    </Section>
  );
}
Object.assign(window, { EngageScreen });
