// WorkTwins — Video Intro section (just below the Hero)

function VideoIntro() {
  return (
    <section className="section section-tight video-intro" id="watch">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Watch · ~60 seconds</span>
          <h2 className="h2">See WorkTwins in <em>plain words.</em></h2>
          <p className="lede">
            A short intro to what WorkTwins is, how your WorkFootPrint forms while you work, and why real work evidence beats resumes.
          </p>
        </div>

        <div className="video-shell reveal">
          <div className="video-frame">
            <video
              className="video-el"
              controls
              playsInline
              preload="metadata"
              poster="https://cdn.worktwins.com/images/worktwins_main.png"
            >
              <source
                src="https://cdn.worktwins.com/videos/worktwins_girls_speak_intro.mp4"
                type="video/mp4"
              />
              Your browser does not support embedded video.
            </video>

            <div className="video-caption" aria-hidden="true">
              <span className="pill"><span className="dot"></span>WorkTwins · intro</span>
              <span className="video-meta">Privacy-first · 0-input · evidence-based</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.VideoIntro = VideoIntro;