// pages.jsx — Projects index, Moi Dedans, Catzpacho, Otvetno, Videos

// ───────── Back link ─────────

function BackLink({ t, to = "#/", label }) {
  return (
    <a className="back-link" href={to}>
      <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
        <path d="M19 12H5M11 6l-6 6 6 6" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <span>{label || t.nav.back}</span>
    </a>
  );
}

// ───────── Projects Index ─────────

function ProjectsIndex({ t }) {
  const p = t.pages.projects;
  return (
    <article className="page-wrap">
      <header className="page-header">
        <BackLink t={t} to="#/" label={t.nav.home} />
        <div className="page-kicker">{p.kicker}</div>
        <SectionTitle text={p.title} />
        <p className="page-intro">{p.intro}</p>
      </header>

      <ul className="projects-index">
        {t.projects.list.map((proj, i) => (
          <li key={proj.id} style={{ "--i": i }}>
            <a className="px-card" href={"#/projects/" + proj.id}>
              <div className="px-card-thumb">
                {proj.id === "moi-dedans" ? (
                  <img src="assets/moi-dedans/flatlay-roses-2.jpg" alt="" />
                ) : (
                  <ProjThumb id={proj.id} />
                )}
              </div>
              <div className="px-card-body">
                <span className="px-card-tag">{proj.tag}</span>
                <h2 className="px-card-name">{proj.name}</h2>
                <p className="px-card-short">{proj.short}</p>
                <span className="px-card-cta">
                  {t.projects.readMore}
                  <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
                    <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </div>
            </a>
          </li>
        ))}
      </ul>
    </article>
  );
}

// ───────── Moi Dedans ─────────

function ProjectMoiDedans({ t }) {
  const p = t.pages.moiDedans;
  return (
    <article className="page-wrap project-md">
      <header className="page-header">
        <BackLink t={t} to="#/projects" label={t.nav.projects} />
        <div className="page-kicker">{p.kicker}</div>
        <h1 className="project-title">{p.title}</h1>
        <p className="project-subtitle">{p.subtitle}</p>
      </header>

      <figure className="md-hero">
        <img src="assets/moi-dedans/portrait-3.jpg" alt="" />
      </figure>

      <section className="md-concept">
        <div className="md-concept-text">
          {p.concept.map((para, i) => (
            <p key={i}>{para}</p>
          ))}
        </div>
        <dl className="md-details">
          {p.details.map((d, i) => (
            <div key={i} className="md-detail-row">
              <dt>{d.k}</dt>
              <dd>{d.v}</dd>
            </div>
          ))}
        </dl>
      </section>

      <section className="md-gallery">
        <figure className="md-img md-img--a">
          <img src="assets/moi-dedans/portrait-1.jpg" alt="" />
        </figure>
        <figure className="md-img md-img--b">
          <img src="assets/moi-dedans/flatlay-roses.jpg" alt="" />
        </figure>
        <figure className="md-img md-img--c">
          <img src="assets/moi-dedans/hands.jpg" alt="" />
        </figure>
        <figure className="md-img md-img--d">
          <img src="assets/moi-dedans/text.jpg" alt="" />
        </figure>
        <figure className="md-img md-img--e">
          <img src="assets/moi-dedans/flatlay-roses-2.jpg" alt="" />
        </figure>
        <figure className="md-img md-img--f">
          <img src="assets/moi-dedans/detail-collar.jpg" alt="" />
        </figure>
        <figure className="md-img md-img--g">
          <img src="assets/moi-dedans/portrait-2.jpg" alt="" />
        </figure>
        <figure className="md-img md-img--h">
          <img src="assets/moi-dedans/cape-beach.jpg" alt="" />
        </figure>
      </section>
    </article>
  );
}

// ───────── Single-page Telegram projects (Catzpacho, Otvetno) ─────────

function TelegramProject({ t, p, accent, image }) {
  return (
    <article className={"page-wrap project-tg project-tg--" + accent}>
      <header className="page-header">
        <BackLink t={t} to="#/projects" label={t.nav.projects} />
        <div className="page-kicker">{p.kicker}</div>
        <h1 className="project-title">{p.title}</h1>
        <p className="project-subtitle">{p.subtitle}</p>
      </header>

      <section className="tg-main">
        <div className="tg-glyph">
          <img src={image} alt="" />
        </div>

        <div className="tg-text">
          {p.concept.map((para, i) => (
            <p key={i}>{para}</p>
          ))}

          <a className="tg-cta" href={"https://" + p.handle} target="_blank" rel="noreferrer">
            <span className="tg-cta-icon">{window.ICONS.Telegram}</span>
            <span className="tg-cta-body">
              <span className="tg-cta-handle">{p.handle}</span>
              <span className="tg-cta-label">{p.cta}</span>
            </span>
            <span className="tg-cta-arrow" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="16" height="16">
                <path d="M7 17 17 7M9 7h8v8" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
          </a>
        </div>
      </section>
    </article>
  );
}

function ProjectCatzpacho({ t }) {
  return <TelegramProject t={t} p={t.pages.catzpacho} accent="cat" image="assets/catzpacho.jpg" />;
}
function ProjectOtvetno({ t }) {
  return <TelegramProject t={t} p={t.pages.otvetno} accent="circle" image="assets/otvetno.jpg" />;
}

// ───────── Videos page ─────────

function VideosPage({ t }) {
  const p = t.pages.videos;
  const ids = window.VIMEO_IDS || [];
  return (
    <article className="page-wrap videos-page">
      <div className="videos-bg" aria-hidden="true">
        <iframe
          src="https://player.vimeo.com/video/264860753?background=1&autoplay=1&loop=1&muted=1"
          title=""
          frameBorder="0"
          allow="autoplay; fullscreen; picture-in-picture"
          tabIndex={-1}
        />
        <div className="videos-bg-tint" />
      </div>
      <header className="page-header">
        <BackLink t={t} to="#/" label={t.nav.home} />
        <div className="page-kicker">{p.kicker}</div>
        <SectionTitle text={p.title} />
        <p className="page-intro">{p.intro}</p>

        <a className="vimeo-channel-cta" href="https://vimeo.com/voinatale" target="_blank" rel="noreferrer">
          {window.ICONS.Vimeo}
          <span>{p.openChannel}</span>
          <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
            <path d="M7 17 17 7M9 7h8v8" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </header>

      <ul className="video-grid">
        {p.items.map((v, i) => {
          const id = ids[i];
          const src = id
            ? `https://player.vimeo.com/video/${id}?title=0&byline=0&portrait=0&color=c7ac85`
            : null;
          return (
            <li key={i} className="video-card">
              <div className="video-frame">
                {src ? (
                  <iframe
                    src={src}
                    title={v.title}
                    loading="lazy"
                    frameBorder="0"
                    allow="autoplay; fullscreen; picture-in-picture"
                    allowFullScreen
                  />
                ) : (
                  <div className="video-placeholder">
                    <span>{window.ICONS.Vimeo}</span>
                  </div>
                )}
              </div>
              <div className="video-meta">
                <div className="video-meta-line">
                  <span className="video-meta-year">{v.year}</span>
                  <span className="video-meta-dot">·</span>
                  <h3 className="video-meta-title">{v.title}</h3>
                </div>
                <p className="video-meta-note">{v.note}</p>
              </div>
            </li>
          );
        })}
      </ul>
    </article>
  );
}

Object.assign(window, {
  BackLink, ProjectsIndex, ProjectMoiDedans, ProjectCatzpacho, ProjectOtvetno, VideosPage,
});