// ============================================================
// Tribeca Lisboa — RESPONSIVE sections (bilingual EN/PT)
// Content selects language via LangContext + tt(). Fixed product
// labels (More than a festival / What's new / Live & Soon /
// From the feed) stay English via FIX().
// ============================================================
const { useState: useStateR } = React;
const useCtx = React.useContext;

const R_TABS = ['all', 'film', 'podcasts', 'talks', 'vibes', 'nightlive', 'immersive', 'awards', 'industry'];

// event/news titles → EN fallback helper
const evTitle = (lang, ev) => tt(lang, ev.titleEn || ev.title, ev.title);

// ---- Hero ---------------------------------------------------
function RHero() {
  const lang = useCtx(LangContext);
  return (
    <section className="r-hero">
      <video className="r-hero-img" autoPlay muted loop playsInline poster={R('uploads/video_thumbnail.png')}>
        <source src={R('uploads/about/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, '14-21 June • LISBON', '14-21 junho • LISBOA')}</span>
            <h1 className="r-hero-h1">{tt(lang, 'The European hub for storytelling', 'O hub europeu de storytelling')}</h1>
            <p className="r-hero-sub">{tt(lang, 'Where stories become culture.', 'Onde as histórias se transformam em cultura.')}</p>
          </Reveal>
          <Reveal className="r-hero-cta" delay={320} y={16}>
            <PrimaryButton onClick={() => {}}>{tt(lang, 'Learn more', 'Saber mais')}</PrimaryButton>
          </Reveal>
        </div>
      </div>
    </section>);

}

// ---- More than a festival -----------------------------------
function RMoreThanFestival() {
  const lang = useCtx(LangContext);
  return (
    <section className="r-band r-band--indigo">
      <div className="r-wrap r-mtf">
        <Reveal className="r-mtf-text">
          <h2 className="r-mtf-h">More<br />than a <span className="pink">festival</span></h2>
          <p className="r-mtf-sub">{tt(lang, 'A year-round cultural platform', 'Uma plataforma cultural durante todo o ano')}</p>
          <p className="r-mtf-body">{tt(lang,
            'A European platform for contemporary storytelling where culture, entertainment, creativity and talent meet to explore the future of stories and culture.',
            'Uma plataforma europeia de storytelling contemporâneo onde cultura, entretenimento, criatividade e talento se cruzam para explorar o futuro das histórias e da cultura.')}</p>
        </Reveal>
        <Reveal className="r-mtf-pillars" delay={140}>
          <img src={R('uploads/pillars_image.svg')} alt="Film · Podcasts · Talks · Vibes · Night Live · Immersive · Awards · Industry" />
        </Reveal>
        <Reveal className="r-mtf-cta" delay={280}><TertiaryButton color="#fff">{tt(lang, 'discover more', 'descobrir mais')}</TertiaryButton></Reveal>
      </div>
    </section>);

}

// ---- Event card + tabs + carousel ---------------------------
function REventCard({ ev }) {
  const lang = useCtx(LangContext);
  const c = CAT[ev.cat] || CAT.film;
  return (
    <article className="r-ecard" style={{ cursor: 'pointer' }} onClick={() => { location.href = urlFor('event', ev.id); }}>
      <div className="r-ecard-media">
        <img src={R(ev.img)} alt="" />
        <div className="r-ecard-label"><CardLabel cat={ev.cat} /></div>
      </div>
      <div className="r-ecard-body">
        <h3 className="r-ecard-title">{evTitle(lang, ev)}</h3>
        <div className="r-ecard-date">{ev.date}</div>
        <div className="r-ecard-venue"><IconPin /> {ev.venue}</div>
        <div style={{ marginTop: 32 }}><TertiaryButton color={c.hl}>{tt(lang, 'get tickets', 'comprar bilhetes')}</TertiaryButton></div>
        <div style={{ marginTop: 24 }}><ButtonLink color="#fff">{tt(lang, 'see more +', 'ver mais +')}</ButtonLink></div>
      </div>
    </article>);

}
function RCategoryTabs({ active, onChange }) {
  return (
    <div className="r-tabs">
      {R_TABS.map((t) => {
        const sel = active === t;
        const c = CAT[t];
        const bg = sel ? t === 'all' ? '#fff' : c.bg : 'transparent';
        const border = sel ? t === 'all' ? '#fff' : c.bg : 'var(--fg-3)';
        const markVariant = sel ? t === 'all' ? 'black' : 'hl' : 'grey';
        return (
          <div key={t} className="r-tab" onClick={() => onChange(t)} style={{ background: bg, borderColor: border }}>
            <img src={R(`${ASSET}/mark-${t}-${markVariant}.svg`)} alt={t} />
          </div>);

      })}
    </div>);

}
function RWhatsNew() {
  const lang = useCtx(LangContext);
  const [active, setActive] = useStateR('all');
  const list = active === 'all' ? EVENTS : EVENTS.filter((e) => e.cat === active);
  return (
    <section className="r-band r-band--black" id="whats-new" style={{ scrollMarginTop: 'var(--hdr-h)' }}>
      <div className="r-wrap">
        <Reveal><h2 className="r-h r-wn-title">{FIX('What’s new')}</h2></Reveal>
      </div>
      <Reveal delay={140}><RCategoryTabs active={active} onChange={setActive} /></Reveal>
      <Reveal className="r-rail" delay={240}>
        {list.length ?
        list.map((ev) => <REventCard key={ev.id} ev={ev} />) :
        <span style={{ color: 'var(--fg-3)', fontFamily: 'var(--font-text)', fontSize: 16, paddingLeft: 'var(--gut)' }}>{tt(lang, 'Coming soon.', 'Em breve.')}</span>}
      </Reveal>
    </section>);

}

// ---- Schedule -----------------------------------------------
function RScheduleList() {
  const lang = useCtx(LangContext);
  return (
    <section className="r-band r-band--black">
      <div className="r-wrap">
        <div className="r-sched">
          <Reveal>
            <div className="r-sched-head">
              <span className="r-sched-h">{tt(lang, 'Today', 'Hoje')} • {FIX('Live & Soon')}</span>
              <span className="r-sched-date">14/06</span>
            </div>
          </Reveal>
          <Reveal className="r-sched-list" delay={120}>
            {SCHEDULE.map((it, i) =>
            <div className="r-sched-row" key={i} style={{ cursor: it.id ? 'pointer' : 'default' }} onClick={() => { if (it.id) location.href = urlFor('event', it.id); }}>
                <div style={{ position: 'relative' }}>
                  <span className="r-sched-dot" style={{ background: it.color }}></span>
                  <span className="r-sched-time">{it.time}</span>
                </div>
                <div className="r-sched-main">
                  <div className="r-sched-title">{tt(lang, it.titleEn || it.title, it.title)}</div>
                  <div className="r-sched-venue"><IconPin /> {it.venue}</div>
                </div>
                <StatusBadge kind={it.status} />
              </div>
            )}
          </Reveal>
        </div>
      </div>
    </section>);

}

// ---- Notícias / News ----------------------------------------
function RNewsHighlight({ data }) {
  const lang = useCtx(LangContext);
  return (
    <div className="r-newshl" style={{ cursor: 'pointer' }} onClick={() => { location.href = urlFor('news', data.id); }}>
      <div className="r-newshl-img"><img src={R(data.img)} alt="" /></div>
      <div className="r-newshl-meta">
        <div><Tag cat={data.cat} /></div>
        <h3 className="r-newshl-title">{tt(lang, data.titleEn || data.title, data.title)}</h3>
        <p className="r-newshl-ex">{tt(lang, data.excerptEn || data.excerpt, data.excerpt)}</p>
      </div>
      <div><TertiaryButton color="#000">{tt(lang, 'Read more', 'Ler mais')}</TertiaryButton></div>
    </div>);

}
function RNewsCard({ item }) {
  const lang = useCtx(LangContext);
  return (
    <div className="r-newscard" style={{ cursor: 'pointer' }} onClick={() => { location.href = urlFor('news', item.id); }}>
      <div className="r-newscard-thumb"><img src={R(item.img)} alt="" /></div>
      <div className="r-newscard-body">
        {item.showTag && <div><Tag cat={item.cat} /></div>}
        <h3 className="r-newscard-title">{tt(lang, item.titleEn || item.title, item.title)}</h3>
        <div style={{ marginTop: 4 }}><TertiaryButton color="#000">{tt(lang, 'read more', 'ler mais')}</TertiaryButton></div>
      </div>
    </div>);

}
function RNoticias() {
  const lang = useCtx(LangContext);
  return (
    <section className="r-band r-band--white">
      <div className="r-wrap">
        <Reveal><h2 className="r-h r-news-h">{tt(lang, 'News', 'Notícias')}</h2></Reveal>
        <Reveal className="r-news" delay={120}>
          <RNewsHighlight data={NEWS_HIGHLIGHT} />
          <div className="r-news-list">
            {NEWS.map((n, i) =>
            <React.Fragment key={i}>
                <div className="r-rule"></div>
                <RNewsCard item={n} />
              </React.Fragment>
            )}
          </div>
          <div className="r-news-cta"><SecondaryButton dark={false}>{tt(lang, 'all news', 'todas as notícias')}</SecondaryButton></div>
        </Reveal>
      </div>
    </section>);

}

// ---- From the feed ------------------------------------------
function RFromTheFeed() {
  const lang = useCtx(LangContext);
  return (
    <section className="r-band r-band--black">
      <div className="r-wrap">
        <Reveal><h2 className="r-h" style={{ color: '#fff' }}>{FIX('From the feed')}</h2></Reveal>
        <Reveal className="r-feed-head" delay={120}>
          <IconInstagram size={32} />
          <TertiaryButton color="#fff">{tt(lang, 'follow @tribecalisboa', 'seguir @tribecalisboa')}</TertiaryButton>
        </Reveal>
        <Reveal className="r-feed-grid" delay={220}>
          {FEED.map((src, i) =>
          <div className="r-feed-cell" key={i}><img src={R(src)} alt="" /></div>
          )}
        </Reveal>
      </div>
    </section>);

}

// ---- Newsletter ---------------------------------------------
function RNewsletter() {
  const lang = useCtx(LangContext);
  const [email, setEmail] = useStateR('');
  const [agree, setAgree] = useStateR(false);
  const [done, setDone] = useStateR(false);
  return (
    <section className="r-band r-band--indigo">
      <div className="r-wrap r-nl">
        <Reveal><h2 className="r-h r-nl-h">{tt(lang, 'Subscribe to the newsletter', 'Subscrever newsletter')}</h2></Reveal>
        <Reveal delay={130}>
          {done ?
          <p className="r-nl-ok">{tt(lang, "Thank you! You're subscribed.", 'Obrigado! Estás subscrito.')}</p> :

          <div className="r-nl-form">
              <input className="r-nl-input" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={tt(lang, 'Your email', 'O teu email')} />
              <label className="r-nl-check">
                <span className="r-nl-box" onClick={() => setAgree((a) => !a)}>{agree && <span>✓</span>}</span>
                <span className="r-nl-consent">{tt(lang, 'I confirm I have read and accept the Privacy Policy', 'Confirmo que li e aceito a Política de Privacidade')}</span>
              </label>
              <div className="r-nl-cta"><SecondaryButton dark={true} onClick={() => {if (email && agree) setDone(true);}}>{tt(lang, 'subscribe', 'subscrever')}</SecondaryButton></div>
            </div>
          }
        </Reveal>
      </div>
    </section>);

}

// ---- Footer (editorial nav + trust + partner + legal hub) ---
function RFtXLogo() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" style={{ width: 18, height: 18, display: 'block' }}>
      <path d="M17.53 3h2.94l-6.42 7.34L21.6 21h-5.9l-4.62-6.04L5.8 21H2.86l6.87-7.85L2.4 3h6.05l4.18 5.52L17.53 3Zm-1.03 16.2h1.63L7.6 4.7H5.85L16.5 19.2Z" />
    </svg>
  );
}
function RFooter() {
  const lang = useCtx(LangContext);
  const year = new Date().getFullYear();
  const nav = [
    { label: tt(lang, 'Festival', 'Festival'), href: urlFor('soon', 'festival') },
    { label: FIX('More than a festival'), href: urlFor('soon', 'mtf') },
    { label: tt(lang, 'Full Program', 'Programa completo'), href: urlFor('soon', 'program') },
    { label: tt(lang, 'Pillars', 'Pilares'), href: urlFor('soon', 'pillars') },
    { label: FIX('What’s new'), href: urlFor('home') + '#whats-new', scroll: 'whats-new' },
    { label: tt(lang, 'About Tribeca', 'Sobre a Tribeca'), href: urlFor('about') },
    { label: tt(lang, 'News', 'Notícias'), href: urlFor('news_list') },
  ];
  const legal = [
    { label: tt(lang, 'Privacy Policy', 'Política de Privacidade'), href: urlFor('legal', 'privacy') },
    { label: tt(lang, 'Cookies Policy', 'Política de Cookies'), href: urlFor('legal', 'cookies') },
    { label: tt(lang, 'Complaint Book', 'Livro de Reclamações'), href: 'https://www.livroreclamacoes.pt/Inicio/', ext: true },
    { label: 'FAQs', href: null },
  ];
  const navLink = (n, i) => n.scroll
    ? <a key={i} href={n.href} onClick={(e) => handleScrollNav(e, n.scroll)}>{n.label}</a>
    : n.href
    ? <a key={i} href={n.href}>{n.label}</a>
    : <a key={i} href="#" onClick={(e) => e.preventDefault()}>{n.label}</a>;

  return (
    <footer className="r-ft">
      <div className="r-wrap">
        {/* top: brand + navigation + legal + social */}
        <div className="r-ft-top">
          <div className="r-ft-brand">
            <a className="r-ft-logo" href={urlFor('home')}><Logo width={150} /></a>
            <p className="r-ft-tagline">{FIX('More than a festival')}</p>
            <div className="r-ft-social">
              <a href="#" onClick={(e) => e.preventDefault()} aria-label="Instagram"><IconInstagram size={18} /></a>
              <a href="#" onClick={(e) => e.preventDefault()} aria-label="X"><RFtXLogo /></a>
            </div>
          </div>
          <nav className="r-ft-col">
            <h4 className="r-ft-col-h">{tt(lang, 'Navigation', 'Navegação')}</h4>
            {nav.map(navLink)}
          </nav>
          <nav className="r-ft-col">
            <h4 className="r-ft-col-h">{tt(lang, 'Legal', 'Legal')}</h4>
            {legal.map((l) => l.ext
              ? <a key={l.label} href={l.href} target="_blank" rel="noopener noreferrer">{l.label}</a>
              : l.href
              ? <a key={l.label} href={l.href}>{l.label}</a>
              : <a key={l.label} href="#" onClick={(e) => e.preventDefault()}>{l.label}</a>)}
          </nav>
        </div>

        {/* partners — tiered hierarchy */}
        <div className="r-ft-partners">
          <div className="r-ft-tier r-ft-tier--main">
            <div className="r-ft-label">{tt(lang, 'Partner Principal', 'Parceiro principal')}</div>
            <div className="r-ft-logos"><img className="r-plogo r-plogo--main" src={R('uploads/crop/camara-municipal-lisboa.svg')} alt="" /></div>
          </div>
          <div className="r-ft-tier">
            <div className="r-ft-label">{tt(lang, 'Official Sponsors', 'Patrocinadores oficiais')}</div>
            <div className="r-ft-logos">
              <img className="r-plogo" src={R('uploads/crop/Toyota.svg')} alt="" />
              <img className="r-plogo" src={R('uploads/crop/turismo-de-lisboa.svg')} alt="" />
            </div>
          </div>
          <div className="r-ft-tier r-ft-tier--partners">
            <div className="r-ft-label">{tt(lang, 'Official Partners', 'Parceiros oficiais')}</div>
            <div className="r-ft-logos">
              <img className="r-plogo r-plogo--sm" src={R('uploads/crop/jornal-expresso.svg')} alt="" />
              <img className="r-plogo r-plogo--sm" src={R('uploads/crop/jcdecaux.svg')} alt="" />
              <img className="r-plogo r-plogo--sm" src={R('uploads/crop/rfm.svg')} alt="" />
              <img className="r-plogo r-plogo--sm" src={R('uploads/crop/sic-noticias.svg')} alt="" />
              <img className="r-plogo r-plogo--sm" src={R('uploads/crop/radio-renascenca.svg')} alt="" />
            </div>
          </div>
        </div>

        {/* base: copyright + back to top */}
        <div className="r-ft-base">
          <span className="r-ft-copy">© Tribeca Festival Lisboa {year}</span>
          <button className="r-ft-top-btn" onClick={() => smoothScrollTo(0, 800)}>{tt(lang, 'Back to top', 'Voltar ao topo')} ↑</button>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  RHero, RMoreThanFestival, REventCard, RCategoryTabs, RWhatsNew, RScheduleList,
  RNewsHighlight, RNewsCard, RNoticias, RFromTheFeed, RNewsletter, RFooter
});