// Videos — thumbnails with platform tag, duration & play overlay, in a carousel
// (3 visible, the next peeking in to invite visitors to click through for more).
const YOUTUBE_CHANNEL_URL = "https://www.youtube.com/@SantosCesarLaw";

const Videos = () => {
  const videos = t("videos.items");
  const { trackRef, setCardRef, atStart, atEnd, edge, updateEdges, scrollByCard, scrollable } =
    window.useCardCarousel(videos.length);

  return (
    <section id="videos" className="scl-section scl-section--white">
      <div className="scl-container">
        <div className="scl-section__head">
          <div>
            <div className="scl-eyebrow"><span className="scl-rule" /> {t("videos.eyebrow")}</div>
            <h2 className="scl-h2">{t("videos.title")}</h2>
          </div>
          <a href={YOUTUBE_CHANNEL_URL} target="_blank" rel="noopener noreferrer" className="scl-btn scl-btn--ghost">
            {t("videos.viewChannel")} <Icon name="arrow-up-right" size={14} />
          </a>
        </div>

        <div className={"scl-carousel-fade" + (atEnd ? " is-end" : "")}>
          <div className="scl-videos" ref={trackRef} onScroll={updateEdges}>
            {videos.map((v, i) => {
              const isPrevEdge = i === edge.first && !atStart;
              const isNextEdge = i === edge.last && !atEnd;
              const isEdge = isPrevEdge || isNextEdge;
              const href = v.youtubeId ? `https://www.youtube.com/watch?v=${v.youtubeId}` : "#";
              const handleClick = (e) => {
                if (!isEdge) return;
                e.preventDefault();
                scrollByCard(isPrevEdge ? -1 : 1);
              };
              return (
                <a
                  key={i}
                  ref={setCardRef(i)}
                  className={"scl-video" + (isEdge ? " scl-carousel-card--edge" : "")}
                  href={href}
                  target={v.youtubeId ? "_blank" : undefined}
                  rel={v.youtubeId ? "noopener noreferrer" : undefined}
                  onClick={handleClick}
                >
                  <div className="scl-video__thumb">
                    {v.youtubeId && (
                      <img
                        className="scl-video__thumb-img"
                        src={`https://img.youtube.com/vi/${v.youtubeId}/hqdefault.jpg`}
                        alt=""
                        loading="lazy"
                      />
                    )}
                    <span className="scl-placeholder-tag">{v.platform.toUpperCase()}</span>
                    <span className="scl-video__play"><Icon name="play" size={16} /></span>
                    <span className="scl-video__duration">{v.duration}</span>
                  </div>
                  <div className="scl-video__meta">
                    <span className="scl-micro">{v.platform} · {t("videos.languageNote")}</span>
                    <h3 className="scl-h6 scl-video__title">{v.title}</h3>
                  </div>
                </a>
              );
            })}
          </div>
        </div>

        {scrollable && (
          <div className="scl-carousel-nav scl-carousel-nav--below">
            <button
              type="button"
              className="scl-carousel-nav-btn"
              onClick={() => scrollByCard(-1)}
              disabled={atStart}
              aria-label={t("videos.prevAria")}
            >
              <Icon name="chevron-left" size={18} />
            </button>
            <button
              type="button"
              className="scl-carousel-nav-btn scl-carousel-nav-btn--next"
              onClick={() => scrollByCard(1)}
              disabled={atEnd}
              aria-label={t("videos.nextAria")}
            >
              <Icon name="chevron-right" size={20} />
            </button>
          </div>
        )}
      </div>
    </section>
  );
};

window.Videos = Videos;