// YouTube — Рома Райт крупно (с inline-видео) + два мелких.
function YouTube() {
  const [playing, setPlaying] = React.useState(false);
  const videoId = "fHcTNQIihzU";
  const thumbUrl = `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`;

  return (
    <section id="youtube" className="section" data-screen-label="youtube">
      <div className="container">
        <div className="section__head">
          <h2 className="section__title">YouTube</h2>
          <div className="section__num">03 / Три канала</div>
        </div>

        <div className="youtube__grid">
          {/* Big card — Рома Райт (main flagship) */}
          <article className="yt-big">
            <div className="yt-big__preview"
                 onClick={()=>!playing && setPlaying(true)}
                 role={!playing ? "button" : undefined}
                 tabIndex={!playing ? 0 : undefined}
                 onKeyDown={(e)=>{ if(!playing && (e.key==="Enter" || e.key===" ")){ e.preventDefault(); setPlaying(true); } }}
                 aria-label={!playing ? "Воспроизвести видео" : undefined}
                 style={!playing ? { backgroundImage:`url('${thumbUrl}')` } : null}>
              {playing ? (
                <iframe
                  className="yt-big__iframe"
                  src={`https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`}
                  title="Claude построил мой бизнес с НУЛЯ до МИЛЛИОНА рублей"
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowFullScreen
                />
              ) : (
                <React.Fragment>
                  <div className="yt-big__play" aria-hidden="true">
                    <Icon name="play" size={32}/>
                  </div>
                  <div className="yt-big__caption">
                    Claude построил мой бизнес с&nbsp;нуля до&nbsp;миллиона&nbsp;₽
                  </div>
                </React.Fragment>
              )}
            </div>
            <div className="yt-big__body">
              <h3 className="yt-big__name">Рома Райт</h3>
              <p className="yt-big__tag">
                Основной канал. Бизнес, мышление, AI-продукты, кейсы.
                Автор «Нейропросвещения» и «Про маркетплейсы».
              </p>
              <div className="yt-big__stats">
                ≈ 70&nbsp;000 подписчиков
              </div>
              <a className="yt-big__cta"
                 href="https://youtube.com/@romarayt"
                 target="_blank" rel="noopener noreferrer">
                Подписаться <Icon name="arrow" size={16}/>
              </a>
            </div>
          </article>

          {/* Two small cards */}
          <div className="yt-side">
            <a className="yt-small"
               href="https://youtube.com/@neuropros"
               target="_blank" rel="noopener noreferrer">
              <h4 className="yt-small__name">Нейропросвещение</h4>
              <p className="yt-small__tag">AI как операционная система бизнеса. Claude, MCP, Skills.</p>
              <div className="yt-small__stats">≈ 13&nbsp;000 подписчиков</div>
              <span className="yt-small__cta">Подписаться <Icon name="arrow" size={14}/></span>
            </a>

            <a className="yt-small"
               href="https://youtube.com/@raytcreate"
               target="_blank" rel="noopener noreferrer">
              <h4 className="yt-small__name">Про маркетплейсы</h4>
              <p className="yt-small__tag">Селлерам Ozon.</p>
              <div className="yt-small__stats">≈ 4&nbsp;000 подписчиков</div>
              <span className="yt-small__cta">Подписаться <Icon name="arrow" size={14}/></span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.YouTube = YouTube;