// Homepage — public, editorial

// Maps a paper id to the artboard id of its public dossier, if one exists.
// Only papers with a real dossier surface should navigate; the rest stay
// visually present but inert until their dossiers are built.
const dossierNavFor = (id) => ({
  seyfried: "dossier",
  "barcaui-chatgpt": "dossier-barcaui",
}[id] || "");

const Homepage = () => {
  const { papers } = AOP_DATA;
  const featured = papers.find((p) => p.id === "barcaui-chatgpt") || papers[0];
  const recent = papers.filter((p) => p.id !== featured.id).slice(0, 4);

  // CTA wiring for the featured paper. dossierNavFor returns "" when the
  // paper has no public dossier; in that case we render a quiet status line
  // instead of an inert button. The short label uses the first author's
  // surname, matching the breadcrumb idiom in Dossier.jsx.
  const featuredDossierRoute = dossierNavFor(featured.id);
  const featuredShortName = featured.authors.split(/\s+and\s+|,|&/)[0].trim().split(/\s+/).pop();

  return (
    <div className="frame">
      <TopNav active="library" />

      {/* Masthead */}
      <section style={{ padding: "56px 40px 32px", borderBottom: "1px solid var(--rule)", maxWidth: 1180, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 56, alignItems: "end" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Issue 14 · April 2026 · 47 papers in the library</div>
            <h1 style={{ fontFamily: "var(--serif)", fontSize: 56, fontWeight: 500, letterSpacing: "-0.02em", lineHeight: 1.05, margin: "0 0 10px" }}>
              A public library of <em>deep questions</em> and reviewed answers about scientific papers.
            </h1>
            <div style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic", color: "var(--ink-2)", lineHeight: 1.35, margin: "0 0 18px", maxWidth: 620 }}>
              Claim audits for papers people are likely to overread.
            </div>
            <p style={{ fontSize: 18, color: "var(--ink-2)", maxWidth: 620, margin: 0 }}>
              We don't summarize. We interrogate. Each paper in the library is read closely and broken into the questions a careful reader would ask — about argument, evidence, assumptions, limitations, and lineage. Every answer is sourced, dated, and labeled with a confidence level.
            </p>
          </div>
          <div style={{ borderLeft: "1px solid var(--rule)", paddingLeft: 28, fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-3)", lineHeight: 1.8 }}>
            <div style={{ color: "var(--ink)", borderBottom: "1px solid var(--rule)", paddingBottom: 8, marginBottom: 10, fontWeight: 500, letterSpacing: ".1em", textTransform: "uppercase", fontSize: 10.5 }}>What we publish</div>
            <div>— No automated summaries.</div>
            <div>— No marketing copy.</div>
            <div>— No paywalls. No tracking.</div>
            <div>— Every answer is reviewed and signed.</div>
            <div>— Confidence is stated, not implied.</div>
          </div>
        </div>
      </section>

      <main style={{ maxWidth: 1180, margin: "0 auto", padding: "0 40px" }}>
        {/* Featured */}
        <section style={{ marginTop: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>§ Currently being interrogated</div>
          <div className="feature">
            <div>
              <div className="meta" style={{ marginBottom: 14 }}>
                {featured.field.toUpperCase()} · {featured.venue} · {featured.year}
              </div>
              <h2 style={{ fontFamily: "var(--serif)", fontSize: 38, fontWeight: 500, lineHeight: 1.1, letterSpacing: "-0.015em", margin: "0 0 12px" }}>
                {featured.title}
              </h2>
              <div style={{ fontFamily: "var(--serif)", fontSize: 16, fontStyle: "italic", color: "var(--ink-2)", marginBottom: 24 }}>
                {featured.authors}
              </div>
              <div style={{ display: "flex", gap: 6, marginBottom: 24, flexWrap: "wrap" }}>
                {featured.tags.map((t) => <Tag key={t}>{t}</Tag>)}
              </div>
              <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
                {featuredDossierRoute
                  ? <button className="btn" data-nav={featuredDossierRoute}>Open {featuredShortName} dossier →</button>
                  : <span className="meta" style={{ color: "var(--ink-3)" }}>Dossier not yet published</span>}
              </div>
            </div>
            <div>
              <div className="label" style={{ marginBottom: 10 }}>Editorial summary</div>
              <p className="dropcap" style={{ fontSize: 17, lineHeight: 1.6, margin: "0 0 20px", color: "var(--ink)" }}>
                {featured.summary}
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "8px 18px", fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-3)", paddingTop: 16, borderTop: "1px solid var(--rule)" }}>
                <div>Questions</div><div style={{ color: "var(--ink-2)" }}>{featured.qCounts.published} published · {featured.qCounts.draft} in draft</div>
                <div>Sources</div><div style={{ color: "var(--ink-2)" }}>14 cited works</div>
                <div>Last update</div><div style={{ color: "var(--ink-2)" }}>3 April 2026</div>
                <div>Editor</div><div style={{ color: "var(--ink-2)" }}>R. Asenova</div>
              </div>
            </div>
          </div>
        </section>

        {/* Recently revised */}
        <section style={{ marginTop: 64 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "1px solid var(--ink)", paddingBottom: 12, marginBottom: 8 }}>
            <h3 style={{ fontFamily: "var(--serif)", fontSize: 22, fontWeight: 500, margin: 0 }}>Recently revised</h3>
            <a href="#" className="meta" data-nav="index">Browse the full library →</a>
          </div>
          {recent.map((p) => {
            // Catalog-only papers (no public dossier yet) shouldn't read as
            // clickable rows or display stub qCounts as if they were live.
            const route = dossierNavFor(p.id);
            const isPublished = !!route;
            return (
              <article key={p.id} className="paper-row" style={{ cursor: isPublished ? "pointer" : "default" }} data-nav={route}>
                <div className="yr">{p.year}</div>
                <div>
                  <h3>{p.title}</h3>
                  <div className="auth">{p.authors}</div>
                  <div style={{ display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center" }}>
                    <span className="meta" style={{ color: "var(--ink-2)", marginRight: 6 }}>{p.field}</span>
                    {p.tags.slice(0, 3).map((t) => <Tag key={t}>{t}</Tag>)}
                  </div>
                </div>
                <div className="qcounts">
                  {isPublished ? (
                    <React.Fragment>
                      <div style={{ fontSize: 14, color: "var(--ink)", fontFamily: "var(--serif)", marginBottom: 4 }}>{p.qCounts.published} questions</div>
                      <div>updated {p.added}</div>
                    </React.Fragment>
                  ) : (
                    <div className="meta" style={{ color: "var(--ink-3)", fontStyle: "italic" }}>Not yet published</div>
                  )}
                </div>
              </article>
            );
          })}
        </section>

        {/* Methodology strip */}
        <section style={{ marginTop: 80, padding: "40px 0", borderTop: "4px double var(--ink)", borderBottom: "1px solid var(--ink)" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 56 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>§ The method, briefly</div>
              <h3 style={{ fontFamily: "var(--serif)", fontSize: 28, fontWeight: 500, margin: 0, letterSpacing: "-0.01em", lineHeight: 1.2 }}>
                What you can — and cannot — expect from a dossier.
              </h3>
            </div>
            <div style={{ fontSize: 16, lineHeight: 1.65, color: "var(--ink-2)", columnCount: 2, columnGap: 32 }}>
              <p style={{ margin: "0 0 14px" }}>Every paper passes through a fixed structure: seven question categories, from basic comprehension to applications and misuses. The questions are written before the answers; the answers are revised against sources that are listed in full.</p>
              <p style={{ margin: 0 }}>Confidence is graded on three levels and explicitly justified. When the paper does not, in fact, support a claim attributed to it, we say so under <em>What this paper does not show</em> — the most useful section, in our view.</p>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
};

window.Homepage = Homepage;