/* Video Overview — dark section with branded play button */
function VideoSection() {
  const [playing, setPlaying] = React.useState(false);

  return (
    <section className="section--ink section-pad" data-screen-label="02 Video">
      <div className="container" style={{ textAlign: 'center' }}>
        <p className="eyebrow eyebrow--light">Watch the 4-min overview</p>
        <div style={{ maxWidth: 960, margin: '0 auto', position: 'relative' }}>
          <div style={{
            position: 'relative',
            aspectRatio: '16 / 9',
            borderRadius: 16,
            overflow: 'hidden',
            boxShadow: '0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05)',
            background: '#0a0a0d',
          }}>
            {playing ? (
              <iframe
                title="PMHOA Pro overview"
                src="https://www.youtube.com/embed/Q2zk1wjSPjc?autoplay=1&rel=0"
                allow="autoplay; encrypted-media; picture-in-picture"
                allowFullScreen
                style={{ width: '100%', height: '100%', border: 0, display: 'block' }}
              />
            ) : (
              <button
                onClick={() => setPlaying(true)}
                aria-label="Play overview video"
                style={{
                  width: '100%', height: '100%',
                  border: 0, cursor: 'pointer',
                  position: 'relative',
                  background: 'linear-gradient(135deg, #0a3a55 0%, #1290CF 60%, #0c6c9b 100%)',
                  overflow: 'hidden',
                }}
              >
                {/* Subtle map-grid texture */}
                <svg viewBox="0 0 960 540" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, opacity: 0.3 }}>
                  <defs>
                    <pattern id="videoGrid" width="40" height="40" patternUnits="userSpaceOnUse">
                      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1" />
                    </pattern>
                  </defs>
                  <rect width="960" height="540" fill="url(#videoGrid)" />
                </svg>

                {/* Play button */}
                <div style={{
                  position: 'absolute', inset: 0,
                  display: 'grid', placeItems: 'center',
                }}>
                  <div style={{
                    width: 96, height: 96,
                    borderRadius: 999,
                    background: 'white',
                    display: 'grid', placeItems: 'center',
                    boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
                  }}>
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="var(--pmhoa-blue)">
                      <path d="M8 5v14l11-7z" />
                    </svg>
                  </div>
                </div>

                {/* Caption */}
                <div style={{
                  position: 'absolute',
                  bottom: 24, left: 24,
                  textAlign: 'left',
                  color: 'white',
                }}>
                  <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em' }}>
                    What PMHOA Pro actually does, in four minutes
                  </div>
                </div>

                <div style={{
                  position: 'absolute',
                  bottom: 24, right: 24,
                  fontSize: 12, color: 'rgba(255,255,255,0.65)',
                  fontWeight: 600,
                  letterSpacing: '0.02em',
                }} className="tnum">04:12</div>
              </button>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

window.VideoSection = VideoSection;