// PHAROS — Team and Cases (selected mandates / tombstones)

// ---------- Team / Partners ----------
function Team() {
  const { t } = React.useContext(window.LangCtx);
  return (
    <section className="sec sec--paper" id="team">
      <div className="container">
        <SectionHead index={6} eyebrow={t.team.eyebrow} h2={t.team.h2} lede={t.team.lede} />
        <div className="team-grid">
          {t.team.members.map((m, i) => (
            <Reveal key={i} delay={i * 100} className="team-card">
              <div
                className="team-portrait"
                data-label={`PORTRAIT · 0${i + 1}`}
                role="img"
                aria-label={`${m.name} — ${m.role}, ${m.base}. Portrait pending.`}
              />
              <div className="team-meta">
                <h3 className="team-name">{m.name}</h3>
                <div className="team-role mono">{m.role} · {m.base}</div>
                <p className="team-bio">{m.bio}</p>
                <div className="team-langs mono">{m.langs}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Team = Team;

// ---------- Cases / Selected mandates (tombstones) ----------
function Cases() {
  const { t, lang } = React.useContext(window.LangCtx);
  const yearOf = (i) => ["2024", "2025", "2025"][i] || "2025";
  const valueOf = (item) => {
    const cell = item.meta.find(([k, v]) => /^\$/.test(v));
    return cell ? cell[1] : item.meta[0][1];
  };
  return (
    <section className="sec sec--paper" id="cases">
      <div className="container">
        <SectionHead index={7} eyebrow={t.cases.eyebrow} h2={t.cases.h2} />
        <div className="tombstones">
          {t.cases.items.map((c, i) => (
            <Reveal key={i} delay={i * 100} as="article" className="tombstone">
              <div className="tomb-head">
                <span className="tomb-tag">{c.tag}</span>
                <span className="tomb-year">{yearOf(i)}</span>
              </div>
              <div>
                <div className="tomb-value">{valueOf(c)}</div>
                <div className="tomb-value-cap">
                  {/^\$/.test(valueOf(c)) ? t.ui.cases_revenue : t.ui.cases_stage}
                </div>
              </div>
              <h3 className="tomb-title">{c.title}</h3>
              <p className="tomb-result"><strong>→</strong> {c.result}</p>
              <dl className="tomb-meta">
                {c.meta.map(([k, v], j) => (
                  <div className="tomb-meta-row" key={j}>
                    <dt>{k}</dt>
                    <dd>{v}</dd>
                  </div>
                ))}
              </dl>
            </Reveal>
          ))}
        </div>
        <div className="cases-foot">
          <span>{t.ui.cases_foot}</span>
        </div>
      </div>
    </section>
  );
}
window.Cases = Cases;