/* CONTACT */
function ContactPage({ go }) {
  const C = window.MPP.contact;
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: "", company: "", email: "", interest: "Plastics", volume: "", message: "" });
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <main className="page">
      <section className="pagehero wrap-wide">
        <Eyebrow idx="C" accent>Contact</Eyebrow>
        <div className="pagehero__row" style={{ marginTop: 22, alignItems: "start" }}>
          <div>
            <SplitText as="h1" className="display" style={{ fontSize: "clamp(40px,6vw,80px)" }} accent="material" text="Let's talk material." />
            <p className="lead" style={{ marginTop: 26 }}>
              To learn more about our range of products, or to get a quote from our team, reach out today.
              We&apos;d love to discuss how our expertise can elevate your project.
            </p>
            <div className="cta-meta" style={{ marginTop: 36, maxWidth: 420 }}>
              <CRow k="WhatsApp / Phone" v={C.phone} href={C.wa} />
              <CRow k="Email" v={C.email} href={"mailto:" + C.email} />
              <CRow k="Region" v={C.region} />
            </div>
          </div>

          {/* FORM */}
          <div style={{ border: "1px solid var(--line)", borderRadius: "var(--r)", padding: "clamp(22px,3vw,34px)", background: "var(--bg)" }}>
            {sent ? (
              <div className="form__success">
                <Eyebrow accent className="no-tick" style={{ justifyContent: "center" }}>Request received</Eyebrow>
                <h3 className="h3" style={{ marginTop: 14 }}>Thanks, {form.name || "there"}.</h3>
                <p className="body-muted" style={{ marginTop: 10, marginBottom: 22 }}>
                  Our team will reply within 48 hours. Need it faster? Message us on WhatsApp.
                </p>
                <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
                  <Btn variant="accent" href={C.wa}>WhatsApp Now</Btn>
                  <Btn variant="ghost" onClick={() => setSent(false)} arrow={false}>Send another</Btn>
                </div>
              </div>
            ) : (
              <form className="form" onSubmit={submit}>
                <div className="field">
                  <label>Name</label>
                  <input required value={form.name} onChange={set("name")} placeholder="Jane Doe" />
                </div>
                <div className="field">
                  <label>Company</label>
                  <input value={form.company} onChange={set("company")} placeholder="Acme Mfg." />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input required type="email" value={form.email} onChange={set("email")} placeholder="jane@acme.com" />
                </div>
                <div className="field">
                  <label>Interested in</label>
                  <select value={form.interest} onChange={set("interest")}>
                    <option>Plastics</option>
                    <option>Metal Profiles</option>
                    <option>Both</option>
                    <option>Not sure yet</option>
                  </select>
                </div>
                <div className="field full">
                  <label>Estimated volume</label>
                  <input value={form.volume} onChange={set("volume")} placeholder="e.g. 5,000 lbs / month, or 200 linear ft" />
                </div>
                <div className="field full">
                  <label>What do you need?</label>
                  <textarea required value={form.message} onChange={set("message")} placeholder="Grade, profile, dimensions, finish, timeline…" />
                </div>
                <div className="field full" style={{ marginTop: 4 }}>
                  <button className="btn btn--accent" type="submit" style={{ width: "100%", justifyContent: "center" }}>
                    <span>Request a Quote</span><span className="arw">→</span>
                  </button>
                  <span className="mono body-muted" style={{ fontSize: 11.5, marginTop: 12, textAlign: "center" }}>
                    Typical response within 48 hours · No obligation
                  </span>
                </div>
              </form>
            )}
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ marginTop: "clamp(20px,4vw,56px)" }}>
        <Footer go={go} />
      </section>
    </main>
  );
}
function CRow({ k, v, href }) {
  return (
    <div style={{ borderTop: "1px solid var(--line)", padding: "16px 0", display: "flex", flexDirection: "column", gap: 6 }}>
      <span className="mono body-muted" style={{ fontSize: 11.5, letterSpacing: ".12em", textTransform: "uppercase" }}>{k}</span>
      {href
        ? <a href={href} style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 21, letterSpacing: "-.02em" }} className="cta-link">{v}</a>
        : <span style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 21, letterSpacing: "-.02em" }}>{v}</span>}
    </div>
  );
}
window.ContactPage = ContactPage;