function Contact({ onInquire }) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [firm, setFirm] = useState("");
  const [role, setRole] = useState("");
  const [sector, setSector] = useState("");
  const [interest, setInterest] = useState("");
  const [message, setMessage] = useState("");
  const [marketingOptIn, setMarketingOptIn] = useState(false);
  const [touched, setTouched] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [done, setDone] = useState(false);

  const SECTORS = [
    { value: "Hardware / Semiconductors", label: t("ct_opt_sector_hardware") },
    { value: "Electronics Manufacturing", label: t("ct_opt_sector_electronics") },
    { value: "Contract Manufacturing", label: t("ct_opt_sector_contract") },
    { value: "PE / VC / Investment", label: t("ct_opt_sector_pevc") },
    { value: "Corporate Strategy", label: t("ct_opt_sector_strategy") },
    { value: "Industrial Real Estate", label: t("ct_opt_sector_realestate") },
    { value: "Customs / Trade Compliance", label: t("ct_opt_sector_customs") },
    { value: "Other", label: t("ct_opt_sector_other") },
  ];
  const INTERESTS = [
    { value: "R003 Pulse", label: t("ct_opt_interest_pulse") },
    { value: "R003 Bundle", label: t("ct_opt_interest_bundle") },
    { value: "R003 Extended", label: t("ct_opt_interest_extended") },
    { value: "Custom intelligence", label: t("ct_opt_interest_custom") },
    { value: "Methodology questions", label: t("ct_opt_interest_methodology") },
    { value: "Just exploring", label: t("ct_opt_interest_exploring") },
  ];

  const filledRequired =
    name.trim() && email.trim() && firm.trim() && role.trim() && sector && interest;

  async function submit(ev) {
    ev.preventDefault();
    setTouched(true);
    setError(null);

    if (!isValidEmail(email)) {
      setError(t("ct_err_valid"));
      return;
    }
    if (!isWorkEmail(email)) {
      setError(t("ct_err_work"));
      return;
    }
    if (!filledRequired) {
      setError(t("ct_err_required"));
      return;
    }

    setLoading(true);
    try {
      const response = await fetch(
        "https://leads.vstrade.co/subscribe",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            email: email.toLowerCase().trim(),
            source: "homepage_inquiry",
            name: name.trim(),
            firm: firm.trim(),
            role: role.trim(),
            sector,
            interest,
            message: message.trim() || undefined,
            lang: window.LANG || "es",
            marketing_opt_in: marketingOptIn,
            utm_payload: serializeUtmPayload() || undefined,
          }),
        }
      );
      let data = {};
      try { data = await response.json(); } catch (_) { /* non-JSON */ }

      if (response.status === 201 || response.status === 200) {
        // GTM dataLayer push — only on confirmed worker success.
        try {
          const utm = readUtmObject();
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
            event: "contact_inquiry",
            source: "contact_form",
            product: null,
            utm_source: utm.utm_source,
            utm_medium: utm.utm_medium,
            utm_campaign: utm.utm_campaign,
            utm_content: utm.utm_content,
            utm_term: utm.utm_term,
            gclid: utm.gclid,
            lang: window.LANG || "es",
          });
        } catch (_) { /* GTM optional; never block UX */ }
        setDone(true);
      } else if (response.status === 400) {
        setError(data.error || t("ct_err_400"));
      } else if (response.status === 429) {
        setError(t("ct_err_429"));
      } else {
        setError(t("ct_err_500"));
      }
    } catch (err) {
      setError(t("ct_err_network"));
    } finally {
      setLoading(false);
    }
  }

  const labelStyle = {
    fontFamily: "Inter, sans-serif", fontSize: 12, fontWeight: 600,
    color: PALETTE.navy, letterSpacing: ".02em",
    display: "block", marginBottom: 6,
  };
  const inputStyle = {
    width: "100%", padding: "10px 12px",
    fontFamily: "Inter, sans-serif", fontSize: 14, color: PALETTE.navy,
    background: PALETTE.white, border: `1px solid ${PALETTE.rule}`,
    borderRadius: 4, outline: "none",
    transition: "border-color 120ms",
    boxSizing: "border-box",
  };
  const requiredMark = (
    <span style={{ color: PALETTE.amber, marginLeft: 2 }} aria-hidden="true">*</span>
  );

  return (
    <section id="contact" style={{ background: PALETTE.paper2, borderBottom: `1px solid ${PALETTE.rule}` }}>
      <div style={{ maxWidth: 1000, margin: "0 auto", padding: "96px 32px" }} className="vst-section">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <Eyebrow style={{ marginBottom: 14 }}>{t("ct_eyebrow")}</Eyebrow>
          <h2 className="vst-h2" style={{
            fontFamily: "'Source Serif 4', serif", fontSize: 40, fontWeight: 600,
            lineHeight: 1.14, letterSpacing: "-.018em", color: PALETTE.navy, margin: 0,
          }}>
            {t("ct_h2")}
          </h2>
          <p style={{
            fontFamily: "Inter, sans-serif", fontSize: 16, lineHeight: 1.55,
            color: PALETTE.mute1, marginTop: 14, marginBottom: 0, maxWidth: 620,
          }}>
            {t("ct_intro")}{" "}
            <a href="mailto:hello@vstrade.co" style={{ color: PALETTE.blue, textDecoration: "none" }}>hello@vstrade.co</a>.
          </p>
        </div>

        {done ? (
          <div style={{
            background: PALETTE.white, border: `1px solid ${PALETTE.rule}`,
            borderLeft: `3px solid ${PALETTE.green}`,
            padding: "24px 28px", maxWidth: 720,
          }}>
            <div style={{
              fontFamily: "Inter, sans-serif", fontSize: 15, lineHeight: 1.6, color: PALETTE.navy,
            }}>
              <strong>{t("ct_ok_thanks")}{name ? `, ${name.split(/\s+/)[0]}` : ""}.</strong> {t("ct_ok_landed")}{" "}
              {t("ct_ok_hear_pre")} <span style={{ fontFamily: "JetBrains Mono, monospace", color: PALETTE.navy }}>{email}</span> {t("ct_ok_hear_post")}{" "}
              {interest || t("ct_ok_request")}.
            </div>
          </div>
        ) : (
          <form onSubmit={submit} noValidate style={{
            background: PALETTE.white, border: `1px solid ${PALETTE.rule}`,
            padding: 32, maxWidth: 720,
          }}>
            <div className="vst-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 18 }}>
              <div>
                <label style={labelStyle} htmlFor="c-name">{t("ct_label_name")}{requiredMark}</label>
                <input id="c-name" type="text" required value={name} onChange={e => setName(e.target.value)} style={inputStyle} autoComplete="name"/>
              </div>
              <div>
                <label style={labelStyle} htmlFor="c-email">{t("ct_label_email")}{requiredMark}</label>
                <input id="c-email" type="email" required value={email} onChange={e => setEmail(e.target.value)} style={inputStyle} autoComplete="email" inputMode="email"/>
              </div>
            </div>

            <div className="vst-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 18 }}>
              <div>
                <label style={labelStyle} htmlFor="c-firm">{t("ct_label_firm")}{requiredMark}</label>
                <input id="c-firm" type="text" required value={firm} onChange={e => setFirm(e.target.value)} style={inputStyle} autoComplete="organization"/>
              </div>
              <div>
                <label style={labelStyle} htmlFor="c-role">{t("ct_label_role")}{requiredMark}</label>
                <input id="c-role" type="text" required value={role} onChange={e => setRole(e.target.value)} style={inputStyle} placeholder={t("ct_ph_role")} autoComplete="organization-title"/>
              </div>
            </div>

            <div className="vst-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 18 }}>
              <div>
                <label style={labelStyle} htmlFor="c-sector">{t("ct_label_sector")}{requiredMark}</label>
                <select id="c-sector" required value={sector} onChange={e => setSector(e.target.value)} style={inputStyle}>
                  <option value="" disabled>{t("ct_ph_sector")}</option>
                  {SECTORS.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
                </select>
              </div>
              <div>
                <label style={labelStyle} htmlFor="c-interest">{t("ct_label_interest")}{requiredMark}</label>
                <select id="c-interest" required value={interest} onChange={e => setInterest(e.target.value)} style={inputStyle}>
                  <option value="" disabled>{t("ct_ph_interest")}</option>
                  {INTERESTS.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
                </select>
              </div>
            </div>

            <div style={{ marginBottom: 22 }}>
              <label style={labelStyle} htmlFor="c-message">{t("ct_label_message")} <span style={{ color: PALETTE.mute2, fontWeight: 400 }}>{t("ct_label_optional")}</span></label>
              <textarea
                id="c-message" rows={4}
                value={message} onChange={e => setMessage(e.target.value)}
                style={{ ...inputStyle, resize: "vertical", minHeight: 96, fontFamily: "Inter, sans-serif" }}
                placeholder={t("ct_ph_message")}
              />
            </div>

            {error && (
              <div style={{
                marginBottom: 16, padding: "10px 14px",
                background: "#FEF2F2", border: "1px solid #FCA5A5", borderRadius: 4,
                fontFamily: "Inter, sans-serif", fontSize: 13, color: "#991B1B",
              }}>{error}</div>
            )}

            {/* Opt-in marketing — opcional, separado de la consulta, no pre-tildado */}
            <label style={{
              display: "flex", gap: 8, alignItems: "flex-start", marginBottom: 18,
              fontFamily: "Inter, sans-serif", fontSize: 12.5, lineHeight: 1.5,
              color: PALETTE.mute1, cursor: "pointer",
            }}>
              <input
                type="checkbox"
                checked={marketingOptIn}
                onChange={(e) => setMarketingOptIn(e.target.checked)}
                disabled={loading}
                style={{ marginTop: 2, flex: "0 0 auto" }}
              />
              <span>{t("cm_marketing_optin")}</span>
            </label>

            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20, flexWrap: "wrap" }}>
              <p style={{
                fontFamily: "Inter, sans-serif", fontSize: 12, lineHeight: 1.5,
                color: PALETTE.mute1, margin: 0, maxWidth: 380,
              }}>
                {t("ct_privacy")}{" "}
                <a href="/privacy" target="_blank" rel="noopener" style={{ color: PALETTE.blue }}>{t("ct_privacy_link")}</a>
              </p>
              <button
                type="submit"
                disabled={loading}
                style={{
                  background: PALETTE.amber, color: PALETTE.paper, border: 0, borderRadius: 4,
                  padding: "12px 24px", fontFamily: "Inter, sans-serif", fontSize: 14, fontWeight: 600,
                  cursor: loading ? "wait" : "pointer", opacity: loading ? 0.7 : 1,
                }}
                className="vst-btn-primary"
              >{loading ? t("ct_submit_loading") : t("ct_submit")}</button>
            </div>
          </form>
        )}
      </div>
    </section>
  );
}

window.Contact = Contact;