// Founder video — Loom-style embedded explanation
function FounderVideo() {
  return (
    <section id="video" style={{ padding: 'var(--pl-section-py) 0' }}>
      <div className="pl-container-tight">
        <div className="pl-section-head">
          <span className="pl-eyebrow">El fundador te lo explica</span>
          <h2 className="pl-display">2 minutos. <span className="pl-accent-grad">Y lo entiendes todo.</span></h2>
          <p>Sin venta dura. Solo cómo funciona por dentro, dónde están las trampas y cuándo NO comprarlo.</p>
        </div>

        {/* Real Vimeo player — shows the actual video poster + native play */}
        <div style={{
          position: 'relative',
          aspectRatio: '16/9',
          borderRadius: 24,
          overflow: 'hidden',
          boxShadow: 'var(--pl-shadow-lg)',
          background: '#000',
          border: '1px solid var(--pl-border-strong)',
        }}>
          <iframe
            src="https://player.vimeo.com/video/1193205157?title=0&byline=0&portrait=0&dnt=1"
            frameBorder="0"
            allow="autoplay; fullscreen; picture-in-picture"
            allowFullScreen
            loading="lazy"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
            title="Por qué construí PillaLeads"
          />
        </div>

        {/* Caption below the video (no overlay, so Vimeo controls stay clean) */}
        <div style={{
          marginTop: 16,
          display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
          gap: 16, flexWrap: 'wrap',
        }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
              <span className="pl-pill-pulse" style={{ width: 7, height: 7, borderRadius: '50%', background: '#dc2626' }} />
              <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--pl-ink-2)' }}>
                Por MATT Romero · Especialista de SEO local
              </span>
            </div>
            <div style={{ fontWeight: 700, fontSize: 17, color: 'var(--pl-ink)', marginBottom: 2 }}>
              "Por qué construí PillaLeads y a quién NO le sirve."
            </div>
            <div style={{ fontSize: 13, color: 'var(--pl-ink-3)' }}>
              Capítulos: 0:00 origen · 0:38 demo · 1:24 precio · 1:50 cuándo no comprar
            </div>
          </div>
          <span style={{
            fontSize: 11.5, fontWeight: 700, fontFamily: 'var(--pl-font-mono)',
            padding: '4px 10px', borderRadius: 6,
            background: 'var(--pl-surface)', border: '1px solid var(--pl-border)', color: 'var(--pl-ink-2)',
            whiteSpace: 'nowrap',
          }}>
            ⏱ 2:14
          </span>
        </div>

        <p style={{
          textAlign: 'center', marginTop: 20, fontSize: 13.5, color: 'var(--pl-ink-3)',
        }}>
          ¿Prefieres leerlo? <a href="#planes" style={{ color: 'var(--pl-accent-deep)', textDecoration: 'underline', fontWeight: 600 }}>Salta directo a planes →</a>
        </p>
      </div>
    </section>
  );
}

window.FounderVideo = FounderVideo;