// ============================================================
// Tribeca Lisboa — NEWS LISTING page (bilingual, responsive)
// Featured hero (RNewsHighlight) + responsive grid of the
// standard news card (RNewsCard). Reuses SiteHeader/RFooter.
// All cards clickable → News Detail (?id). Newest first.
// ============================================================
function NewsListingInner() {
  const lang = React.useContext(LangContext);
  const [menu, setMenu] = React.useState(false);
  const sorted = NEWS.slice(); // store order = newest first (n1 = most recent)
  const featured = sorted[0];
  const rest = sorted.slice(1);
  return (
    <div className="nl-page">
      <SiteHeader onMenu={() => setMenu(true)} />

      {/* page masthead */}
      <section className="r-band--white" style={{ paddingTop: 'var(--band-y)' }}>
        <div className="r-wrap">
          <div className="nl-eyebrow">{tt(lang, 'The Journal', 'O Jornal')}</div>
          <h1 className="nl-h1">{tt(lang, 'News', 'Notícias')}</h1>
          <p className="nl-intro">{tt(lang,
            'Festival updates, announcements, interviews and cultural stories — the newsroom of Tribeca Festival Lisboa.',
            'Atualizações do festival, anúncios, entrevistas e histórias de cultura — a redação do Tribeca Festival Lisboa.')}</p>
        </div>
      </section>

      {/* 1 — featured hero */}
      <section className="r-band--white nl-featured-band">
        <div className="r-wrap">
          <NewsFeature data={featured} />
        </div>
      </section>

      {/* 2 — responsive grid of standard news cards */}
      <section className="r-band--white" style={{ paddingTop: 0, paddingBottom: 'var(--band-y)' }}>
        <div className="r-wrap">
          <div className="nl-rule"></div>
          <div className="nl-grid">
            {rest.map((n) => <NewsGridCard key={n.id} item={n} />)}
          </div>
        </div>
      </section>

      <RFooter />
      <SiteMenuDrawer open={menu} onClose={() => setMenu(false)} />
    </div>
  );
}

// Featured hero — large editorial card (extends the news-highlight pattern)
function NewsFeature({ data }) {
  const lang = React.useContext(LangContext);
  const c = CAT[data.cat];
  return (
    <article className="nl-feature">
      <div className="nl-feature-media"><img src={R(data.img)} alt="" /></div>
      <div className="nl-feature-body">
        <div className="nl-feature-meta">
          <span className="nl-tag" style={{ background: c.bg, color: c.hl }}>{c.label}</span>
          <span className="nl-date">{tt(lang, data.dateEn, data.date)}</span>
        </div>
        <h2 className="nl-feature-title"><a className="nl-feature-title-link" href={urlFor('news', data.id)}>{tt(lang, data.titleEn, data.title)}</a></h2>
        <p className="nl-feature-ex">{tt(lang, data.excerptEn, data.excerpt)}</p>
        <div className="nl-feature-cta"><TertiaryButton color="#000" href={urlFor('news', data.id)}>{tt(lang, 'Read story', 'Ler artigo')}</TertiaryButton></div>
      </div>
    </article>
  );
}

// Standard news card (grid) — image, tag, title, excerpt, date
function NewsGridCard({ item }) {
  const lang = React.useContext(LangContext);
  const c = CAT[item.cat];
  return (
    <a className="nl-card" href={urlFor('news', item.id)}>
      <div className="nl-card-media"><img src={R(item.img)} alt="" /></div>
      <div className="nl-card-body">
        <div className="nl-card-meta">
          <span className="nl-tag" style={{ background: c.bg, color: c.hl }}>{c.label}</span>
          <span className="nl-date">{tt(lang, item.dateEn, item.date)}</span>
        </div>
        <h3 className="nl-card-title">{tt(lang, item.titleEn, item.title)}</h3>
        <p className="nl-card-ex">{tt(lang, item.excerptEn, item.excerpt)}</p>
      </div>
    </a>
  );
}

function NewsListing() {
  const [lang] = useLang();
  return (
    <LangContext.Provider value={lang}>
      <NewsListingInner />
    </LangContext.Provider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<NewsListing />);