const youtubeTopics = [
  { label: "Dieta para emagrecer com qualidade" },
  { label: "Treino para definição feminina" },
  { label: "Shape sem extremos" },
  { label: "Erros que travam sua evolução" },
  { label: "Suplementação estratégica" },
  { label: "Constância vs. perfeição" },
];

const YtCard = ({ label, index }) => {
  const gradients = [
    "linear-gradient(135deg, #1a0b04 0%, #3d1a0a 100%)",
    "linear-gradient(135deg, #0d1a0e 0%, #1e3a20 100%)",
    "linear-gradient(135deg, #0d0200 0%, #2a0a10 100%)",
    "linear-gradient(135deg, #1a1206 0%, #3a2810 100%)",
    "linear-gradient(135deg, #060d1a 0%, #0e2040 100%)",
    "linear-gradient(135deg, #1a0b04 0%, #2a1a30 100%)",
  ];
  return (
    <a
      href="https://www.youtube.com/@diana.vicente/videos"
      target="_blank"
      rel="noopener noreferrer"
      className="yt-card"
      style={{
        flex: "0 0 280px", aspectRatio: "16/9",
        borderRadius: 12, overflow: "hidden",
        scrollSnapAlign: "start",
        background: gradients[index % gradients.length],
        position: "relative",
        display: "flex", alignItems: "center", justifyContent: "center",
        textDecoration: "none",
        border: "1px solid rgba(255,255,255,0.07)"
      }}
    >
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center", gap: 12,
        padding: 20
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: "50%",
          background: "rgba(255,0,0,0.85)",
          display: "grid", placeItems: "center",
          boxShadow: "0 4px 16px rgba(255,0,0,0.4)"
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </div>
        <span style={{
          fontSize: 13, fontWeight: 500, color: "rgba(255,255,255,0.9)",
          textAlign: "center", lineHeight: 1.4
        }}>{label}</span>
      </div>
      <div style={{
        position: "absolute", bottom: 10, right: 12,
        display: "flex", alignItems: "center", gap: 6
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="rgba(255,255,255,0.5)">
          <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814z"/>
        </svg>
        <span style={{ fontSize: 11, color: "rgba(255,255,255,0.5)" }}>@diana.vicente</span>
      </div>
    </a>
  );
};

const YouTubeSection = () => {
  const carouselRef = React.useRef(null);

  const scroll = (dir) => {
    if (!carouselRef.current) return;
    carouselRef.current.scrollBy({ left: dir * 300, behavior: "smooth" });
  };

  return (
    <section className="youtube-wrap" style={{ background: "#000", padding: "80px 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 40px", marginBottom: 32 }}>
        <p style={{ fontSize: 13, color: "rgba(255,255,255,0.5)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 10 }}>Acompanhe no YouTube</p>
        <h2 style={{ fontFamily: "'Outfit', sans-serif", fontSize: "clamp(24px, 3vw, 38px)", fontWeight: 400, color: "white", letterSpacing: "-0.01em" }}>
          @diana.vicente
        </h2>
      </div>

      <div style={{ position: "relative" }}>
        <button
          className="yt-arrow yt-arrow-left"
          onClick={() => scroll(-1)}
          style={{
            position: "absolute", left: 16, top: "50%", transform: "translateY(-50%)",
            zIndex: 5, width: 40, height: 40, borderRadius: "50%",
            background: "rgba(255,255,255,0.12)", border: "1px solid rgba(255,255,255,0.15)",
            color: "white", display: "grid", placeItems: "center",
            boxShadow: "0 4px 12px rgba(0,0,0,0.4)"
          }}
        >
          <IconChevronLeft size={20} />
        </button>
        <button
          className="yt-arrow yt-arrow-right"
          onClick={() => scroll(1)}
          style={{
            position: "absolute", right: 16, top: "50%", transform: "translateY(-50%)",
            zIndex: 5, width: 40, height: 40, borderRadius: "50%",
            background: "rgba(255,255,255,0.12)", border: "1px solid rgba(255,255,255,0.15)",
            color: "white", display: "grid", placeItems: "center",
            boxShadow: "0 4px 12px rgba(0,0,0,0.4)"
          }}
        >
          <IconChevronRight size={20} />
        </button>

        <div
          ref={carouselRef}
          className="yt-carousel"
          style={{
            display: "flex", gap: 12, overflowX: "auto",
            scrollSnapType: "x mandatory", scrollbarWidth: "none",
            padding: "0 40px 4px"
          }}
        >
          {youtubeTopics.map((v, i) => (
            <YtCard key={i} label={v.label} index={i} />
          ))}
        </div>
      </div>

      <div style={{ textAlign: "center", marginTop: 36, padding: "0 40px" }}>
        <a
          href="https://www.youtube.com/@diana.vicente"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "14px 28px", borderRadius: 999,
            background: "#FF0000", color: "white",
            fontSize: 15, fontWeight: 500, textDecoration: "none"
          }}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
            <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
          </svg>
          Inscrever no canal
        </a>
      </div>

      <style>{`
        .yt-carousel::-webkit-scrollbar { display: none; }
        .yt-card { transition: transform 0.2s, opacity 0.2s; }
        .yt-card:hover { transform: scale(1.02); opacity: 0.9; }
        @media (max-width: 560px) {
          .youtube-wrap { padding: 64px 0 !important; }
          .yt-carousel { padding: 0 16px 4px !important; }
          .yt-carousel .yt-card { flex: 0 0 240px !important; }
          /* setas visíveis no mobile (scroll horizontal) */
          .yt-arrow { display: grid !important; width: 32px !important; height: 32px !important; }
          .yt-arrow-left { left: 6px !important; }
          .yt-arrow-right { right: 6px !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { YouTubeSection });