// Contact.jsx — "Let's talk real food" dark section, founder cards + form
function Contact() {
  const { T } = useLang();
  const C = T.contact;

  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [form, setForm] = React.useState({ name: "", email: "", message: "" });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  // Replace this URL with your Google Apps Script web app URL (see setup instructions)
  const SHEET_URL = "https://script.google.com/macros/s/AKfycbyBmA-POpIRtP78Tz2xnzVu-69nldy8ALnyoZohxNdTjyyoVhiTwX8NK4EUFsLDc4fb9w/exec";

  const submit = (e) => {
    e.preventDefault();
    setLoading(true);
    // Send form data to Google Sheets via Apps Script
    // Using an Image request — the browser never blocks these, no CORS issues
    const params = new URLSearchParams({ name: form.name, email: form.email, message: form.message });
    new Image().src = `${SHEET_URL}?${params}`;
    // Small delay to give the request time to fire before showing success
    setTimeout(() => { setLoading(false); setSent(true); }, 800);
  };

  const founders = [
    { name: "Ton Gerritsen",   role: "Co-founder · Business Development", tel: "+31 (0)6 1332 7585", mail: "ton@nomadplant.co" },
    { name: "Dean McClumpha",  role: "Co-founder · Product Development",  tel: "+44 7947 378 780",   mail: "dean@nomadplant.co" },
  ];

  const field = { width: "100%", boxSizing: "border-box", fontFamily: "var(--font-body)", fontSize: 15,
    color: "var(--paper)", background: "rgba(245,237,223,.06)", border: "1.5px solid var(--border-dark)",
    borderRadius: 10, padding: "13px 14px", outline: "none" };

  return (
    <section id="contact" style={{ background: "var(--ink)", color: "var(--paper)", padding: "92px 0 90px" }}>
      <div className="container nm-contact-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }}>
        <Reveal>
          <Eyebrow color="var(--lime)">{C.eyebrow}</Eyebrow>
          <h2 style={{ font: "var(--t-h1)", color: "var(--paper)", margin: "12px 0 0",
            letterSpacing: "-.015em", textTransform: "uppercase" }}>{C.heading}</h2>
          <p style={{ font: "var(--t-lead)", color: "var(--fg-on-dark-2)", marginTop: 16, maxWidth: 440 }}>
            {C.body}
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 30 }}>
            {founders.map((f) => (
              <div key={f.name} style={{ border: "1px solid var(--border-dark)", borderRadius: 14, padding: "18px 20px" }}>
                <div style={{ font: "var(--t-h4)", color: "var(--paper)" }}>{f.name}</div>
                <div style={{ font: "var(--t-small)", color: "var(--fg-on-dark-2)", marginTop: 2 }}>{f.role}</div>
                <div style={{ display: "flex", gap: 18, marginTop: 12, flexWrap: "wrap" }}>
                  <a href={"tel:" + f.tel.replace(/\s/g, "")} style={{ color: "var(--lime)", fontWeight: 600, fontSize: 14 }}>{f.tel}</a>
                  <a href={"mailto:" + f.mail} style={{ color: "var(--lime)", fontWeight: 600, fontSize: 14 }}>{f.mail}</a>
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={120}>
          {sent ? (
            <div style={{ height: "100%", minHeight: 320, display: "flex", flexDirection: "column", justifyContent: "center",
              border: "1px solid var(--border-dark)", borderRadius: 16, padding: 34 }}>
              <div style={{ width: 52, height: 52, borderRadius: 999, background: "var(--lime)", display: "flex",
                alignItems: "center", justifyContent: "center" }}>
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#26072E" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
              </div>
              <h3 style={{ font: "var(--t-h2)", color: "var(--paper)", textTransform: "uppercase", margin: "20px 0 0" }}>{C.successHeading}</h3>
              <p style={{ font: "var(--t-body)", color: "var(--fg-on-dark-2)", marginTop: 8 }}>
                {C.successPrefix} {form.name || C.successFallbackName}, {C.successBody}
              </p>
              <div style={{ marginTop: 20 }}>
                <Button variant="solid" onClick={() => { setSent(false); setForm({ name: "", email: "", message: "" }); }}>{C.successCta}</Button>
              </div>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 14,
              border: "1px solid var(--border-dark)", borderRadius: 16, padding: 28 }}>
              <FieldLabel>{C.labelName}</FieldLabel>
              <input style={field} value={form.name} onChange={set("name")} placeholder={C.placeholderName} required
                onFocus={(e)=>e.target.style.borderColor="var(--lime)"} onBlur={(e)=>e.target.style.borderColor="var(--border-dark)"} />
              <FieldLabel>{C.labelEmail}</FieldLabel>
              <input style={field} type="email" value={form.email} onChange={set("email")} placeholder={C.placeholderEmail} required
                onFocus={(e)=>e.target.style.borderColor="var(--lime)"} onBlur={(e)=>e.target.style.borderColor="var(--border-dark)"} />
              <FieldLabel>{C.labelMessage}</FieldLabel>
              <textarea style={{ ...field, height: 110, resize: "none" }} value={form.message} onChange={set("message")} placeholder={C.placeholderMessage}
                onFocus={(e)=>e.target.style.borderColor="var(--lime)"} onBlur={(e)=>e.target.style.borderColor="var(--border-dark)"} />
              <Button type="submit" style={{ marginTop: 6, justifyContent: "center" }} disabled={loading}>
                {loading ? "..." : C.cta}
              </Button>
            </form>
          )}
        </Reveal>
      </div>
      <style>{`@media (max-width:860px){ .nm-contact-grid{ grid-template-columns:1fr !important; gap:34px !important; } }`}</style>
    </section>
  );
}
function FieldLabel({ children }) {
  return <label style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 11,
    letterSpacing: ".1em", textTransform: "uppercase", color: "var(--fg-on-dark-2)", marginBottom: -6 }}>{children}</label>;
}
window.Contact = Contact;