// Section 2.5 — Coach dossier drawer.
// Right-side editorial drawer with academic-dossier layout.
// Triggered by 'intensives:openCoachDossier' event from coach cards.

const COACH_DOSSIERS = {
  steven: {
    name: "Steven Park",
    score: "45/45",
    portraitSrc: "steven-park.jpeg",
    title: "Co-founder · Lead coach, Economics & English",
    subjects: [
      { name: "Economics", grade: "7" },
      { name: "English A: Lang & Lit HL", grade: "7" },
      { name: "Mathematics AA HL", grade: "7" },
      { name: "Biology HL", grade: "7" },
      { name: "Spanish ab initio SL", grade: "7" },
      { name: "Korean A: Lit SL", grade: "7" },
    ],
    bonuses: ["Extended Essay: A", "TOK: A", "Bonus points: 3/3"],
    destination: "Reading Economics at top-tier UK target",
    strengths: [
      "Economics IA structure and command-term execution",
      "English Lang & Lit Paper 1 + IO live commentary",
      "Building cohort-grade essay frameworks from scratch",
    ],
    style: "Decision-first. Steven works with students on the structural and methodological choices upstream of writing; he does not edit prose or generate ideas. He treats every coaching session as a forensic decomposition of what the examiner's mark scheme is actually rewarding.",
    experience: "Two years coaching IB students across four continents. 60+ hours of 1:1 work with HL Economics and English A students since graduating.",
    philosophy: "If you've already written the wrong essay, the best a coach can do is salvage. The work happens earlier; in the question you choose, the structure you commit to, the evidence you decide is load-bearing. That's where I work.",
    results: [
      "11/12 May 2026 Economics IA mentees scored 6 or 7",
      "Avg English A IO improvement: +1.4 bands",
      "Zero academic-honesty flags across two cohorts",
    ],
  },
  elijah: {
    name: "Elijah Ingram",
    score: "45/45",
    portraitSrc: "elijah-ingram.jpg",
    title: "Co-founder · Lead coach, English & Biology",
    subjects: [
      { name: "English A: Literature HL", grade: "7" },
      { name: "Biology HL", grade: "7" },
      { name: "History", grade: "7" },
      { name: "Latin SL", grade: "7" },
      { name: "Mathematics AA SL", grade: "7" },
      { name: "French ab initio SL", grade: "7" },
    ],
    bonuses: ["Extended Essay: A", "TOK: A", "Bonus points: 3/3"],
    destination: "Reading English Language and Literature, University of Oxford",
    strengths: [
      "English A essay (paper 2 and coursework component)",
      "Biology IA experimental design and uncertainty handling",
      "Extended Essay supervision across humanities + sciences",
    ],
    style: "Socratic. Elijah teaches by asking the next question, not by giving the next answer. Sessions are slower than most students expect; the depth of question-asking is the point. By the end, students can interrogate their own drafts.",
    experience: "Coached HL English and Biology students through May 2025 and May 2026 cycles; supervised 8 Extended Essays from research question to final draft.",
    philosophy: "Examiners reward students who can be specific about uncertainty. The IB doesn't want certainty; it wants disciplined doubt. I teach students to notice when they're being vague and to write the precise sentence instead.",
    results: [
      "Two students scored top in cohort for English A coursework",
      "Avg Biology IA: 21/24 (May 2026 mentee average)",
      "All EE supervisees scored A or B",
    ],
  },
  sebastian: {
    name: "Sebastian Pabst",
    score: "45/45",
    portraitSrc: null,
    title: "Co-founder · Lead coach, History & Computer Science",
    subjects: [
      { name: "History", grade: "7" },
      { name: "Computer Science HL", grade: "7" },
      { name: "Mathematics AA HL", grade: "7" },
      { name: "English A: Lit HL", grade: "7" },
      { name: "Physics SL", grade: "7" },
      { name: "German A: Lit SL", grade: "7" },
    ],
    bonuses: ["Extended Essay: A", "TOK: A", "Bonus points: 3/3"],
    destination: "Reading Computer Science at top European target",
    strengths: [
      "History Paper 3 + IA historiography",
      "Computer Science IA design and case-study justification",
      "Source critique under timed conditions",
    ],
    style: "Structural. Sebastian draws diagrams. Every session ends with the student holding a visual map of the argument they're going to write. He thinks the IB rewards clarity more than complexity and teaches accordingly.",
    experience: "Coached History students through multiple paper-3 regions; led intra-school IA workshops in his final two years.",
    philosophy: "Every History essay is the same essay underneath: claim, evidence, counter-argument, qualification, conclusion. The discipline is making each layer do its job. I teach that, not historical content.",
    results: [
      "Best History IA in cohort, May 2026",
      "Highest Computer Science HL score in year",
      "Three direct-applicant mentees offered IB-track university places",
    ],
  },
};

