// contact-page.jsx — /contact/ Lonetti page

function ContactHero() {
  return (
    <section className="surface-dark grid-bg" style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
          <div>
            <div className="eyebrow on-dark" style={{ marginBottom: 22 }}>Contact us</div>
            <h1 style={{ color: "#fff", maxWidth: "18ch", marginBottom: 24 }}>
              Talk to the Lonetti <span style={{ color: "var(--red)" }}>engineering team.</span>
            </h1>
            <p className="lede" style={{ color: "rgba(255,255,255,0.72)", maxWidth: "50ch" }}>
              Our engineers in Buenos Aires are ready to help you choose the right calibration equipment,
              configure a custom solution, or answer technical questions about standards compliance.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16, paddingTop: 8 }}>
            {[
              { icon: "mail",     label: "Email",     value: "info@lonetti.com.ar",    href: "mailto:info@lonetti.com.ar" },
              { icon: "whatsapp", label: "WhatsApp",  value: "+54 9 11 2788 4190",     href: "https://wa.me/5491127884190" },
              { icon: "pin",      label: "Workshop",  value: "Buenos Aires, Argentina", href: null },
              { icon: "globe",    label: "Languages", value: "English · Español · Português", href: null },
            ].map((c) => (
              <div key={c.label} style={{
                display: "flex", alignItems: "center", gap: 18,
                background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.12)",
                borderRadius: 6, padding: "18px 22px",
              }}>
                <div style={{ width: 40, height: 40, borderRadius: 4, background: "rgba(255,255,255,0.08)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--red)", flexShrink: 0 }}>
                  <Icon name={c.icon} size={20}/>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "rgba(255,255,255,0.45)", textTransform: "uppercase", marginBottom: 4 }}>{c.label}</div>
                  {c.href ? (
                    <a href={c.href} style={{ fontSize: 15, fontWeight: 600, color: "#fff" }}>{c.value}</a>
                  ) : (
                    <span style={{ fontSize: 15, fontWeight: 600, color: "#fff" }}>{c.value}</span>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactFormSection() {
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);
  const [serverError, setServerError] = useState(null);
  const [errors, setErrors] = useState({});
  const [data, setData] = useState({ name: "", company: "", country: "", email: "", subject: "", message: "" });

  const onSubmit = async (e) => {
    e.preventDefault();
    const next = {};
    ["name", "email", "message"].forEach((k) => { if (!data[k]) next[k] = "Required"; });
    if (data.email && !/^\S+@\S+\.\S+$/.test(data.email)) next.email = "Invalid email";
    setErrors(next);
    if (Object.keys(next).length > 0) return;
    setLoading(true);
    setServerError(null);
    try {
      await submitForm({
        ...data,
        _subject: `Contact: ${data.subject || "General enquiry"} — ${data.name}`,
      });
      setSubmitted(true);
    } catch {
      setServerError("Something went wrong. Please try again or email us directly at info@lonetti.com.ar");
    } finally {
      setLoading(false);
    }
  };

  const field = (k, label, type = "text", required = false) => (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontSize: 11, fontFamily: "var(--f-mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-3)" }}>
        {label}{required && <span style={{ color: "var(--red)", marginLeft: 4 }}>*</span>}
      </span>
      <input type={type} value={data[k]} onChange={(e) => setData({ ...data, [k]: e.target.value })}
        style={{
          padding: "12px 14px",
          background: "#fff",
          border: `1px solid ${errors[k] ? "var(--red)" : "var(--line)"}`,
          borderRadius: 4,
          color: "var(--text)",
          fontSize: 14,
          fontFamily: "var(--f-body)",
        }}/>
      {errors[k] && <span style={{ fontSize: 11, color: "var(--red)" }}>{errors[k]}</span>}
    </label>
  );

  if (submitted) {
    return (
      <div style={{
        maxWidth: 560, margin: "0 auto", padding: "64px 0",
        display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 20,
      }}>
        <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--red)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name="check" size={30} stroke="#fff" strokeWidth={2}/>
        </div>
        <h2 className="h2" style={{ fontSize: 36 }}>Message received.</h2>
        <p className="lede">Our team will get back to you within two business days. For urgent requirements, reach us on WhatsApp.</p>
        <a className="btn btn-ghost-dark" href="index.html">Back to home <Icon name="arrow" size={16}/></a>
      </div>
    );
  }

  return (
    <section>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
        <div style={{ paddingTop: 8 }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>Send a message</div>
          <h2 className="h2" style={{ marginBottom: 20 }}>How can we help?</h2>
          <p style={{ color: "var(--text-2)", lineHeight: 1.7, marginBottom: 32 }}>
            Whether you need a quote, have a technical question about calibration standards, or want to
            explore a distributor partnership — fill in the form and an engineer will follow up directly.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            {[
              { icon: "seal",     title: "Calibration quotes",   body: "Prover tanks, test measures, custom configurations." },
              { icon: "shipping", title: "International orders",  body: "FOB/CIF pricing, documentation, freight coordination." },
              { icon: "globe",    title: "Distributor enquiries", body: "Country exclusivity, training, marketing support." },
              { icon: "document", title: "Technical questions",   body: "Standards, accuracy classes, custom engineering." },
            ].map((it) => (
              <div key={it.title} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                <div style={{ width: 36, height: 36, borderRadius: 4, background: "var(--bg-alt)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--navy)", flexShrink: 0, marginTop: 2 }}>
                  <Icon name={it.icon} size={18}/>
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 4 }}>{it.title}</div>
                  <div style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.5 }}>{it.body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <form onSubmit={onSubmit} style={{
          background: "var(--bg-alt)", border: "1px solid var(--line)", borderRadius: 8,
          padding: 40, display: "flex", flexDirection: "column", gap: 18,
        }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            {field("name", "Full name", "text", true)}
            {field("company", "Company")}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            {field("country", "Country")}
            {field("email", "Email address", "email", true)}
          </div>
          {field("subject", "Subject")}
          <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ fontSize: 11, fontFamily: "var(--f-mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-3)" }}>
              Message <span style={{ color: "var(--red)" }}>*</span>
            </span>
            <textarea rows="5" value={data.message}
              onChange={(e) => setData({ ...data, message: e.target.value })}
              placeholder="Describe what you need — product type, capacity, accuracy class, applicable standards, or any other details…"
              style={{
                padding: "12px 14px", background: "#fff",
                border: `1px solid ${errors.message ? "var(--red)" : "var(--line)"}`,
                borderRadius: 4, color: "var(--text)", fontSize: 14,
                fontFamily: "var(--f-body)", resize: "vertical",
              }}/>
            {errors.message && <span style={{ fontSize: 11, color: "var(--red)" }}>{errors.message}</span>}
          </label>
          {serverError && (
            <p style={{ margin: 0, fontSize: 13, color: "var(--red)", background: "var(--red-soft)", padding: "10px 14px", borderRadius: 4 }}>
              {serverError}
            </p>
          )}
          <button type="submit" disabled={loading} className="btn btn-primary" style={{
            marginTop: 4, justifyContent: "center",
            opacity: loading ? 0.7 : 1, cursor: loading ? "not-allowed" : "pointer",
          }}>
            {loading ? "Sending…" : <><span>Send message</span><Icon name="arrow" size={16} stroke="#fff"/></>}
          </button>
          <p style={{ margin: 0, fontSize: 12, color: "var(--text-3)", textAlign: "center" }}>
            We typically reply within 2 business days.
          </p>
        </form>
      </div>
    </section>
  );
}

function ContactPage() {
  return (
    <>
      <Nav active="contact"/>
      <main>
        <ContactHero/>
        <ContactFormSection/>
      </main>
      <Footer/>
      <FloatingWhatsApp/>
    </>
  );
}

Object.assign(window, { ContactPage });