const videoTestimonialsStyles = {
  wrap: { padding: "100px 40px", background: "var(--warm-900)" },
  inner: { maxWidth: 1280, margin: "0 auto" },
  header: { textAlign: "center", marginBottom: 48 },
  label: { fontSize: 13, color: "var(--sage-700)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 16, fontWeight: 500 },
  title: { fontFamily: "'Outfit', sans-serif", fontSize: "clamp(28px, 3.5vw, 44px)", lineHeight: 1.1, letterSpacing: "-0.02em", fontWeight: 400, textWrap: "balance", color: "white" },
  sub: { fontSize: 16, color: "rgba(255,255,255,0.7)", marginTop: 12, lineHeight: 1.5 },
  carousel: { display: "flex", gap: 16, overflowX: "auto", scrollSnapType: "x mandatory", paddingBottom: 16, scrollbarWidth: "none" },
  card: {
    flexShrink: 0, width: 280,
    borderRadius: 16, overflow: "hidden",
    background: "var(--warm-700)",
    boxShadow: "0 8px 24px -8px rgba(0,0,0,0.3)",
    cursor: "pointer",
    scrollSnapAlign: "start",
    transition: "transform 0.25s, box-shadow 0.25s"
  },
  thumb: {
    aspectRatio: "9/16", width: "100%",
    background: "var(--warm-700)",
    display: "flex", alignItems: "center", justifyContent: "center",
    position: "relative"
  },
  thumbPlay: {
    width: 56, height: 56, borderRadius: "50%",
    background: "rgba(255,255,255,0.35)",
    backdropFilter: "blur(8px)",
    display: "grid", placeItems: "center",
    position: "absolute", zIndex: 2
  },
  thumbName: {
    position: "absolute", bottom: 12, left: 0, right: 0,
    textAlign: "center",
    fontSize: 12, fontWeight: 500, color: "white",
    padding: "0 12px",
    textShadow: "0 1px 4px rgba(0,0,0,0.5)"
  },
  cardInfo: { padding: "14px 16px" },
  cardName: { fontFamily: "'Outfit', sans-serif", fontSize: 16, fontWeight: 500, color: "white", marginBottom: 4 },
  cardRole: { fontSize: 12, color: "rgba(255,255,255,0.6)" },

  // Modal
  modal: {
    position: "fixed", inset: 0, zIndex: 100,
    background: "rgba(0,0,0,0.95)",
    display: "flex", alignItems: "center", justifyContent: "center",
    flexDirection: "column", gap: 20
  },
  modalVideo: {
    width: "min(400px, 90vw)", aspectRatio: "9/16",
    borderRadius: 16, overflow: "hidden",
    background: "black"
  },
  modalClose: {
    position: "absolute", top: 20, right: 20,
    width: 44, height: 44, borderRadius: "50%",
    background: "rgba(255,255,255,0.1)", color: "white",
    display: "grid", placeItems: "center", cursor: "pointer"
  },
  modalNav: {
    width: 44, height: 44, borderRadius: "50%",
    background: "rgba(255,255,255,0.1)", color: "white",
    display: "grid", placeItems: "center", cursor: "pointer",
    flexShrink: 0
  },
  modalCounter: { fontSize: 13, color: "rgba(255,255,255,0.5)" }
};

const videos = [
  { src: "", name: "Gracielle", role: "Shape definido em 4 meses" },
  { src: "", name: "Bianca", role: "Menos gordura, mais confiança" },
  { src: "", name: "Barbara", role: "Rotina equilibrada, shape alcançado" }
];

const VideoTestimonials = ({ onWhatsApp }) => {
  const publishedVideos = videos.filter(v => v.src);
  const [modalOpen, setModalOpen] = React.useState(false);
  const [currentIndex, setCurrentIndex] = React.useState(0);

  const openModal = (index) => {
    setCurrentIndex(index);
    setModalOpen(true);
  };

  const closeModal = () => setModalOpen(false);

  const prevVideo = () => setCurrentIndex((prev) => (prev === 0 ? publishedVideos.length - 1 : prev - 1));
  const nextVideo = () => setCurrentIndex((prev) => (prev === publishedVideos.length - 1 ? 0 : prev + 1));

  React.useEffect(() => {
    const handleKeyDown = (e) => {
      if (!modalOpen) return;
      if (e.key === "Escape") closeModal();
      if (e.key === "ArrowLeft") prevVideo();
      if (e.key === "ArrowRight") nextVideo();
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [modalOpen]);

  if (!publishedVideos.length) return null;

  return (
    <section id="depoimentos-video" className="vt-wrap" style={videoTestimonialsStyles.wrap}>
      <div style={videoTestimonialsStyles.inner}>
        <div style={videoTestimonialsStyles.header}>
          <div style={videoTestimonialsStyles.label}>Depoimentos em vídeo</div>
          <h2 style={videoTestimonialsStyles.title}>Veja quem já transformou o shape.</h2>
          <p style={videoTestimonialsStyles.sub}>Histórias reais de quem começou do zero e construiu resultado.</p>
        </div>

        <div className="vt-carousel" style={videoTestimonialsStyles.carousel}>
          {publishedVideos.map((v, i) => (
            <div
              key={i}
              className="vt-card"
              style={videoTestimonialsStyles.card}
              onClick={() => openModal(i)}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 16px 32px -12px rgba(0,0,0,0.5)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 8px 24px -8px rgba(0,0,0,0.3)"; }}
            >
              <div style={videoTestimonialsStyles.thumb}>
                <div style={videoTestimonialsStyles.thumbPlay}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="white">
                    <path d="M8 5v14l11-7z"/>
                  </svg>
                </div>
                <div style={videoTestimonialsStyles.thumbName}>{v.name}</div>
              </div>
              <div style={videoTestimonialsStyles.cardInfo}>
                <div style={videoTestimonialsStyles.cardName}>{v.name}</div>
                <div style={videoTestimonialsStyles.cardRole}>{v.role}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ textAlign: "center", marginTop: 40 }}>
          <button
            onClick={onWhatsApp}
            style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              padding: "14px 28px", borderRadius: 999,
              background: "#e8324a", color: "white",
              fontSize: 15, fontWeight: 500
            }}
          >
            Quero começar agora
          </button>
        </div>
      </div>

      {modalOpen && (
        <div style={videoTestimonialsStyles.modal} onClick={closeModal}>
          <video
            src={publishedVideos[currentIndex].src}
            controls
            autoPlay
            style={videoTestimonialsStyles.modalVideo}
            onClick={e => e.stopPropagation()}
          />
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <button style={videoTestimonialsStyles.modalNav} onClick={(e) => { e.stopPropagation(); prevVideo(); }}>
              <IconChevronLeft size={20} />
            </button>
            <span style={videoTestimonialsStyles.modalCounter}>{currentIndex + 1} / {publishedVideos.length}</span>
            <button style={videoTestimonialsStyles.modalNav} onClick={(e) => { e.stopPropagation(); nextVideo(); }}>
              <IconChevronRight size={20} />
            </button>
          </div>
          <button style={videoTestimonialsStyles.modalClose} onClick={closeModal}>
            <IconClose size={20} />
          </button>
        </div>
      )}

      <style>{`
        .vt-carousel::-webkit-scrollbar { display: none; }
        @media (max-width: 560px) {
          .vt-wrap { padding: 60px 20px !important; }
          .vt-card { width: 200px !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { VideoTestimonials });