/* === Page Components === */

const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* --- Cover (front) --- */
function CoverPage({ t, images }) {
  return (
    <div className="cover">
      <div className="cover-half">
        <img src={images.left} alt="" />
      </div>
      <div className="cover-half">
        <img src={images.right} alt="" />
      </div>
      <div className="cover-divider"></div>

      <div className="cover-overlay">
        <div className="cover-logo-mark">
          <img src="assets/galleria-marini-logo.png" alt="Galleria Marini" />
        </div>
        <div className="cover-top">
          <div className="cover-eyebrow">{t.coverEyebrow}</div>
          <div className="cover-eyebrow">MMXXVI</div>
        </div>

        <div className="cover-bottom">
          <div className="cover-publisher">{t.coverPublisher}</div>
          <div className="cover-dates">{t.coverDates}</div>
        </div>
      </div>

      <div className="cover-center">
        <div className="cover-name-row">
          <div className="cover-name cover-name--left">Enrico<br/>Della Torre</div>
          <div className="cover-name cover-name--right">Pierluigi<br/>Lavagnino</div>
        </div>
        <div className="cover-title">{t.coverTitle}</div>
      </div>
    </div>
  );
}

/* --- Frontispiece --- */
function GalleryMark({ inverted = false }) {
  return (
    <img
      className={"gallery-mark" + (inverted ? " gallery-mark--inverted" : "")}
      src="assets/galleria-marini-logo.png"
      alt="Galleria Marini"
    />
  );
}

function FrontispiecePage({ t }) {
  return (
    <div className="frontispiece">
      <GalleryMark />
      <div className="center-block">
        <div className="artists">
          {t.frontArtists[0]}
          <em>{t.frontConj}</em>
          {t.frontArtists[1]}
        </div>
        <div className="main-title">{t.frontMainTitle}</div>
        <div className="subtitle-trio">
          {t.frontSubtitleTrio.map((s, i) => <div key={i}>{s}</div>)}
        </div>
      </div>
      <div className="gallery-line">{t.frontGallery}</div>
    </div>
  );
}

/* --- Colophon --- */
function ColophonPage({ t }) {
  const rows = [
    [t.colCurator, t.colCuratorVal],
    [t.colDates, t.colDatesVal],
    [t.colVenue, t.colVenueVal],
    [t.colTexts, t.colTextsVal],
    [t.colPhotos, t.colPhotosVal],
    [t.colTranslations, t.colTransVal],
    [t.colPublished, t.colPublishedVal],
  ];
  return (
    <div className="colophon">
      <h4>{t.colTitle}</h4>
      <hr className="rule rule--short" style={{ marginBottom: 26 }}/>
      {rows.map(([label, val], i) => (
        <div className="col-row" key={i}>
          <div className="col-label">{label}</div>
          <div className="col-value" style={{ whiteSpace: "pre-line" }}>{val}</div>
        </div>
      ))}
    </div>
  );
}

/* --- Section Divider --- */
function SectionDivider({ section }) {
  return (
    <div className="section-divider">
      <div className="roman">— {section.roman} —</div>
      <div className="section-title">{section.title}</div>
      <div className="section-sub">{section.sub}</div>
    </div>
  );
}

/* --- Critical text page (single column with optional inline art) --- */
function CriticalTextPage({ paragraphs, dropcap, inlineArt, inlineSeries, runningHead, folio, side, continued, columns = 1 }) {
  const cls = columns === 2 ? "two-column" : "single-column";
  return (
    <>
      <div className={`running-head running-head--${side}`}>{runningHead}</div>
      <div className={cls}>
        {inlineSeries && (
          <figure className="inline-series">
            <div className="inline-series-row">
              {inlineSeries.images.map((src, i) => (
                <div className="inline-series-cell" key={i}>
                  <img src={src} alt="" />
                </div>
              ))}
            </div>
            <figcaption className="caption">{inlineSeries.caption}</figcaption>
          </figure>
        )}
        {inlineArt && (
          <figure className={`inline-art ${inlineArt.side === 'left' ? 'inline-art--left' : ''}`}>
            <img src={inlineArt.src} alt="" />
            <figcaption className="caption">{inlineArt.caption}</figcaption>
          </figure>
        )}
        {paragraphs.map((p, i) => (
          <p key={i}>
            {dropcap && i === 0 ? (
              <>
                <span className="dropcap">{p.charAt(0)}</span>
                {p.slice(1)}
              </>
            ) : p}
          </p>
        ))}
        {continued && <div className="continued">{continued} →</div>}
      </div>
      <div className={`folio folio--${side}`}>{folio}</div>
    </>
  );
}

