// ============================================================
// Tribeca Lisboa — LANDING CHROME (shared header + footer)
// Used by the pre-launch Landing page AND the pre-launch legal
// pages, so they share the same nav-less header + slimmed footer
// WITHOUT touching the main-site SiteHeader / RFooter.
// Load AFTER Primitives + i18n + data, BEFORE the page app.
// ============================================================
const IG_URL = 'https://www.instagram.com/tribecalisboa/';

// External links open in a new tab/window via the anchor's native
// target="_blank" rel="noopener noreferrer". We intentionally do NOT
// preventDefault here: native target=_blank is reliable and never
// popup-blocked, unlike window.open(). Kept as a no-op so existing
// onClick={(e) => openExt(e, url)} call sites stay unchanged.
function openExt(e, url) { /* let the anchor open the new tab natively */ }

// ---- Header (logo + lang + Instagram + SIC, no nav) ---------
function LpLang() {
  const [lang, setLang] = useLang();
  return (
    <div className="lp-lang">
      <button className={lang === 'EN' ? 'active' : ''} onClick={() => setLang('EN')}>EN</button>
      <span className="sep">/</span>
      <button className={lang === 'PT' ? 'active' : ''} onClick={() => setLang('PT')}>PT</button>
    </div>
  );
}
function LpHeader() {
  return (
    <header className="lp-hdr">
      <div className="lp-hdr-inner">
        <a className="lp-hdr-logo" href={urlFor('landing')}><Logo width={120} /></a>
        <div className="lp-hdr-actions">
          <LpLang />
          <a className="lp-hdr-ig" href={IG_URL} target="_blank" rel="noopener noreferrer" onClick={(e) => openExt(e, IG_URL)} aria-label="Instagram"><IconInstagram size={20} /></a>
        </div>
        <img className="lp-hdr-sic" src={R('uploads/sic_logo.svg')} alt="Powered by SIC Opto" />
      </div>
    </header>
  );
}

// ---- Footer (slimmed: Instagram, partners, legal, ©) --------
function LpFooter() {
  const lang = React.useContext(LangContext);
  const year = new Date().getFullYear();
  const legal = [
    { label: tt(lang, 'Privacy Policy', 'Política de Privacidade'), url: urlFor('legal_landing', 'privacy'), ext: false },
    { label: tt(lang, 'Cookies Policy', 'Política de Cookies'), url: urlFor('legal_landing', 'cookies'), ext: false },
    { label: tt(lang, 'Complaint Book', 'Livro de Reclamações'), url: 'https://www.livroreclamacoes.pt/Inicio/', ext: true },
  ];
  return (
    <footer className="lp-ft">
      <div className="r-wrap">
        <div className="lp-ft-top">
          <div className="lp-ft-brand">
            <Logo width={150} />
            <p className="lp-ft-tagline">{FIX('More than a festival')}</p>
            <div className="lp-ft-social">
              <a href={IG_URL} target="_blank" rel="noopener noreferrer" onClick={(e) => openExt(e, IG_URL)} aria-label="Instagram"><IconInstagram size={18} /></a>
            </div>
          </div>
          <nav className="lp-ft-legal">
            <h4>{tt(lang, 'Legal', 'Legal')}</h4>
            {legal.map((l) => l.ext
              ? <a key={l.label} href={l.url} target="_blank" rel="noopener noreferrer" onClick={(e) => openExt(e, l.url)}>{l.label}</a>
              : <a key={l.label} href={l.url}>{l.label}</a>)}
          </nav>
        </div>

        <div className="lp-ft-partners">
          <div>
            <div className="lp-ft-label">{tt(lang, 'Parceiro Principal', 'Parceiro Principal')}</div>
            <div className="lp-ft-logos"><img className="lp-plogo lp-plogo--main" src={R('uploads/crop/camara-municipal-lisboa.svg')} alt="Câmara Municipal de Lisboa" /></div>
          </div>
          <div>
            <div className="lp-ft-label">{tt(lang, 'Patrocinadores Oficiais', 'Patrocinadores Oficiais')}</div>
            <div className="lp-ft-logos">
              <img className="lp-plogo" src={R('uploads/crop/Toyota.svg')} alt="Toyota" />
              <img className="lp-plogo" src={R('uploads/crop/turismo-de-lisboa.svg')} alt="Turismo de Lisboa" />
            </div>
          </div>
          <div>
            <div className="lp-ft-label">{tt(lang, 'Parceiros Oficiais', 'Parceiros Oficiais')}</div>
            <div className="lp-ft-logos">
              <img className="lp-plogo lp-plogo--sm" src={R('uploads/crop/jornal-expresso.svg')} alt="Expresso" />
              <img className="lp-plogo lp-plogo--sm" src={R('uploads/crop/jcdecaux.svg')} alt="JCDecaux" />
              <img className="lp-plogo lp-plogo--sm" src={R('uploads/crop/rfm.svg')} alt="RFM" />
              <img className="lp-plogo lp-plogo--sm" src={R('uploads/crop/sic-noticias.svg')} alt="SIC Notícias" />
              <img className="lp-plogo lp-plogo--sm" src={R('uploads/crop/radio-renascenca.svg')} alt="Rádio Renascença" />
            </div>
          </div>
        </div>

        <div className="lp-ft-base">
          <span className="lp-ft-copy">© Tribeca Festival Lisboa {year}</span>
        </div>
      </div>
    </footer>
  );
}