// try-it.jsx — "Try it out" lead-magnet section, wired to the real HubSpot form.
// The HubSpot embed renders in an iframe (portal 245752892 / na2). Field styling is
// controlled in HubSpot's form editor, not here. On submit we catch HubSpot's
// onFormSubmitted postMessage and reveal Step 2 (Calendly booking).
const Reveal_t = window.Reveal;
const { useState: useStateT, useEffect: useEffectT } = React;

const HS_PORTAL = "245752892";
const HS_REGION = "na2";
const HS_FORM = "d0790e65-053c-4102-a640-0e504f72e3d1";

function TryIt() {
  const [sent, setSent] = useStateT(false);

  useEffectT(() => {
    // Inject the HubSpot embed script AFTER the .hs-form-frame div exists,
    // so the scanner reliably finds it (React mounts after page load).
    if (!document.getElementById("hs-forms-embed")) {
      const s = document.createElement("script");
      s.src = `https://js-${HS_REGION}.hsforms.net/forms/embed/${HS_PORTAL}.js`;
      s.id = "hs-forms-embed";
      s.defer = true;
      document.body.appendChild(s);
    }
    const onMsg = (e) => {
      const d = e.data;
      if (d && (d.eventName === "onFormSubmitted" || d.type === "hsFormCallback" && d.eventName === "onFormSubmitted")) {
        setSent(true);
      }
    };
    window.addEventListener("message", onMsg);
    return () => window.removeEventListener("message", onMsg);
  }, []);

  return (
    <section className="try" id="try">
      <div className="wrap">
        <div className="try-grid">
          <div className="try-copy" data-comment-anchor="c72fdf892d-div-39-11">
            <Reveal_t as="h2" className="section-title try-title" delay={60}>Try it out.</Reveal_t>
            <Reveal_t delay={100}>
              <p className="try-lede">Send your wire list and we'll run it through Tractus — you get back a real sample output, generated from <strong>your actual format</strong>.</p>
            </Reveal_t>
            <Reveal_t delay={140}>
              <p className="try-lede">Then book a 15-minute call and we'll show you exactly how it handled your wire list.</p>
            </Reveal_t>
            <Reveal_t delay={180} className="try-note mono">Don't send export-controlled data — a scrubbed or representative list works fine.</Reveal_t>
          </div>

          <Reveal_t delay={120} className="try-card ticked">
            {/* HubSpot form (email + wire list upload). Submissions land in the CRM
                  with the file attached to the contact record. */}
            <div
              className="hs-form-frame"
              data-region={HS_REGION}
              data-form-id={HS_FORM}
              data-portal-id={HS_PORTAL}>
            </div>

            {sent ?
            <div className="try-step2">
                <span className="try-label mono">STEP 2 — SEE IT RUN ON YOUR FORMAT</span>
                <p className="try-step2-body">Wire list received. Book the 15-minute call and we'll map your columns and generate your harness live.</p>
                <a className="btn try-submit" href={window.CALENDLY} target="_blank" rel="noopener">Book the 15-Minute Demo <span className="arr" aria-hidden="true">→</span></a>
              </div> :

            <div className="try-fine mono">We reply with your sample output within 1 business day. Your file is never shared.</div>
            }
          </Reveal_t>
        </div>
      </div>
      <style>{`
        .try { background: var(--paper-2); padding: var(--sp-section) 0; }
        .try-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
        .try-title { margin: 18px 0 26px; }
        .try-lede { font-size: 18px; line-height: 1.6; color: var(--ink-mut); margin: 0 0 18px; max-width: 46ch; text-wrap: pretty; }
        .try-lede strong { color: var(--ink); }
        .try-note { display: block; font-size: 11.5px; line-height: 1.6; color: var(--ink-faint); border-top: 1px dashed var(--line-strong); padding-top: 16px; margin-top: 10px; max-width: 46ch; }

        /* card pinned white in both themes — the HubSpot iframe has its own light styling */
        .try-card { background: #ffffff; border: 1px solid var(--line-strong); padding: 30px 30px 26px; }
        .hs-form-frame { min-height: 300px; }

        .try-label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; font-weight: 600; color: #5d5f66; margin: 0 0 8px; }
        .try-step2 { border-top: 1px solid #e4e5e9; margin-top: 24px; padding-top: 22px; }
        .try-step2-body { font-size: 15px; line-height: 1.6; color: #5d5f66; margin: 0 0 18px; }
        .try-submit { width: 100%; justify-content: center; }
        .try-fine { font-size: 11px; color: #8b8d95; text-align: center; margin-top: 14px; line-height: 1.6; }

        @media (max-width: 880px) { .try-grid { grid-template-columns: 1fr; gap: 36px; } }
      `}</style>
    </section>);

}

window.TryIt = TryIt;