// pages-obra.jsx — Obra entrance, Literatura shelf, Cine, Teatro, Book detail

// ─── OBRA ENTRANCE (three doors full-bleed) ──────────────────────
function ObraPage() {
  const { go } = useRoute();
  const T = useT();
  const click = (e, p) => { e.preventDefault(); go(p); };

  const doors = [
    {
      path: '/obra/literatura',
      num: T('Camino I · Literatura', 'Path I · Literature', 'Διαδρομή I · Λογοτεχνία', 'Ścieżka I · Literatura'),
      title: T('Los libros', 'The books', 'Τα βιβλία', 'Książki'),
      sub: T('Ficción, no ficción, cuentos e infantil.', 'Fiction, non-fiction, short stories and children’s.', 'Μυθοπλασία, δοκίμιο, διηγήματα και παιδικά.', 'Fikcja, literatura faktu, opowiadania i dla dzieci.'),
      img: 'img/door-literatura.avif',
      imgPos: '38% 35%',
      alt: T('Literatura · biblioteca atmosférica', 'Literature · atmospheric library', 'Λογοτεχνία · ατμοσφαιρική βιβλιοθήκη', 'Literatura · atmosferyczna biblioteka'),
      cta: T('Entrar a la galería', 'Enter the gallery', 'Είσοδος στη γκαλερί', 'Wejdź do galerii'),
    },
    {
      path: '/obra/cine',
      num: T('Camino II · Las pantallas', 'Path II · Screens', 'Διαδρομή II · Οθόνες', 'Ścieżka II · Ekrany'),
      title: T('Las pantallas', 'The screens', 'Οι οθόνες', 'Ekrany'),
      sub: T('Adaptaciones de su obra y trabajos como guionista.', 'Adaptations and works as screenwriter.', 'Διασκευές και δουλειές ως σεναριογράφος.', 'Adaptacje i prace jako scenarzysta.'),
      img: 'img/door-cine.jpg',
      imgPos: '30% 30%',
      alt: T('Cine', 'Film', 'Σινεμά', 'Film'),
      cta: T('Entrar a la filmografía', 'Enter the filmography', 'Είσοδος στη φιλμογραφία', 'Wejdź do filmografii'),
    },
    {
      path: '/obra/teatro',
      num: T('Camino III · Teatro', 'Path III · Theatre', 'Διαδρομή III · Θέατρο', 'Ścieżka III · Teatr'),
      title: T('La escena', 'The stage', 'Η σκηνή', 'Scena'),
      sub: T('Monólogo, adaptación y adaptado.', 'Monologue, adaptation and adapted.', 'Μονόλογος, διασκευή και διασκευασμένο.', 'Monolog, adaptacja i adaptowane.'),
      img: 'img/door-teatro.jpg',
      imgPos: '50% 35%',
      alt: T('Teatro', 'Theatre', 'Θέατρο', 'Teatr'),
      cta: T('Entrar', 'Enter', 'Είσοδος', 'Wejdź'),
    },
  ];

  return (
    <>
      <section style={{ paddingTop: 84 }} data-screen-label="03 Obra · Entrada">
        <div className="container" style={{ paddingTop: 'clamp(40px, 6vw, 80px)', paddingBottom: 'clamp(32px, 5vw, 60px)' }}>
          <div className="rule-h reveal-soft in"><span className="num">03</span> {T('Obra','Works','Έργο','Twórczość')}</div>
          <h1 className="display-xl reveal-soft in" style={{ maxWidth: '18ch' }}>
            {T('Elige por dónde','Choose where to','Επιλέξτε από πού','Wybierz, którędy')}<br /><em style={{ fontWeight: 400 }}>{T('entrar.','enter.','να μπείτε.','wejść.')}</em>
          </h1>
        </div>
        <div className="doors-full doors-full-three reveal-soft in">
          {doors.map((d, i) => (
            <React.Fragment key={d.path}>
              {i > 0 && <div className="doors-divider"></div>}
              <a href={d.path} onClick={(e) => click(e, d.path)} className="door-full">
                <img className="door-full-img" src={d.img} alt={d.alt} style={{ objectPosition: d.imgPos || 'center' }} />
                <div className="door-full-content">
                  <div className="num">{d.num}</div>
                  <h2 className="serif">{d.title}</h2>
                  <div className="sub">{d.sub}</div>
                  <div className="enter">{d.cta} <span>→</span></div>
                </div>
              </a>
            </React.Fragment>
          ))}
        </div>
      </section>
    </>
  );
}

