/* Works page — "Graphic design" section.
 * 18 graphic projects shown as a vertical card-stack carousel ("картотека"):
 * one project is foregrounded in the center, neighbours peek above and below.
 * Scroll wheel / ↑↓ / click on a peeking card to navigate; click on the
 * active card to open its case study.
 */

const { MediaSlot: MSlotW } = window;
const edw = window.ed;
const StackCarouselW = window.StackCarousel;

function Works({ lang, onBack, onOpen }) {
  const { COPY, PROJECTS } = window.PORTFOLIO;
  const U = COPY.ui;

  const items = PROJECTS.map((p) => ({
    id: p.id,
    idx: p.idx,
    tone: p.tone,
    mediaId: `proj-${p.id}-lead`,
    // Превью показывает ту же тройку, что и внутри проекта: КЛИЕНТ · формат · год.
    // Поэтому верхняя-левая подпись привязана к тому же полю `-client`, что и
    // мета-строка на странице проекта — правка клиента синхронизируется в обе
    // стороны. (Формат `-type2` и год `-year` уже общие с проектом.)
    title: p.client[lang],
    titleEditId: `proj-${p.id}-client`,
    year: p.year,
    client: p.client[lang],
    kind: p.typeLabel[lang],
    kindEditId: `proj-${p.id}-type2`,
  }));

  return (
    <div className="works section-with-stack">
      {/* Sticky header */}
      <header className="proj-bar">
        <button className="proj-bar-back" onClick={onBack}>
          <span className="proj-bar-arrow">←</span> {U.main[lang]}
        </button>
        <button className="proj-bar-mark" onClick={onBack}>
          <image-slot id="brand-logo" class="proj-bar-logo-slot" shape="rect" fit="contain" position="50% 50%"
            src="assets/eizler-logo.png" placeholder={lang === 'ru' ? 'Логотип' : 'Logo'}></image-slot>
        </button>
        <div className="proj-bar-nav pf-mono">
          <span className="proj-bar-count">{PROJECTS.length} {U.projectsWord[lang]}</span>
        </div>
      </header>

      {/* Стек-карусель: прокрутка проектов как по картотеке. */}
      <StackCarouselW
        items={items}
        lang={lang}
        onOpen={(i) => onOpen(i)}
        ctaLabel={U.openCase[lang]}
        railLabel={lang === 'ru' ? 'Графический дизайн' : 'Graphic design'}
        itemKind="proj"
      />
    </div>
  );
}

window.Works = Works;