/* --- Critical text spread header (first page of section) --- */
function CriticalTextOpener({ eyebrow, title, subtitle, paragraphs, dropcap, runningHead, folio, side }) {
  return (
    <>
      <div className={`running-head running-head--${side}`}>{runningHead}</div>
      <div className="text-spread-header">
        <div className="eyebrow eyebrow--accent">{eyebrow}</div>
        <div className="title">{title}</div>
        <div className="subtitle">{subtitle}</div>
      </div>
      <hr className="rule rule--short" style={{ margin: "0 0 22px" }}/>
      <div className="single-column">
        {paragraphs.map((p, i) => (
          <p key={i}>
            {dropcap && i === 0 ? (
              <>
                <span className="dropcap">{p.charAt(0)}</span>
                {p.slice(1)}
              </>
            ) : p}
          </p>
        ))}
      </div>
      <div className={`folio folio--${side}`}>{folio}</div>
    </>
  );
}

/* --- Plate page (image, left) --- */
function PlatePage({ plate, runningHead, folio, side }) {
  return (
    <>
      <div className={`running-head running-head--${side}`}>{runningHead}</div>
      <div className="plate-page">
        <div className="plate-frame">
          <img src={plate.file} alt={plate.title} />
        </div>
      </div>
      <div className={`folio folio--${side}`}>{folio}</div>
    </>
  );
}

/* --- Caption page (right) --- */
function CaptionPage({ plate, idx, total, lang, t, runningHead, folio, side }) {
  const tech = plate.technique[lang] || plate.technique.it;
  const num = String(idx).padStart(2, "0");
  return (
    <>
      <div className={`running-head running-head--${side}`}>{runningHead}</div>
      <div className="caption-page">
        <div className="plate-num">№ {num}<span style={{ fontSize: 18, color: "#a89c80" }}> / {String(total).padStart(2,"0")}</span></div>
        <div className="artist">{plate.artist}</div>
        <div className="work-title">{plate.title}</div>
        <div className="work-meta">
          <div>{plate.year}</div>
          <div>{tech}</div>
          <div>{plate.size}</div>
        </div>
      </div>
      <div className={`folio folio--${side}`}>{folio}</div>
    </>
  );
}

/* --- Index page --- */
function IndexPage({ t, lang, runningHead, folio, side, half }) {
  const dt = window.WORKS.dt;
  const lv = window.WORKS.lv;
  const items = half === "first"
    ? [{ artist: "Enrico Della Torre", works: dt }]
    : [{ artist: "Pierluigi Lavagnino", works: lv }];

  let plateIdx = (half === "first") ? 1 : 13;

  return (
    <>
      <div className={`running-head running-head--${side}`}>{runningHead}</div>
      {half === "first" && (
        <div className="text-spread-header" style={{ marginBottom: 18 }}>
          <div className="eyebrow eyebrow--accent">{t.secIndice.roman}</div>
          <div className="title" style={{ fontSize: 24 }}>{t.idxTitle}</div>
          <div className="subtitle" style={{ fontSize: 12 }}>{t.idxSubtitle}</div>
        </div>
      )}
      {half === "second" && <div style={{ height: 24 }}></div>}
      <div className="index-list">
        {items.map((group, gi) => (
          <React.Fragment key={gi}>
            <div className="index-artist-header">{group.artist}</div>
            {group.works.map((w, wi) => {
              const tech = w.technique[lang] || w.technique.it;
              return (
                <div className="index-item" key={w.id}>
                  <span className="index-num">{String(wi + 1).padStart(2, "0")}</span>
                  <div className="index-meta">
                    <div className="index-title-row">{w.title}, {w.year}</div>
                    <div className="index-detail">{tech} · {w.size}</div>
                  </div>
                </div>
              );
            })}
          </React.Fragment>
        ))}
      </div>
      <div className={`folio folio--${side}`}>{folio}</div>
    </>
  );
}

/* --- Exhibitions list page --- */
function ExhibitionsPage({ artist, lang, t, runningHead, folio, side, isOpener }) {
  const items = window.EXHIBITIONS[artist];
  const heading = artist === "dt" ? t.mostreDT : t.mostreLV;
  return (
    <>
      <div className={`running-head running-head--${side}`}>{runningHead}</div>
      {isOpener && (
        <div className="text-spread-header" style={{ marginBottom: 18 }}>
          <div className="eyebrow eyebrow--accent">{t.secMostre.roman}</div>
          <div className="title" style={{ fontSize: 22 }}>{heading}</div>
        </div>
      )}
      {!isOpener && (
        <div className="text-spread-header" style={{ marginBottom: 18 }}>
          <div className="eyebrow eyebrow--accent">·</div>
          <div className="title" style={{ fontSize: 22 }}>{heading}</div>
        </div>
      )}
      <hr className="rule rule--short" style={{ margin: "0 0 18px" }}/>
      <div className="exhibitions-list">
        {items.map((ex, i) => (
          <div className="ex-item" key={i}>
            <span className="ex-year">{ex.year}</span>
            <span className="ex-text-roman">{ex.text[lang] || ex.text.it}</span>
          </div>
        ))}
      </div>
      <div className={`folio folio--${side}`}>{folio}</div>
    </>
  );
}

