// ============================================================
// SECTION 3 — Full-bleed video + overlapping title + paragraph
// ============================================================

function Section3() {
  // ─── YouTube Shorts embed: autoplay (muted) on scroll-into-view ───
  // The video is vertical (9:16). It loads with autoplay=0 to save
  // bandwidth, then we swap the iframe URL to autoplay=1 once the
  // section enters the viewport. Muted is required for browser
  // autoplay policies; users can unmute via the YouTube player UI.
  const videoRef = React.useRef(null);
  const frameRef = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const VIDEO_ID = 'Jhm3dJ0aEuM';
  const base = 'https://www.youtube.com/embed/' + VIDEO_ID;
  const params = (auto) =>
    '?rel=0&modestbranding=1&playsinline=1&loop=1&playlist=' + VIDEO_ID +
    (auto ? '&autoplay=1&mute=1' : '');

  // ─── Fullscreen on demand ───────────────────────────────────
  // Prefer the <iframe> (the YouTube player itself); fall back to the
  // wrapping frame div. Some embedded contexts block the Fullscreen API
  // (permissions policy) — in that case we open the Shorts in a new tab
  // so "Layar penuh" always does *something* useful.
  const requestFs = (el) => {
    if (!el) return false;
    const req = el.requestFullscreen || el.webkitRequestFullscreen ||
                el.webkitEnterFullscreen || el.msRequestFullscreen;
    if (!req) return false;
    try {
      const r = req.call(el);
      if (r && typeof r.catch === 'function') r.catch(() => {});
      return true;
    } catch (e) { return false; }
  };
  const goFullscreen = () => {
    const frame = frameRef.current;
    const iframe = frame && frame.querySelector('iframe');
    const allowed = (document.fullscreenEnabled !== false);
    let ok = false;
    if (allowed) ok = requestFs(iframe) || requestFs(frame);
    if (!ok) {
      // API unavailable/blocked (e.g. sandboxed preview, iOS) — open Shorts.
      window.open('https://youtube.com/shorts/' + VIDEO_ID, '_blank', 'noopener');
    }
  };

  React.useEffect(() => {
    if (!videoRef.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !playing) setPlaying(true);
      });
    }, { threshold: 0.35 });
    io.observe(videoRef.current);
    return () => io.disconnect();
  }, [playing]);

  return (
    <section className="s3" id="tentang">
      {/* FULL-WIDTH VERTICAL YOUTUBE SHORTS EMBED */}
      <div className="s3-video-full">
        <div className="s3-video-bg">
          <div className="s3-video-pattern" />
        </div>

        <div className="s3-video-frame" ref={(node) => { videoRef.current = node; frameRef.current = node; }}>
          <div className="s3-video-frame-inner">
            <iframe
              src={base + params(playing)}
              title="Cerita Yojea — YouTube Shorts"
              frameBorder="0"
              allow="autoplay; encrypted-media; picture-in-picture; web-share; fullscreen"
              allowFullScreen
              loading="lazy"
            />
          </div>
        </div>

        <button
          type="button"
          className="s3-video-fs"
          onClick={goFullscreen}
          aria-label="Tonton layar penuh"
        >
          <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
            <path d="M3 7V3.8A.8.8 0 0 1 3.8 3H7M13 3h3.2a.8.8 0 0 1 .8.8V7M17 13v3.2a.8.8 0 0 1-.8.8H13M7 17H3.8a.8.8 0 0 1-.8-.8V13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <span>Layar penuh</span>
        </button>

        <div className="s3-video-tag-tl">
          <span className="s3-video-tag-dot" />
          ▶ Cerita Yojea — Shorts
        </div>
        <div className="s3-video-tag-tr">Est. 1970</div>
      </div>

      {/* OVERLAPPING TITLE + PARAGRAPH */}
      <div className="s3-content">
        <div className="s3-container">
          <div className="s3-eyebrow">
            <span className="s3-eyebrow-line" />
            Cerita Yojea
          </div>

          <h2 className="s3-title">
            Dari ramuan keluarga<br/>
            jadi <em>jamu modern</em><br/>
            wanita Indonesia.
          </h2>

          <p className="s3-lead">
            Yojea merupakan produk yang diciptakan dari sebuah tradisi kesehatan yang
            diwariskan sejak tahun 1970-an. Kandungan pada Yojea diformulasikan khusus
            dari berbagai sumber alam terbaik Indonesia, menghadirkan perawatan kesehatan
            yang optimal bagi wanita dewasa di setiap tahap kehidupan.
          </p>
          <p className="s3-lead">
            Berawal dari ramuan herbal turun-temurun yang hanya dibuat untuk menjaga
            kesehatan keluarga, hingga terciptanya keinginan dan semangat untuk membantu
            lebih banyak wanita menjadi lebih sehat. Dengan manfaat utama untuk menjaga
            kesehatan wanita dari dalam, Yojea hadir agar setiap wanita dapat merasakan
            perlindungan optimal dari berbagai penyakit dan masalah kesehatan yang sering
            dialami oleh wanita.
          </p>

          <div className="s3-bottom-strip">
            <div className="s3-stat">
              <div className="s3-stat-num">4.9</div>
              <div className="s3-stat-label">Rating rata-rata</div>
            </div>
            <div className="s3-stat-divider" />
            <div className="s3-stat">
              <div className="s3-stat-num">6</div>
              <div className="s3-stat-label">Bahan premium</div>
            </div>
            <div className="s3-stat-divider" />
            <div className="s3-stat">
              <div className="s3-stat-num">54+</div>
              <div className="s3-stat-label">Tahun warisan resep</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Section3 });