// ============================================================
// Tribeca Lisboa — ABOUT sections (bilingual EN/PT)
// Finalized EN copy + PT translations via tt(). Reads LangContext.
// "More than a festival" stays English (fixed phrase) via FIX().
// ============================================================
const AB = 'uploads/about';
const useCtxAb = React.useContext;

// 1 — HERO (video)
function AbHero() {
  const lang = useCtxAb(LangContext);
  return (
    <section className="ab-hero">
      <video autoPlay muted loop playsInline poster={`${AB}/ny-aerial.jpg`}>
        <source src={`${AB}/tribeca.mp4`} type="video/mp4" />
      </video>
      <div className="ab-hero-scrim"></div>
      <div className="ab-hero-in">
        <div className="r-wrap">
          <div className="ab-eyebrow ab-hero-eyebrow"><span className="ln"></span><span className="n">{tt(lang, 'About', 'Sobre')} · Tribeca Festival Lisboa</span></div>
          <h1>{tt(lang, 'A European hub', 'Um hub europeu')}<br />{tt(lang, 'for storytelling', 'para o storytelling')}</h1>
          <p className="ab-hero-sub">{tt(lang, 'Where stories become culture', 'Onde as histórias se transformam em cultura')}</p>
          <p className="ab-hero-intro">{tt(lang,
            'Tribeca Festival Lisboa is a year-round platform dedicated to contemporary storytelling. From film and television to podcasts, creators, gaming and immersive experiences, it brings together the people, ideas and formats shaping culture today—and tomorrow.',
            'O Tribeca Festival Lisboa é uma plataforma durante todo o ano dedicada ao storytelling contemporâneo. Do cinema e da televisão aos podcasts, criadores, gaming e experiências imersivas, reúne as pessoas, ideias e formatos que moldam a cultura hoje—e amanhã.')}</p>
        </div>
      </div>
      <div className="r-wrap ab-scrollcue-wrap" style={{ position: 'absolute', left: 0, right: 0, bottom: 0 }}>
        <div className="ab-scrollcue"><span className="bar"></span> {tt(lang, 'Scroll', 'Deslizar')}</div>
      </div>
    </section>
  );
}

// 2 — FROM NEW YORK TO THE WORLD
function AbOrigins() {
  const lang = useCtxAb(LangContext);
  return (
    <section className="ab-band r-band--black">
      <div className="r-wrap">
        <div className="ab-split">
          <div className="ab-split-text ab-rev">
            <div className="ab-eyebrow" style={{ color: 'var(--pink)' }}><span className="n">{tt(lang, '01 — Origins', '01 — Origens')}</span><span className="ln"></span></div>
            <h2 className="ab-h">{tt(lang, 'From New York', 'De Nova Iorque')}<br />{tt(lang, 'to the world', 'para o mundo')}</h2>
            <p className="ab-sub">{tt(lang, 'A cultural platform born from transformation', 'Uma plataforma cultural nascida da transformação')}</p>
            <p className="ab-body">{tt(lang,
              "Tribeca was founded in New York after September 11 with a simple ambition: bring people, culture and creativity back to the heart of the city. What started as a film festival evolved into one of the world's most influential cultural platforms, following the transformation of storytelling across media, technology and entertainment for more than 25 years.",
              'A Tribeca foi fundada em Nova Iorque após o 11 de setembro com uma ambição simples: trazer pessoas, cultura e criatividade de volta ao coração da cidade. O que começou como um festival de cinema tornou-se uma das plataformas culturais mais influentes do mundo, acompanhando a transformação do storytelling nos media, na tecnologia e no entretenimento há mais de 25 anos.')}</p>
          </div>
          <div className="ab-split-media ab-rev"><img src={`${AB}/ny-brooklyn-portrait.jpg`} alt="New York skyline and Brooklyn Bridge" /></div>
        </div>
      </div>
    </section>
  );
}

