// ═══════════════════════════════════════════════════════════════ // SECCIÓN — INMENSO BASTARDO // Cuadernos de épicas. Estética: MANUSCRITO CAÓTICO (Godard). // Fondo papel manchado, anotaciones a mano rojas, tachaduras, // notas al margen desordenadas. // ═══════════════════════════════════════════════════════════════ // Runtime enrichment — attach poster + related to each IB cap. // Remove once gen-data.mjs is re-run so data.jsx ships these fields natively. (function enrichIB() { const IB_POSTER_MAP = { '1915-nacimiento-nacion': '/fotogramas/nacimiento-nacion-poster.jpg', '1939-gone-with-the-wind': '/fotogramas/gone-with-the-wind-poster.jpg', '1954-seven-samurai': '/fotogramas/seven-samurai-poster.jpg', '1956-diez-mandamientos': '/fotogramas/diez-mandamientos-poster.jpg', '1959-ben-hur': '/fotogramas/ben-hur-poster.jpg', '1960-spartacus': '/fotogramas/spartacus-poster.jpg', '1962-lawrence-arabia': '/fotogramas/lawrence-arabia-poster.jpg', '1963-cleopatra': '/fotogramas/cleopatra-poster.jpg', '1974-celine-julie': '/fotogramas/celine-julie-poster.jpg', '1974-padrino-parte-ii': '/fotogramas/padrino-parte-ii-poster.jpg', '1975-barry-lyndon': '/fotogramas/barry-lyndon-poster.jpg', '1979-apocalypse-now': '/fotogramas/apocalypse-now-poster.jpg', '1980-heavens-gate': '/fotogramas/heavens-gate-poster.jpg', }; // General poster map (by critica slug) — for related films. const CRITICA_POSTER_MAP = Object.assign({}, IB_POSTER_MAP, { '2000-nueve-reinas': '/fotogramas/nueve-reinas-poster.jpg', '2020-druk': '/fotogramas/druk-poster.jpg', '2020-news-of-the-world': '/fotogramas/news-of-the-world-poster.jpg', '2021-french-dispatch': '/fotogramas/french-dispatch-poster.jpg', '2021-mitchells-vs-machines':'/fotogramas/mitchells-poster.jpg', '2021-snyder-cut': '/fotogramas/snyder-cut-poster.jpg', '2022-fabelmans': '/fotogramas/fabelmans-poster.jpg', '2022-hustle': '/fotogramas/hustle-poster.jpg', '2023-oppenheimer': '/fotogramas/oppenheimer-poster.jpg', '2023-retirement-plan': '/fotogramas/retirement-plan-poster.jpg', '2024-civil-war': '/fotogramas/civil-war-poster.jpg', '1971-naranja-mecanica': '/fotogramas/naranja-mecanica-poster.jpg', '1973-westworld': '/fotogramas/westworld-poster.jpg', '1975-shivers': '/fotogramas/shivers-poster.jpg', '1985-shoah': '/fotogramas/shoah-poster.jpg', }); window.__RT_POSTER_MAP__ = CRITICA_POSTER_MAP; const caps = window.IB_CAPITULOS || []; const criticasBySlug = {}; (window.CRITICAS || []).forEach(c => { criticasBySlug[c.slug] = c; }); caps.forEach(c => { if (!c.poster) c.poster = IB_POSTER_MAP[c.slug] || c.cover; if (!c.relatedFull || !c.relatedFull.length) { const src = criticasBySlug[c.slug]; if (src && src.relatedFull) c.relatedFull = src.relatedFull; else c.relatedFull = []; } }); })(); function IBSection({ initialSlug, onSlugChange, onChrome }) { const caps = window.IB_CAPITULOS || []; const [openSlug, setOpenSlug] = React.useState(initialSlug || null); React.useEffect(() => { onChrome && onChrome({ accent: '#c01e1e', dark: '#1a1510', light: '#ece3cf' }); }, [onChrome]); React.useEffect(() => { setOpenSlug(initialSlug || null); }, [initialSlug]); const open = (slug) => { setOpenSlug(slug); onSlugChange && onSlugChange(slug); }; const back = () => { setOpenSlug(null); onSlugChange && onSlugChange(null); }; if (openSlug) { const cap = caps.find(c => c.slug === openSlug); if (!cap) return ; return ; } return ; } // ─── Shared paper background ───────────────────────────────── const paperBg = ` radial-gradient(circle at 15% 20%, rgba(150,100,50,0.08) 0%, transparent 35%), radial-gradient(circle at 82% 78%, rgba(120,30,20,0.06) 0%, transparent 40%), radial-gradient(circle at 45% 50%, rgba(200,160,100,0.04) 0%, transparent 50%), repeating-linear-gradient(93deg, transparent 0 60px, rgba(100,70,40,0.03) 60px 61px), #ece3cf `; function PaperStain({ top, left, size=80, color='rgba(180,100,60,0.12)' }) { return (
); } function InkBlot({ top, left, size=14, rot=0 }) { // tiny scattered ink blot, hand-drawn feel return (
); } // ─── INDEX ──────────────────────────────────────────────────── function IBIndex({ caps, onOpen }) { return (
{/* HEADER — messy cover page */}
{/* typewriter meta top — right padding clears the hamburger button */}
cuadernos / 2026 ★ vol. II ★
{/* Hand-written title */}
Inmenso
Bastardo.
{/* Crossed-out subtitle */}
Notas sobre cine épico
↖ cuadernos.
Un análisis de las películas más grandes, más largas, más épicas fallidas de la historia del cine. Todas de 3 horas o más.
{/* hand arrow */}
Se recomienda discreción
{/* DIVIDER — squiggly hand drawn */}
{/* INDEX — numbered, hand-drawn boxes */}
Índice (provisorio)
{caps.map((c, i) => { const tilt = (i % 2 === 0 ? -0.7 : 0.6); const posterTilt = (i % 2 === 0 ? -2.5 : 3); return ( ); })}
{/* FOOTER — solo aire + un par de manchas para cerrar la página */}
); } // ─── READER ─────────────────────────────────────────────────── function IBReader({ cap, caps, onBack, onOpen }) { const idx = caps.findIndex(c => c.slug === cap.slug); // No cyclical wrap — hide "anterior" on first chapter, "siguiente" on last. const next = idx >= 0 && idx < caps.length - 1 ? caps[idx + 1] : null; const prev = idx > 0 ? caps[idx - 1] : null; // Auto-scroll to top when the chapter changes — otherwise React re-uses the // scroll container and the new chapter opens mid-page. const readerRef = React.useRef(null); React.useEffect(() => { if (readerRef.current) readerRef.current.scrollTop = 0; else window.scrollTo(0, 0); }, [cap.slug]); return (
{/* TOP BAR — right padding clears the hamburger button */}
cap {String(idx+1).padStart(2,'0')} / {String(caps.length).padStart(2,'0')}
{/* CHAPTER OPENER */}
{/* big roman numeral — font-size scales with numeral length so wide numerals like "XIII" or "XVIII" never bleed into the title. */}
{cap.num}
{cap.kicker}

