// Asset Evaluation Submission Form — unlisted page (direct link only, not in nav).
// Embeds the live monday.com form so submissions, validation, and any future
// edits to the question set are handled entirely by monday — nothing here
// duplicates or stores form logic.
window.AssetFormApp = (function(){
const { useEffect, useRef } = React;

// The "/forms/embed/" path (vs. the plain "/forms/" share link) is monday's
// embeddable variant — the plain link's CSP sends a frame-ancestors allowlist
// that does not include this site, so it silently refuses to render in an
// iframe here. The embed path omits frame-ancestors entirely.
const MONDAY_FORM_URL = "https://forms.monday.com/forms/embed/585e6b81741ebab6fa0170f315f4c223?r=use1";

function AssetFormApp(){
  const iframeRef = useRef(null);

  // monday's embed doesn't post a resize message as far as we've found, so the
  // CSS fallback height below is deliberately generous (taller than the form
  // should ever need) so the page scrolls as one piece instead of the iframe
  // scrolling independently inside its own box. If monday's app *does* ever
  // post its height (some embeddable widgets do, inconsistently), this picks
  // it up and sizes exactly instead of relying on the guess.
  useEffect(() => {
    function onMessage(e){
      if (!/monday\.com$/.test(new URL(e.origin).hostname)) return;
      const data = e.data;
      const height = typeof data === "number" ? data
        : typeof data?.height === "number" ? data.height
        : typeof data?.data?.height === "number" ? data.data.height
        : null;
      if (height && iframeRef.current) {
        iframeRef.current.style.height = `${Math.ceil(height) + 40}px`;
      }
    }
    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, []);

  return (
    <>
      <section className="asset-form-header">
        <div className="section-inner">
          <h1>Submit an asset for evaluation</h1>
          <p>
            Tell us about your asset or program. The information below helps us assess
            initial fit, scientific rationale, development status, and partnering
            opportunities. All responses are confidential and reviewed by our team.
          </p>
        </div>
      </section>

      <section className="section" style={{paddingTop:0, paddingBottom:100}}>
        <div className="section-inner">
          <div className="asset-form-frame">
            <iframe
              ref={iframeRef}
              src={MONDAY_FORM_URL}
              title="VivaMed Asset Evaluation Submission Form"
              loading="lazy"
            />
          </div>
        </div>
      </section>

      <SiteFooter/>

      <style>{`
        .asset-form-header{
          padding:128px 32px 36px;
          background:#fff;
          border-bottom:1px solid var(--border, #e6edf5);
        }
        .asset-form-header h1{
          font-size: clamp(22px, 2.6vw, 28px);
          font-weight:700; letter-spacing:-.015em; line-height:1.25;
          color:var(--text, #2c3c69); margin:0 0 8px;
        }
        .asset-form-header p{
          font-size:14.5px; line-height:1.6;
          color:var(--muted, #5C6773); max-width:620px; margin:0;
        }
        @media (max-width:640px){
          .asset-form-header{ padding:104px 20px 28px; }
        }
        .asset-form-frame{
          max-width:900px; margin:0 auto;
          border-radius:16px; overflow:hidden;
          border:1px solid #e6edf5;
          box-shadow:0 30px 70px -44px rgba(44, 60, 105,.28);
        }
        .asset-form-frame iframe{
          display:block; width:100%; height:5200px; border:0;
        }
        @media (max-width:640px){
          .asset-form-frame iframe{ height:7200px; }
        }
      `}</style>
    </>
  );
}

return AssetFormApp;
})();