// ─── LITERATURA ─────────────────────────────────────────────────
function LiteraturaPage() {
  const { go } = useRoute();
  const T = useT();
  const { lang } = useLang();
  const featured = BOOKS.find((b) => b.slug === 'el-elegido-del-sur');

  const [query, setQuery] = useState('');
  const [filter, setFilter] = useState('all'); // all | ficcion | no-ficcion | cuentos | infantil

  useEffect(() => {
    const id = requestAnimationFrame(() => {
      document.querySelectorAll('.shelf-chapter .reveal:not(.in), .shelf-chapter .reveal-soft:not(.in)')
        .forEach((el) => el.classList.add('in'));
    });
    return () => cancelAnimationFrame(id);
  }, [query, filter]);

  const featuredBlurb = lang === 'en'
    ? 'Robert Prevost fought the dark side of the Church: sexual abuse, financial crime, criminal networks… And it was that talent that took him all the way to becoming Pope Leo XIV. At once thriller, reportage and personal memoir, this book explores the thin line between good and evil.'
    : featured.blurb;

  const groupTitle = (g) => {
    if (lang === 'es') return g.title;
    if (lang === 'en') return g.id === 'ficcion' ? 'Fiction' : g.id === 'no-ficcion' ? 'Non-fiction' : g.id === 'cuentos' ? 'Short stories' : 'Children’s';
    if (lang === 'el') return g.id === 'ficcion' ? 'Μυθοπλασία' : g.id === 'no-ficcion' ? 'Δοκίμιο' : g.id === 'cuentos' ? 'Διηγήματα' : 'Παιδικά';
    if (lang === 'pl') return g.id === 'ficcion' ? 'Fikcja' : g.id === 'no-ficcion' ? 'Literatura faktu' : g.id === 'cuentos' ? 'Opowiadania' : 'Dla dzieci';
    return g.title;
  };
  const groupDesc = (g) => {
    if (lang !== 'en') return g.desc;
    if (g.id === 'ficcion') return 'Novels. From his first novel to the latest psychological thriller, including the Chacaltana series.';
    if (g.id === 'no-ficcion') return 'The believers’ trilogy. Three true stories about people who found their place in the books of literature, politics and faith.';
    if (g.id === 'cuentos') return 'Short fiction. From his first collection to his most recent book on Latin Americans living in Spain.';
    return 'Four books for young readers — one of them awarded the Barco de Vapor Prize.';
  };

  const filters = [
    { id: 'all',        label: T('Todos','All','Όλα','Wszystkie') },
    { id: 'ficcion',    label: T('Ficción','Fiction','Μυθοπλασία','Fikcja') },
    { id: 'no-ficcion', label: T('No ficción','Non-fiction','Δοκίμιο','Literatura faktu') },
    { id: 'cuentos',    label: T('Cuentos','Short stories','Διηγήματα','Opowiadania') },
    { id: 'infantil',   label: T('Infantil','Children’s','Παιδικά','Dla dzieci') },
  ];

  const q = query.trim().toLowerCase();

  return (
    <>
      <section data-screen-label="03 Obra · Literatura · Featured">
        <div className="container">
          <div className="lit-featured">
            <div className="lit-featured-cover reveal-soft in float-in" style={{ '--delay': '0.1s' }}>
              <BookCover title={featured.title} year={featured.year} color={featured.cover} image={featured.image} publisher={featured.publisher} />
            </div>
            <div className="lit-featured-text reveal-soft in" style={{ '--delay': '0.2s' }}>
              <div className="eyebrow">{T('Nueva publicación','New release','Νέα κυκλοφορία','Nowa publikacja')} · Seix Barral · 2026</div>
              <h1 className="display-xl" style={{ marginTop: 18 }}>{featured.title}</h1>
              <p className="body-l" style={{ marginTop: 20, maxWidth: '46ch' }}>{featuredBlurb}</p>
              <div className="buy-row">
                <a href="/libro/el-elegido-del-sur" onClick={(e) => { e.preventDefault(); go('/libro/el-elegido-del-sur'); }} className="btn">
                  {T('Ficha completa','Full details','Πλήρης φιχα','Pełne dane')} <span className="btn-arrow">→</span>
                </a>
              </div>
              <BuyBlock slug={featured.slug} compact />
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: 'clamp(40px, 6vw, 80px) 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}
        data-screen-label="03 Obra · Literatura · Index">
        <div className="container">
          <div className="rule-h reveal"><span className="num">II</span> {T('Catálogo','Catalogue','Κατάλογος','Katalog')}</div>
          <h2 className="display-l reveal" style={{ maxWidth: '26ch' }}>
            {T('Ficción · No ficción · Cuentos · Infantil.','Fiction · Non-fiction · Short stories · Children’s.','Μυθοπλασία · Δοκίμιο · Διηγήματα · Παιδικά.','Fikcja · Literatura faktu · Opowiadania · Dla dzieci.')}
          </h2>

          <div className="lit-toolbar reveal" style={{ '--delay': '0.1s' }}>
            <div className="lit-search">
              <span className="lit-search-icon" aria-hidden="true">⌕</span>
              <input
                type="search"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder={T('Buscar por título, año o editorial…','Search by title, year or publisher…','Αναζήτηση με τίτλο, χρονιά ή εκδότη…','Szukaj po tytule, roku lub wydawcy…')}
                aria-label={T('Buscar libro','Search book','Αναζήτηση βιβλίου','Szukaj książki')}
              />
              {query && (
                <button type="button" className="lit-search-clear" aria-label={T('Borrar búsqueda','Clear search','Καθαρισμός','Wyczyść')} onClick={() => setQuery('')}>×</button>
              )}
            </div>
            <div className="lit-filters" role="tablist" aria-label={T('Filtrar por género','Filter by genre','Φίλτρο','Filtruj')}>
              {filters.map((f) => (
                <button
                  key={f.id}
                  type="button"
                  role="tab"
                  aria-selected={filter === f.id}
                  className={`lit-filter ${filter === f.id ? 'on' : ''}`}
                  onClick={() => setFilter(f.id)}
                >
                  {f.label}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {BOOK_GROUPS.map((g) => {
        if (filter !== 'all' && filter !== g.id) return null;
        const items = BOOKS
          .filter((b) => b.group === g.id)
          .filter((b) => {
            if (!q) return true;
            return (
              (b.title || '').toLowerCase().includes(q) ||
              String(b.year || '').includes(q) ||
              (b.publisher || '').toLowerCase().includes(q) ||
              (b.genre || '').toLowerCase().includes(q)
            );
          })
          .sort((a, b) => b.year - a.year);
        if (!items.length) return null;
        return (
          <section key={g.id} className="shelf-chapter" data-screen-label={`03 Literatura · ${g.title}`}>
            <div className="container">
              <div className="shelf-header reveal">
                <div className="shelf-num">{g.num}</div>
                <h2 className="shelf-title serif">{groupTitle(g)}</h2>
                <div className="shelf-meta">{g.meta}</div>
              </div>
              <p className="shelf-desc reveal" style={{ '--delay': '0.1s' }}>{groupDesc(g)}</p>
            </div>
            <div className="shelf-rail">
              {items.map((b, i) => {
                const isFeatured = b.slug === featured.slug;
                return (
                  <a
                    key={b.slug}
                    className={`book-card reveal ${isFeatured ? 'featured' : ''}`}
                    style={{ '--delay': `${i * 0.05}s` }}
                    href={`/libro/${b.slug}`}
                    onClick={(e) => { e.preventDefault(); go(`/libro/${b.slug}`); }}
                  >
                    <BookCover title={b.title} year={b.year} color={b.cover} image={b.image} publisher={b.publisher} />
                    <div className="book-card-info">
                      <div className="book-card-year">{b.year} · {b.publisher}</div>
                      <div className="book-card-title">{b.title}</div>
                      <div className="book-card-tag">{b.genre}</div>
                    </div>
                  </a>
                );
              })}
              <div style={{ flex: '0 0 1px' }}></div>
            </div>
          </section>
        );
      })}

      {(() => {
        const total = BOOKS
          .filter((b) => (filter === 'all' ? true : b.group === filter))
          .filter((b) => {
            if (!q) return true;
            return (
              (b.title || '').toLowerCase().includes(q) ||
              String(b.year || '').includes(q) ||
              (b.publisher || '').toLowerCase().includes(q) ||
              (b.genre || '').toLowerCase().includes(q)
            );
          }).length;
        if (total > 0) return null;
        return (
          <section className="section" data-screen-label="03 Literatura · Sin resultados">
            <div className="container">
              <p className="lead" style={{ fontStyle: 'normal' }}>
                {T('No hay libros que coincidan con tu búsqueda.','No books match your search.','Δεν βρέθηκαν βιβλία.','Brak wyników.')}
              </p>
            </div>
          </section>
        );
      })()}
    </>
  );
}

// ─── CINE · galería estilo Literatura ───────────────────────────
function FilmThumb({ f, lang }) {
  const { go } = useRoute();
  const T = useT();
  return (
    <a
      className="film-card reveal"
      href={`/cine/${f.slug}`}
      onClick={(e) => { e.preventDefault(); go(`/cine/${f.slug}`); }}
    >
      <div className="film-card-poster">
        <img src={f.poster} alt={`${T('Póster de','Poster of','Αφίσα','Plakat')} ${f.title}`} loading="lazy" />
      </div>
      <div className="film-card-info">
        <div className="film-card-meta">{f.year} · {f.kind}</div>
        <div className="film-card-title">{f.title}</div>
        <div className="film-card-tag">{f.role}</div>
      </div>
    </a>
  );
}

function CinePage() {
  const { go } = useRoute();
  const T = useT();
  const { lang } = useLang();

  const [query, setQuery] = useState('');
  const [filter, setFilter] = useState('all'); // all | pelicula | serie | documental

  useEffect(() => {
    const id = requestAnimationFrame(() => {
      document.querySelectorAll('.shelf-chapter .reveal:not(.in), .shelf-chapter .reveal-soft:not(.in)')
        .forEach((el) => el.classList.add('in'));
    });
    return () => cancelAnimationFrame(id);
  }, [query, filter]);

  const groupTitle = (g) => {
    if (lang === 'es') return g.title;
    if (lang === 'en') return g.id === 'pelicula' ? 'Films' : g.id === 'serie' ? 'Series' : 'Documentaries';
    if (lang === 'el') return g.id === 'pelicula' ? 'Ταινίες' : g.id === 'serie' ? 'Σειρές' : 'Ντοκιμαντέρ';
    if (lang === 'pl') return g.id === 'pelicula' ? 'Filmy' : g.id === 'serie' ? 'Seriale' : 'Dokumenty';
    return g.title;
  };
  const groupMeta = (g) => {
    if (lang === 'es') return g.meta;
    if (lang === 'en') return g.id === 'pelicula' ? 'Adaptations of his work' : g.id === 'serie' ? 'As screenwriter' : 'Screenwriting and appearances';
    if (lang === 'el') return g.id === 'pelicula' ? 'Διασκευές του έργου του' : g.id === 'serie' ? 'Ως σεναριογράφος' : 'Σενάριο και συμμετοχή';
    if (lang === 'pl') return g.id === 'pelicula' ? 'Adaptacje jego dzieł' : g.id === 'serie' ? 'Jako scenarzysta' : 'Scenariusz i udział';
    return g.meta;
  };
  const groupDesc = (g) => {
    if (lang !== 'en') return g.desc;
    if (g.id === 'pelicula') return 'Two feature films adapted from his novels. Pudor in Spain and La pena máxima in Peru.';
    if (g.id === 'serie') return 'Original series he has co-written. A medical thriller from Brazil and a Mexican crime story based on the novel by Bernardo Esquinca.';
    return 'Muxes, on the third gender recognized by the Zapotec community, written by him for HBO Max. And Latin Noir, on Latin American crime fiction, where he takes part as an interviewed author.';
  };

  const filters = [
    { id: 'all',         label: T('Todos','All','Όλα','Wszystkie') },
    { id: 'pelicula',    label: T('Películas','Films','Ταινίες','Filmy') },
    { id: 'serie',       label: T('Series','Series','Σειρές','Seriale') },
    { id: 'documental',  label: T('Documentales','Documentaries','Ντοκιμαντέρ','Dokumenty') },
  ];

  const q = query.trim().toLowerCase();

  return (
    <>
      <section className="cine-hero page-hero" data-screen-label="03 Obra · Cine · Hero">
        <div className="container">
          <div className="rule-h reveal-soft in"><span className="num">03 · II</span> {T('Las pantallas','Screens','Οθόνες','Ekrany')}</div>
          <h1 className="display-xl reveal-soft in" style={{ maxWidth: '20ch' }}>
            {T('Cine, series','Film, series','Σινεμά, σειρές','Film, seriale')},<br />
            <em style={{ fontWeight: 400 }}>{T('y documentales.','and documentaries.','και ντοκιμαντέρ.','i dokumenty.')}</em>
          </h1>
        </div>
      </section>

      {/* Toolbar: buscador + filtros */}
      <section style={{ padding: 'clamp(28px, 4vw, 56px) 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}
        data-screen-label="03 Cine · Toolbar">
        <div className="container">
          <div className="lit-toolbar reveal">
            <div className="lit-search">
              <span className="lit-search-icon" aria-hidden="true">⌕</span>
              <input
                type="search"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder={T('Buscar por título, año o tipo…','Search by title, year or type…','Αναζήτηση…','Szukaj…')}
                aria-label={T('Buscar película','Search film','Αναζήτηση ταινίας','Szukaj filmu')}
              />
              {query && (
                <button type="button" className="lit-search-clear" aria-label={T('Borrar búsqueda','Clear search','Καθαρισμός','Wyczyść')} onClick={() => setQuery('')}>×</button>
              )}
            </div>
            <div className="lit-filters" role="tablist" aria-label={T('Filtrar','Filter','Φίλτρο','Filtruj')}>
              {filters.map((f) => (
                <button
                  key={f.id}
                  type="button"
                  role="tab"
                  aria-selected={filter === f.id}
                  className={`lit-filter ${filter === f.id ? 'on' : ''}`}
                  onClick={() => setFilter(f.id)}
                >
                  {f.label}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Rails por categoría */}
      {FILM_GROUPS.map((g) => {
        if (filter !== 'all' && filter !== g.id) return null;
        const items = FILMS
          .filter((f) => f.type === g.id)
          .filter((f) => {
            if (!q) return true;
            return (
              (f.title || '').toLowerCase().includes(q) ||
              String(f.year || '').includes(q) ||
              (f.kind || '').toLowerCase().includes(q) ||
              (f.role || '').toLowerCase().includes(q)
            );
          })
          .sort((a, b) => b.year - a.year);
        if (!items.length) return null;
        return (
          <section key={g.id} className="shelf-chapter" data-screen-label={`03 Cine · ${g.title}`}>
            <div className="container">
              <div className="shelf-header reveal">
                <div className="shelf-num">{g.num}</div>
                <h2 className="shelf-title serif">{groupTitle(g)}</h2>
                <div className="shelf-meta">{groupMeta(g)}</div>
              </div>
              <p className="shelf-desc reveal" style={{ '--delay': '0.1s' }}>{groupDesc(g)}</p>
            </div>
            <div className="shelf-rail">
              {items.map((f, i) => (
                <FilmThumb key={f.slug} f={f} lang={lang} />
              ))}
              <div style={{ flex: '0 0 1px' }}></div>
            </div>
          </section>
        );
      })}

      {/* Sin resultados */}
      {(() => {
        const total = FILMS
          .filter((f) => (filter === 'all' ? true : f.type === filter))
          .filter((f) => {
            if (!q) return true;
            return (
              (f.title || '').toLowerCase().includes(q) ||
              String(f.year || '').includes(q) ||
              (f.kind || '').toLowerCase().includes(q) ||
              (f.role || '').toLowerCase().includes(q)
            );
          }).length;
        if (total > 0) return null;
        return (
          <section className="section" data-screen-label="03 Cine · Sin resultados">
            <div className="container">
              <p className="lead" style={{ fontStyle: 'normal' }}>
                {T('No hay títulos que coincidan con tu búsqueda.','No titles match your search.','Δεν βρέθηκαν τίτλοι.','Brak wyników.')}
              </p>
            </div>
          </section>
        );
      })()}
    </>
  );
}

// ─── CINE · ficha individual ────────────────────────────────────
function CineDetailPage({ slug }) {
  const { go } = useRoute();
  const T = useT();
  const f = FILMS.find((x) => x.slug === slug);
  const isAdapt = f && f.block === 'adaptaciones';
  const [hasPoster, setHasPoster] = useState(true);
  if (!f) return <NotFoundPage />;

  return (
    <section className="section book-detail" data-screen-label={`Cine · ${f.title}`}>
      <div className="container">
        <a href="/obra/cine" onClick={(e) => { e.preventDefault(); go('/obra/cine'); }}
          className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-mute)', display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 40 }}>
          ← {T('Volver a la filmografía','Back to filmography','Πίσω στη φιλμογραφία','Powrót do filmografii')}
        </a>

        <div className={`film-feature-grid ${!hasPoster ? 'no-poster' : ''}`}>
          {hasPoster && (
            <div className="film-feature-poster reveal-soft in float-in">
              <img src={f.poster} alt={`${T('Póster de','Poster of','Αφίσα','Plakat')} ${f.title}`}
                   onError={() => setHasPoster(false)} />
            </div>
          )}
          <div className="reveal-soft in" style={{ '--delay': '0.15s' }}>
            <div className="eyebrow">{f.kind} · {f.year}</div>
            <h1 className="display-xl" style={{ marginTop: 18 }}>{f.title}</h1>
            <p className="lead" style={{ marginTop: 28, fontStyle: 'normal' }}>{f.desc}</p>

            <div className="film-meta-table">
              {f.director && f.director !== '—' && <div className="row"><div className="lbl">{T('Dirección','Director','Σκηνοθεσία','Reżyseria')}</div><div className="val">{f.director}</div></div>}
              {f.screenplay && <div className="row"><div className="lbl">{T('Guion','Screenplay','Σενάριο','Scenariusz')}</div><div className="val">{f.screenplay}</div></div>}
              {f.cast && f.cast !== '—' && <div className="row"><div className="lbl">{T('Reparto','Cast','Διανομή','Obsada')}</div><div className="val">{f.cast}</div></div>}
              {f.production && <div className="row"><div className="lbl">{T('Productora','Production','Παραγωγή','Produkcja')}</div><div className="val">{f.production}</div></div>}
              {f.country && <div className="row"><div className="lbl">{T('País','Country','Χώρα','Kraj')}</div><div className="val">{f.country}</div></div>}
              {f.duration && <div className="row"><div className="lbl">{T('Formato','Format','Μορφή','Format')}</div><div className="val">{f.duration}</div></div>}
              {f.awards && <div className="row"><div className="lbl">{T('Reconocimiento','Recognition','Διάκριση','Wyróżnienie')}</div><div className="val">{f.awards}</div></div>}
            </div>

            <div className="buy-row" style={{ marginTop: 36 }}>
              {f.trailer && (
                <a href={f.trailer} className="btn btn-solid" target="_blank" rel="noopener noreferrer">
                  {f.trailerLabel === 'video'
                    ? T('Ver en YouTube','Watch on YouTube','Δείτε στο YouTube','Zobacz na YouTube')
                    : T('Ver tráiler','Watch trailer','Δείτε το τρέιλερ','Zobacz zwiastun')} <span className="btn-arrow">→</span>
                </a>
              )}
              {isAdapt && (
                <a href={`/libro/${f.slug}`} onClick={(e) => { e.preventDefault(); go(`/libro/${f.slug}`); }} className="btn">
                  {T('Ver novela original','See the original novel','Δείτε το πρωτότυπο μυθιστόρημα','Zobacz oryginalną powieść')} <span className="btn-arrow">→</span>
                </a>
              )}
            </div>
          </div>
        </div>

        {/* Otras de cine */}
        <div className="reveal" style={{ marginTop: 'clamp(80px, 10vw, 120px)' }}>
          <div className="rule-h"><span className="num">II</span> {T('Otros títulos','Other titles','Άλλοι τίτλοι','Inne tytuły')}</div>
          <div className="shelf-rail flush">
            {FILMS.filter((x) => x.slug !== f.slug).slice(0, 6).map((x) => (
              <FilmThumb key={x.slug} f={x} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── TEATRO ─────────────────────────────────────────────────────
function PlayCard({ p, idx }) {
  const T = useT();
  const [playing, setPlaying] = useState(false);
  return (
    <section className="section film-feature" data-screen-label={`03 Teatro · ${p.title}`}>
      <div className="container">
        <div className="rule-h reveal">
          <span className="num">{String(idx + 1).padStart(2, '0')}</span> {p.title}
        </div>
        <div className="film-feature-grid">
          {/* Ojo: la clase `in` la añade useReveal() por fuera de React. Al
              re-renderizar por el play, React reescribe className y se la lleva
              por delante, dejando el marco en opacidad 0 (se oía el vídeo pero
              no se veía). Al reproducir la fijamos nosotros. */}
          <div className={`film-feature-poster reveal-soft ${playing ? 'is-playing in' : 'float-in'} ${p.imageFull ? 'is-full' : ''}`} style={{ '--delay': '0.1s' }}>
            {p.video && playing ? (
              <video
                src={p.video}
                poster={p.image}
                width={p.videoW}
                height={p.videoH}
                controls
                autoPlay
                playsInline
                onEnded={() => setPlaying(false)}
              />
            ) : (
              <>
                <img src={p.image} alt={`${T('Imagen de','Image of','Εικόνα','Obraz')} ${p.title}`} width={p.imageW} height={p.imageH} loading="lazy" />
                {p.video && (
                  <button
                    type="button"
                    className="play-overlay"
                    aria-label={`${T('Ver el vídeo de','Watch the video of','Δείτε το βίντεο','Zobacz wideo')} ${p.title}`}
                    onClick={() => setPlaying(true)}
                  >
                    <span className="play-overlay-icon" aria-hidden="true"></span>
                    <span className="play-overlay-label mono">
                      {T('Ver el vídeo','Watch the video','Δείτε το βίντεο','Zobacz wideo')}
                      {p.videoLength ? ` · ${p.videoLength}` : ''}
                    </span>
                  </button>
                )}
              </>
            )}
          </div>
          <div className="film-feature-text reveal" style={{ '--delay': '0.15s' }}>
            <div className="eyebrow">{p.kind} · {p.year}</div>
            <h2 className="display-l" style={{ marginTop: 14 }}>
              {p.title}
              {p.subtitle && <span style={{ display:'block', fontSize:'0.55em', fontStyle:'italic', color:'var(--ink-mute)', marginTop: 6 }}>{p.subtitle}</span>}
            </h2>
            <p className="lead" style={{ marginTop: 22, fontStyle: 'normal', maxWidth: '46ch' }}>{p.desc}</p>

            <div className="film-meta-table">
              {p.director && <div className="row"><div className="lbl">{T('Dirección','Director','Σκηνοθεσία','Reżyseria')}</div><div className="val">{p.director}</div></div>}
              {p.musicDirector && <div className="row"><div className="lbl">{T('Dirección musical','Musical direction','Μουσική διεύθυνση','Kierownictwo muzyczne')}</div><div className="val">{p.musicDirector}</div></div>}
              {p.translation && <div className="row"><div className="lbl">{T('Traducción','Translation','Μετάφραση','Tłumaczenie')}</div><div className="val">{p.translation}</div></div>}
              {p.cast && <div className="row"><div className="lbl">{T('Reparto','Cast','Διανομή','Obsada')}</div><div className="val">{p.cast}</div></div>}
              {p.place && <div className="row"><div className="lbl">{T('Lugar','Venue','Χώρος','Miejsce')}</div><div className="val">{p.place}</div></div>}
              {p.country && <div className="row"><div className="lbl">{T('País','Country','Χώρα','Kraj')}</div><div className="val">{p.country}</div></div>}
              {p.premiere && <div className="row"><div className="lbl">{T('Estreno','Premiere','Πρεμιέρα','Premiera')}</div><div className="val">{p.premiere}</div></div>}
            </div>

            {p.link && (
              <div className="buy-row" style={{ marginTop: 36 }}>
                <a href={p.link} className="btn btn-solid" target="_blank" rel="noopener noreferrer">
                  {T('Ve la obra aquí','Watch the play here','Δείτε την παράσταση εδώ','Zobacz spektakl tutaj')} <span className="btn-arrow">→</span>
                </a>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function TeatroPage() {
  const T = useT();
  const autoria   = PLAYS.filter((p) => p.block === 'autor');
  const adapta    = PLAYS.filter((p) => p.block === 'adapta');
  const adaptado  = PLAYS.filter((p) => p.block === 'adaptado');

  const block = (label, items) => items.length > 0 && (
    <>
      <section>
        <div className="container">
          <div className="rule-h reveal block-rule"><span className="num">·</span> {label}</div>
        </div>
      </section>
      {items.map((p, i) => <PlayCard key={p.slug} p={p} idx={i} />)}
    </>
  );

  return (
    <>
      <section className="cine-hero page-hero" data-screen-label="03 Obra · Teatro · Hero">
        <div className="container">
          <div className="rule-h reveal-soft in"><span className="num">03 · III</span> {T('Teatro','Theatre','Θέατρο','Teatr')}</div>
          <h1 className="display-xl reveal-soft in" style={{ maxWidth: '22ch' }}>
            {T('Tres formas','Three ways','Τρεις τρόποι','Trzy sposoby')}<br />
            <em style={{ fontWeight: 400 }}>{T('de subir a escena.','of stepping on stage.','να ανέβει στη σκηνή.','wejścia na scenę.')}</em>
          </h1>
        </div>
      </section>

      {block(T('Como autor e intérprete','As author and performer','Ως συγγραφέας και ερμηνευτής','Jako autor i wykonawca'), autoria)}
      {block(T('Adaptación teatral firmada por él','Stage adaptation by him','Διασκευή από τον ίδιο','Adaptacja teatralna jego autorstwa'), adapta)}
      {block(T('Sus novelas, adaptadas al teatro','His novels, adapted for the stage','Τα μυθιστορήματά του, διασκευασμένα για θέατρο','Jego powieści, adaptowane na scenę'), adaptado)}
    </>
  );
}

// ─── LIBRO INDIVIDUAL ────────────────────────────────────────────
function LibroPage({ slug }) {
  const { go } = useRoute();
  const T = useT();
  const book = BOOKS.find((b) => b.slug === slug);
  if (!book) return <NotFoundPage />;
  const quotes = book.quotes || [];
  // Piezas de prensa etiquetadas con este libro. No se duplica nada:
  // la fuente única es PRESS y la ficha solo filtra por título.
  const press = PRESS.filter((x) => x.book === book.title);
  // Numeración correlativa según los bloques que existan de verdad.
  const ROMAN = ['I', 'II', 'III', 'IV'];
  let n = 0;
  const num = () => ROMAN[n++];

  return (
    <section className="section book-detail" data-screen-label={`Libro · ${book.title}`}>
      <div className="container">
        <a href="/obra/literatura" onClick={(e) => { e.preventDefault(); go('/obra/literatura'); }}
          className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-mute)', display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 40 }}>
          ← {T('Volver a la galería','Back to gallery','Πίσω στη γκαλερί','Powrót do galerii')}
        </a>

        <div className="book-hero">
          <div className="book-hero-cover reveal-soft in float-in">
            <BookCover title={book.title} year={book.year} color={book.cover} image={book.image} publisher={book.publisher} />
          </div>
          <div className="reveal-soft in" style={{ '--delay': '0.15s' }}>
            <div className="eyebrow">{book.genre} · {book.publisher} · {book.year}</div>
            <h1 className="display-xl" style={{ marginTop: 18 }}>{book.title}</h1>
            {book.upcoming && (
              <div className="mono" style={{ display: 'inline-block', marginTop: 16, padding: '6px 12px', border: '1px solid var(--accent-warm)', color: 'var(--accent-warm)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase' }}>{T('Nueva publicación','New release','Νέα κυκλοφορία','Nowa publikacja')}</div>
            )}
            {book.tag && (
              <div className="mono" style={{ display: 'inline-block', marginTop: 16, padding: '6px 12px', border: '1px solid var(--accent-warm)', color: 'var(--accent-warm)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase' }}>{book.tag}</div>
            )}
            <p className="lead" style={{ marginTop: 28, fontStyle: 'normal' }}>{book.blurb}</p>

            <div className="book-meta-table">
              <div className="row">
                <div className="lbl">{T('Editorial','Publisher','Εκδότης','Wydawnictwo')}</div>
                <div className="val">{book.publisher}</div>
              </div>
              <div className="row">
                <div className="lbl">{T('Año','Year','Έτος','Rok')}</div>
                <div className="val">{book.year}</div>
              </div>
              <div className="row">
                <div className="lbl">{T('Género','Genre','Είδος','Gatunek')}</div>
                <div className="val">{book.genre}</div>
              </div>
            </div>

            <BuyBlock slug={book.slug} />
          </div>
        </div>

        {quotes.length > 0 && (
          <div className="reveal" style={{ marginTop: 'clamp(80px, 10vw, 120px)' }}>
            <div className="rule-h"><span className="num">{num()}</span> {T('La crítica','Press','Κριτική','Prasa')}</div>
            <div className="press-quotes">
              {quotes.map((q, i) => (
                <div key={i} className="press-quote">
                  <div className="q">"{q.q}"</div>
                  <div className="src">— {q.src}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {press.length > 0 && (
          <div className="reveal" style={{ marginTop: 'clamp(80px, 10vw, 120px)' }}>
            <div className="rule-h"><span className="num">{num()}</span> {T('En los medios','In the media','Στα ΜΜΕ','W mediach')}</div>
            <div className="medios-grid">
              {press.map((x, i) => (
                <a
                  key={i}
                  href={x.url || '#'}
                  target={x.url ? '_blank' : undefined}
                  rel={x.url ? 'noopener noreferrer' : undefined}
                  className="medios-card"
                  style={{ '--delay': `${i * 0.05}s` }}
                >
                  <div className={`medios-card-media ${x.logo ? 'medios-logo-frame' : 'is-thumb'}`}>
                    {x.logo
                      ? <img src={x.logo} alt={x.src} className="press-logo" loading="lazy" />
                      : <img src={x.image} alt={x.title} loading="lazy" />}
                    <div className="medios-card-tag mono">
                      {x.kind === 'video'
                        ? T('▸ Ver','▸ Watch','▸ Δείτε','▸ Oglądaj')
                        : x.kind === 'radio'
                          ? T('◉ Escuchar','◉ Listen','◉ Ακούστε','◉ Słuchaj')
                          : T('↗ Leer','↗ Read','↗ Διαβάστε','↗ Czytaj')}
                    </div>
                  </div>
                  <div className="medios-card-body">
                    <div className="kind mono">{x.date}{x.author ? ` · ${x.author}` : ''}</div>
                    <h3 className="serif">{x.title}</h3>
                    <p className="body-s">{x.desc}</p>
                    <div className="src">{x.src} <span>↗</span></div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        )}

        <div className="reveal" style={{ marginTop: 'clamp(80px, 10vw, 120px)' }}>
          <div className="rule-h"><span className="num">{num()}</span> {T('Otros libros','Other books','Άλλα βιβλία','Inne książki')}</div>
          <div className="shelf-rail flush">
            {BOOKS.filter((b) => b.slug !== book.slug).slice(0, 6).map((b) => (
              <a
                key={b.slug}
                className="book-card"
                href={`/libro/${b.slug}`}
                onClick={(e) => { e.preventDefault(); go(`/libro/${b.slug}`); }}
              >
                <BookCover title={b.title} year={b.year} color={b.cover} image={b.image} publisher={b.publisher} />
                <div className="book-card-info">
                  <div className="book-card-year">{b.year}</div>
                  <div className="book-card-title">{b.title}</div>
                  <div className="book-card-tag">{b.genre}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ObraPage, LiteraturaPage, CinePage, CineDetailPage, TeatroPage, LibroPage });