const DossierField = ({ label, children }) => (
  <div className="dossier-field">
    <div className="dossier-field-label">{label}</div>
    <div className="dossier-field-body">{children}</div>
  </div>
);

const CoachDossierDrawer = () => {
  const [openId, setOpenId] = React.useState(null);

  React.useEffect(() => {
    const handler = (e) => setOpenId(e.detail?.id || null);
    window.addEventListener('intensives:openCoachDossier', handler);
    return () => window.removeEventListener('intensives:openCoachDossier', handler);
  }, []);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpenId(null); };
    if (openId) {
      document.addEventListener('keydown', onKey);
      document.body.style.overflow = 'hidden';
    }
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [openId]);

  const coach = openId ? COACH_DOSSIERS[openId] : null;
  if (!coach) return null;

  return (
    <div className="dossier-backdrop" onClick={() => setOpenId(null)}>
      <aside className="dossier-drawer" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">

        <header className="dossier-head">
          <div className="dossier-eyebrow">Coach dossier</div>
          <button className="dossier-close" onClick={() => setOpenId(null)} aria-label="Close">
            <Icon name="x" />
          </button>
        </header>

        <div className="dossier-portrait-row">
          <div className="dossier-portrait">
            {coach.portraitSrc
              ? <img src={coach.portraitSrc} alt={coach.name} />
              : <Placeholder>{coach.name.split(" ")[0]}</Placeholder>}
          </div>
          <div className="dossier-name-block">
            <span className="dossier-score">{coach.score}</span>
            <h3 className="dossier-name">{coach.name}</h3>
            <p className="dossier-title">{coach.title}</p>
          </div>
        </div>

        <DossierField label="IB Diploma · May 2026">
          <table className="dossier-grades">
            <tbody>
              {coach.subjects.map((s, i) => (
                <tr key={i}>
                  <td>{s.name}</td>
                  <td><b>{s.grade}</b></td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="dossier-bonus">
            {coach.bonuses.map((b, i) => (
              <span key={i}>
                {i > 0 && <span className="sep">·</span>}
                {b}
              </span>
            ))}
          </div>
        </DossierField>

        <DossierField label="University destination">
          <p className="dossier-line">{coach.destination}</p>
        </DossierField>

        <DossierField label="Coaches">
          <ul className="dossier-list">
            {coach.strengths.map((s, i) => <li key={i}>{s}</li>)}
          </ul>
        </DossierField>

        <DossierField label="Coaching style">
          <p className="dossier-body">{coach.style}</p>
        </DossierField>

        <DossierField label="Experience">
          <p className="dossier-body">{coach.experience}</p>
        </DossierField>

        <DossierField label="Feedback philosophy">
          <p className="dossier-quote">{coach.philosophy}</p>
        </DossierField>

        <DossierField label="Recent results">
          <ul className="dossier-list dossier-results">
            {coach.results.map((r, i) => <li key={i}>{r}</li>)}
          </ul>
        </DossierField>

        <div className="dossier-foot">
          <a className="btn black" href="#essay-intensive" onClick={() => setOpenId(null)}>
            Work with {coach.name.split(" ")[0]} <Icon name="arrow-right" />
          </a>
        </div>

      </aside>
    </div>
  );
};

Object.assign(window, { CoachDossierDrawer, COACH_DOSSIERS });