{
/* ============================================================
   Content Stack Lab — Contact Page
   ============================================================ */
const { useEffect } = React;
const { Button } = window.ContentStackLabDesignSystem_cbb53c;
const Arrow = window.Arrow;

const admin = window.CSLAdmin || {};
const pageHero = (admin.heroes && admin.heroes.contact) || {};
const interests = (window.CSL && window.CSL.contactInterests) || [];

function ContactHero() {
  return (
    <section className="contact-hero dark-theme" id="top">
      <div className="wrap contact-hero__inner reveal">
        <window.CSLRichDotTitle text={pageHero.heading} fallback="Contact" />
        {pageHero.subheading ? <p>{pageHero.subheading}</p> : null}
      </div>
    </section>
  );
}

function ContactForm() {
  const [selectedInterests, setSelectedInterests] = React.useState(interests[0] ? [interests[0]] : []);
  const toggleInterest = (item) => {
    setSelectedInterests((prev) => prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]);
  };
  const [status, setStatus] = React.useState(null); // null | "sending" | "sent" | "error"
  const [errorMsg, setErrorMsg] = React.useState("");
  const onSubmit = async (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    if (selectedInterests.length === 0) {
      setStatus("error");
      setErrorMsg("Please select at least one area you're interested in.");
      return;
    }
    const data = new FormData(form);
    data.set("interest", selectedInterests.join(", "));
    data.set("local_time", new Date().toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short" }));
    setStatus("sending");
    setErrorMsg("");
    try {
      const res = await fetch("api/contact.php", { method: "POST", body: data });
      const json = await res.json().catch(() => ({}));
      if (res.ok && json.ok) {
        setStatus("sent");
        form.reset();
        setSelectedInterests(interests[0] ? [interests[0]] : []);
      } else {
        throw new Error(json.error || "Something went wrong. Please try again.");
      }
    } catch (err) {
      setStatus("error");
      setErrorMsg(err.message || "Something went wrong. Please try again.");
    }
  };

  return (
    <form className="contact-form" onSubmit={onSubmit}>
      <input type="text" name="website" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: "absolute", left: "-9999px", width: "1px", height: "1px", opacity: 0 }} />
      <div className="contact-field">
        <label htmlFor="contact-name">Name<span className="req" aria-hidden="true"> *</span></label>
        <input id="contact-name" name="name" type="text" placeholder="Jane Carter" autoComplete="name" required />
      </div>
      <div className="contact-field">
        <label htmlFor="contact-email">Email<span className="req" aria-hidden="true"> *</span></label>
        <input id="contact-email" name="email" type="email" placeholder="jane@company.com" autoComplete="email" required />
      </div>
      <div className="contact-field">
        <label htmlFor="contact-company">Company<span className="req" aria-hidden="true"> *</span></label>
        <input id="contact-company" name="company" type="text" placeholder="Company name" autoComplete="organization" required />
      </div>
      <div className="contact-field">
        <label htmlFor="contact-job">Job title<span className="req" aria-hidden="true"> *</span></label>
        <input id="contact-job" name="jobTitle" type="text" autoComplete="organization-title" required />
      </div>
      <div className="contact-field">
        <label htmlFor="contact-source">How did you hear about us?<span className="req" aria-hidden="true"> *</span></label>
        <input id="contact-source" name="source" type="text" placeholder="LinkedIn, referral, podcast…" required />
      </div>
      <div className="contact-interest contact-field--full">
        <span className="contact-interest__label">I'm interested in<span className="req" aria-hidden="true"> *</span></span>
        <div className="contact-interest__chips">
          {interests.length ? interests.map((item) => (
            <button
              type="button"
              className={"contact-chip" + (selectedInterests.includes(item) ? " active" : "")}
              key={item}
              onClick={() => toggleInterest(item)}
              aria-pressed={selectedInterests.includes(item)}
            >
              <span></span>{item}
            </button>
          )) : null}
        </div>
      </div>
      <div className="contact-field contact-field--full">
        <label htmlFor="contact-project">Tell us more about your project<span className="req" aria-hidden="true"> *</span></label>
        <textarea id="contact-project" name="project" rows="6" placeholder="What are you working on, and where do you need help?" required></textarea>
      </div>
      <div className="contact-form__actions">
        <Button type="submit" size="lg" variant="inverse" disabled={status === "sending"}>
          {status === "sending" ? "Sending…" : "Submit"}
        </Button>
      </div>
      {status === "sent" ? (
        <p className="contact-form__status contact-form__status--ok" role="status">Thanks for reaching out. I review every enquiry personally and will get back to you within 24 hours. If your timeline is tight, you can also book a free 30-minute call and we'll get straight to it.</p>
      ) : null}
      {status === "error" ? (
        <p className="contact-form__status contact-form__status--error" role="alert">{errorMsg}</p>
      ) : null}
    </form>
  );
}

function ContactMain() {
  return (
    <section className="sec sec--sunken contact-main-sec">
      <div className="wrap contact-grid">
        <aside className="contact-side reveal">
          <window.ConsultationCard slotId="contact-consultation-card-avatar" />
        </aside>
        <div className="contact-panel reveal">
          <div className="contact-panel__head">
            <h2>Drop the Details<span className="dot">.</span></h2>
            <p>The brief, the problem, or just the question. I'll take it from here</p>
          </div>
          <ContactForm />
        </div>
      </div>
    </section>
  );
}

function ContactPage() {
  window.useReveal();
  useEffect(() => window.scrollTo(0, 0), []);
  return (
    <div className="contact-page-shell">
      <window.Header />
      <main className="dark-theme">
        <ContactHero />
        <ContactMain />
      </main>
      <div className="dark-theme">
        <window.SiteFooter />
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ContactPage />);
}