// ============================================================
// Tribeca Lisboa — TALENTOS listing + detail (one app, two pages)
// Data is derived from existing SPEAKERS + event guests + news
// (getTalents in data.jsx). No new data model.
// ============================================================
const TL_CATS = [
  { key: 'all', en: 'All', pt: 'Todos' },
  { key: 'guest', en: 'Confirmed guests', pt: 'Confirmed guests' },
  { key: 'director', en: 'Directors', pt: 'Realizadores' },
  { key: 'host', en: 'Hosts & podcasts', pt: 'Hosts & podcasts' },
  { key: 'orchestra', en: 'Orchestras', pt: 'Orquestras' },
];
function tlGroup(t) {
  if (t.news) return 'guest';
  const r = (t.roles[0] || {}).role || '';
  if (/Orquestra/i.test(r)) return 'orchestra';
  if (/Realizador/i.test(r)) return 'director';
  return 'host';
}
const tlEvTitle = (lang, ev) => tt(lang, ev.titleEn || ev.title, ev.title);

function TlCard({ t }) {
  const lang = useCtx(LangContext);
  const ev = t.events[0];
  return (
    <a className="tl-card" href={urlFor('talent', t.id)}>
      <div className="tl-card-media"><img src={R(t.img || 'uploads/asset-pending.svg')} alt={t.name} /></div>
      <div className="tl-card-cat">{talentCategory(t, lang)}</div>
      <h3 className="tl-card-name">{t.name}</h3>
      {ev && <div className="tl-card-meta">{tlEvTitle(lang, ev)}{t.events.length > 1 ? ` + ${t.events.length - 1}` : ''}</div>}
      {!t.news && <div className="tl-pending">{isPendingImg(t.img)
        ? tt(lang, 'Bio and headshot awaiting approval.', 'Bio e headshot a aguardar aprovação.')
        : tt(lang, 'Bio awaiting approval.', 'Bio a aguardar aprovação.')}</div>}
    </a>
  );
}

function TalentsListInner() {
  const lang = useCtx(LangContext);
  const [menu, setMenu] = React.useState(false);
  const [cat, setCat] = React.useState('all');
  const all = React.useMemo(() => {
    const order = { guest: 0, director: 1, host: 2, orchestra: 3 };
    return getTalents().filter((t) => t.news).sort((a, b) => order[tlGroup(a)] - order[tlGroup(b)]);
  }, []);
  const list = cat === 'all' ? all : all.filter((t) => tlGroup(t) === cat);
  return (
    <div className="tl-page">
      <SiteHeader onMenu={() => setMenu(true)} />
      <header className="tl-hero">
        <div className="r-wrap">
          <div className="tl-eyebrow">Tribeca Festival Lisboa 2026</div>
          <h1 className="tl-h1">{tt(lang, 'Talent', 'Talentos')}</h1>
          <p className="tl-desc">{tt(lang, 'Guests, directors, hosts and artists taking part in the festival.', 'Convidados, realizadores, hosts e artistas que participam no festival.')}</p>
        </div>
      </header>
      <main className="tl-list">
        <div className="r-wrap"><div className="tl-grid">{list.map((t) => <TlCard key={t.id} t={t} />)}</div></div>
      </main>
      <RFooter />
      <SiteMenuDrawer open={menu} onClose={() => setMenu(false)} />
    </div>
  );
}

function TalentDetailInner() {
  const lang = useCtx(LangContext);
  const [menu, setMenu] = React.useState(false);
  const all = React.useMemo(() => getTalents().filter((x) => x.news), []);
  const t = all.find((x) => x.id === getParam('id')) || all[0];
  const n = t.news;
  const roleFor = (ev) => t.roles.filter((r) => r.eventId === ev.id).map((r) => tt(lang, r.roleEn || r.role, r.role)).join(' · ');
  return (
    <div className="tl-page">
      <SiteHeader onMenu={() => setMenu(true)} />
      <header className="tl-d-hero">
        <div className="r-wrap">
          <div className="tl-d-grid">
            <div className="tl-d-media"><img src={R(t.img || 'uploads/asset-pending.svg')} alt={t.name} /></div>
            <div>
              <a className="tl-eyebrow" href={urlFor('talents')} style={{ display: 'inline-block' }}>← {tt(lang, 'Talent', 'Talentos')}</a>
              <div className="tl-card-cat" style={{ marginBottom: 12 }}>{talentCategory(t, lang)}</div>
              <h1 className="tl-d-name">{t.name}</h1>
              {t.events.length > 0 && <div className="tl-d-roles">{t.events.map((ev) => <div key={ev.id}>{roleFor(ev)} — {tlEvTitle(lang, ev)}</div>)}</div>}
              {n && <p className="tl-d-dek">{tt(lang, n.dekEn, n.dek)}</p>}
              {isPendingImg(t.img) && <p className="tl-d-note" style={{ marginTop: 16 }}>{tt(lang, 'Headshot awaiting approval.', 'Headshot a aguardar aprovação.')}</p>}
              <div style={{ marginTop: 28 }}>
              {n ? (
            <div className="tl-d-body">
              {n.body.map((b, i) => b.t === 'h2'
                ? <h3 key={i}>{tt(lang, b.xEn, b.x)}</h3>
                : <p key={i}>{tt(lang, b.xEn, b.x)}</p>)}
              <div className="tl-d-links">
                <a className="tl-d-link" href={urlFor('news', n.id)}>{tt(lang, 'Read the news story', 'Ler a notícia')} ↗</a>
                {n.external && <a className="tl-d-link" href={n.external.href} target="_blank" rel="noopener noreferrer">{tt(lang, n.external.labelEn, n.external.label)} ↗</a>}
              </div>
            </div>
          ) : (
            <p className="tl-d-note">{isPendingImg(t.img)
              ? tt(lang, 'Bio and headshot awaiting approval.', 'Bio e headshot a aguardar aprovação.')
              : tt(lang, 'Bio awaiting approval.', 'Bio a aguardar aprovação.')}</p>
          )}
              </div>
            </div>
          </div>
        </div>
      </header>


      {t.events.length > 0 && (
        <section className="tl-d-sec" style={{ borderBottom: 'none', paddingBottom: 'var(--band-y)' }}>
          <div className="r-wrap">
            <h2 className="tl-d-h2">{tt(lang, 'At the festival', 'No festival')}</h2>
            <div className="tl-d-events">
              {t.events.map((ev) => (
                <a className="tl-d-ev" key={ev.id} href={urlFor('event', ev.id)}>
                  <div className="tl-d-ev-img"><img src={R(ev.img)} alt="" /></div>
                  <div>
                    <div className="tl-d-ev-t">{tlEvTitle(lang, ev)}</div>
                    <div className="tl-d-ev-m">{tt(lang, ev.dayDateEn, ev.dayDate)} • {ev.time} • {ev.venue}</div>
                    <div className="tl-d-ev-r">{roleFor(ev)}</div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}
      <RFooter />
      <SiteMenuDrawer open={menu} onClose={() => setMenu(false)} />
    </div>
  );
}

function TalentsRoot() {
  const [lang] = useLang();
  const Page = window.TL_PAGE === 'detail' ? TalentDetailInner : TalentsListInner;
  return <LangContext.Provider value={lang}><Page /></LangContext.Provider>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<TalentsRoot />);