/* PlaceInHistory, section II½ of the dossier.
   Anchors the album in its moment: what was happening politically,
   economically, culturally in the weeks around release, and the so-what
   that connects that context back to the record.

   Data shape (essay.placeInHistory):
     opening:  "..."         // 80-120 word scene-setter
     context: [               // 3-5 specific, dated data points
       { date: "June 17, 1972", event: "Watergate break-in", relevance: "..." },
       ...
     ]
     closing:  "..."         // 60-100 word so-what

   Voice: factual, named months and events, no "the turbulent times" hedging.
*/

function PlaceInHistory({ data, albumTitle }) {
  if (!data || !data.opening || !data.context || !data.context.length) return null;

  return (
    <div className="pih">
      {/* Opening prose */}
      <p className="pih-opening">{renderText(data.opening)}</p>

      {/* Context grid, numbered cards in a tight grid. On mobile it stacks
          to a vertical timeline. */}
      <div className="pih-context">
        <div className="pih-context-rail" aria-hidden="true" />
        {data.context.map((c, i) => (
          <article className="pih-card" key={i}>
            <div className="pih-card-num">{String(i + 1).padStart(2, "0")}</div>
            <div className="pih-card-body">
              <div className="pih-card-date">{renderText(c.date)}</div>
              <h4 className="pih-card-event">{renderText(c.event)}</h4>
              <p className="pih-card-relevance">{renderText(c.relevance)}</p>
            </div>
          </article>
        ))}
      </div>

      {/* Closing, the so-what, tied back to the album */}
      {data.closing && (
        <div className="pih-closing">
          <div className="pih-closing-rule" aria-hidden="true" />
          <div className="pih-closing-label">So what does the moment explain</div>
          <p className="pih-closing-body">{renderText(data.closing)}</p>
        </div>
      )}
    </div>
  );
}

window.PlaceInHistory = PlaceInHistory;