// Cover page: editorial magazine layout with imagery.

function CoverPage({ issue, entries, density, showAnnotations, onOpenArticle }) {
  const totalWords = entries.reduce((s, e) => s + e.words, 0);
  const totalReadingMin = Math.round(totalWords / 200);

  // Curated Unsplash imagery — quiet luxury / textile / Tokyo mood
  const heroImg = "./assets/heroes/tailor-hand-stitch.jpg";
  const sideImg1 =
    "https://images.unsplash.com/photo-1535132011086-b8818f016104?w=900&q=80&auto=format&fit=crop";
  const sideImg2 =
    "https://images.unsplash.com/photo-1551803091-e20673f15770?w=900&q=80&auto=format&fit=crop";
  const featureImg =
    "https://images.unsplash.com/photo-1535131749006-b7f58c99034b?w=1600&q=80&auto=format&fit=crop";

  const featuredEntries = entries.slice(0, 3);
  const restEntries = entries.slice(3);

  // P0 brand-violation remediation (2026-04-26):
  // Hide "Three recent pieces" until Option B Imagen-generated imagery
  // (cashmere knit, Ginza tailoring tools, Tokyo clubhouse interior) lands.
  // Flip back to true after the brand-compliant assets are merged.
  const showFeaturedTrio = false;

  return (
    <div className="page-fade-enter">
      <section className="cover-v2">
        <div className="cover-v2__rail">
          <div className="cover-v2__rail-left">
            <span className="cover-v2__rail-vol">Volume I · 2026</span>
            <span>ISSN pending</span>
            <span>Filed from Tokyo</span>
          </div>
          <div>Latest {entries.length} · {totalWords.toLocaleString()} words</div>
        </div>

        <div className="cover-v2__grid">
          <div className="cover-v2__kanji-col">
            <div className="cover-v2__kanji" lang="ja">{issue.kanji}</div>
            {showAnnotations && (
              <div className="cover-v2__kanji-annotation">
                <span className="dash">—</span> {issue.kanjiAnnotation}
              </div>
            )}
          </div>

          <div className="cover-v2__type-col">
            <div className="cover-v2__masthead">Tokyo Golf Fashion</div>
            <p className="cover-v2__jp" lang="ja">
              {issue.jpTagline}
            </p>
            <p className="cover-v2__sub">
              {issue.subHero}
            </p>

            <div className="cover-v2__cta-row">
              <a
                className="cover-v2__cta"
                href="#latest"
                onClick={(e) => {
                  e.preventDefault();
                  document
                    .getElementById("latest")
                    ?.scrollIntoView({ behavior: "smooth", block: "start" });
                }}
              >
                <span>Latest entries</span>
                <span className="arrow">↓</span>
              </a>
              <a
                className="cover-v2__cta cover-v2__cta--ghost"
                href="#"
                onClick={(e) => { e.preventDefault(); onOpenArticle(entries[0].slug); }}
              >
                <span>Read the opener</span>
                <span className="arrow">→</span>
              </a>
            </div>
          </div>

          <div className="cover-v2__image-col">
            <figure className="cover-v2__hero-figure">
              <img src={heroImg} alt="" loading="lazy" />
              <figcaption>
                <span className="num">Plate I.</span>
                <span>Hand-stitched flannel, photographed in soft Tokyo window light.</span>
              </figcaption>
            </figure>
          </div>
        </div>

      </section>

      {/* Featured trio — magazine-style cards (gated by showFeaturedTrio) */}
      {showFeaturedTrio && (
        <section className="cover-feature">
          <header className="cover-feature__head">
            <p className="cover-feature__eyebrow">From the desk</p>
            <h2 className="cover-feature__title">Three recent pieces.</h2>
            <p className="cover-feature__deck">
              Selected from the last fortnight — three reads to start the round.
            </p>
          </header>

          <div className="cover-feature__grid">
            {featuredEntries.map((e, i) => {
              const img = i === 0 ? heroImg : i === 1 ? sideImg1 : sideImg2;
              return (
                <article
                  key={e.slug}
                  className={`feat feat--${i}`}
                  onClick={() => onOpenArticle(e.slug)}
                >
                  <div className="feat__media">
                    <img src={img} alt="" loading="lazy" />
                    <span className="feat__number">No. {String(e.n).padStart(2, "0")}</span>
                  </div>
                  <div className="feat__body">
                    <div className="feat__desk">{e.desk}</div>
                    <h3 className="feat__title">{e.title}</h3>
                    <p className="feat__deck">{e.deck}</p>
                    <div className="feat__meta">
                      <span>{e.readingMin} min read</span>
                      <span className="dot">·</span>
                      <span>{e.publishedAt}</span>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        </section>
      )}

      {/* Wide editorial plate */}
      <section className="cover-plate">
        <div className="cover-plate__media">
          <img src={featureImg} alt="" loading="lazy" />
        </div>
        <div className="cover-plate__copy">
          <p className="cover-plate__eyebrow">Editor's note</p>
          <p className="cover-plate__quote" lang="ja">
            買って一度。十年、着る。
          </p>
          <p className="cover-plate__quote-en">
            Buy once. Wear it for ten years. Return it to the house when it asks for a second life.
          </p>
          <p className="cover-plate__attr">— The Editors, on the discipline of the closet</p>
        </div>
      </section>

      {/* The Ledger — full TOC */}
      <section className="ledger" id="latest" data-density={density}>
        <header className="ledger__head">
          <div>
            <p className="ledger__eyebrow">The Ledger · Latest</p>
            <h2 className="ledger__title">Latest entries.</h2>
          </div>
          <div className="ledger__meta">
            <div><strong>{entries.length}</strong> entries</div>
            <div><strong>{totalWords.toLocaleString()}</strong> words</div>
            <div>≈ <strong>{totalReadingMin} min</strong></div>
          </div>
        </header>

        <div className="ledger__rows">
          {restEntries.map((e) => (
            <div
              key={e.slug}
              className="ledger-row"
              onClick={() => onOpenArticle(e.slug)}
              role="link"
              tabIndex={0}
              onKeyDown={(ev) => { if (ev.key === "Enter") onOpenArticle(e.slug); }}
            >
              <div className="ledger-row__num">№ {String(e.n).padStart(2, "0")}</div>
              <div className="ledger-row__desk">{e.desk}</div>
              <div className="ledger-row__title">
                {e.title}
                <small>{e.deck}</small>
              </div>
              <div className="ledger-row__words">{e.words.toLocaleString()} w</div>
              <div className="ledger-row__date">{e.publishedAt.split(",")[0]}</div>
              <div className="ledger-row__arrow">→</div>
            </div>
          ))}
        </div>

        <div className="ledger__foot">
          <div>
            <a
              href="#"
              style={{ color: "var(--color-accent-primary)", textDecoration: "none", borderBottom: "1px solid var(--color-accent-primary)", paddingBottom: "0.25rem" }}
              onClick={(e) => e.preventDefault()}
            >
              View full archive →
            </a>
          </div>
          <div>Filed from Tokyo · Published weekly</div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CoverPage });