/* --- Colophon editoriale (chiusura) --- */
function EditorialColophonPage({ lang }) {
  const C = {
    it: {
      intro: <>Il presente volume è stato edito in formato cartaceo e digitale<br/>consultabile sul sito <em>www.galleriamarini.it</em><br/>in occasione dell'esposizione di opere<br/>di <span className="ec-names">ENRICO DELLA TORRE</span> e <span className="ec-names">PIERLUIGI LAVAGNINO</span><br/>tenuta presso la Galleria Marini di Milano<br/>dal 14 maggio al 16 giugno 2026.</>,
      copies: <>Sono state stampate 200 copie numerate.</>,
      rows: [
        ["Catalogo a cura di", "Patrizia Marini"],
        ["Fotografie delle opere", "Edoardo Maria De Santis"],
        ["Finito di stampare", "nel mese di maggio 2026"],
      ],
      copy: "Copia n°",
    },
    en: {
      intro: <>This volume has been published in print and in digital form,<br/>available at <em>www.galleriamarini.it</em>,<br/>on the occasion of the exhibition of works<br/>by <span className="ec-names">ENRICO DELLA TORRE</span> and <span className="ec-names">PIERLUIGI LAVAGNINO</span><br/>held at Galleria Marini, Milan,<br/>from 14 May to 16 June 2026.</>,
      copies: <>200 numbered copies have been printed.</>,
      rows: [
        ["Catalogue edited by", "Patrizia Marini"],
        ["Photographs of the works", "Edoardo Maria De Santis"],
        ["Printed", "in May 2026"],
      ],
      copy: "Copy n°",
    },
    fr: {
      intro: <>Le présent ouvrage a été édité en format papier et numérique,<br/>consultable sur le site <em>www.galleriamarini.it</em>,<br/>à l'occasion de l'exposition d'œuvres<br/>de <span className="ec-names">ENRICO DELLA TORRE</span> et <span className="ec-names">PIERLUIGI LAVAGNINO</span><br/>tenue à la Galleria Marini de Milan,<br/>du 14 mai au 16 juin 2026.</>,
      copies: <>200 exemplaires numérotés ont été imprimés.</>,
      rows: [
        ["Catalogue sous la direction de", "Patrizia Marini"],
        ["Photographies des œuvres", "Edoardo Maria De Santis"],
        ["Achevé d'imprimer", "en mai 2026"],
      ],
      copy: "Exemplaire n°",
    },
    de: {
      intro: <>Der vorliegende Band ist in gedruckter und digitaler Form erschienen,<br/>einzusehen auf der Website <em>www.galleriamarini.it</em>,<br/>anlässlich der Ausstellung von Werken<br/>von <span className="ec-names">ENRICO DELLA TORRE</span> und <span className="ec-names">PIERLUIGI LAVAGNINO</span><br/>in der Galleria Marini in Mailand,<br/>vom 14. Mai bis zum 16. Juni 2026.</>,
      copies: <>200 nummerierte Exemplare wurden gedruckt.</>,
      rows: [
        ["Katalog kuratiert von", "Patrizia Marini"],
        ["Fotografien der Werke", "Edoardo Maria De Santis"],
        ["Druck abgeschlossen", "im Mai 2026"],
      ],
      copy: "Exemplar Nr.",
    },
  };
  const c = C[lang] || C.it;
  return (
    <div className="editorial-colophon">
      <div className="ec-logo">
        <img src="assets/galleria-marini-logo.png" alt="Galleria Marini" />
      </div>
      <div className="ec-intro">{c.intro}</div>
      <div className="ec-rule"></div>
      <div className="ec-copies">{c.copies}</div>
      <div className="ec-rule"></div>
      <div className="ec-rows">
        {c.rows.map(([label, val], i) => (
          <div className="ec-row" key={i}>
            <div className="ec-label">{label}</div>
            <div className="ec-value">{val}</div>
          </div>
        ))}
      </div>
      <div className="ec-rule"></div>
      <div className="ec-copy-line">
        <span>{c.copy}</span>
        <span className="ec-copy-blank"></span>
      </div>
    </div>
  );
}

/* --- End page (closing quote) --- */
function EndPage({ t }) {
  return (
    <div className="endpage">
      <GalleryMark />
      <div className="quote">{t.endQuote}</div>
      <div className="credit">{t.endCredit}</div>
    </div>
  );
}

/* --- Back cover --- */
function BackCoverPage({ t }) {
  return (
    <div className="back-cover">
      <GalleryMark inverted={true} />
      <div className="blurb">{t.backBlurb}</div>
      <div className="footer">
        <span>{t.backFooter1}</span>
        <span>{t.backFooter2}</span>
      </div>
    </div>
  );
}

/* --- Empty paper page --- */
function EmptyPage() {
  return <div style={{ width: "100%", height: "100%" }}></div>;
}

Object.assign(window, {
  CoverPage, FrontispiecePage, ColophonPage, SectionDivider,
  CriticalTextPage, CriticalTextOpener, PlatePage, CaptionPage,
  IndexPage, ExhibitionsPage, EndPage, BackCoverPage, EmptyPage,
  GalleryMark, EditorialColophonPage,
});