// pages-misc.jsx — Crítica (Prensa), Contacto

// ─── CRÍTICA ──────────────────────────────────────────────────────
function MediosPage() {
  const T = useT();

  const featured = PRESS[0];
  const grid = PRESS.slice(1);

  const kindLabel = (k) =>
    k === 'video' ? T('Vídeo','Video','Βίντεο','Wideo')
    : k === 'radio' ? T('Audio · Podcast','Audio · Podcast','Audio · Podcast','Audio · Podcast')
    : T('Artículo','Article','Άρθρο','Artykuł');
  const kindTag = (k) =>
    k === 'video' ? T('▸ Ver','▸ Watch','▸ Δείτε','▸ Oglądaj')
    : k === 'radio' ? T('◉ Escuchar','◉ Listen','◉ Ακούστε','◉ Słuchaj')
    : T('↗ Leer','↗ Read','↗ Διαβάστε','↗ Czytaj');

  return (
    <>
      <section className="section page-hero" data-screen-label="04 Crítica · Hero">
        <div className="container">
          <div className="rule-h reveal-soft in"><span className="num">04</span> {T('Crítica','Press','Κριτική','Prasa')}</div>
          <h1 className="display-xl reveal-soft in" style={{ maxWidth: '20ch' }}>
            {T('Lo que dice','What the','Τι λέει','Co mówi')}<br /><em style={{ fontWeight: 400 }}>{T('la crítica.','press says.','η κριτική.','prasa.')}</em>
          </h1>
        </div>
      </section>

      {featured && (
        <section data-screen-label="04 Medios · Destacado">
          <div className="container">
            <a
              className="medios-featured reveal"
              href={featured.url || '#'}
              target={featured.url ? '_blank' : undefined}
              rel={featured.url ? 'noopener noreferrer' : undefined}
            >
              <div className={`medios-featured-media ${featured.logo ? 'medios-logo-frame' : 'is-thumb'}`}>
                {featured.logo ? (
                  <img src={featured.logo} alt={featured.src} className="press-logo press-logo-lg" loading="lazy" />
                ) : (
                  <img src={featured.image} alt={featured.title} loading="lazy" />
                )}
                <div className="medios-featured-tag mono">{kindTag(featured.kind)}</div>
              </div>
              <div className="medios-featured-text">
                <div className="eyebrow">
                  {kindLabel(featured.kind)} · {featured.src} · {featured.date}
                  {featured.author ? ` · ${featured.author}` : ''}
                  {featured.duration ? ` · ${featured.duration}` : ''}
                </div>
                <h2 className="display-l serif" style={{ marginTop: 16 }}>{featured.title}</h2>
                {featured.book && (
                  <div className="eyebrow" style={{ marginTop: 12, color: 'var(--accent-warm)' }}>{T('Sobre','On','Σχετικά με','O')} · {featured.book}</div>
                )}
                <p className="body-l desc-full" style={{ marginTop: 18, maxWidth: '50ch' }}>{featured.desc}</p>
                {featured.descShort && (
                  <p className="body-l desc-short" style={{ marginTop: 18, maxWidth: '50ch' }}>{featured.descShort}</p>
                )}
                <div className="medios-featured-cta">{T('Ver','Open','Άνοιγμα','Otwórz')} <span>↗</span></div>
              </div>
            </a>
          </div>
        </section>
      )}

      <section style={{ paddingBottom: 'clamp(80px, 10vw, 120px)', paddingTop: 'clamp(60px, 8vw, 100px)' }} data-screen-label="04 Medios · Grid">
        <div className="container">
          <div className="medios-grid">
            {grid.map((p, i) => (
              <a
                key={i}
                href={p.url || '#'}
                target={p.url ? '_blank' : undefined}
                rel={p.url ? 'noopener noreferrer' : undefined}
                className="medios-card reveal"
                style={{ '--delay': `${(i % 8) * 0.05}s` }}
              >
                <div className={`medios-card-media ${p.logo ? 'medios-logo-frame' : 'is-thumb'}`}>
                  {p.logo ? (
                    <img src={p.logo} alt={p.src} className="press-logo" loading="lazy" />
                  ) : (
                    <img src={p.image} alt={p.title} loading="lazy" />
                  )}
                  <div className="medios-card-tag mono">{kindTag(p.kind)}</div>
                </div>
                <div className="medios-card-body">
                  <div className="kind mono">{p.date}{p.author ? ` · ${p.author}` : ''}</div>
                  <h3 className="serif">{p.title}</h3>
                  {p.book && <div className="eyebrow" style={{ marginTop: -6, marginBottom: 12, color: 'var(--accent-warm)' }}>{T('Sobre','On','Σχετικά με','O')} · {p.book}</div>}
                  <p className="body-s">{p.desc}</p>
                  <div className="src">{p.src} <span>↗</span></div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

// ─── CONTACTO ────────────────────────────────────────────────────
function ContactoPage() {
  const T = useT();
  return (
    <section className="contact-page" data-screen-label="05 Contacto">
      <div className="container">
        <div className="rule-h reveal-soft in"><span className="num">05</span> {T('Contacto','Contact','Επικοινωνία','Kontakt')}</div>
        <h1 className="display-xl reveal-soft in" style={{ maxWidth: '16ch', marginBottom: 80 }}>
          {T('Escríbele.','Write to him.','Γράψτε του.','Napisz do niego.')}
        </h1>

        <div className="contact-grid contact-grid-single">
          <div className="contact-block reveal" style={{ '--delay': '0.1s' }}>
            <div className="label">{T('Agencia literaria','Literary agency','Λογοτεχνικό πρακτορείο','Agencja literacka')}</div>
            <a href={`mailto:${AGENCY.email}`} className="email serif">
              {AGENCY.email}
            </a>
            <p className="body-m">
              <strong>{AGENCY.name}</strong>
              <br />
              {T(
                'Derechos, traducciones, adaptaciones, conferencias y prensa.',
                'Rights, translations, adaptations, lectures and press.',
                'Δικαιώματα, μεταφράσεις, διασκευές, διαλέξεις και Τύπος.',
                'Prawa, tłumaczenia, adaptacje, wykłady i prasa.'
              )}
            </p>
          </div>
        </div>

        <div style={{ marginTop: 'clamp(80px, 10vw, 120px)' }} className="reveal">
          <div className="rule-h"><span className="num">II</span> {T('Redes sociales','Social media','Κοινωνικά δίκτυα','Media społecznościowe')}</div>
          <div className="contact-social-list">
            {[
              { name: 'Instagram',    handle: '@santiago_roncagliolo', url: SOCIAL.instagram },
              { name: 'Twitter / X',  handle: '@twitroncagliolo',      url: SOCIAL.twitter },
              { name: 'Facebook',     handle: 'Santiago Roncagliolo',  url: SOCIAL.facebook },
            ].map((s) => (
              <a key={s.name} href={s.url} target="_blank" rel="noopener noreferrer" className="contact-social-row serif">
                <span>{s.name}</span>
                <span className="handle">{s.handle} →</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MediosPage, ContactoPage });