// desidium-journal.jsx — Journal index, Article page, Author page. Exported to window.
const { useEffect: useEffectJr } = React;

function authorById(id) { return AUTHORS.find((a) => a.id === id); }
function postsByAuthor(id) { return POSTS.filter((p) => p.author === id); }

/* ---------------- JOURNAL INDEX ---------------- */
function JournalIndex({ lang, motion, onPost, onAuthor }) {
  const j = I18N.journal;
  useEffectJr(() => { window.scrollTo(0, 0); }, []);
  const featured = POSTS.find((p) => p.feature) || POSTS[0];
  const rest = POSTS.filter((p) => p.id !== featured.id);

  return (
    <article className="jr">
      {/* HEADER */}
      <header className="jr-head">
        <div className="jr-kicker">{j.kicker[lang] || j.kicker.en}</div>
        <h1 className="jr-title">
          {L(j.title1, lang)} <em>{L(j.title2, lang)}</em>
        </h1>
        <p className="jr-sub">{L(j.sub, lang)}</p>
      </header>

      {/* FEATURED */}
      <Reveal motion={motion} className="jr-feat" as="section">
        <button className="jr-feat-media" onClick={() => onPost(featured.id)}>
          <Portrait caption={L(featured.cover, lang)} />
          <span className="jr-feat-badge">{L(j.featured, lang)}</span>
        </button>
        <div className="jr-feat-body">
          <div className="jr-meta">
            <span className="jr-cat">{L(featured.cat, lang)}</span>
            <span className="jr-dot">·</span>
            <span>{L(featured.date, lang)}</span>
            <span className="jr-dot">·</span>
            <span>{L(featured.read, lang)}</span>
          </div>
          <h2 className="jr-feat-title" onClick={() => onPost(featured.id)}>{L(featured.title, lang)}</h2>
          <p className="jr-feat-excerpt">{L(featured.excerpt, lang)}</p>
          <div className="jr-byline">
            <button className="jr-author-link" onClick={() => onAuthor(featured.author)}>
              {L(j.by, lang)} {authorById(featured.author).name}
            </button>
            <button className="jr-read" onClick={() => onPost(featured.id)}>{L(j.read, lang)} <span className="arr">→</span></button>
          </div>
        </div>
      </Reveal>

      {/* GRID */}
      <section className="jr-grid-wrap">
        <Reveal motion={motion} className="section-label jr-latest-label">{L(j.latest, lang)}</Reveal>
        <div className="jr-grid">
          {rest.map((p, i) => (
            <Reveal motion={motion} delay={(i % 3) * 70} className="jr-card" key={p.id} as="article">
              <button className="jr-card-media" onClick={() => onPost(p.id)}>
                <Portrait caption={L(p.cover, lang)} />
              </button>
              <div className="jr-card-body">
                <div className="jr-meta">
                  <span className="jr-cat">{L(p.cat, lang)}</span>
                  <span className="jr-dot">·</span>
                  <span>{L(p.read, lang)}</span>
                </div>
                <h3 className="jr-card-title" onClick={() => onPost(p.id)}>{L(p.title, lang)}</h3>
                <p className="jr-card-excerpt">{L(p.excerpt, lang)}</p>
                <button className="jr-author-link sm" onClick={() => onAuthor(p.author)}>
                  {L(j.by, lang)} {authorById(p.author).name}
                </button>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
    </article>
  );
}

/* ---------------- ARTICLE PAGE ---------------- */
function ArticlePage({ post, lang, motion, onBack, onPost, onAuthor }) {
  const j = I18N.journal;
  useEffectJr(() => { window.scrollTo(0, 0); }, [post.id]);
  const author = authorById(post.author);
  const idx = POSTS.findIndex((p) => p.id === post.id);
  const next = POSTS[(idx + 1) % POSTS.length];
  const body = post.body || [];
  const mid = Math.ceil(body.length / 2);

  return (
    <article className="ar">
      {/* HERO */}
      <section className="ar-hero">
        <Film label={L(post.cover, lang)} showPlay={false} time="" showScrub={false} className="ar-hero-film" />
        <button className="md-back ar-back" onClick={onBack}>← {L(j.back, lang)}</button>
        <div className="ar-hero-inner">
          <div className="ar-meta">
            <span className="ar-cat">{L(post.cat, lang)}</span>
            <span className="jr-dot">·</span>
            <span>{L(post.date, lang)}</span>
            <span className="jr-dot">·</span>
            <span>{L(post.read, lang)}</span>
          </div>
          <h1 className="ar-title">{L(post.title, lang)}</h1>
          <button className="ar-byline" onClick={() => onAuthor(author.id)}>
            <span className="ar-byline-av"><Portrait caption="" /></span>
            <span className="ar-byline-text">
              <span className="ar-byline-by">{L(j.by, lang)}</span>
              <span className="ar-byline-name">{author.name}</span>
              <span className="ar-byline-role">{L(author.role, lang)}</span>
            </span>
          </button>
        </div>
      </section>

      {/* BODY */}
      <section className="ar-body">
        <div className="ar-lead">{L(post.excerpt, lang)}</div>
        <div className="ar-prose">
          {body.slice(0, mid).map((p, i) => (
            <Reveal as="p" motion={motion} key={"a" + i}>{L(p, lang)}</Reveal>
          ))}
          {post.pull && (
            <Reveal as="blockquote" motion={motion} className="ar-pull">{L(post.pull, lang)}</Reveal>
          )}
          {body.slice(mid).map((p, i) => (
            <Reveal as="p" motion={motion} key={"b" + i}>{L(p, lang)}</Reveal>
          ))}
        </div>

        {/* AUTHOR CARD */}
        <div className="ar-authorcard">
          <div className="ar-ac-label section-label">{L(j.aboutAuthor, lang)}</div>
          <div className="ar-ac-inner">
            <button className="ar-ac-photo" onClick={() => onAuthor(author.id)}>
              <Portrait caption={L(author.photo, lang)} />
            </button>
            <div className="ar-ac-text">
              <h4 className="ar-ac-name">{author.name}</h4>
              <div className="ar-ac-role">{L(author.role, lang)}</div>
              <p className="ar-ac-bio">{L(author.bio, lang)}</p>
              <button className="jr-read" onClick={() => onAuthor(author.id)}>{L(j.authorWrites, lang)} {author.name} <span className="arr">→</span></button>
            </div>
          </div>
        </div>
      </section>

      {/* NEXT */}
      <section className="ar-next" onClick={() => onPost(next.id)}>
        <div className="ar-next-label section-label">{L(j.nextRead, lang)}</div>
        <div className="ar-next-row">
          <div className="ar-next-media"><Portrait caption={L(next.cover, lang)} /></div>
          <div className="ar-next-body">
            <div className="jr-meta"><span className="jr-cat">{L(next.cat, lang)}</span><span className="jr-dot">·</span><span>{L(next.read, lang)}</span></div>
            <h3 className="ar-next-title">{L(next.title, lang)}</h3>
            <span className="jr-read">{L(j.read, lang)} <span className="arr">→</span></span>
          </div>
        </div>
      </section>
    </article>
  );
}

/* ---------------- AUTHOR PAGE ---------------- */
function AuthorPage({ author, lang, motion, onBack, onPost }) {
  const j = I18N.journal;
  useEffectJr(() => { window.scrollTo(0, 0); }, [author.id]);
  const posts = postsByAuthor(author.id);
  const countLabel = posts.length === 1 ? L(j.piece, lang) : L(j.pieces, lang);

  return (
    <article className="au">
      <section className="au-hero">
        <button className="md-back au-back" onClick={onBack}>← {L(j.authorBack, lang)}</button>
        <div className="au-hero-grid">
          <Reveal motion={motion} className="au-photo">
            <Portrait caption={L(author.photo, lang)} />
          </Reveal>
          <div className="au-intro">
            <div className="au-role section-label">{L(j.authorRole, lang)}</div>
            <h1 className="au-name">{author.name}</h1>
            <div className="au-title">{L(author.role, lang)}</div>
            <p className="au-bio">{L(author.bio, lang)}</p>
            <dl className="au-facts">
              <div className="au-fact">
                <dt>{L(j.authorFocus, lang)}</dt>
                <dd>{L(author.focus, lang)}</dd>
              </div>
              <div className="au-fact">
                <dt>{L(j.authorWrites, lang)}</dt>
                <dd>{posts.length} {countLabel}</dd>
              </div>
            </dl>
          </div>
        </div>
      </section>

      <section className="au-posts">
        <Reveal motion={motion} className="section-label au-posts-label">{L(j.authorWrites, lang)} {author.name}</Reveal>
        <div className="au-post-list">
          {posts.map((p, i) => (
            <Reveal motion={motion} delay={i * 60} className="au-post" key={p.id} as="article">
              <button className="au-post-media" onClick={() => onPost(p.id)}>
                <Portrait caption={L(p.cover, lang)} />
              </button>
              <div className="au-post-body">
                <div className="jr-meta">
                  <span className="jr-cat">{L(p.cat, lang)}</span>
                  <span className="jr-dot">·</span>
                  <span>{L(p.date, lang)}</span>
                  <span className="jr-dot">·</span>
                  <span>{L(p.read, lang)}</span>
                </div>
                <h3 className="au-post-title" onClick={() => onPost(p.id)}>{L(p.title, lang)}</h3>
                <p className="au-post-excerpt">{L(p.excerpt, lang)}</p>
                <button className="jr-read" onClick={() => onPost(p.id)}>{L(j.read, lang)} <span className="arr">→</span></button>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
    </article>
  );
}

Object.assign(window, { JournalIndex, ArticlePage, AuthorPage });