// ============================================================
// Tribeca Lisboa — SALAS page (Festival: venues / how to get there / contacts)
// Bilingual. Title "Festival" + tabs that smooth-scroll to sections.
// ============================================================
const { useState: useStateSL, useEffect: useEffectSL } = React;

const SL_VENUES = [
  {
    id: 'sao-jorge', name: 'Cinema São Jorge', img: 'uploads/cinema-sao-jorge_lisboa-cidade_fachada-noite.jpg',
    pt: 'Um dos espaços culturais mais emblemáticos de Lisboa, o Cinema São Jorge abriu portas em 1950 e destaca-se pela sua arquitetura histórica e localização central, na Avenida da Liberdade. Atualmente, recebe uma programação diversificada de cinema, música, teatro, dança e outros eventos culturais.',
    en: 'One of Lisbon’s most emblematic cultural venues, Cinema São Jorge opened in 1950 and stands out for its historic architecture and central location on Avenida da Liberdade. Today it hosts a diverse programme of film, music, theatre, dance and other cultural events.',
    address: 'Av. da Liberdade 175, 1250-096 Lisboa', tel: '(+351) 21 310 34 00',
    email: 'info@cinemasaojorge.pt', site: 'https://www.cinemasaojorge.pt', siteLabel: 'cinemasaojorge.pt',
  },
  {
    id: 'capitolio', name: 'Cineteatro Capitólio', img: 'uploads/cineteatro-capitolio_wikinight_fachada-noite.jpg',
    pt: 'Situado no Parque Mayer, o Capitólio é uma das salas históricas de Lisboa e um marco da arquitetura modernista portuguesa. Inaugurado em 1931 e reabilitado no século XXI, acolhe atualmente concertos, espetáculos, conferências e outros eventos culturais.',
    en: 'Located in Parque Mayer, the Capitólio is one of Lisbon’s historic venues and a landmark of Portuguese modernist architecture. Opened in 1931 and restored in the 21st century, it now hosts concerts, shows, conferences and other cultural events.',
    address: 'Parque Mayer, 1250-164 Lisboa', tel: '(+351) 211 385 340',
    email: 'info@capitolio.pt', site: 'https://teatrovariedades-capitolio.pt/', siteLabel: 'teatrovariedades-capitolio.pt',
  },
  {
    id: 'tivoli', name: 'Teatro Tivoli BBVA', img: 'uploads/teatro-tivoli_casa-do-marques_fachada-noite.webp',
    pt: 'Inaugurado em 1924 na Avenida da Liberdade, o Teatro Tivoli BBVA é um dos teatros históricos mais reconhecidos de Lisboa. Com uma programação que cruza teatro, música, dança, comédia e grandes espetáculos, mantém uma forte ligação à vida cultural da cidade.',
    en: 'Opened in 1924 on Avenida da Liberdade, Teatro Tivoli BBVA is one of Lisbon’s best-known historic theatres. With a programme spanning theatre, music, dance, comedy and major productions, it keeps a strong connection to the city’s cultural life.',
    address: 'Av. da Liberdade, 182, 1250-146 Lisboa', tel: '(+351) 21 315 1050',
    email: 'teatrotivolibbva@uau.pt', site: 'https://www.teatrotivolibbva.pt', siteLabel: 'teatrotivolibbva.pt',
  },
];

const SL_TABS = [
  { id: 'salas', en: 'Venues', pt: 'Salas' },
  { id: 'como-chegar', en: 'Getting there', pt: 'Como chegar' },
  { id: 'contactos', en: 'Contacts', pt: 'Contactos' },
];

function SlIcon({ name }) {
  const p = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'pin') return <svg width="16" height="16" viewBox="0 0 24 24"><path {...p} d="M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z" /><circle {...p} cx="12" cy="10" r="2.5" /></svg>;
  if (name === 'tel') return <svg width="16" height="16" viewBox="0 0 24 24"><path {...p} d="M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a1 1 0 01-1 1A16 16 0 014 5a1 1 0 011-1z" /></svg>;
  return <svg width="16" height="16" viewBox="0 0 24 24"><rect {...p} x="3" y="5" width="18" height="14" /><path {...p} d="M3 7l9 6 9-6" /></svg>;
}

