// Three distinct compositions. Only the unmodified editorial blocks and utilities are shared.
function DesktopReadButton({ articleRef, children = '↓' }) {
  return <a href="#dt-article" className="dt-read-down" aria-label="Leer texto" onClick={event => {
    event.preventDefault();
    articleRef.current.scrollIntoView({ behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth', block: 'start' });
    articleRef.current.focus({ preventScroll: true });
  }}>{children}</a>;
}
function DesktopByline({ entry }) {
  return <div className="dt-byline"><span>Nicolás Barak<small>{window.formatPubDate ? window.formatPubDate(entry.publishedAt || entry.published) : entry.publishedAt || entry.published}{entry.readMin ? ` · ${entry.readMin} min lectura` : ''}</small></span>{typeof entry.rating === 'number' && <span className="dt-rating"><b aria-hidden="true">★</b>{entry.rating}<small>/10</small></span>}</div>;
}
function DesktopRelated({ entries }) {
  if (!entries.length) return null;
  return <aside className="dt-related"><div className="dt-kicker">Seguir leyendo</div><div>{entries.map(({ section, entry }) => <DesktopLink key={entry.slug} to={`/${section}/${entry.slug}`}><img src={dtImage(entry)} alt="" loading="lazy"/><small className={`dt-name--${section}`}><DesktopName section={section}/></small><h3>{dtTitle(entry)}</h3><span aria-hidden="true">↗</span></DesktopLink>)}</div></aside>;
}

function DesktopCinemaIndex({ entries, selected, onClose }) {
  const dialog = React.useRef(null);
  React.useEffect(() => { const element = dialog.current; element.showModal(); return () => element.close(); }, []);
  return <dialog ref={dialog} className="dt-cinema-index" aria-label="Índice VV" onCancel={event => { event.preventDefault(); onClose(); }} onClick={event => { if (event.target === dialog.current) onClose(); }}>
    <header><span className="dt-name--vv"><DesktopName section="vv"/></span><span>{dtNumber(entries.length)} críticas</span><button autoFocus onClick={onClose} aria-label="Cerrar índice">Cerrar ×</button></header>
    <nav aria-label="Críticas de Vamos Viendo">{entries.map((entry, index) => <DesktopLink key={entry.slug} to={`/vv/${entry.slug}`} aria-current={entry.slug === selected ? 'page' : undefined} onClick={event => { if (!event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey && event.button === 0) onClose(); }}><div><img src={dtImage(entry)} alt="" loading="lazy"/><span>{dtNumber(index + 1)}</span></div><h2>{dtTitle(entry)}</h2><small>{entry.year} · {dtText(entry.director)}</small></DesktopLink>)}</nav>
  </dialog>;
}

function DesktopCinemaReader({ entry, entries, index, director, runtime, country, articleRef, progress, related, children }) {
  const [showIndex, setShowIndex] = React.useState(false);
  const indexButton = React.useRef(null);
  const closeIndex = () => { setShowIndex(false); requestAnimationFrame(() => indexButton.current?.focus({ preventScroll: true })); };
  const previous = entries[index - 1], next = entries[index + 1];
  return <>
    <nav className="dt-cinema-transport" aria-label="Navegar críticas"><DesktopLink to="/vv">← Índice</DesktopLink><span className="dt-cinema-current">{dtTitle(entry)}</span><span>{dtNumber(index + 1)} / {dtNumber(entries.length)}</span><button ref={indexButton} onClick={() => setShowIndex(true)} aria-haspopup="dialog">▦ Índice VV</button>{progress}</nav>
    <header className={`dt-cinema-hero ${dtTitle(entry).length > 28 ? 'is-long-title' : ''}`}>
      <img className="dt-cinema-still" src={dtImage(entry)} alt="" fetchpriority="high"/>
      <div className="dt-cinema-titles"><div className="dt-kicker">Vamos Viendo · N° {dtNumber(index + 1)}</div><h1>{dtTitle(entry)}</h1><p>{[entry.year, director, runtime && `${runtime} min`, country].filter(Boolean).join(' · ')}</p></div>
      <DesktopReadButton articleRef={articleRef}/><span className="dt-cinema-edge" aria-hidden="true">{entry.year}</span>
    </header>
    <div className="dt-cinema-review"><div className="dt-kicker">Sobre {entry.filmTitle || entry.title}</div>{entry.filmTitle && entry.title !== entry.filmTitle && <h2>{entry.title}</h2>}<DesktopByline entry={entry}/>
      {entry.camera && Object.values(entry.camera).some(Boolean) && <div className="dt-shot-stamp"><span>SHOT ON</span><strong>{entry.camera.format}</strong><dl>{[['camera', 'Cámara'], ['lens', 'Óptica'], ['stock', 'Película']].filter(([key]) => entry.camera[key]).map(([key, label]) => <div key={key}><dt className="dt-sr">{label}</dt><dd>{entry.camera[key]}</dd></div>)}</dl><i aria-hidden="true"/><i aria-hidden="true"/></div>}
    </div>
    <div className="dt-cinema-body">{children}</div>
    <nav className="dt-cinema-cuts" aria-label="Navegar notas">{[[previous,'← Anterior'],[next,'Siguiente →']].filter(([item]) => item).map(([item,label]) => <DesktopLink to={`/vv/${item.slug}`} key={item.slug}><img src={dtImage(item)} alt="" loading="lazy"/><div><small>{label}</small><span>{dtTitle(item)}</span><p>{item.year}</p></div></DesktopLink>)}</nav>
    <DesktopRelated entries={related}/>
    {showIndex && <DesktopCinemaIndex entries={entries} selected={entry.slug} onClose={closeIndex}/>}
  </>;
}

function DesktopChronicleReader({ entry, entries, index, director, country, articleRef, progress, related, children }) {
  const previous = entries[index - 1], next = entries[index + 1];
  const runtime = runtimeFor(entry).str.replace('MIN', '');
  return <>
    <nav className="dt-chapter-spine" aria-label="Capítulos de Inmenso Bastardo"><DesktopLink to="/ib" className="dt-chapter-index">← Índice</DesktopLink><div>{entries.map((item, i) => <DesktopLink key={item.slug} to={`/ib/${item.slug}`} aria-current={entry.slug === item.slug ? 'page' : undefined} aria-label={`Capítulo ${dtNumber(i + 1)}: ${item.year}, ${dtTitle(item)}`}><small>{dtNumber(i + 1)}</small><span>{item.year}</span><i className="dt-chapter-preview" aria-hidden="true"><img src={dtImage(item)} alt="" loading="lazy"/><b>{dtTitle(item)}</b></i></DesktopLink>)}</div>{progress}</nav>
    <header className="dt-chronicle-hero"><img src={dtImage(entry)} alt="" fetchpriority="high"/><div className="dt-chronicle-heading"><div className="dt-kicker">{entry.kicker || `Capítulo ${dtNumber(index + 1)}`}</div><div className="dt-chronicle-year">{entry.year}</div><h1>{dtTitle(entry)}</h1><p className="dt-chronicle-director">{[director,country].filter(Boolean).join(' · ')}</p>{entry.excerpt && <div className="dt-chronicle-context"><span aria-hidden="true">❦</span><p>{entry.excerpt}</p></div>}</div><DesktopReadButton articleRef={articleRef}/></header>
    <dl className="dt-chronicle-facts"><div><dt>DUR</dt><dd>{runtime}</dd></div><div><dt>AÑO</dt><dd>{entry.year}</dd></div><div><dt>DIR</dt><dd>{director}</dd></div><div><dt>№</dt><dd>{dtNumber(index + 1)}</dd></div></dl>
    <div className="dt-chronicle-body"><aside className="dt-chronicle-margin" aria-hidden="true"><div><small>Capítulo {dtNumber(index + 1)}</small><strong>{entry.year}</strong><i/></div></aside>{children}<div className="dt-chronicle-colophon"><DesktopByline entry={entry}/></div></div>
    <nav className="dt-chapter-continuation" aria-label="Navegar notas">{[[previous,'← Anterior'],[next,'Siguiente →']].filter(([item]) => item).map(([item,label]) => <DesktopLink key={item.slug} to={`/ib/${item.slug}`}><small>{label} · Capítulo {dtNumber(entries.indexOf(item) + 1)}</small><strong>{item.year}</strong><span>{dtTitle(item)}</span></DesktopLink>)}<DesktopLink to="/ib" className="dt-chapter-return">← Índice <span className="dt-name--ib"><DesktopName section="ib"/></span></DesktopLink></nav>
    <DesktopRelated entries={related}/>
  </>;
}

function dtEditorialNumber(entry) {
  // Use the numbers printed on the original mobile papers, including future entries.
  const known = { '2021-christopher-nolan':1, '2021-las-cosas-en-el-stano':2, '2023-yo-creo-en-el-cine':3 }[entry.slug] || dtEntries('ed').indexOf(entry) + 1;
  return dtNumber(known);
}
function dtEditorialOrder(entries) {
  return [...entries].sort((a,b) => {
    const rank = entry => ({ '2021-las-cosas-en-el-stano':0, '2021-christopher-nolan':1, '2023-yo-creo-en-el-cine':2 }[entry.slug] ?? 3);
    return rank(a) - rank(b);
  });
}
function DesktopEditorialDesk() {
  const entries = dtEditorialOrder(dtEntries('ed'));
  return <div className="dt-editorial-desk dt-archive--ed"><header className="dt-desk-masthead"><div><div className="dt-kicker">{DT_COPY.ed.kicker} · {dtNumber(entries.length)} textos</div><h1 className="dt-name--ed"><DesktopName section="ed"/></h1><p>{DT_COPY.ed.description}</p></div><p className="dt-desk-handwriting">No escribo para tener razón.<br/>Escribo para entender.</p></header><div className="dt-desk-papers">{entries.map(entry => <DesktopEditorialCard key={entry.slug} entry={entry} index={Number(dtEditorialNumber(entry)) - 1}/>)}</div><p className="dt-desk-footnote">el cine no explica la vida. la acompaña.</p><DesktopFooter/></div>;
}
function DesktopPaperReader({ entry, entries, index, articleRef, progress, related, children }) {
  const ordered = dtEditorialOrder(entries);
  const next = ordered[(ordered.indexOf(entry) + 1) % ordered.length];
  return <div className="dt-paper-desk">
    <nav className="dt-paper-tabs" aria-label="Editoriales"><DesktopLink to="/ed">← Índice</DesktopLink><div>{ordered.map(item => <DesktopLink to={`/ed/${item.slug}`} key={item.slug} aria-current={entry.slug === item.slug ? 'page' : undefined}><span>{dtEditorialNumber(item)}</span>{item.title}</DesktopLink>)}</div>{progress}</nav>
    <header className="dt-paper-cover dt-reader-hero"><DesktopEditorialIntro entry={entry} index={Number(dtEditorialNumber(entry)) - 1}/><i className="dt-paper-clip" aria-hidden="true"/><div className="dt-paper-cover-meta"><span>{dtEditorialNumber(entry)} · {entry.topic}</span><span>{entry.published}</span></div><h1>{entry.title}</h1><div className="dt-paper-deck"><p>{entry.excerpt}</p><figure><img src={dtImage(entry)} alt="" fetchpriority="high"/><figcaption>volver a mirar</figcaption></figure></div><div className="dt-paper-signature"><span>Nicolás Barak</span><DesktopReadButton articleRef={articleRef}/></div></header>
    <div className="dt-paper-body"><span className="dt-paper-tape" aria-hidden="true"/>{children}</div>
    <DesktopRelated entries={related}/>
    {next && <nav className="dt-paper-next" aria-label="Navegar notas"><DesktopLink to={`/ed/${next.slug}`}><span className="dt-paper-tape" aria-hidden="true"/><small>Siguiente editorial · {dtEditorialNumber(next)}</small><strong>{next.title}</strong><span aria-hidden="true">↗</span></DesktopLink></nav>}
    <p className="dt-desk-footnote">todavía tengo cosas que contar.</p>
  </div>;
}