// ============================================================
// Tribeca Lisboa — PRE-LAUNCH LANDING (standalone page)
// Independent of the main site chrome. Reuses i18n + Primitives
// (Logo, IconInstagram, TertiaryButton, Reveal) + RNewsletter.
// Bilingual EN/PT. No primary navigation.
// ============================================================
const { useState: useStateLP, useEffect: useEffectLP, useRef: useRefLP } = React;
const AB = 'uploads/about';
const TICKETS_URL = 'https://sic.bol.pt/Comprar/Bilhetes/169974-a_bronx_tale_one_man_show_by_chazz%20_palminteri-sic_sociedade_independente_de_comunicacao_s_a';

// IG_URL + openExt + LpLang/LpHeader/LpFooter are shared from LandingChrome.jsx

// reveal-on-scroll (window scroll) — toggles .ab-rev → .in
function useLpReveal(rootRef) {
  useEffectLP(() => {
    const root = rootRef.current; if (!root) return;
    const els = root.querySelectorAll('.ab-rev');
    if (window.PREFERS_REDUCED) { els.forEach(e => e.classList.add('in')); return; }
    const vh = () => window.innerHeight || document.documentElement.clientHeight;
    const check = () => els.forEach(el => { if (!el.classList.contains('in')) { const r = el.getBoundingClientRect(); if (r.top < vh() - 40 && r.bottom > 0) el.classList.add('in'); } });
    let frames = 0, raf, alive = true;
    const burst = () => { if (!alive) return; check(); if (frames++ < 16) raf = requestAnimationFrame(burst); };
    const onScroll = () => check();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    burst();
    const t1 = setTimeout(check, 300), t2 = setTimeout(check, 800);
    return () => { alive = false; cancelAnimationFrame(raf); clearTimeout(t1); clearTimeout(t2); window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
  }, []);
}

// ---- Header (logo + lang + Instagram + SIC, no nav) → LandingChrome.jsx ---

// ---- Hero (homepage hero design: video + bottom-left badge/H1/sub) ---
function LpHero() {
  const lang = React.useContext(LangContext);
  return (
    <section className="r-hero" id="top">
      <video className="r-hero-img" autoPlay muted loop playsInline poster={R(`${AB}/ny-aerial.jpg`)}>
        <source src={R(`${AB}/tribeca.mp4`)} type="video/mp4" />
      </video>
      <div className="r-hero-grad"></div>
      <div className="r-hero-body">
        <div className="r-wrap r-hero-inner">
          <Reveal className="r-hero-col" delay={160} y={20}>
            <span className="r-hero-badge">{tt(lang, '9–13 DEC 2026', '9–13 DEZ 2026')}</span>
            <h1 className="r-hero-h1">{tt(lang, 'Tribeca Lisboa is back', 'O Tribeca Lisboa está de volta')}</h1>
            <p className="r-hero-sub lp-hero-sub">{tt(lang,
              'The future of culture lives in Lisbon, on Avenida da Liberdade, during the most magical time of the year.',
              'O futuro da cultura vive em Lisboa na Avenida da Liberdade durante a época mais mágica do ano.')}</p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---- 00 — About hub -----------------------------------------
function LpAbout() {
  const lang = React.useContext(LangContext);
  const disc = lang === 'EN'
    ? ['Film', 'Music', 'Entertainment', 'Talent', 'Creativity']
    : ['Cinema', 'Música', 'Entretenimento', 'Talento', 'Criatividade'];
  return (
    <section className="ab-band r-band--black">
      <div className="r-wrap">
        <div className="ab-rev">
          <div className="ab-eyebrow" style={{ color: 'var(--pink)' }}><span className="n">{tt(lang, '00 — About · Tribeca Festival Lisboa', '00 — Sobre · Tribeca Festival Lisboa')}</span><span className="ln"></span></div>
          <h2 className="ab-h" style={{ maxWidth: '16ch' }}>{tt(lang, 'The European hub for storytelling', 'O hub europeu para o storytelling')}</h2>
          <div className="lp-disc">
            {disc.map((d, i) => (
              <React.Fragment key={d}>
                <span>{d}</span>{i < disc.length - 1 && <span className="dot">·</span>}
              </React.Fragment>
            ))}
          </div>
          <p className="ab-body" style={{ marginTop: 28 }}>{tt(lang,
            'Tribeca Festival Lisboa is much more than a festival. It is a year-round platform dedicated to contemporary storytelling. From film to podcasts, from music to television, creators, talent, and creativity come together in Lisbon through ideas and immersive formats that shape the culture of today and tomorrow.',
            'O Tribeca Festival Lisboa é muito mais que um festival. É uma plataforma que durante todo o ano se dedica ao storytelling contemporâneo. Do cinema aos podcasts, da música à televisão, criadores, talento e criatividade reúnem-se em Lisboa, com ideias e formatos imersivos que moldam a cultura hoje e do futuro.')}</p>
        </div>
      </div>
    </section>
  );
}

// ---- 01 — Origins (split, NY) -------------------------------
function LpOrigins() {
  const lang = React.useContext(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 to the world', 'De Nova Iorque 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 with a simple ambition: to bring people, culture, and creativity back to the heart of the city that never sleeps after September 11. What began as a film festival has become one of the world's most relevant cultural platforms, following the evolution of storytelling across film, music, technology, and entertainment for more than 25 years.",
              'O Tribeca foi fundado em Nova Iorque com uma ambição simples: trazer pessoas, cultura e criatividade ao coração da cidade que nunca dorme, após o 11 de setembro. O que começou como um festival de cinema tornou-se uma das plataformas culturais mais relevantes do mundo, acompanhando a transformação do storytelling no cinema, na música, na tecnologia e no entretenimento há mais de 25 anos.')}</p>
          </div>
          <div className="ab-split-media ab-rev"><img src={R(`${AB}/ny-brooklyn-portrait.jpg`)} alt="New York" /></div>
        </div>
      </div>
    </section>
  );
}

// ---- 02 — Legacy (indigo, 25 years) -------------------------
function LpLegacy() {
  const lang = React.useContext(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 shaping culture', '25 anos a moldar a cultura')}</h2>
            <p className="ab-sub" style={{ marginTop: 16 }}>{tt(lang, 'Much more than a festival.', 'Muito mais do que um festival.')}</p>
          </div>
          <div className="ab-rev">
            <p className="ab-body" style={{ marginTop: 0 }}>{tt(lang,
              'For 25 years, Tribeca has been a stage for new voices, championing emerging talent and paving the way for innovative forms of storytelling through a constant reinvention of culture and creativity.',
              'Há 25 anos que o Tribeca tem sido um palco para novas vozes, impulsionando o talento emergente e abrindo caminho a formas inovadoras de storytelling, numa constante reinvenção da cultura e da criatividade.')}</p>
            <p className="ab-body">{tt(lang,
              'By bringing together different creative communities, it has become much more than a festival: a meeting point where filmmakers, artists, platforms, brands, startups, media, and creators share ideas, challenge conventions, and build the future of storytelling.',
              'Ao unir diferentes comunidades criativas, tornou-se muito mais do que um festival: um ponto de encontro onde realizadores, artistas, plataformas, marcas, startups, media e criadores partilham ideias, desafiam convenções e constroem o futuro do storytelling.')}</p>
            <p className="ab-body">{tt(lang,
              "Over the past two and a half decades, Tribeca has launched award-winning works, introduced some of today's most influential filmmakers, and propelled previously undiscovered talent, establishing itself as a benchmark platform for those shaping what comes next.",
              'Ao longo destas duas décadas e meia, o Tribeca lançou obras premiadas, revelou alguns dos mais influentes cineastas da atualidade e impulsionou talentos ainda desconhecidos, afirmando-se como uma plataforma de referência para quem está a definir o que vem a seguir.')}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- 03 — Impact (keyword list, visual-led) -----------------
function LpImpact() {
  const lang = React.useContext(LangContext);
  const keys = lang === 'EN'
    ? ['Film', 'Music', 'Entertainment', 'Talent', 'Creativity']
    : ['Cinema', 'Música', 'Entretenimento', 'Talento', 'Criatividade'];
  return (
    <section className="ab-band r-band--black">
      <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" style={{ marginBottom: 36, maxWidth: '14ch' }}>{tt(lang, 'A platform at the scale of culture', 'Uma plataforma à escala da cultura')}</h2>
        <div className="lp-keys ab-rev">
          {keys.map((k, i) => (
            <div className="lp-key" key={k}>
              <span className="num">{String(i + 1).padStart(2, '0')}</span>
              <span className="word">{k}</span>
            </div>
          ))}
        </div>
        <div className="lp-impact-media ab-rev"><img src={R(`${AB}/ny-times-square.jpg`)} alt="Times Square, New York" /></div>
      </div>
    </section>
  );
}

// ---- 04 — The Bridge (NY ↔ Lisbon) --------------------------
function LpBridge() {
  const lang = React.useContext(LangContext);
  return (
    <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: 32, maxWidth: '18ch' }}>{tt(lang, 'Portugal as a bridge for global creativity', 'Portugal enquanto ponte para a criatividade global')}</h2>
      </div>
      <div className="ab-bridge ab-rev">
        <figure><img src={R(`${AB}/ny-brooklyn-sunset.jpg`)} alt="New York" /><div className="ab-bridge-grad"></div><figcaption><span className="tag">{tt(lang, 'Origin', 'Origem')}</span>{tt(lang, 'New York', 'Nova Iorque')}</figcaption></figure>
        <figure><img src={R(`${AB}/lisbon-bridge-bus.jpg`)} alt="Lisboa" /><div className="ab-bridge-grad"></div><figcaption><span className="tag">{tt(lang, 'Home', 'Casa')}</span>Lisboa</figcaption></figure>
      </div>
      <div className="r-wrap" style={{ marginTop: 40 }}>
        <p className="ab-body ab-rev" style={{ maxWidth: '60ch' }}>{tt(lang,
          "Lisbon has become one of Europe's most dynamic cultural and creative capitals. Tribeca Festival Lisboa was created to build a lasting cultural 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 cultural 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>
        <p className="ab-body ab-rev" style={{ maxWidth: '60ch' }}>{tt(lang,
          'A new hub for storytelling in Europe is born, with its eyes on the future and the world.',
          'Nasce assim um novo hub para o storytelling na Europa, de olhos postos no futuro e no mundo.')}</p>
      </div>
    </section>
  );
}

// ---- 05 — Tribeca Festival Lisboa (manifesto close) ---------
function LpClose() {
  const lang = React.useContext(LangContext);
  return (
    <section className="ab-close" style={{ background: '#000' }}>
      <div className="ab-close-in">
        <div className="r-wrap">
          <div className="ab-tfl ab-rev" style={{ marginBottom: 40 }}>
            <div className="lab">{tt(lang, '05 — Tribeca Festival Lisboa', '05 — Tribeca Festival Lisboa')}</div>
            <p className="ab-body" style={{ marginTop: 8, color: '#fff', maxWidth: '58ch' }}>{tt(lang,
              'More than a festival, Tribeca Festival Lisboa is a platform for exchange, collaboration, and cultural discovery, connecting Lisbon and New York — two cities shaped by culture.',
              'More than a festival, o Tribeca Festival Lisboa é uma plataforma de intercâmbio, colaboração e descoberta cultural, que liga Lisboa e Nova Iorque — duas cidades moldadas pela cultura.')}</p>
            <p className="ab-body" style={{ color: '#fff', maxWidth: '58ch' }}>{tt(lang,
              'More than hosting a festival, Lisbon becomes part of a global conversation about the future of culture, creativity, and entertainment. Here, we celebrate the stories that shaped us, amplify the stories being told today, and launch the stories that will define tomorrow.',
              'Mais do que receber um festival, Lisboa entra numa conversa global sobre o futuro da cultura, criatividade e entretenimento. Aqui celebram-se as histórias que nos moldaram, amplificam-se as que se contam hoje e lançam-se as que vão definir o futuro.')}</p>
          </div>
          <p className="ab-manifesto ab-rev">{tt(lang, 'While some cities host culture,', 'Enquanto algumas cidades acolhem a cultura,')}<br /><span className="hl">{tt(lang, 'others shape it.', 'outras moldam-na.')}</span></p>
        </div>
      </div>
    </section>
  );
}

// ---- NEWS — single full article (white) ---------------------
function LpNews() {
  const lang = React.useContext(LangContext);
  return (
    <section className="lp-news">
      <div className="r-wrap lp-news-in">
        <div className="lp-news-grid">
          <div className="lp-news-media ab-rev"><img src={R(`${AB}/chazz2.jpg`)} alt="Chazz Palminteri" /></div>
          <div className="lp-news-text ab-rev">
            <span className="lp-news-tag">News</span>
            <h2 className="lp-news-title">{tt(lang,
              'Tribeca Festival Lisboa and Ageas present: “A Bronx Tale: One Man Show”',
              'Tribeca Festival Lisboa e Ageas apresentam: “A Bronx Tale: One Man Show”')}</h2>
            <p className="lp-news-sub">{tt(lang,
              'Chazz Palminteri’s acclaimed one-man show arrives in Lisbon on June 10.',
              'O espetáculo de Chazz Palminteri que conquistou Hollywood chega a Lisboa a 10 de junho.')}</p>
            <p className="lp-news-body">{tt(lang,
              'After conquering Hollywood and Broadway, “A Bronx Tale: One Man Show” arrives at Cinema São Jorge in Lisbon on June 10. Written and performed by Chazz Palminteri, this autobiographical show recounts his childhood in the Bronx and the dilemmas of loyalty, family, and morality. On stage, Palminteri brings 18 characters to life in a remarkable performance that has sold out more than 1,100 shows across the United States and was named Best Show of the Year in Las Vegas. A powerful, moving, and deeply personal true story that promises to inspire and captivate Portuguese audiences.',
              'Depois de conquistar Hollywood e a Broadway, “A Bronx Tale: One Man Show” chega a 10 de junho, ao Cinema São Jorge, em Lisboa. Escrito e interpretado por Chazz Palminteri, este espetáculo autobiográfico retrata a infância no Bronx e os dilemas entre lealdade, família e moralidade. Palminteri dá vida a 18 personagens numa performance brilhante que já esgotou mais de 1.100 sessões nos EUA e foi eleita Melhor Espetáculo do Ano em Las Vegas. Uma história real, intensa e emocionante que promete inspirar e emocionar o público português.')}</p>
            <blockquote className="lp-news-quote">{tt(lang, '“A true and moving story.”', '“Uma história verdadeira e emocionante.”')}
              <span className="src">{tt(lang, '— The New York Times', '– The New York Times')}</span>
            </blockquote>
            <div className="lp-news-cta">
              <a href={TICKETS_URL} target="_blank" rel="noopener noreferrer" onClick={(e) => openExt(e, TICKETS_URL)} style={{ textDecoration: 'none' }}>
                <TertiaryButton color="#000">{tt(lang, 'Buy Tickets', 'Comprar Bilhetes')}</TertiaryButton>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- From the feed (image-led, clickable → Instagram) -------
// Local copies of the @tribecalisboa feed (see uploads/tribeca_instagram_images/posts.json).
const LP_FEED_DIR = 'uploads/tribeca_instagram_images';
const LP_FEED = [
  { img: `${LP_FEED_DIR}/18412759585178612.webp`, url: 'https://www.instagram.com/p/DZF3-fjDu53/' },
  { img: `${LP_FEED_DIR}/18591411106012367.webp`, url: 'https://www.instagram.com/p/DZDRnTjuoeB/' },
  { img: `${LP_FEED_DIR}/18003678386923648.webp`, url: 'https://www.instagram.com/p/DZDRgtlujBm/' },
  { img: `${LP_FEED_DIR}/17963649332938054.webp`, url: 'https://www.instagram.com/p/DZDQ9s8Oatr/' },
  { img: `${LP_FEED_DIR}/18086503313620653.webp`, url: 'https://www.instagram.com/p/DYzBij1uJm0/' },
  { img: `${LP_FEED_DIR}/18426205777121836.webp`, url: 'https://www.instagram.com/p/DYP216Lu3yh/' },
  { img: `${LP_FEED_DIR}/18053843006480488.webp`, url: 'https://www.instagram.com/reel/DVtU_9RjVC2/' },
  { img: `${LP_FEED_DIR}/18091637834107737.webp`, url: 'https://www.instagram.com/p/DVjNdyODRwa/' },
  { img: `${LP_FEED_DIR}/18059995355353302.webp`, url: 'https://www.instagram.com/reel/DVf7V_aDZaj/' },
  { img: `${LP_FEED_DIR}/18096167057072614.webp`, url: 'https://www.instagram.com/p/DVbfFWcjYRj/' },
];
function LpFeed() {
  const lang = React.useContext(LangContext);
  return (
    <section className="ab-band r-band--black">
      <div className="r-wrap">
        <div className="ab-rev"><h2 className="r-h" style={{ color: '#fff' }}>{FIX('From the feed')}</h2></div>
        <div className="r-feed-head ab-rev">
          <a href={IG_URL} target="_blank" rel="noopener noreferrer" onClick={(e) => openExt(e, IG_URL)} style={{ color: '#fff', display: 'flex' }} aria-label="Instagram"><IconInstagram size={32} /></a>
          <a href={IG_URL} target="_blank" rel="noopener noreferrer" onClick={(e) => openExt(e, IG_URL)} style={{ textDecoration: 'none' }}>
            <TertiaryButton color="#fff">{tt(lang, 'follow @tribecalisboa', 'seguir @tribecalisboa')}</TertiaryButton>
          </a>
        </div>
        <div className="r-feed-grid lp-feed-grid ab-rev">
          {LP_FEED.map((p, i) => (
            <a className="r-feed-cell lp-feed-cell" key={i} href={p.url} target="_blank" rel="noopener noreferrer" onClick={(e) => openExt(e, p.url)} aria-label={`Instagram post ${i + 1}`}>
              <img src={R(p.img)} alt="" loading="lazy" />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Footer → LandingChrome.jsx -----------------------------

// ---- App ----------------------------------------------------
function Landing() {
  const [lang] = useLang();
  const rootRef = useRefLP(null);
  useLpReveal(rootRef);
  return (
    <LangContext.Provider value={lang}>
      <div className="lp" ref={rootRef}>
        <LpHeader />
        <LpHero />
        <LpAbout />
        <LpOrigins />
        <LpLegacy />
        <LpImpact />
        <LpBridge />
        <LpClose />
        <LpNews />
        <LpFeed />
        <LpFooter />
      </div>
    </LangContext.Provider>
  );
}

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