// NTOverviewPage — the canon on one screen. Twenty-seven book cards in
// canonical order, grouped Gospels → Apocalypse, each carrying the intro's
// reader one-liner ("What it is"), study count, verse coverage, and the
// verified early-church witness count from the trust ledger. The reader-facing
// bookshelf of the analytical translation; the coverage map stays the
// workbench lens of the same object.
(function () {

  const CSS = `
  .nto { max-width: 1060px; margin: 0 auto; padding: 26px 28px 90px; }
  .nto-top { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
  .nto-back { border:1px solid rgba(27,42,51,.18); background:#fff; border-radius:999px;
    padding:8px 16px; font:inherit; font-size:13.5px; cursor:pointer; }
  .nto-eyebrow { font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:#a33b2e; font-weight:700; margin-bottom:10px; }
  .nto h1 { font-family:'Playfair Display', Georgia, serif; font-size:clamp(34px, 9vw, 52px);
    line-height:1.04; margin:0 0 8px; color:#13232c; }
  .nto-lede { font-size:15.5px; color:#5a6b74; max-width:640px; line-height:1.6;
    margin:0 0 18px; }
  .nto-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; }
  .nto-pill { border:1px solid rgba(27,42,51,.14); background:#fdfbf5;
    border-radius:999px; padding:7px 14px; font-size:13px; color:#3c4c55; }
  .nto-group { margin-bottom:34px; }
  .nto-group-head { font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
    font-weight:700; color:#6d7b83; margin-bottom:12px; display:flex; align-items:center; gap:12px; }
  .nto-group-head::after { content:""; flex:1; height:1px; background:rgba(27,42,51,.1); }
  .nto-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(235px, 1fr)); gap:12px; }
  .nto-card { text-align:left; border:1px solid rgba(27,42,51,.12); background:#fff;
    border-radius:14px; padding:15px 16px 13px; cursor:pointer; font:inherit;
    display:flex; flex-direction:column; gap:7px; transition:box-shadow .15s, transform .15s; }
  .nto-card:hover { box-shadow:0 6px 22px rgba(19,35,44,.1); transform:translateY(-1px); }
  .nto-card:focus-visible { outline:2px solid #a33b2e; outline-offset:2px; }
  .nto-card .name { font-family:'Playfair Display', Georgia, serif; font-size:20px;
    color:#13232c; display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
  .nto-card .name .arrow { font-size:14px; color:#a33b2e; opacity:0; transition:opacity .15s; }
  .nto-card:hover .name .arrow { opacity:1; }
  .nto-card .oneliner { font-size:12.8px; line-height:1.5; color:#5a6b74;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .nto-card .stats { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:11.5px;
    color:#8a8375; margin-top:auto; padding-top:4px; }
  .nto-card .stats b { color:#3c4c55; font-weight:600; }
  @media (max-width: 640px) {
    .nto { padding:18px 14px 70px; }
    .nto h1 { font-size:38px; }
    .nto-grid { grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 430px) { .nto-grid { grid-template-columns:1fr; } }
  `;

  const fmt = (n) => (n == null ? '—' : n.toLocaleString('en-US'));

  function NTOverviewPage({ onClose, onOpenBook }) {
    const [st, setSt] = React.useState({ loading: true });
    React.useEffect(() => {
      let on = true;
      window.AmosAPI.testament()
        .then(d => on && setSt({ data: d }))
        .catch(e => on && setSt({ error: String(e) }));
      window.scrollTo(0, 0);
      return () => { on = false; };
    }, []);

    if (st.loading) return <div style={{ padding: '90px 0', textAlign: 'center', color: '#8a8375' }}>
      Opening the New Testament…</div>;
    if (st.error || !st.data) return <div style={{ padding: '60px', textAlign: 'center', color: '#8a8375' }}>
      <button onClick={onClose} style={{ marginBottom: 16, cursor: 'pointer', font: 'inherit' }}>← Back</button>
      <div>Could not load the overview — the content service isn’t reachable.</div></div>;

    const d = st.data;
    const t = d.totals || {};
    return <div className="nto">
      <style>{CSS}</style>
      <div className="nto-top">
        <button className="nto-back" onClick={onClose}>← Library</button>
      </div>
      <div className="nto-eyebrow">The Amos Project · Testament</div>
      <h1>The New Testament</h1>
      <p className="nto-lede">
        Amos&rsquo;s AI Analytical Translation, book by book. Every book opens into its
        own page and reads top to bottom in the plain tier; every pericope opens into
        its full apparatus — Greek text, word analysis, early-church reception,
        textual variants.
      </p>
      <div className="nto-pills">
        <span className="nto-pill">{t.books} books</span>
        <span className="nto-pill">{fmt(t.studies)} pericope analyses</span>
        <span className="nto-pill">{t.coverage_pct}% of verses covered</span>
        <span className="nto-pill">{fmt(t.witnesses)} verified early-church witnesses</span>
      </div>

      {d.groups.map(g => <div className="nto-group" key={g.group}>
        <div className="nto-group-head">{g.group}</div>
        <div className="nto-grid">
          {g.books.map(b => <button className="nto-card" key={b.abbr}
            onClick={() => onOpenBook && onOpenBook(b.abbr)}
            aria-label={'Open the ' + b.name + ' book page'}>
            <span className="name">{b.name}<span className="arrow">→</span></span>
            {b.what_it_is && <span className="oneliner">{b.what_it_is}</span>}
            <span className="stats">
              <span><b>{b.studies}</b> analyses</span>
              {b.coverage_pct != null && <span><b>{b.coverage_pct}%</b> covered</span>}
              {b.witnesses > 0 && <span><b>{b.witnesses}</b> witnesses</span>}
            </span>
          </button>)}
        </div>
      </div>)}
    </div>;
  }
  window.NTOverviewPage = NTOverviewPage;
})();