// 3 — 25 YEARS SHAPING CULTURE
function AbYears() {
  const lang = useCtxAb(LangContext);
  return (
    <section className="ab-band r-band--indigo ab-years">
      <div className="r-wrap">
        <div className="ab-rev big" aria-hidden="true">25<span className="u">{tt(lang, 'Years', 'Anos')}</span></div>
        <div className="ab-years-grid">
          <div className="ab-rev">
            <div className="ab-eyebrow" style={{ color: 'var(--vibes-hl)' }}><span className="n">{tt(lang, '02 — Legacy', '02 — Legado')}</span><span className="ln"></span></div>
            <h2 className="ab-h">{tt(lang, '25 years', '25 anos')}<br />{tt(lang, 'shaping culture', 'a moldar a cultura')}</h2>
          </div>
          <div className="ab-rev">
            <p className="ab-sub">{tt(lang, 'Not just observing change—helping drive it', 'Não apenas observar a mudança—ajudar a impulsioná-la')}</p>
            <p className="ab-body">{tt(lang,
              'For 25 years, Tribeca has championed new voices, emerging talent and evolving forms of storytelling. From independent cinema and television to podcasts, gaming, immersive experiences and AI, Tribeca has consistently created space for the ideas and creators shaping the future of culture.',
              'Durante 25 anos, a Tribeca defendeu novas vozes, talento emergente e formas de storytelling em constante evolução. Do cinema independente e da televisão aos podcasts, gaming, experiências imersivas e IA, a Tribeca criou consistentemente espaço para as ideias e criadores que moldam o futuro da cultura.')}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// 4 — TRIBECA IMPACT (visual stats)
const AB_STATS = [
  { v: '2002', k: 'Born in New York',    kPt: 'Nascido em Nova Iorque' },
  { v: '25',   k: 'Years shaping culture', kPt: 'Anos a moldar a cultura' },
  { v: '8',    k: 'Cultural universes',  kPt: 'Universos culturais' },
  { v: '2026', k: 'Lisbon · 14–21 Jun',  kPt: 'Lisboa · 14–21 Jun' },
];
const AB_CALLOUTS = ['film', 'podcasts', 'vibes', 'nightlive', 'immersive'].filter((k) => !(window.HIDDEN_CATS || []).includes(k));
function AbImpact() {
  const lang = useCtxAb(LangContext);
  return (
    <section className="ab-band r-band--black ab-impact">
      <div className="r-wrap">
        <div className="ab-eyebrow ab-rev" style={{ color: 'var(--pink)' }}><span className="n">{tt(lang, '03 — Impact', '03 — Impacto')}</span><span className="ln"></span></div>
        <h2 className="ab-h ab-rev">{tt(lang, 'A platform at the', 'Uma plataforma à')}<br />{tt(lang, 'scale of culture', 'escala da cultura')}</h2>
        <div className="ab-stats ab-rev">
          {AB_STATS.map((s, i) => (
            <div className="ab-stat" key={i}>
              <div className="v" style={{ color: ['var(--pink)', 'var(--light-blue)', 'var(--vibes-hl)', '#fff'][i] }}>{s.v}</div>
              <div className="k">{tt(lang, s.k, s.kPt)}</div>
            </div>
          ))}
        </div>
        <div className="ab-callouts ab-rev">
          {AB_CALLOUTS.map(k => <span className="ab-chip" key={k}>{(CAT[k] || {}).label || k}</span>)}
        </div>
      </div>
    </section>
  );
}

// 5 — WHY LISBON + TRIBECA FESTIVAL LISBOA
function AbLisbon() {
  const lang = useCtxAb(LangContext);
  return (
    <React.Fragment>
      {/* bridge moment: NY ↔ Lisbon */}
      <section className="r-band--black" style={{ paddingTop: 'var(--band-y)' }}>
        <div className="r-wrap">
          <div className="ab-eyebrow ab-rev" style={{ color: 'var(--pink)' }}><span className="n">{tt(lang, '04 — The Bridge', '04 — A Ponte')}</span><span className="ln"></span></div>
          <h2 className="ab-h ab-rev" style={{ marginBottom: 24 }}>{tt(lang, 'Connecting Portugal to a', 'A ligar Portugal a um')}<br />{tt(lang, 'global creative ecosystem', 'ecossistema criativo global')}</h2>
          <p className="ab-body ab-rev" style={{ maxWidth: '60ch', marginTop: 0, marginBottom: 40 }}>{tt(lang,
            "Lisbon has become one of Europe's most dynamic cultural and creative capitals. Tribeca Festival Lisboa was created to build a lasting bridge between Lisbon and New York, connecting Portuguese talent, creators, media and industry with international audiences, opportunities and cultural conversations.",
            'Lisboa tornou-se uma das capitais culturais e criativas mais dinâmicas da Europa. O Tribeca Festival Lisboa foi criado para construir uma ponte duradoura entre Lisboa e Nova Iorque, ligando o talento, os criadores, os media e a indústria portuguesa a audiências, oportunidades e conversas culturais internacionais.')}</p>
        </div>
        <div className="ab-bridge-single ab-rev"><img src="uploads/TRIBECA_BRIDGES.png" alt="Brooklyn Bridge and Ponte 25 de Abril" /></div>
      </section>

      {/* closing manifesto over Lisbon imagery */}
      <section className="ab-close">
        <div className="ab-close-media"><img src={`${AB}/lisbon-sunset.jpg`} alt="Lisbon at sunset" /></div>
        <div className="ab-close-scrim"></div>
        <div className="ab-close-in">
          <div className="r-wrap">
            <div className="ab-tfl ab-rev" style={{ marginBottom: 40 }}>
              <div className="lab">Tribeca Festival Lisboa</div>
              <p className="ab-body" style={{ marginTop: 0, color: '#fff', maxWidth: '56ch' }}>{tt(lang,
                'More than a festival, Tribeca Festival Lisboa is a platform for exchange, collaboration and cultural discovery. It celebrates the stories that shaped us, amplifies the stories being told today and helps launch the stories that will define the future.',
                'More than a festival, o Tribeca Festival Lisboa é uma plataforma de intercâmbio, colaboração e descoberta cultural. Celebra as histórias que nos moldaram, amplifica as histórias que se contam hoje e ajuda a lançar as histórias que vão definir o futuro.')}</p>
            </div>
            <p className="ab-manifesto ab-rev">{tt(lang, 'Because some cities host culture.', 'Porque algumas cidades acolhem a cultura.')}<br /><span className="hl">{tt(lang, 'Others help shape it.', 'Outras ajudam a moldá-la.')}</span></p>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { AbHero, AbOrigins, AbYears, AbImpact, AbLisbon });