// Section 2 — The coaches / transcript wall.
// Three parallel coach cards: portrait + name + 45/45 badge + receipts + editorial "teaches" line + transcript placeholder + Learn more.

const TranscriptPlaceholder = ({ name }) => (
  <div className="transcript-thumb" aria-label={`${name} IBO transcript placeholder`}>
    <div className="transcript-head">
      <span className="ibo-mark">IB</span>
      <span>Diploma Programme · Statement of Results</span>
    </div>
    <div className="transcript-body">
      <div className="t-row"><span className="t-name">May 2026 · {name}</span></div>
      <div className="t-grid">
        <div className="t-cell"><b>7</b></div>
        <div className="t-cell"><b>7</b></div>
        <div className="t-cell"><b>7</b></div>
        <div className="t-cell"><b>7</b></div>
        <div className="t-cell"><b>7</b></div>
        <div className="t-cell"><b>7</b></div>
      </div>
      <div className="t-total"><span>Total</span><b>45/45</b></div>
    </div>
    <a className="transcript-link" href="#" onClick={(e) => e.preventDefault()}>
      View transcript <Icon name="arrow-up-right" />
    </a>
  </div>
);

const TeachesLine = ({ subjects }) => (
  <div className="teaches-line">
    <span className="teaches-label">Teaches</span>
    <span className="teaches-subjects">
      {subjects.map((s, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep">·</span>}
          {s}
        </React.Fragment>
      ))}
    </span>
  </div>
);

const openCoachDossier = (id) => {
  window.dispatchEvent(new CustomEvent('intensives:openCoachDossier', { detail: { id } }));
};

const CoachCard = ({ id, portraitSrc, name, score = "45/45", receipts, teaches }) => (
  <article className="coach-card">
    <div className="score-badge" aria-label={`${name} scored ${score}`}>
      <span>{score}</span>
    </div>
    <div className="coach-portrait">
      {portraitSrc
        ? <img src={portraitSrc} alt={name} />
        : <Placeholder>Portrait · {name.split(" ")[0]}</Placeholder>}
    </div>
    <h3 className="coach-name">{name}</h3>
    <ul className="receipts-list">
      {receipts.map((r, i) => <li key={i}>{r}</li>)}
    </ul>
    <TeachesLine subjects={teaches} />
    <TranscriptPlaceholder name={name.split(" ")[0]} />
    <button type="button" className="coach-learn-more" onClick={() => openCoachDossier(id)}>
      Learn more <Icon name="arrow-right" />
    </button>
  </article>
);

const COACHES = [
  {
    id: "steven",
    portraitSrc: "steven-park.jpeg",
    name: "Steven Park",
    receipts: [
      "96% Economics IA",
      "Full marks English A IO",
      "Highest IB score in school in five years",
    ],
    teaches: ["Economics", "English A", "Economics IA", "English IO"],
  },
  {
    id: "elijah",
    portraitSrc: "elijah-ingram.jpg",
    name: "Elijah Ingram",
    receipts: [
      "Highest English A score in year",
      "Highest Biology HL score in year",
      "Now reading at the University of Oxford",
    ],
    teaches: ["English A", "Biology HL", "Biology IA", "EE"],
  },
  {
    id: "sebastian",
    portraitSrc: null,
    name: "Sebastian Pabst",
    receipts: [
      "Best IA in year for History",
      "Highest Computer Science HL score in year",
      "45/45 in May 2026",
    ],
    teaches: ["History", "Computer Science HL", "History IA", "Comp Sci IA"],
  },
];

const CoachesSection = () => (
  <section className="section coaches-section" id="coaches">
    <div className="wide">
      <header className="section-head intensives-section-head align-left">
        <div className="eyebrow">The coaches</div>
        <h2>
          Three coaches.<br />
          Three 45/45s. <Scribble>May 2026.</Scribble>
        </h2>
        <p className="section-sub">These are the exact transcripts.</p>
      </header>

      <div className="coaches-grid">
        {COACHES.map((c) => <CoachCard key={c.id} {...c} />)}
      </div>

      <p className="coaches-closer">
        Not ex-teachers. Not graduate tutors. The students who actually <Scribble>scored it,</Scribble> twelve months ago.
      </p>

      <div style={{ marginTop: 26 }}>
        <ProofStrip items={[
          { icon: "badge-check",  value: "3× 45/45 verified by IBO",   label: "Official transcripts" },
          { icon: "trophy",       value: "Avg coach score: 45/45",     label: "Across the team" },
          { icon: "calendar",     value: "All May 2026",               label: "Most recent cohort" },
          { icon: "file-text",    value: "Transcripts viewable",       label: "Click any card to enlarge" },
        ]} />
      </div>
    </div>
  </section>
);

Object.assign(window, { CoachesSection, COACHES, openCoachDossier });