// ============================================================
// WHAT NOBODY TELLS BEGINNERS. The YouTube playlist of the same
// name, shown below The Journal with the Deep Dives treatment.
//
// FIXED list, like VIDEO_LESSONS above it. YouTube publishes the
// playlist as RSS at
//   youtube.com/feeds/videos.xml?playlist_id=PLDLZzHBPIIV4
// but that feed sends no Access-Control-Allow-Origin, so a
// browser on this domain cannot read it. Fetching it live would
// mean an API key in the page source or a proxy to depend on, so
// the ids are pinned here instead and refreshed by hand.
//
// To add a video: add an entry (id + titleKey) in playlist order
// and a matching title in i18n.jsx for each language.
// ============================================================

const BEGINNERS_PLAYLIST = 'https://www.youtube.com/playlist?list=PLDLZzHBPIIV4';

const BEGINNER_VIDEOS = [
  { id: 'FZmdiWuXTQI', titleKey: 'beginners.v1.title' },
  { id: '1M3GuJrt6-U', titleKey: 'beginners.v2.title' },
  { id: 'XiX2V23mci4', titleKey: 'beginners.v3.title' },
  { id: '6h2T96Yzu8U', titleKey: 'beginners.v4.title' },
];

const Beginners = () => {
  const { t } = useI18n();
  const scrollerRef = React.useRef(null);
  const [arrows, setArrows] = React.useState({ left: false, right: false });

  // Same manual carousel as Deep Dives: arrows appear only once the
  // videos actually overflow the row.
  React.useEffect(() => {
    const el = scrollerRef.current;
    if (!el) return;
    const update = () => {
      const overflow = el.scrollWidth > el.clientWidth + 1;
      setArrows({
        left: overflow && el.scrollLeft > 4,
        right: overflow && el.scrollLeft + el.clientWidth < el.scrollWidth - 4,
      });
    };
    update();
    el.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    return () => {
      el.removeEventListener('scroll', update);
      window.removeEventListener('resize', update);
    };
  }, []);

  const scrollByOne = (dir) => {
    const el = scrollerRef.current;
    if (!el) return;
    const item = el.querySelector('.blog-item');
    const step = item ? item.getBoundingClientRect().width + 32 : el.clientWidth * 0.4;
    el.scrollBy({ left: dir * step, behavior: 'smooth' });
  };

  if (BEGINNER_VIDEOS.length === 0) return null;

  return (
    <section style={{ padding: '64px 48px 32px', background: 'transparent', position: 'relative' }}>
      <SectionHeader
        eye={t('beginners.eyebrow')}
        title={t('beginners.title')}
        sub={t('beginners.sub')}
        titleSize="clamp(28px,3.2vw,44px)"
      />
      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div
          ref={scrollerRef}
          className="blog-scroller"
          style={{
            display: 'flex', gap: 32,
            overflowX: 'auto',
            scrollSnapType: 'x proximity',
            scrollBehavior: 'smooth',
            paddingTop: 8, marginTop: -8, paddingBottom: 8,
          }}
        >
          {/* VideoLesson comes from VideoLessons.jsx, so the player, the
              click-to-play facade and the caption stay identical to Deep
              Dives by construction rather than by copying. */}
          {BEGINNER_VIDEOS.map((v) => (
            <div key={v.id} className="blog-item">
              <VideoLesson id={v.id} title={t(v.titleKey)} />
            </div>
          ))}
        </div>
        <CarouselArrow dir="left"  show={arrows.left}  onClick={() => scrollByOne(-1)} />
        <CarouselArrow dir="right" show={arrows.right} onClick={() => scrollByOne(1)} />
      </div>
      <div style={{ maxWidth: 1200, margin: '40px auto 0', textAlign: 'left' }}>
        <a
          href={BEGINNERS_PLAYLIST}
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            color: 'var(--gold-400)', textDecoration: 'none',
            fontFamily: 'RH Phonic', fontSize: 13, fontWeight: 500,
            letterSpacing: '.16em', textTransform: 'uppercase',
            transition: 'gap 200ms var(--ease-out)',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.gap = '14px'; }}
          onMouseLeave={(e) => { e.currentTarget.style.gap = '10px'; }}
        >
          {t('beginners.cta')}
          <span aria-hidden="true">→</span>
        </a>
      </div>
    </section>
  );
};

Object.assign(window, { Beginners });