// ── Contact page ─────────────────────────────────────────────────
// Single dark-green hero section: copy at top, embedded HubSpot
// form card (75% page width) directly underneath.
//
// The HubSpot loader script (//js-eu1.hsforms.net/forms/embed/v2.js)
// is loaded by the page-level Astro file before this component
// mounts, so window.hbspt is available shortly after first paint.

const { useEffect, useRef } = React;

const ContactHero = () => {
  const mounted = useRef(false);

  useEffect(() => {
    if (mounted.current) return;
    mounted.current = true;
    const tryCreate = () => {
      if (window.hbspt && window.hbspt.forms) {
        window.hbspt.forms.create({
          portalId: "26728782",
          formId: "18b4272c-bc49-40fd-a2fa-d7688ea325d2",
          region: "eu1",
          target: "#contact-form-container"
        });
        return true;
      }
      return false;
    };
    if (!tryCreate()) {
      const interval = setInterval(() => { if (tryCreate()) clearInterval(interval); }, 120);
      // Stop polling after 10s so we don't leak the interval forever.
      setTimeout(() => clearInterval(interval), 10000);
    }
  }, []);

  return (
    <section data-screen-label="Contact Hero" data-nav-tone="dark" className="full-bleed" style={{
      position: "relative",
      padding: "clamp(180px, 22vh, 280px) clamp(20px, 6vw, 96px) clamp(80px, 12vh, 140px)",
      fontFamily: "var(--font-display)",
      color: "#FFFFFF",
      overflow: "hidden",
      display: "flex", flexDirection: "column",
      background:
        "radial-gradient(120% 90% at 78% 55%, #1F6E5C 0%, #0F3D34 38%, #061C18 78%, #020A09 100%)"
    }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        backgroundImage: "url('/assets/hero-motion.jpg')",
        backgroundSize: "cover",
        backgroundPosition: "center right",
        backgroundRepeat: "no-repeat",
        mixBlendMode: "screen",
        opacity: 0.95,
        maskImage:
          "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.25) 18%, #000 50%, #000 100%)",
        WebkitMaskImage:
          "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.25) 18%, #000 50%, #000 100%)"
      }}/>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background:
          "linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.45) 100%), " +
          "linear-gradient(90deg, rgba(2,10,9,0.55) 0%, rgba(2,10,9,0) 45%)",
        pointerEvents: "none"
      }}/>

      <div style={{ position: "relative", maxWidth: 1600, margin: "0 auto",
        width: "100%", flex: 1, display: "flex", flexDirection: "column",
        justifyContent: "flex-end", gap: 32 }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 10,
          padding: "8px 14px", borderRadius: 999,
          background: "rgba(255,255,255,0.08)",
          border: "1px solid rgba(255,255,255,0.18)",
          width: "fit-content",
          fontSize: 12, fontWeight: 500, letterSpacing: "0.02em",
          color: "rgba(255,255,255,0.85)" }}>
          Get in touch
        </div>
        <h1 style={{
          fontWeight: 700, lineHeight: 1.02, letterSpacing: "-0.035em",
          margin: 0, maxWidth: 1100, textWrap: "balance",
          color: "#FFFFFF", fontSize: "84px"
        }}>
          From pilot to production.
        </h1>
        <p style={{
          margin: 0, maxWidth: 640, fontSize: 17, lineHeight: 1.55,
          fontWeight: 400, color: "rgba(255,255,255,0.78)"
        }}>
          Share your model objective, language coverage, and quality requirements.
          A member of our team will follow up to scope a structured,
          human-in-the-loop data program for your model.
        </p>

        {/* Form card — 75% of page width, sits inside the hero on the
            dark-green background. White card keeps form fields legible. */}
        <div style={{
          width: "75%",
          marginTop: "clamp(56px, 8vh, 96px)",
          background: "#FFFFFF",
          color: "#0E1F3E",
          borderRadius: 28,
          border: "1px solid rgba(255,255,255,0.10)",
          padding: "48px 56px 40px",
          boxShadow: "0 40px 100px -30px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.18)"
        }}>
          <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.015em",
            marginBottom: 6 }}>Contact us</div>
          <div style={{ fontSize: 14, color: "#4D4D4D", marginBottom: 32, lineHeight: 1.5 }}>
            Include any relevant languages, data types, timelines, or workflow
            requirements. Required fields are marked with an asterisk.
          </div>
          <div id="contact-form-container"/>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ContactHero });