const ProductDemo = () => (
  <section className="section product-demo" id="demo" data-screen-label="05 Product Demo">
    <div className="product-demo-bg" aria-hidden="true">
      <div className="product-demo-grid" />
      <div className="product-demo-glow product-demo-glow--left" />
      <div className="product-demo-glow product-demo-glow--right" />
      <div className="product-demo-beam" />
    </div>

    <div className="wrap">
      <div className="product-demo-head s-head">
        <span className="label">/ Product demo</span>
        <h2><span className="gradient">Model OS</span></h2>
        <p className="lede">
          See how capture, fine-tune, eval, route, and host come together in one operating layer —
          from wrapper usage to owned intelligence.
        </p>
      </div>

      <div className="product-demo-stage">
        <div className="product-demo-frame">
          <div className="product-demo-frame-corner product-demo-frame-corner--tl" aria-hidden="true" />
          <div className="product-demo-frame-corner product-demo-frame-corner--tr" aria-hidden="true" />
          <div className="product-demo-frame-corner product-demo-frame-corner--bl" aria-hidden="true" />
          <div className="product-demo-frame-corner product-demo-frame-corner--br" aria-hidden="true" />
          <div className="product-demo-frame-inner">
            <video
              className="product-demo-video"
              src="assets/modelos-demo-small.mp4"
              controls
              playsInline
              preload="metadata"
            >
              Your browser does not support the video tag.
            </video>
          </div>
        </div>
        <div className="product-demo-caption">
          <span className="product-demo-caption-label">Model OS</span>
          <span className="product-demo-caption-dot" aria-hidden="true">·</span>
          <span>Platform walkthrough</span>
        </div>
      </div>
    </div>
  </section>
);

window.ProductDemo = ProductDemo;