/* Photo page — "Art-direction / Photo".
 * Photography work where Kate developed the concept, led the project and
 * shot the frames. Overview shows a preview grid per series (each frame is a
 * fillable image/video slot); the full gallery lives on the series page.
 */

const { MediaSlot: MSlot } = window;
const edp = window.ed;
const SectionHeroP = window.SectionHero;
const ProjectPlateP = window.ProjectPlate;
const StackCarouselP = window.StackCarousel;

function Photo({ lang, onBack, onOpenSeries }) {
  const { COPY, PHOTO } = window.PORTFOLIO;
  const U = COPY.ui;

  const items = PHOTO.map((s) => ({
    id: s.id,
    idx: s.idx,
    tone: s.tone,
    mediaId: `ph-${s.id}-g0`,
    title: U.photoRole[lang],
    titleEditId: `photo-role`,
    year: s.year,
    client: s.client[lang],
    kind: s.kind[lang],
    kindEditId: `ph-${s.id}-kind2`,
  }));

  return (
    <div className="photo 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">{PHOTO.length} {U.projectsWord[lang]}</span>
        </div>
      </header>

      {/* Стек-карусель: прокрутка серий по картотеке. */}
      <StackCarouselP
        items={items}
        lang={lang}
        onOpen={(i) => onOpenSeries(i)}
        ctaLabel={U.viewSeries[lang]}
        railLabel={lang === 'ru' ? 'Арт-дирекшн' : 'Art-direction'}
        itemKind="ph"
      />
    </div>
  );
}

window.Photo = Photo;

/* PhotoSeries — single-series page. Mirrors the graphic-design Project page
 * one-for-one: sticky header, meta-only title block, editorial figure stack
 * (ProjectStage) with an Overview + Deliverables interlude, next teaser,
 * footer. The only differences are section copy and the slot prefix. */
function PhotoSeries({ lang, index, onBack, onOpen }) {
  const { COPY, PHOTO } = window.PORTFOLIO;
  const U = COPY.ui;
  const s = PHOTO[index];
  const next = PHOTO[(index + 1) % PHOTO.length];
  const ProjectStageC = window.ProjectStage;

  // Photo "deliverables" — the role broken down into concrete steps, so the
  // sidebar matches the Graphic Design page rhythm (overview + list of 4).
  const photoDeliverables = lang === 'ru'
    ? ['Концепция', 'Арт-дирекшн', 'Съёмка']
    : ['Concept', 'Art direction', 'Photography'];
  // This series (ph7) gets two extra role steps — editable per-project.
  if (s.id === 'ph7') {
    photoDeliverables.push(
      ...(lang === 'ru' ? ['Стайлинг', 'Постпродакшн'] : ['Styling', 'Post-production'])
    );
  }

  return (
    <div className="photo proj proj--edit">
      {/* Sticky header — identical to Project */}
      <header className="proj-bar">
        <button className="proj-bar-back" onClick={onBack}>
          <span className="proj-bar-arrow">←</span> {U.backToPhoto[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">
          <button onClick={() => onOpen((index - 1 + PHOTO.length) % PHOTO.length)} aria-label={U.prev[lang]}>←</button>
          <span className="proj-bar-count">{s.idx} / {String(PHOTO.length).padStart(2, '0')}</span>
          <button onClick={() => onOpen((index + 1) % PHOTO.length)} aria-label={U.next[lang]}>→</button>
        </div>
      </header>

      {/* Title block — meta only, no eyebrow / no big title (same as Project) */}
      <section className="proj-head">
        <div className="proj-meta">
          <div className="proj-meta-cell">
            <div className="pf-mono-sm pf-em">{U.client[lang]}</div>
            <div className="proj-meta-v" {...edp(`ph-${s.id}-client`)}>{s.client[lang]}</div>
          </div>
          <div className="proj-meta-cell">
            <div className="pf-mono-sm pf-em">{U.year[lang]}</div>
            <div className="proj-meta-v pf-num" {...edp(`ph-${s.id}-year`)}>{s.year}</div>
          </div>
          <div className="proj-meta-cell">
            <div className="pf-mono-sm pf-em">{U.type[lang]}</div>
            <div className="proj-meta-v" {...edp(`ph-${s.id}-kind2`)}>{s.kind[lang]}</div>
          </div>
          <div className="proj-meta-cell">
            <div className="pf-mono-sm pf-em">{U.roleLbl[lang]}</div>
            <div className="proj-meta-v" {...edp('photo-role')}>{U.photoRole[lang]}</div>
          </div>
        </div>
      </section>

      {/* Editorial figure stack with Overview + Deliverables interlude */}
      <section className="proj-ed-stage">
        <ProjectStageC
          projectId={s.id}
          projectIdx={s.idx}
          lang={lang}
          tone={s.tone}
          slotPrefix={`ph-${s.id}`}
          interludeAfter={0}
          interlude={
            <div className="proj-ed-tail">
              <div className="proj-ed-tail-l">
                <div className="pf-mono-sm pf-em proj-ed-tail-h">{U.overview[lang]}</div>
                <p className="proj-ed-para" {...edp(`ph-${s.id}-note`)}>{s.note[lang]}</p>
              </div>
              <div className="proj-ed-tail-r">
                <div className="pf-mono-sm pf-em proj-ed-tail-h">{U.deliver[lang]}</div>
                <ul className="proj-deliver">
                  {photoDeliverables.map((d, i) => (
                    <li key={i}>
                      <span className="pf-mono proj-deliver-n">{String(i + 1).padStart(2, '0')}</span>{' '}
                      <span {...edp(`ph-${s.id}-del${i}`)}>{d}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          }
        />
      </section>

      {/* Next series teaser — same shape as Project's */}
      <div className="proj-next" role="button" tabIndex={0}
        onClick={() => onOpen((index + 1) % PHOTO.length)}
        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen((index + 1) % PHOTO.length); } }}>
        <div className="proj-next-top pf-mono">
          <span>{U.next[lang]} →</span>
          <span className="proj-next-rule" aria-hidden="true"></span>
          <span className="pf-em">{next.idx} / {String(PHOTO.length).padStart(2, '0')}</span>
        </div>
        <div className="proj-next-row">
          <h2 className="proj-next-title" {...edp(`ph-${next.id}-client`)}>{next.client[lang]}</h2>
          <div className="proj-next-imgwrap">
            <MSlot id={`ph-${next.id}-g0`} lang={lang} ratio="3/2" tone={next.tone}
              className="proj-next-img" label={`PH/${next.idx}`} />
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="proj-foot">
        <button className="proj-foot-all" onClick={onBack}>← {U.backToPhoto[lang]}</button>
        <div className="proj-foot-r">
          <a className="proj-foot-h" href="mailto:kate@eizler.studio"><span {...edp('contact-email')}>kate@eizler.studio</span></a>
          <div className="pf-mono pf-em" {...edp('contact-based')}>{COPY.based[lang]}</div>
        </div>
      </footer>
    </div>
  );
}

window.PhotoSeries = PhotoSeries;