// ── VIDEO TESTIMONIALS — premium 9:16 shorts/reels carousel ──────────
// Horizontal scroll-snap rail of vertical video cards. Shows ~3–4 per
// view on desktop, 1 per view on mobile. Each card is a placeholder
// ready to receive a real short/reel link later — drop the embed/href
// into the `url` field of a VIDEOS entry and the play button activates.

// Real YouTube Shorts — drop the 11-char video id; the player embeds
// directly so a single click on YouTube's native play button works.
const VIDEOS = [
  { id: "tVx5CAJUGsY" },
  { id: "_lizKOWS298" },
  { id: "lwUb1Vug8js" },
  { id: "GwRKIVZaXDs" },
  { id: "2r4m89e1EU4" },
  { id: "p7ZQWwa7NRk" },
  { id: "PQrQJkadIdY" },
];

function VideoCard({ v }) {
  const [h, setH] = React.useState(false);
  const origin = (typeof window !== "undefined") ? window.location.origin : "";
  // Native YouTube player embedded directly: the red play button is part
  // of the player, so a SINGLE click on it starts playback — no facade,
  // no autoplay-gesture issues, no double click.
  const embedSrc =
    `https://www.youtube-nocookie.com/embed/${v.id}` +
    `?playsinline=1&rel=0&modestbranding=1&fs=1` +
    (origin ? `&origin=${encodeURIComponent(origin)}` : "");

  return (
    <div
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      className="pf-video-card"
      style={{
        scrollSnapAlign: "center", flexShrink: 0,
        position: "relative", width: "clamp(230px, 26vw, 268px)", aspectRatio: "9 / 16",
        borderRadius: "20px", overflow: "hidden",
        background: "#000",
        border: `1px solid ${h ? "var(--go-4)" : "rgba(176,124,37,0.28)"}`,
        boxShadow: h ? "0 36px 70px -28px rgba(0,0,0,0.95), 0 0 0 1px rgba(var(--go-rgb),0.18)" : "inset 0 1px 0 rgba(var(--go-rgb),0.06), 0 26px 56px -32px rgba(0,0,0,0.9)",
        transform: h ? "translateY(-6px)" : "none",
        transition: "transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out)",
      }}
    >
      <iframe
        title="Depoimento em vídeo"
        src={embedSrc}
        loading="lazy"
        allow="autoplay; encrypted-media; picture-in-picture; fullscreen; web-share"
        allowFullScreen
        referrerPolicy="strict-origin-when-cross-origin"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: "none", display: "block" }}
      />

      {/* gold top hairline — decorative, does not intercept clicks */}
      <span aria-hidden="true" style={{ position: "absolute", top: 0, left: 0, right: 0, height: "1px", background: "linear-gradient(90deg, transparent, var(--go-4), transparent)", opacity: 0.6, pointerEvents: "none", zIndex: 2 }} />
    </div>
  );
}

function VideoTestimonials({ onCta }) {
  const railRef = React.useRef(null);
  const scrollBy = (dir) => {
    const rail = railRef.current;
    if (!rail) return;
    const card = rail.querySelector(".pf-video-card");
    const step = card ? card.getBoundingClientRect().width + 20 : 280;
    rail.scrollBy({ left: dir * step, behavior: "smooth" });
  };
  const Arrow = ({ dir }) => (
    <button
      onClick={() => scrollBy(dir)}
      aria-label={dir < 0 ? "Anterior" : "Próximo"}
      className="pf-video-arrow"
      style={{ width: "48px", height: "48px", borderRadius: "50%", flexShrink: 0, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", background: "linear-gradient(165deg, #151210 0%, #0A0907 100%)", border: "1px solid rgba(176,124,37,0.35)", color: "var(--go-4)", transition: "all .25s var(--ease-out)" }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--go-4)"; e.currentTarget.style.background = "rgba(var(--go-rgb),0.10)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(176,124,37,0.35)"; e.currentTarget.style.background = "linear-gradient(165deg, #151210 0%, #0A0907 100%)"; }}
    >
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ transform: dir < 0 ? "none" : "rotate(180deg)" }}>
        <polyline points="15 18 9 12 15 6" />
      </svg>
    </button>
  );
  return (
    <Section style={{ background: "radial-gradient(ellipse at 50% 0%, rgba(var(--go-rgb),0.06), transparent 55%), var(--abyss)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "24px", flexWrap: "wrap" }}>
        <SectionHead n="05" tag="Depoimentos em vídeo" title='Veja o que alunos e participantes<br><span style="color:var(--go-4); font-style: italic;">dizem na prática.</span>' sub="Depoimentos em vídeo, feedbacks reais e relatos de quem já teve contato com a orientação de Soong." />
        {/* Desktop arrows live up here, aligned with the header */}
        <Reveal>
          <div className="pf-video-arrows-top" style={{ display: "flex", gap: "12px", paddingBottom: "6px" }}>
            <Arrow dir={-1} />
            <Arrow dir={1} />
          </div>
        </Reveal>
      </div>

      <Reveal delay={0.1}>
        <div
          ref={railRef}
          className="pf-video-rail"
          style={{ display: "flex", gap: "20px", marginTop: "44px", overflowX: "auto", scrollSnapType: "x mandatory", padding: "10px 2px 24px", scrollbarWidth: "none" }}
        >
          {VIDEOS.map((v, i) => <VideoCard key={i} v={v} />)}
        </div>
      </Reveal>

      <Reveal delay={0.16}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "14px", marginTop: "28px", textAlign: "center" }}>
          <Button variant="primary" size="md" onClick={onCta} shimmer>Quero viver essa experiência presencial →</Button>
          <div style={{ fontFamily: "var(--f-body)", fontWeight: 500, fontSize: ".62rem", letterSpacing: ".18em", textTransform: "uppercase", color: "var(--bronze)" }}>
            Arraste para o lado para ver mais relatos
          </div>
        </div>
      </Reveal>

      <style>{`
        .pf-video-rail::-webkit-scrollbar { display: none; }
        @media (max-width: 760px) {
          .pf-video-arrows-top { display: none !important; }
          .pf-video-rail { scroll-snap-type: x mandatory; padding-left: 4px !important; padding-right: 4px !important; }
        }
      `}</style>
    </Section>
  );
}

window.VideoTestimonials = VideoTestimonials;
window.VideoCard = VideoCard;