// Track Record (the public resume) and Dear Partners (the letter-writing service).
// Copy lives in app/track_data.jsx so the static builds in build.js render the same text.

function TrackRecordPage({ navigate }) {
  const T = window.HOAGS_TRACK.TRACK_RECORD;
  return (
    <div className="th-about">
      <header className="th-about-head">
        <span className="th-eyebrow" style={{ fontSize: "16px" }}>{T.eyebrow}</span>
        <h1 style={{ fontSize: "56px" }}>{T.title}<br /><span className="th-h-italic">{T.titleItalic}</span></h1>
      </header>

      <div className="th-about-prose th-prose" style={{ maxWidth: "720px" }}>
        <p className="th-about-lead">{T.lead}</p>

        <h2 className="th-h2">The seat</h2>
        {T.seat.map((r) => (
          <p key={r.k}><strong>{r.k}.</strong> {r.v}</p>
        ))}

        <h2 className="th-h2">Public calls</h2>
        {T.calls.map((c) => (
          <p key={c.name}>
            <strong>{c.name}</strong> - {c.when}. {c.call} {c.outcome}{" "}
            <strong>{c.grade}.</strong>{" "}
            <a href={"#essay/" + c.id} onClick={(e) => { e.preventDefault(); navigate("essay", { id: c.id }); }}>Read the call →</a>
          </p>
        ))}
        <p className="th-microcopy">{T.callsNote}</p>

        <h2 className="th-h2">What I have built</h2>
        {T.building.map((r) => (
          <p key={r.k}><strong>{r.k}.</strong> {r.v}</p>
        ))}

        <h2 className="th-h2">Standing</h2>
        <p>{T.standing}</p>
        <p>Emerging managers who need their own letters written: <a href="#partners" onClick={(e) => { e.preventDefault(); navigate("partners"); }}>Dear Partners →</a></p>
        <p>
          <a href="https://x.com/Hoags18" target="_blank" rel="noopener">@Hoags18 on X</a>
          {" · "}
          <a href="https://tomhoganfinance.substack.com" target="_blank" rel="noopener">Hoags on Substack</a>
        </p>
      </div>
    </div>
  );
}

function PartnersPage({ navigate }) {
  const D = window.HOAGS_TRACK.DEAR_PARTNERS;
  return (
    <div className="th-about">
      <header className="th-about-head">
        <span className="th-eyebrow" style={{ fontSize: "16px" }}>{D.eyebrow}</span>
        <h1 style={{ fontSize: "56px" }}>{D.title}<br /><span className="th-h-italic">{D.titleItalic}</span></h1>
      </header>

      <div className="th-about-prose th-prose" style={{ maxWidth: "720px" }}>
        <p className="th-about-lead">{D.lead}</p>

        <h2 className="th-h2">What you get</h2>
        <p>{D.get}</p>

        <h2 className="th-h2">What you send</h2>
        {D.intake.map((line, i) => (
          <p key={i}>{i + 1}. {line}</p>
        ))}

        <h2 className="th-h2">Rate</h2>
        <p>{D.rate}</p>

        <h2 className="th-h2">Who it is for</h2>
        <p>{D.who}</p>

        <p>{D.cta}</p>
      </div>
    </div>
  );
}