// v5 — Teaching + books (/about#teaching). Wired 2026-09-13 from _tools/staging/teaching;
// see _tools/hm-plan/teaching-books.md for the sources. Slot: after the Principles row
// (.v5-principles) and before the AI section (#fluency).
//
// Shape: the label-rail move (a one-word label at x=40, content from x=455) over
// rows that reuse the homepage "Where to go next" row (.v5-teaser-row: a meta
// line, a title line, an arrow). Two groups, two rows, one head, one lede.
// Nothing new for the type theme to style: the head uses the disciplines
// opener classes, the rows the teaser classes, so INKTRAP lands on both.
//
// Facts: every value below is checked against a public source. Chris (2026-09-13):
// the site lists the one book still in print; the second is out of print and is not shown.
// Rows with `unverified: true` would render without a link; none are live.

const V5_TEACHING = {
  id: "teaching",
  head: "Taught, then written down.",
  lede: "A graduate studio at CU Boulder, and a book with Kendall Hunt. Students argue back. A framework has to survive that room before a client sees it.",
  groups: [
  {
    id: "teaching-rows",
    rail: "Teaching",
    rows: [
    {
      id: "aprd-5006",
      name: "APRD 5006 · The Brand Studios, CU Boulder",
      line: "Design for Startups",
      href: "https://www.designforstartups.studio/",
      cursor: "Open the course site"
    }]

  },
  {
    id: "book-rows",
    rail: "Books",
    rows: [
    {
      id: "story-design",
      name: "Kendall Hunt · 2024 · with David Slayden",
      line: "Story Design",
      href: "https://he.kendallhunt.com/product/story-design",
      cursor: "Kendall Hunt · print and ebook"
    }]

  }]

};

const V5TeachingRow = ({ row }) => {
  const inner =
  <React.Fragment>
      <span className="v5-teaser-row-main">
        <span className="v5-teaser-row-name">{row.name}</span>
        <span className="v5-teaser-row-line">{row.line}</span>
      </span>
      <span className="v5-teaser-row-arr" aria-hidden="true">{row.href ? "↗" : "·"}</span>
    </React.Fragment>;

  if (!row.href) {
    return (
      <div className="v5-teaser-row v5-teaching-row is-unlinked" data-cursor={row.cursor}>
        {inner}
      </div>);

  }
  return (
    <a
      href={row.href}
      target="_blank"
      rel="noopener"
      className="v5-teaser-row v5-teaching-row"
      data-cursor={row.cursor}
      data-cursor-style="cta">
      {inner}
    </a>);

};

const V5Teaching = ({ data = V5_TEACHING, showLede = true }) => {
  return (
    <section id={data.id} className="v5-teaching" data-screen-label="Teaching · Books">
      <div className="v4-container">
        {/* Opener: same classes as the Disciplines opener directly above it,
            so the two read as siblings (head 56px, copy 14.5px at 1440). */}
        <div className="v5-section-open v5-section-open-sub v5-teaching-open">
          <div className="v5-section-open-row v5-section-open-row-disciplines">
            <h2 className="v5-section-open-headline v5-disciplines-headline v5-teaching-headline" data-cursor="The classroom and the shelf">
              <WordReveal text={data.head} stagger={60} />
            </h2>
            {showLede &&
            <div className="v5-section-open-copy v5-disciplines-copy v5-teaching-copy">
                <FadeIn delay={300}>{data.lede}</FadeIn>
              </div>}
          </div>
        </div>

        {/* Label rail + content column. One label per group; the rows carry the
            only hairlines in the section (three). */}
        <div className="v5-teaching-body">
          <div className="v5-teaching-groups">
            {data.groups.map((g) =>
            <div key={g.id} className="v5-teaching-group">
                <span className="v5-teaching-rail">{g.rail}</span>
                <div className="v5-teaser-rows v5-teaching-rows">
                  {g.rows.map((r) => <V5TeachingRow key={r.id} row={r} />)}
                </div>
              </div>
            )}
          </div>
          {/* the course site itself (designforstartups.studio), the block's one visual: the
              semester table crop, which carries no university marks */}
          <a className="v5-teaching-art" href="https://www.designforstartups.studio/" target="_blank" rel="noopener" data-cursor="The course site" data-cursor-style="cta">
            <img src="/src/assets/teaching-schedule.webp" alt="The Design for Startups course site: the semester end to end, fifteen classes in four phases" width="1600" height="772" loading="lazy" decoding="async" />
            <span className="v5-teaching-art-cap">designforstartups.studio</span>
          </a>
        </div>
      </div>
    </section>);

};

Object.assign(window, { V5Teaching, V5_TEACHING });