function SalasInner() {
  const lang = useCtx(LangContext);
  const [menu, setMenu] = useStateSL(false);
  const [active, setActive] = useStateSL('salas');

  useEffectSL(() => {
    const onScroll = () => {
      const mark = 220;
      let cur = SL_TABS[0].id;
      for (const t of SL_TABS) {
        const el = document.getElementById(t.id);
        if (el && el.getBoundingClientRect().top <= mark) cur = t.id;
      }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const jumpTo = (id) => {
    const el = document.getElementById(id); if (!el) return;
    const hdr = (parseInt(getComputedStyle(document.documentElement).getPropertyValue('--hdr-h')) || 82) + 70;
    window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - hdr, behavior: 'smooth' });
  };

  return (
    <div className="sl-page">
      <SiteHeader onMenu={() => setMenu(true)} />

      <header className="sl-hero">
        <div className="r-wrap"><h1 className="sl-h1">Info</h1></div>
      </header>

      <nav className="sl-tabsbar" aria-label={tt(lang, 'Page sections', 'Secções da página')}>
        <div className="r-wrap">
          <div className="sl-tabs">
            {SL_TABS.map((t) => (
              <button key={t.id} className={`sl-tab ${active === t.id ? 'is-active' : ''}`} onClick={() => jumpTo(t.id)}>{tt(lang, t.en, t.pt)}</button>
            ))}
          </div>
        </div>
      </nav>

      {/* SALAS */}
      <section className="sl-sec" id="salas">
        <div className="r-wrap">
          <h2 className="sl-h2">{tt(lang, 'Venues', 'Salas')}</h2>
          <p className="sl-intro">{tt(lang,
            'Tribeca Festival Lisboa takes over Avenida da Liberdade, bringing its programme to three of the city’s iconic venues — Cinema São Jorge, Cineteatro Capitólio and Tivoli BBVA. During the festival, these historic spaces become meeting points for film, culture and talent, celebrating Lisbon as the hub of European storytelling.',
            'O Tribeca Festival Lisboa toma conta da Avenida da Liberdade, levando a sua programação a três salas icónicas da cidade — o Cinema São Jorge, o Cineteatro Capitólio e o Tivoli BBVA. Durante o festival, estes espaços históricos transformam-se em pontos de encontro para cinema, cultura e talento, celebrando Lisboa como o hub do storytelling europeu.')}</p>
          <div className="sl-venues">
            {SL_VENUES.map((v) => (
              <article className="sl-venue" key={v.id}>
                <div className="sl-venue-media">
                  <img src={R(v.img)} alt={v.name} />
                </div>
                <div>
                  <h3 className="sl-venue-name">{v.name}</h3>
                  <p className="sl-venue-desc">{tt(lang, v.en, v.pt)}</p>
                  <div className="sl-venue-info">
                    <div className="sl-info-row"><SlIcon name="pin" /><span>{v.address}</span></div>
                    <div className="sl-info-row"><SlIcon name="tel" /><a href={`tel:${v.tel.replace(/[^\d+]/g, '')}`}>{tt(lang, 'Tel.', 'Tel.')} {v.tel}</a></div>
                    <div className="sl-info-row"><SlIcon name="mail" /><a href={`mailto:${v.email}`}>{v.email}</a></div>
                  </div>
                  <a className="sl-site" href={v.site} target="_blank" rel="noopener noreferrer">{v.siteLabel} ↗</a>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* COMO CHEGAR */}
      <section className="sl-sec" id="como-chegar">
        <div className="r-wrap">
          <h2 className="sl-h2">{tt(lang, 'Getting there', 'Como chegar')}</h2>
          <div className="sl-way-h">{tt(lang, 'Transport', 'Transportes')}</div>
          <p className="sl-transport-lead">{tt(lang,
            'To avoid traffic and the difficulty of finding parking, and to ensure a stress-free arrival with a lower environmental impact, we suggest using public transport or ride-sharing platforms such as Uber or Bolt.',
            'Para evitar o trânsito e a dificuldade em encontrar estacionamento e assegurar uma chegada sem stress e com menor impacto ambiental, sugerimos a utilização de transportes públicos ou de plataformas de ride sharing como Uber ou Bolt.')}</p>
          <div className="sl-ways">
            <div className="sl-way">
              <h3 className="sl-way-h">Metro</h3>
              <ul>
                <li>{tt(lang, 'Blue Line — Avenida station', 'Linha Azul — Estação Avenida')}</li>
                <li>{tt(lang, 'Blue Line / Yellow Line — Marquês de Pombal station', 'Linha Azul / Linha Amarela — Estação Marquês de Pombal')}</li>
                <li>{tt(lang, 'Blue Line — Restauradores station', 'Linha Azul — Estação Restauradores')}</li>
              </ul>
            </div>
            <div className="sl-way">
              <h3 className="sl-way-h">{tt(lang, 'Bus (Carris)', 'Autocarro (Carris)')}</h3>
              <ul>
                <li>{tt(lang, 'Lines 711, 732, 736, 744 — Av. Liberdade stop', 'Linhas 711, 732, 736, 744 — paragem Av. Liberdade')}</li>
              </ul>
            </div>
            <div className="sl-way">
              <h3 className="sl-way-h">{tt(lang, 'Parking', 'Estacionamento')}</h3>
              <ul>
                <li>Parque Telpark Restauradores</li>
                <li>Parque Avenida da Liberdade 245</li>
                <li>Av. da Liberdade 160 Parking</li>
                <li>{tt(lang, 'EMEL Parque Mayer car park', 'Estacionamento EMEL Parque Mayer')}</li>
                <li>{tt(lang, 'Tivoli Forum car park — entrance via Rua do Carrião', 'Estacionamento Tivoli Forum — entrada via Rua do Carrião')}</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* CONTACTOS */}
      <section className="sl-sec" id="contactos">
        <div className="r-wrap">
          <h2 className="sl-h2">{tt(lang, 'Contacts', 'Contactos')}</h2>
          <div className="sl-contacts">
            <div>
              <div className="sl-contact-k">Email</div>
              <div className="sl-contact-v"><a href="mailto:tribecalisboa@sic.pt">tribecalisboa@sic.pt</a></div>
            </div>
            <div>
              <div className="sl-contact-k">{tt(lang, 'Head office', 'Sede')}</div>
              <div className="sl-contact-v">Rua Calvet de Magalhães, 242, Edifício Impresa<br />2770-022 Paço de Arcos,<br />Portugal</div>
            </div>
          </div>
        </div>
      </section>

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

function Salas() {
  const [lang] = useLang();
  return <LangContext.Provider value={lang}><SalasInner /></LangContext.Provider>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Salas />);