// Contact — sitemap §15. Enquiry form on the left, contact details on the right.
// Mirrors home/contact-14 from the Relume export.
// Submissions are emailed to admin@kidlink.net.au via our own Vercel serverless
// function (api/contact.js) — no third-party form relay, since enquiries can
// contain health information. Requires RESEND_API_KEY in the Vercel env.
const CONTACT_FORM_ENDPOINT = "/api/contact";

function Contact({
  scheme = "scheme-2",
  title = "Want to get in touch?",
  intro = "Parents ready to book can get started below and we'll find a spot for your child. For all other enquiries, send us a message and our admin team will respond within 1-2 business days.",
  showBooking = true,
}) {
  const [status, setStatus] = useState("idle"); // idle | sending | submitted | error
  const submitted = status === "submitted";

  const handleSubmit = async (e) => {
    e.preventDefault();
    const form = e.target;
    if (form._gotcha && form._gotcha.value) { setStatus("submitted"); return; } // honeypot
    setStatus("sending");
    try {
      const res = await fetch(CONTACT_FORM_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          name: form.name.value,
          email: form.email.value,
          role: form.role.value,
          message: form.message.value,
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && (data.success === true || data.success === "true")) {
        setStatus("submitted");
        if (window.klTrack) window.klTrack("contact_submit", { role: form.role.value });
        form.reset();
      } else {
        setStatus("error");
      }
    } catch (err) {
      setStatus("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: 8 };

  const Field = ({ id, label, children }) => (
    <div>
      <label htmlFor={id} style={labelStyle}>{label}</label>
      {children}
    </div>
  );

  return (
    <Section scheme={scheme} id="contact">
      <div style={{ maxWidth: 600, marginBottom: 48 }}>
        <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24 }}>{title}</h2>
        <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.5 }}>
          {intro}
        </p>
      </div>

      {/* Parent-only booking band */}
      {showBooking && (
        <div style={{ marginBottom: 64 }}>
          <BookingCTA />
        </div>
      )}

      <div className="kl-split" style={{ gap: 64, alignItems: "flex-start" }}>
        {/* Enquiry form */}
        <div style={{ background: "var(--kl-card-bg)", border: "var(--kl-card-border)", borderRadius: "var(--kl-radius-card-lg)", boxShadow: "var(--kl-card-shadow)", padding: 40 }}>
          {submitted ? (
            <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 16, minHeight: 320, justifyContent: "center" }}>
              <MIcon name="check_circle" size={48} />
              <h3 style={{ fontSize: "var(--kl-text-h4)" }}>Thanks, we've got your enquiry</h3>
              <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.5, color: "var(--kl-fg-2)" }}>
                We aim to respond within 1-2 business days. If it's urgent, give us a call on (03) 9879 7019.
              </p>
              <Button variant="link" iconRight={<ChevronRight />} onClick={() => setStatus("idle")}>Send another enquiry</Button>
            </div>
          ) : (
            <form
              onSubmit={handleSubmit}
              style={{ display: "flex", flexDirection: "column", gap: 20 }}
            >
              {/* Honeypot — hidden from real users, catches bots */}
              <div aria-hidden="true" style={{ position: "absolute", left: "-5000px" }}>
                <input type="text" name="_gotcha" tabIndex={-1} defaultValue="" autoComplete="off" />
              </div>
              <Field id="contact-name" label="Your name">
                <input id="contact-name" name="name" type="text" required autoComplete="name" style={inputStyle} />
              </Field>
              <Field id="contact-email" label="Email">
                <input id="contact-email" name="email" type="email" required autoComplete="email" style={inputStyle} />
              </Field>
              <Field id="contact-role" label="I am a…">
                <select id="contact-role" name="role" defaultValue="" required style={inputStyle}>
                  <option value="" disabled>Select one</option>
                  <option>Parent or caregiver</option>
                  <option>Clinician / OT</option>
                  <option>Educator</option>
                  <option>Organisation</option>
                </select>
              </Field>
              <Field id="contact-message" label="How can we help?">
                <textarea id="contact-message" name="message" rows={4} required style={{ ...inputStyle, resize: "vertical" }} />
              </Field>
              <Button variant="primary" type="submit" disabled={status === "sending"} iconRight={<ChevronRight />}>
                {status === "sending" ? "Sending…" : "Send enquiry"}
              </Button>
              {status === "error" && (
                <p style={{ fontSize: "var(--kl-text-small)", color: "var(--kl-plum)", fontWeight: 600 }}>
                  Sorry, something went wrong sending your message. Please try again, or email us at admin@kidlink.net.au or call (03) 9879 7019.
                </p>
              )}
              <p style={{ display: "flex", alignItems: "center", gap: 8, fontSize: "var(--kl-text-small)", color: "var(--kl-fg-2)", fontWeight: 600 }}>
                <MIcon name="schedule" size={18} color="var(--kl-plum)" />
                Your message goes straight to our admin team, who reply within 1-2 business days.
              </p>
              <p style={{ fontSize: "var(--kl-text-tiny)", color: "var(--kl-fg-3)", lineHeight: 1.5 }}>
                We never share your details. By sending you agree to our privacy policy.
              </p>
            </form>
          )}
        </div>

        {/* Contact details + map */}
        <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
          <div>
            <div style={{ marginBottom: 12 }}><MIcon name="mail" size={32} /></div>
            <h3 style={{ fontSize: "var(--kl-text-h6)", marginBottom: 8 }}>Email</h3>
            <p style={{ marginBottom: 8, fontSize: "var(--kl-text-regular)", color: "var(--kl-fg-2)" }}>For new and existing enquiries.</p>
            <a href="mailto:admin@kidlink.net.au" style={{ textDecoration: "underline", textUnderlineOffset: "0.2em" }}>admin@kidlink.net.au</a>
          </div>
          <div>
            <div style={{ marginBottom: 12 }}><MIcon name="call" size={32} /></div>
            <h3 style={{ fontSize: "var(--kl-text-h6)", marginBottom: 8 }}>Phone</h3>
            <p style={{ marginBottom: 8, fontSize: "var(--kl-text-regular)", color: "var(--kl-fg-2)" }}>Mon–Fri, 9am–5pm AEST.</p>
            <a href="tel:+61398797019" style={{ textDecoration: "underline", textUnderlineOffset: "0.2em" }}>(03) 9879 7019</a>
          </div>
          <div>
            <div style={{ marginBottom: 12 }}><MIcon name="location_on" size={32} /></div>
            <h3 style={{ fontSize: "var(--kl-text-h6)", marginBottom: 8 }}>Clinic</h3>
            <p style={{ fontSize: "var(--kl-text-regular)", color: "var(--kl-fg-2)" }}>2 Brunswick Road, Mitcham, VIC</p>
          </div>
        </div>
      </div>
    </Section>
  );
}

window.Contact = Contact;