/* ============================================================
   IJMA AI — researchers / scholarship page
   Photos are user-fillable <image-slot> avatars (monogram until filled).
   ============================================================ */
function LinkChip({ link }) {
  if (!link.url) return <span className="link-chip is-dead">{link.label}</span>;
  return (
    <a className="link-chip" href={link.url} target="_blank" rel="noopener noreferrer">
      {link.label}
      <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" aria-hidden="true">
        <path d="M4 8l4-4M5 3.5h3.5V7" />
      </svg>
    </a>
  );
}

const TRANSPARENT_PX = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';

function ResearcherCard({ r }) {
  return (
    <article className="rsch-card">
      <div className="rsch-avatar-wrap">
        <span className="rsch-monogram" aria-hidden="true">{r.initials}</span>
        <image-slot
          id={'photo-' + r.id}
          shape="circle"
          src={TRANSPARENT_PX}
          placeholder={r.initials}
          style={{ width: '88px', height: '88px', display: 'block' }}
        ></image-slot>
      </div>
      <div className="rsch-body">
        <h3 className="rsch-name">{r.name}</h3>
        <div className="rsch-role">{r.role}</div>
        <div className="rsch-affil">
          <span style={{ fontWeight: 600, color: 'var(--ink-2)' }}>{r.affiliation}</span>
          {r.credential && <span style={{ color: 'var(--ink-4)' }}> · {r.credential}</span>}
        </div>

        <div className="rsch-focus">
          <span className="eyebrow" style={{ color: 'var(--link)' }}>Focus</span>
          <span>{r.focus}</span>
        </div>

        <p className="rsch-bio">{r.bio}</p>

        <div className="rsch-tags">
          {r.tags.map((t, i) => <span key={i} className="rsch-tag">{t}</span>)}
        </div>

        {r.works && r.works.length > 0 && (
          <div className="rsch-works">
            <div className="eyebrow" style={{ marginBottom: '.4rem' }}>Selected work</div>
            <ul>
              {r.works.map((w, i) => <li key={i}>{w}</li>)}
            </ul>
          </div>
        )}

        <div className="rsch-links">
          {r.links.map((l, i) => <LinkChip key={i} link={l} />)}
        </div>
      </div>
    </article>
  );
}

function ResearchersPage({ onNav }) {
  return (
    <main className="fade-in" style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '2.4rem clamp(1.2rem,4vw,3rem) 5rem' }}>
      <div className="eyebrow" style={{ marginBottom: '.6rem' }}>The scholarship behind the method</div>
      <h1 style={{ fontSize: 'clamp(28px,3.4vw,42px)', fontWeight: 700, letterSpacing: '-0.01em', margin: '0 0 3.4rem', maxWidth: '24ch' }}>
        Researchers whose work shapes how Ijma reads consensus and dissent
      </h1>
      <p style={{ fontSize: '18px', color: 'var(--ink-2)', maxWidth: '64ch', margin: '-2.2rem 0 1rem', lineHeight: 1.55 }}>
        This tool does not invent its method. It rests on a living body of scholarship on the theory of consensus, the
        causes of disagreement, and the history of how doctrine changes. These are the researchers whose work it draws on.
      </p>
      <div className="rsch-photo-note">
        <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3.5" width="12" height="9" rx="1.5"/><circle cx="5.5" cy="6.5" r="1.2"/><path d="M3 12l3.5-3 2.5 2 2-1.5L14 11"/></svg>
        Photo slots are placeholders — drag a portrait onto any monogram to add it; it persists. No portrait is sourced automatically.
      </div>

      {D.researchSections.map(sec => {
        const list = D.researchers.filter(r => r.section === sec.id);
        return (
          <section key={sec.id} style={{ marginTop: '3rem' }}>
            <div className="rsch-sec-head">
              <h2>{sec.label}</h2>
              <p>{sec.blurb}</p>
            </div>
            <div className="rsch-grid">
              {list.map(r => <ResearcherCard key={r.id} r={r} />)}
            </div>
          </section>
        );
      })}

      {/* journals to mine */}
      <section style={{ marginTop: '3.5rem', borderTop: '1px solid var(--rule)', paddingTop: '1.8rem' }}>
        <div className="section-label">
          <span className="eyebrow">Sources to mine</span>
          <h2>Journals for further early-career scholarship</h2>
        </div>
        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
          {D.journals.map((j, i) => (
            <div key={i} className="card" style={{ flex: '1 1 280px', padding: '1.1rem 1.3rem' }}>
              <div style={{ fontSize: '16px', fontWeight: 600, lineHeight: 1.3 }}>{j.name}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: '11.5px', color: 'var(--ink-3)', margin: '.4rem 0 .7rem' }}>{j.org}</div>
              {j.url && <LinkChip link={{ label: 'Visit journal', url: j.url }} />}
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ResearchersPage });