/* eslint-disable */
// Contact, content brief v4, section 11 (Draft).
// One conversion point, conversation-shaped rather than quote-shaped.
// Short form: name, organisation, email, and one open question that routes the follow-up.

const EMPTY_ENQUIRY = { name: "", org: "", email: "", where: "" };

function ContactV2Screen({ go, t }) {
  const [mode, setMode] = React.useState("form");
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState(EMPTY_ENQUIRY);
  // "idle" | "sending" | "error" — a failed send must say so rather than
  // showing the thank-you panel.
  const [status, setStatus] = React.useState("idle");
  const [error, setError] = React.useState(null);
  const gotcha = React.useRef(null);
  const layout = t.contactLayout || "standard";

  async function submitEnquiry(e) {
    e.preventDefault();
    if (status === "sending") return;
    setStatus("sending");
    setError(null);
    try {
      const r = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, _gotcha: gotcha.current ? gotcha.current.value : "" }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(data.error || "We couldn't send that just now.");
      setSent(true);
      setStatus("idle");
    } catch (err) {
      // A network failure gives a bare TypeError, which is meaningless to a visitor.
      const offline = typeof navigator !== "undefined" && navigator.onLine === false;
      setError(offline ? "You appear to be offline." : (err.message || "We couldn't send that just now."));
      setStatus("error");
    }
  }

  const details = (
    <div className="alt-contact-list">
      <a href="mailto:info@intelligenceassist.com.au" className="alt-contact-row">
        <div className="alt-contact-ic"><Icon name="mail" size={18} color="var(--ia-blue)" /></div>
        <div className="alt-contact-body">
          <span className="alt-contact-lbl">Email</span>
          <span className="alt-contact-val">info@intelligenceassist.com.au</span>
        </div>
        <Icon name="arrow-right" size={14} color="#9BA0AE" />
      </a>
      <a href="tel:1300059625" className="alt-contact-row">
        <div className="alt-contact-ic"><Icon name="phone" size={18} color="var(--ia-blue)" /></div>
        <div className="alt-contact-body">
          <span className="alt-contact-lbl">Phone</span>
          <span className="alt-contact-val">1300 059 625</span>
        </div>
        <Icon name="arrow-right" size={14} color="#9BA0AE" />
      </a>
      <button onClick={() => go("faqs")} className="alt-contact-row">
        <div className="alt-contact-ic"><Icon name="help-circle" size={18} color="var(--ia-blue)" /></div>
        <div className="alt-contact-body">
          <span className="alt-contact-lbl">Read first</span>
          <span className="alt-contact-val">The questions we're asked most</span>
        </div>
        <Icon name="arrow-right" size={14} color="#9BA0AE" />
      </button>
    </div>
  );

  return (
    <div data-screen-label="13 Contact">
      {/* HERO — same pattern as every other interior page */}
      <section className="hero dot-grid acc-hero">
        <div className="container">
          <Crumbs items={[{ label: "Home", to: "home" }, "Contact"]} go={go} />
          {layout === "glance card" ? (
            <div className="svc-hero">
              <div>
                <h1 className="h-display" style={{ maxWidth: "14ch" }}>Let's <em>talk</em>.</h1>
                <p className="lede" style={{ maxWidth: "52ch" }}>
                  Whether you're just starting to think about AI or you've got something specific in
                  mind, a conversation is the best first step.
                </p>
              </div>
              <div className="ct-glance">
                <p className="ct-glance-l">Or reach us directly</p>
                <a className="ct-glance-row" href="mailto:info@intelligenceassist.com.au">info@intelligenceassist.com.au</a>
                <a className="ct-glance-row" href="tel:1300059625">1300 059 625</a>
                <span className="ct-glance-row ct-glance-note">We reply within a working day.</span>
              </div>
            </div>
          ) : (
            <>
              <h1 className="h-display" style={{ maxWidth: "16ch" }}>Let's <em>talk</em>.</h1>
              <p className="lede" style={{ maxWidth: "56ch" }}>
                Whether you're just starting to think about AI or you've got something specific in
                mind, a conversation is the best first step.
              </p>
            </>
          )}
        </div>
      </section>

      {/* THE TWO PATHS */}
      <section className={"section section--white ct-main ct-main--" + layout.replace(/ /g, "")}>
        <div className="container">
          <div className="ct-grid">
            {layout === "editorial" && <h2 className="h-section ct-ed-h">Send us a note</h2>}
            <div className="ct-main-col">
          <div className="contact-switch">
            <button className={`contact-switch-btn ${mode === "form" ? "is-on" : ""}`} onClick={() => setMode("form")}>
              Send us a note
            </button>
            <button className={`contact-switch-btn ${mode === "book" ? "is-on" : ""}`} onClick={() => setMode("book")}>
              Talk to us
            </button>
          </div>

          {mode === "form" ? (
            <div className="contact-form-wrap">
              {sent ? (
                <div className="booking-confirmed" style={{ margin: 0 }}>
                  <div className="booking-confirmed-ic"><Icon name="check" size={28} color="#fff" /></div>
                  <h3 className="h-section" style={{ fontSize: 30 }}>Thanks, that's with us.</h3>
                  <p className="lede" style={{ textAlign: "center", marginLeft: "auto", marginRight: "auto" }}>
                    We'll read it properly and come back to you, usually within a working day.
                  </p>
                  <Button variant="secondary" onClick={() => { setSent(false); setForm(EMPTY_ENQUIRY); setStatus("idle"); setError(null); }}>
                    Send another
                  </Button>
                </div>
              ) : (
                <form className="contact-form" onSubmit={submitEnquiry}>
                  <BookingField label="Your name" required value={form.name} onChange={(v) => setForm({ ...form, name: v })} />
                  <BookingField label="Organisation" required value={form.org} onChange={(v) => setForm({ ...form, org: v })} />
                  <BookingField label="Email" type="email" required value={form.email} onChange={(v) => setForm({ ...form, email: v })} />
                  <BookingField
                    label="Where are you up to with AI?"
                    type="textarea"
                    value={form.where}
                    onChange={(v) => setForm({ ...form, where: v })}
                    placeholder="However you'd describe it. There's no wrong answer here."
                  />
                  {/* Honeypot. Off-screen rather than display:none, which some
                      bots detect and skip. Never focusable for real visitors. */}
                  <input
                    ref={gotcha}
                    type="text"
                    name="_gotcha"
                    tabIndex={-1}
                    autoComplete="off"
                    aria-hidden="true"
                    className="form-gotcha"
                  />
                  {status === "error" && (
                    <div className="form-error" role="alert">
                      <Icon name="alert-circle" size={16} />
                      <span>{error} You can also email <a href="mailto:info@intelligenceassist.com.au">info@intelligenceassist.com.au</a>.</span>
                    </div>
                  )}
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap", marginTop: 4 }}>
                    <div style={{ fontSize: 12, color: "#9BA0AE" }}>
                      By sending this, you agree to our <a href="#">privacy notice</a>.
                    </div>
                    <Button type="submit" variant="primary" size="lg" className={status === "sending" ? "is-busy" : ""}>
                      {status === "sending" ? "Sending…" : <>Send <Icon name="arrow-right" size={14} className="arrow" /></>}
                    </Button>
                  </div>
                </form>
              )}
            </div>
          ) : (
            <BookingWidget
              host={null}
              eventName="A conversation about AI"
              blurb="Whether you're just starting to think about AI or you've got something specific in mind, a conversation is the best first step. Thirty minutes, no obligation."
            />
          )}

            </div>
            {layout === "standard" && <div className="ct-aside">{details}</div>}
          </div>
        </div>
      </section>

      {/* QUIET CONTACT DETAILS */}
      {layout !== "standard" && (
      <section className="section section--paper" style={{ paddingTop: 0, paddingBottom: 88 }}>
        <div className="container">
          <div className={layout === "editorial" ? "ct-grid" : "alt-contact"}>
            {layout === "editorial" ? (
              <>
                <h2 className="h-section ct-ed-h">Prefer something else?</h2>
                <div className="ct-main-col">{details}</div>
              </>
            ) : (
              <>
                <div>
                  <Eyebrow>Prefer something else?</Eyebrow>
                  <h3 className="h-card" style={{ fontSize: 22, marginTop: 10 }}>We're on the phone and email too.</h3>
                </div>
                {details}
              </>
            )}
          </div>
        </div>
      </section>
      )}
    </div>);
}

window.ContactV2Screen = ContactV2Screen;