// Contact form — submits via FormSubmit.co AJAX to admin@scalemediallc.com
function HpContact() {
  const params = new URLSearchParams(window.location.search);
  const isOffer = params.get("type") === "offer";
  const initiallySubmitted = params.get("submitted") === "1";

  const [submitted, setSubmitted] = React.useState(initiallySubmitted);
  const [pending, setPending] = React.useState(false);
  const [error, setError] = React.useState(null);

  const onSubmit = async (e) => {
    e.preventDefault();
    setError(null);
    setPending(true);

    const fd = new FormData(e.target);
    const obj = {};
    fd.forEach((v, k) => { obj[k] = v; });
    obj._subject  = isOffer ? "New offer brief — scalemediallc.com" : "New inquiry — scalemediallc.com";
    obj._template = "table";
    obj._captcha  = "false";

    try {
      const r = await fetch("https://formsubmit.co/ajax/admin@scalemediallc.com", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify(obj),
      });
      const data = await r.json().catch(() => ({}));
      if (data && (data.success === "true" || data.success === true)) {
        setSubmitted(true);
        try { window.history.replaceState(null, "", "?submitted=1"); } catch (_) {}
        window.scrollTo({ top: 0, behavior: "smooth" });
      } else {
        setError(data.message || "Could not send right now. Please email admin@scalemediallc.com directly.");
      }
    } catch (_) {
      setError("Network error. Please email admin@scalemediallc.com directly.");
    } finally {
      setPending(false);
    }
  };

  if (submitted) {
    return (
      <section className="hp-section--xl" style={{ background: "var(--cream)", borderBottom: "1px solid var(--rule)" }}>
        <div className="hp-container" style={{ maxWidth: 760 }}>
          <div className="hp-eyebrow-row">
            <span className="eyebrow" style={{ borderBottom: "1px solid var(--coral)", paddingBottom: 2 }}>Thank you</span>
            <span className="eyebrow hp-hide-sm">Reply within 1 business day</span>
          </div>
          <h1 className="hp-hero-title" style={{ marginBottom: 24 }}>
            Got it.{" "}
            <span style={{ position: "relative", display: "inline-block" }}>
              <span style={{ fontWeight: 200 }}>We'll be in touch.</span>
              <span style={{ position: "absolute", left: 0, bottom: -8, width: "100%", height: 6, background: "var(--coral)" }} />
            </span>
          </h1>
          <p className="hp-hero-sub" style={{ marginTop: 32, marginBottom: 40 }}>
            Your brief is on its way to <strong style={{ color: "var(--ink)" }}>admin@scalemediallc.com</strong>. We typically reply within one business day. If it's urgent, email us directly.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="index.html" className="hp-btn hp-btn--primary">← Back to home</a>
            <a href="mailto:admin@scalemediallc.com" className="hp-btn hp-btn--ghost">Email us instead</a>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="hp-section--xl" style={{ background: "var(--cream)", borderBottom: "1px solid var(--rule)" }}>
      <div className="hp-container" style={{ maxWidth: 920 }}>
        <div className="hp-eyebrow-row">
          <span className="eyebrow" style={{ borderBottom: "1px solid var(--coral)", paddingBottom: 2 }}>
            {isOffer ? "Submit your offer" : "Get in touch"}
          </span>
          <span className="eyebrow hp-hide-sm">Reply within 1 business day · admin@scalemediallc.com</span>
        </div>
        <h1 className="hp-hero-title" style={{ marginBottom: 24 }}>
          {isOffer ? (
            <>Got an offer?{" "}
              <span style={{ position: "relative", display: "inline-block" }}>
                <span style={{ fontWeight: 200 }}>Tell us.</span>
                <span style={{ position: "absolute", left: 0, bottom: -8, width: "100%", height: 6, background: "var(--coral)" }} />
              </span>
            </>
          ) : (
            <>Let's{" "}
              <span style={{ position: "relative", display: "inline-block" }}>
                <span style={{ fontWeight: 200 }}>talk.</span>
                <span style={{ position: "absolute", left: 0, bottom: -8, width: "100%", height: 6, background: "var(--coral)" }} />
              </span>
            </>
          )}
        </h1>
        <p className="hp-hero-sub" style={{ marginBottom: 56, maxWidth: "60ch" }}>
          {isOffer
            ? "Share your offer details. We'll review the math — EPCs, refund profile, funnel — and tell you straight whether we'll run it."
            : "Tell us about you and the offer you're working on. We'll come back with a candid take and next steps."}
        </p>

        <form
          className="hp-form"
          onSubmit={onSubmit}
          action="https://formsubmit.co/admin@scalemediallc.com"
          method="POST"
        >
          {/* Honeypot — bots fill this, humans don't */}
          <input type="text" name="_honey" tabIndex={-1} autoComplete="off" style={{ display: "none" }} aria-hidden="true" />

          <div className="hp-form-row">
            <label className="hp-field">
              <span className="hp-field-label">Full name *</span>
              <input name="name" type="text" required placeholder="Jane Doe" autoComplete="name" />
            </label>
            <label className="hp-field">
              <span className="hp-field-label">Company *</span>
              <input name="company" type="text" required placeholder="Acme Offers" autoComplete="organization" />
            </label>
          </div>

          <div className="hp-form-row">
            <label className="hp-field">
              <span className="hp-field-label">Email *</span>
              <input name="email" type="email" required placeholder="you@company.com" autoComplete="email" />
            </label>
            <label className="hp-field">
              <span className="hp-field-label">Phone</span>
              <input name="phone" type="tel" placeholder="Optional" autoComplete="tel" />
            </label>
          </div>

          <div className="hp-form-row">
            <label className="hp-field">
              <span className="hp-field-label">Network</span>
              <select name="network" defaultValue="">
                <option value="" disabled>Choose one…</option>
                <option>ClickBank</option>
                <option>Digistore24</option>
                <option>Buygoods</option>
                <option>Maxweb</option>
                <option>MarketCall</option>
                <option>Aragon Advertising</option>
                <option>Ray Advertising</option>
                <option>Other / multiple</option>
              </select>
            </label>
            <label className="hp-field">
              <span className="hp-field-label">Vertical</span>
              <select name="vertical" defaultValue={isOffer ? "" : ""}>
                <option value="" disabled>Choose one…</option>
                <option>Nutra &amp; Supplements</option>
                <option>Digital Products</option>
                <option>Pay-per-Call (Insurance)</option>
                <option>Other</option>
              </select>
            </label>
          </div>

          <label className="hp-field">
            <span className="hp-field-label">Offer URL</span>
            <input name="offer_url" type="url" placeholder="https://yourlander.com (optional)" />
          </label>

          <label className="hp-field">
            <span className="hp-field-label">Current monthly volume / budget</span>
            <input name="volume" type="text" placeholder="e.g. $50k/mo or 'just starting'" />
          </label>

          <label className="hp-field">
            <span className="hp-field-label">Tell us about your offer *</span>
            <textarea
              name="message"
              required
              rows={6}
              placeholder="EPC, refund rate, geos targeted, what's working, what's not…"
            />
          </label>

          {error && <div className="hp-form-error">{error}</div>}

          <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap", marginTop: 8 }}>
            <button type="submit" disabled={pending} className="hp-btn hp-btn--primary">
              {pending ? "Sending…" : "Send brief →"}
            </button>
            <span className="eyebrow" style={{ color: "var(--ink-500)" }}>
              Or email <a href="mailto:admin@scalemediallc.com" style={{ color: "var(--ink)" }}>admin@scalemediallc.com</a>
            </span>
          </div>
        </form>
      </div>
    </section>
  );
}
window.HpContact = HpContact;