// ============================================================
// Tribeca Lisboa — NEWS ARTICLE sections (responsive)
// Reuses: EIcon + useReveal + EdGuestCard (EventSections),
// REventCard (ResponsiveSections), CAT + R (Primitives).
// ============================================================
const { useRef: useRefN, useState: useStateN } = React;

// ---- Social share row (editorial, inline) -------------------
function NewsShare() {
  const lang = React.useContext(LangContext);
  const [copied, setCopied] = useStateN(false);
  // Real share targets (operator, 2026-09-30 link check: these were placeholder "#" links and
  // "Link copiado" was shown without copying). URL = this page without the hash.
  const url = String(location.href).split('#')[0];
  const title = tt(lang, (window.ARTICLE && (ARTICLE.titleEn || ARTICLE.title)) || document.title,
    (window.ARTICLE && ARTICLE.title) || document.title);
  const copy = () => {
    const done = () => { setCopied(true); setTimeout(() => setCopied(false), 1600); };
    try { navigator.clipboard.writeText(url).then(done, () => {}); } catch (e) {}
  };
  // Instagram has no web share URL: the system share sheet (phones) offers it; else copy the link.
  const shareInstagram = () => {
    if (navigator.share) { navigator.share({ title, url }).catch(() => {}); return; }
    copy();
  };
  const links = [
    { name: 'WhatsApp', icon: 'wa', href: 'https://wa.me/?text=' + encodeURIComponent(title + ' ' + url) },
    { name: 'X', icon: 'xlogo', href: 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(title) + '&url=' + encodeURIComponent(url) },
  ];
  return (
    <div className="na-share">
      <span className="na-share-label">{tt(lang, 'Share', 'Partilhar')}</span>
      <div className="na-share-btns">
        <button type="button" className="na-share-btn" aria-label="Instagram" title="Instagram" onClick={shareInstagram}>
          <EIcon name="ig" />
        </button>
        {links.map(o => (
          <a key={o.name} className="na-share-btn" href={o.href} target="_blank" rel="noopener noreferrer" aria-label={o.name} title={o.name}>
            <EIcon name={o.icon} />
          </a>
        ))}
        <button type="button" className="na-share-btn" aria-label={tt(lang, 'Copy link', 'Copiar link')} title={tt(lang, 'Copy link', 'Copiar link')}
          onClick={copy}>
          <EIcon name={copied ? 'check' : 'link'} />
        </button>
        {copied && <span className="na-share-copied">{tt(lang, 'Link copied', 'Link copiado')}</span>}
      </div>
    </div>
  );
}

// ---- Hero image + masthead ---------------------------------
function NewsHero() {
  const lang = React.useContext(LangContext);
  const c = CAT[ARTICLE.cat];
  return (
    <React.Fragment>
      <section className="na-hero">
        <img src={R(ARTICLE.hero)} alt={ARTICLE.title} />
      </section>
      <header className="na-mast">
        <div className="r-wrap">
          <div className="na-col">
            <a className="na-back" href={urlFor('news_list')}><EIcon name="back" /> {tt(lang, 'Back to news', 'Voltar às notícias')}</a>
            <div>
              <span className="na-tag" style={{ background: c.bg, color: c.hl }}>{c.label}</span>
              <h1 className="na-title">{tt(lang, ARTICLE.titleEn, ARTICLE.title)}</h1>
              <div className="na-meta">
                <span className="author">{tt(lang, ARTICLE.authorEn, ARTICLE.author)}</span>
                <span className="sep">•</span><span>{tt(lang, ARTICLE.dateEn, ARTICLE.date)}</span>
              </div>
              <p className="na-dek">{tt(lang, ARTICLE.dekEn, ARTICLE.dek)}</p>
              <NewsShare />
            </div>
            <div className="na-rule"></div>
          </div>
        </div>
      </header>
    </React.Fragment>
  );
}

// ---- Rich-text body + optional external link ----------------
function NewsBody() {
  const lang = React.useContext(LangContext);
  return (
    <article className="na-body">
      <div className="r-wrap">
        <div className="na-col">
          {ARTICLE.body.map((b, i) => {
            const txt = tt(lang, b.xEn, b.x);
            if (b.t === 'h2') return <h2 className="na-h2 ed-rev" key={i}>{txt}</h2>;
            if (b.t === 'quote') return <blockquote className="na-quote ed-rev" key={i}>{txt}</blockquote>;
            return <p className="ed-rev" key={i}>{txt}</p>;
          })}
          {ARTICLE.external && (
            <div className="na-ext ed-rev">
              <a className="na-extlink" href={ARTICLE.external.href} target="_blank" rel="noopener noreferrer">
                {tt(lang, ARTICLE.external.labelEn, ARTICLE.external.label)} <EIcon name="arrow" />
              </a>
            </div>
          )}
        </div>
      </div>
    </article>
  );
}

// ---- Related events (homepage event card) -------------------
function NewsRelatedEvents() {
  const lang = React.useContext(LangContext);
  if (!NEWS_RELATED_EVENTS.length) return null; // general guests have no linked event
  return (
    <section className="ed-sec na-related">
      <div className="r-wrap">
        <div className="ed-eyebrow ed-rev"><span className="tx">{tt(lang, 'Keep exploring', 'Continua a explorar')}</span><span className="ln"></span></div>
        <h2 className="ed-h ed-rev" style={{ marginBottom: 20 }}>{tt(lang, 'Related events', 'Eventos relacionados')}</h2>
      </div>
      <div className="r-rail ed-rev" style={{ paddingTop: 0 }}>
        {NEWS_RELATED_EVENTS.map(ev => <REventCard key={ev.id} ev={ev} />)}
      </div>
    </section>
  );
}

// ---- Related speakers (Event Detail speaker card, reused) ----
function NewsRelatedSpeakers() {
  const lang = React.useContext(LangContext);
  return (
    <section className="ed-sec na-related">
      <div className="r-wrap">
        <div className="ed-eyebrow ed-rev"><span className="tx">{tt(lang, 'Who appears in this story', 'Quem aparece nesta história')}</span><span className="ln"></span></div>
        <h2 className="ed-h ed-rev" style={{ marginBottom: 20 }}>{tt(lang, 'Related speakers', 'Oradores relacionados')}</h2>
      </div>
      <div className="ed-grail ed-bleedpad ed-rev">
        {NEWS_RELATED_SPEAKERS.map(g => <EdGuestCard key={g.id} g={g} />)}
      </div>
    </section>
  );
}

Object.assign(window, { NewsHero, NewsBody, NewsRelatedEvents, NewsRelatedSpeakers });