// Chapters list + Chapter Detail (uses real chapter content from data.jsx)

function ChaptersIndex() {
  return (
    <Page>
      <section className="page-hero">
        <div className="container">
          <div className="back-link mono">Curriculum</div>
          <h1><em>{CHAPTERS_PAGE.hero.headline}</em></h1>
          <p>{CHAPTERS_PAGE.hero.subheadline}</p>
        </div>
      </section>
      <div className="container">
        <p style={{ maxWidth: "62ch", color: "var(--ink-2)", fontSize: 17, lineHeight: 1.65, padding: "8px 0 32px" }}>
          {CHAPTERS_PAGE.intro}
        </p>
        <div className="chapters">
          {CHAPTERS.map((c) => (
            <Link key={c.n} to={"/chapters/" + c.n} className="chapter-row">
              <span className="ch-n">CH · {String(c.n).padStart(2, "0")}</span>
              <span className="ch-title">{c.title}</span>
              <span className="ch-sum">{c.summary}</span>
              <span className="ch-cta">View chapter <span className="arrow">→</span></span>
            </Link>
          ))}
        </div>
      </div>
    </Page>
  );
}

const CHAPTER_SECTIONS = [
  { id: "essay", num: "01", h: "Opening essay", essay: true },
  { id: "takeaways", num: "02", h: "What founders should take from this", list: true },
  { id: "actions", num: "03", h: "Actions for this week", list: true },
];

function ChapterDetail({ n }) {
  const num = parseInt(n, 10);
  const chapter = chapterByN(num);
  if (!chapter) return <NotFound />;
  const next = chapterByN(num + 1) || CHAPTERS[0];

  const relatedLessons = chapter.relatedLessonSlugs.map(lessonBySlug).filter(Boolean);
  const relatedResources = relatedLessons
    .map((l) => resourceBySlug(l.resource))
    .filter((r, i, arr) => r && arr.findIndex((x) => x && x.slug === r.slug) === i);

  return (
    <Page>
      <section className="chapter-hero">
        <div className="container">
          <Link to="/chapters" className="back-link">← All chapters</Link>
          <div className="chapter-hero-eyebrow">
            <span className="mono">Chapter {String(chapter.n).padStart(2, "0")} of {CHAPTERS.length}</span>
            <span style={{ width: 24, height: 1, background: "var(--rule-2)" }} />
            <span className="mono">{chapter.essay.length} min read</span>
          </div>
          <h1>{chapter.title}</h1>
          <p className="chapter-hero-intro">{chapter.headline}</p>
        </div>
      </section>

      <div className="container">
        <div className="chapter-body">
          <aside className="chapter-toc">
            <div className="toc-h">In this chapter</div>
            {CHAPTER_SECTIONS.map((s) => (
              <a key={s.id} href={"#" + s.id} className="toc-link">{s.h}</a>
            ))}
            {relatedLessons.length > 0 && <a href="#lessons" className="toc-link">Related lessons</a>}
            <a href="#quote" className="toc-link">Quote</a>
          </aside>

          <div>
            {CHAPTER_SECTIONS.map((s) => (
              <section key={s.id} id={s.id} className="chapter-sec">
                <h2><span className="num">{s.num}</span>{s.h}</h2>
                <div className="body">
                  {s.essay ? (
                    chapter[s.id].map((p, i) => <p key={i} className={i === 0 ? "dropcap" : ""}>{p}</p>)
                  ) : s.list ? (
                    <ul>{chapter[s.id].map((x, i) => <li key={i}>{x}</li>)}</ul>
                  ) : (
                    <p>{chapter[s.id]}</p>
                  )}
                </div>
              </section>
            ))}

            {/* Related lessons */}
            {relatedLessons.length > 0 && (
              <section id="lessons" style={{ paddingTop: 48, borderTop: "1px solid var(--rule)", marginTop: 24 }}>
                <div className="eyebrow mono">Related lessons</div>
                <h3 style={{ fontFamily: "var(--serif)", fontSize: 28, letterSpacing: "-0.01em", margin: "0 0 24px", fontWeight: 500 }}>
                  Read these alongside the chapter.
                </h3>
                <div className="lessons-grid">
                  {relatedLessons.map((l) => <LessonCard key={l.slug} lesson={l} />)}
                </div>

                {relatedResources.length > 0 && (
                  <>
                    <div className="mono" style={{ marginTop: 32, marginBottom: 12 }}>Worksheets for this chapter</div>
                    <div className="resources-grid" style={{ gridTemplateColumns: relatedResources.length === 1 ? "1fr" : "repeat(auto-fit, minmax(280px, 1fr))" }}>
                      {relatedResources.map((r) => <ResourceCard key={r.slug} resource={r} />)}
                    </div>
                  </>
                )}
              </section>
            )}

            {/* Anonymous quote slot */}
            <section id="quote" className="chapter-sec">
              <h2><span className="num">04</span>From the conversations</h2>
              <div className="body">
                <div className="lesson-quote-slot">
                  <div className="quote-mark" aria-hidden="true">“</div>
                  <p className="lesson-quote-text">
                    A verified anonymous founder quote will appear here once transcript review is complete.
                  </p>
                  <div className="mono" style={{ color: "var(--ink-3)", fontSize: 12 }}>Anonymous founder interview</div>
                </div>
              </div>
            </section>

            <div className="chapter-next">
              <div>
                <div className="next-eyebrow">Up next · Chapter {String(next.n).padStart(2, "0")}</div>
                <div className="next-title">{next.title}</div>
              </div>
              <Link to={"/chapters/" + next.n} className="btn btn-ghost">
                Read chapter <span className="arrow">→</span>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
}

Object.assign(window, { ChaptersIndex, ChapterDetail });