{cap.title}

✎
seguir
pensando
{/* BODY — blocks with different kinds */}
{cap.blocks.map((b, i) => { if (b.kind === 'p') { return (

{i === 0 && ( {b.text[0]} )} {i === 0 ? b.text.slice(1) : b.text}

); } if (b.kind === 'note') { // margin note — hand-written red, rotated return (
✎ {b.text}
); } if (b.kind === 'crossout') { return (
(no.) {b.text}
); } if (b.kind === 'img') { // film photogram as if it were a polaroid taped into the notebook const rot = ((i * 53) % 7) - 3; // stable rotation per position return (
{b.alt {b.alt && (
{b.alt}
)} {/* tape strip */}
); } if (b.kind === 'pull') { return (
{b.text}
); } if (b.kind === 'h2' || b.kind === 'h3') { return (

{b.text}

); } return null; })}
{/* RELATED FILMS — "Seguí leyendo" */} {/* PREV / NEXT nav — stacked so long titles breathe. First chapter has no "anterior"; last chapter has no "siguiente". */}
{prev && ( )} {next && ( )}
); } // ─── RELATED (Seguí leyendo) ────────────────────────────────── function IBRelated({ cap }) { const rel = (cap.relatedFull || []) .filter(r => r && r.type === 'critica') .slice(0, 4); if (!rel.length) return null; const criticasBySlug = React.useMemo(() => { const m = {}; (window.CRITICAS || []).forEach(c => { m[c.slug] = c; }); return m; }, []); const ibSlugs = React.useMemo(() => { const s = new Set(); (window.IB_CAPITULOS || []).forEach(c => s.add(c.slug)); return s; }, []); const posterMap = window.__RT_POSTER_MAP__ || {}; const resolved = rel.map(r => { const c = criticasBySlug[r.slug]; if (!c) return null; const film = c.film || {}; // Route to the correct section based on whether this is an IB chapter. const isIB = ibSlugs.has(c.slug) || (Array.isArray(c.series) && c.series.includes('inmenso-bastardo')); return { slug: c.slug, href: isIB ? `#/ib/${c.slug}` : `#/vv/${c.slug}`, title: c.title, filmTitle: film.title || c.filmTitle || '', year: film.year || c.year || '', director: Array.isArray(film.director) ? film.director[0] : (c.director || ''), poster: c.poster || posterMap[c.slug] || c.cover, section: isIB ? 'Inmenso Bastardo' : 'Vamos Viendo', }; }).filter(Boolean); if (!resolved.length) return null; return (
✎ Seguí leyendo — películas relacionadas
); } window.IBSection = IBSection;