// 11 — Multimedia / Videos (YouTube)
function CVideos() {
  const [, t] = window.useLang();
  const [active, setActive] = React.useState(0);
  const items = t.videos.items;
  const cur = items[active];

  return (
    <section className="cgclm-videos" id="multimedia">
      <style>{`
        .cgclm-videos {
          padding: 80px 40px;
          background: var(--c-green-dark);
          color: var(--c-cream);
        }
        .cgclm-videos .cv-head {
          display: flex; align-items: end; justify-content: space-between;
          gap: 24px; margin-bottom: 36px; flex-wrap: wrap;
        }
        .cgclm-videos .cv-kicker {
          font: 500 11px var(--font-body);
          letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--c-saffron);
        }
        .cgclm-videos .cv-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(28px, 3.6vw, 44px);
          line-height: 1.05;
          letter-spacing: -0.02em;
          margin: 8px 0 0;
          color: var(--c-cream);
          max-width: 22ch;
          text-wrap: balance;
        }
        .cgclm-videos .cv-lede {
          font: 400 15px/1.55 var(--font-body);
          color: rgba(242,239,228,0.7);
          max-width: 50ch;
          text-wrap: pretty;
        }

        .cgclm-videos .cv-grid {
          display: grid;
          grid-template-columns: 1.7fr 1fr;
          gap: 28px;
          align-items: start;
        }
        .cgclm-videos .cv-player {
          position: relative;
          aspect-ratio: 16 / 9;
          border-radius: 14px;
          overflow: hidden;
          background: #000;
          box-shadow: 0 20px 50px rgba(0,0,0,0.35);
        }
        .cgclm-videos .cv-player iframe {
          width: 100%; height: 100%;
          border: 0; display: block;
        }
        .cgclm-videos .cv-meta {
          margin-top: 20px;
          padding-top: 20px;
          border-top: 1px solid rgba(242,239,228,0.15);
        }
        .cgclm-videos .cv-cat {
          display: inline-block;
          font: 600 10px var(--font-body);
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--c-saffron);
          margin-bottom: 8px;
        }
        .cgclm-videos .cv-curtitle {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 22px;
          line-height: 1.25;
          letter-spacing: -0.01em;
          margin: 0;
          color: var(--c-cream);
          text-wrap: balance;
        }
        .cgclm-videos .cv-curyear {
          margin-top: 8px;
          font: 500 13px var(--font-body);
          color: rgba(242,239,228,0.6);
        }

        .cgclm-videos .cv-list {
          display: flex; flex-direction: column;
          gap: 8px;
          max-height: 440px;
          overflow-y: auto;
          padding-right: 4px;
        }
        .cgclm-videos .cv-list::-webkit-scrollbar { width: 6px; }
        .cgclm-videos .cv-list::-webkit-scrollbar-thumb {
          background: rgba(242,239,228,0.2); border-radius: 3px;
        }
        .cgclm-videos .cv-item {
          display: grid;
          grid-template-columns: 96px 1fr;
          gap: 14px;
          padding: 10px;
          border-radius: 10px;
          cursor: pointer;
          background: transparent;
          border: 1px solid transparent;
          transition: all .25s;
          text-align: left;
          color: var(--c-cream);
          font: inherit;
        }
        .cgclm-videos .cv-item:hover {
          background: rgba(242,239,228,0.06);
          border-color: rgba(242,239,228,0.12);
        }
        .cgclm-videos .cv-item[data-active="true"] {
          background: rgba(213,109,51,0.18);
          border-color: var(--c-saffron);
        }
        .cgclm-videos .cv-thumb {
          position: relative;
          aspect-ratio: 16 / 9;
          border-radius: 6px;
          overflow: hidden;
          background: #000;
        }
        .cgclm-videos .cv-thumb img {
          width: 100%; height: 100%; object-fit: cover; display: block;
        }
        .cgclm-videos .cv-thumb::after {
          content: "▶";
          position: absolute;
          inset: 0;
          display: flex; align-items: center; justify-content: center;
          font-size: 20px;
          color: var(--c-cream);
          background: rgba(0,0,0,0.25);
          opacity: 0;
          transition: opacity .2s;
        }
        .cgclm-videos .cv-item:hover .cv-thumb::after { opacity: 1; }
        .cgclm-videos .cv-item[data-active="true"] .cv-thumb::after {
          opacity: 1;
          color: var(--c-saffron);
          background: rgba(0,0,0,0.4);
        }
        .cgclm-videos .cv-it-meta {
          display: flex; flex-direction: column; justify-content: center;
          min-width: 0;
        }
        .cgclm-videos .cv-it-cat {
          font: 600 10px var(--font-body);
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--c-saffron);
          margin-bottom: 4px;
        }
        .cgclm-videos .cv-it-title {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: 14px;
          line-height: 1.25;
          letter-spacing: -0.005em;
          color: var(--c-cream);
          text-wrap: pretty;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .cgclm-videos .cv-it-year {
          margin-top: 4px;
          font: 500 11px var(--font-body);
          color: rgba(242,239,228,0.55);
        }

        @media (max-width: 980px) {
          .cgclm-videos { padding: 56px 22px; }
          .cgclm-videos .cv-grid { grid-template-columns: 1fr; }
          .cgclm-videos .cv-list { max-height: none; }
        }
      `}</style>

      <div className="cv-head">
        <div>
          <div className="cv-kicker">{t.videos.kicker}</div>
          <h2 className="cv-title">{t.videos.title}</h2>
        </div>
        <p className="cv-lede">{t.videos.lede}</p>
      </div>

      <div className="cv-grid">
        <div>
          <div className="cv-player">
            <iframe
              key={cur.id}
              src={`https://www.youtube.com/embed/${cur.id}?rel=0${cur.start ? `&start=${cur.start}` : ''}`}
              title={cur.title}
              loading="lazy"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
              referrerPolicy="strict-origin-when-cross-origin"
            ></iframe>
          </div>
          <div className="cv-meta">
            <div className="cv-cat">{cur.cat}{cur.year ? ` · ${cur.year}` : ''}</div>
            <h3 className="cv-curtitle">{cur.title}</h3>
            {cur.place && <div className="cv-curyear">{cur.place}</div>}
          </div>
        </div>

        <div className="cv-list" role="tablist" aria-label={t.videos.title}>
          {items.map((it, i) => (
            <button
              key={it.id}
              className="cv-item"
              data-active={i === active}
              role="tab"
              aria-selected={i === active}
              onClick={() => setActive(i)}
            >
              <div className="cv-thumb">
                <img
                  src={`https://img.youtube.com/vi/${it.id}/hqdefault.jpg`}
                  alt=""
                  loading="lazy"
                />
              </div>
              <div className="cv-it-meta">
                <div className="cv-it-cat">{it.cat}</div>
                <div className="cv-it-title">{it.title}</div>
                {it.year && <div className="cv-it-year">{it.year}</div>}
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

window.CVideos = CVideos;