// proof.jsx - full-bleed "in the room" stat band (event photo + stat overlay)
// Exports window.RecLabProof = { ProofBand }

function ProofBand() {
  return (
    <section style={{ position: "relative", overflow: "hidden", background: "#0e0c0a", minHeight: "72vh",
      display: "flex", alignItems: "center", fontFamily: "var(--sans)" }}>
      <img src="images/event-crowd.jpg" alt="Recruiters at a live AI workshop" loading="lazy"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 35%", filter: "saturate(1.05) contrast(1.03)" }} />
      <div className="proof-scrim" style={{ position: "absolute", inset: 0,
        background: "linear-gradient(90deg, rgba(14,12,10,0.92) 0%, rgba(14,12,10,0.58) 46%, rgba(14,12,10,0.22) 100%)" }} />
      <div style={{ position: "relative", maxWidth: 1500, margin: "0 auto", padding: "0 80px", width: "100%" }}>
        <span style={{ fontFamily: "var(--sans)", fontSize: 13, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--terra-soft)" }}>In the room</span>
        <h2 style={{ fontFamily: "var(--sans)", fontWeight: 700, fontSize: "clamp(2.4rem, 5vw, 72px)", lineHeight: 1.0, letterSpacing: "-0.04em", color: "#fff", margin: "18px 0 0", maxWidth: 820 }}>
          Delivered to <span style={{ color: "var(--terra-soft)" }}>100+ recruiters</span>
        </h2>
        <p style={{ fontFamily: "var(--sans)", fontSize: 18.5, lineHeight: 1.55, color: "rgba(255,255,255,0.8)", margin: "24px 0 0", maxWidth: 500 }}>
          Hands-on AI workshops, run for real teams in real rooms. Not theory, things they can put to work the same week.
        </p>
      </div>
    </section>
  );
}

window.RecLabProof = { ProofBand };