/* TOT26 · Master 14 — Closing thank-you Reel, 1080×1920. */
const L14 = {
  en: {
    lg: 'en', lang: 'English', code: 'TOT26_cierre_viajero_9x16_gracias_EN_v1',
    eyebrow: 'Oct 28 – Nov 27, 2026', title: 'Thank you for a month of Tulum.',
    script: 'come, celebrate & savor', line: 'Four weeks. Four themes. One pass.',
    note: 'To every venue, every team and everyone who came to the table — thank you.',
    cta: 'See you next edition', cb: 'Supported by'
  },
  es: {
    lg: 'es', lang: 'Español', code: 'TOT26_cierre_viajero_9x16_gracias_ES_v1',
    eyebrow: '28 oct – 27 nov, 2026', title: 'Gracias por un mes de Tulum.',
    script: 'ven, celebra y saborea', line: 'Cuatro semanas. Cuatro temas. Un pase.',
    note: 'A cada sede, cada equipo y cada persona que se sentó a la mesa: gracias.',
    cta: 'Nos vemos en la próxima edición', cb: 'Con el respaldo de'
  }
};

function ThanksFrame({ t, safe, cb, code }) {
  return (
    <Frame w={1080} h={1920} safe={safe} cb={cb} cbLabel={t.cb} code={code ? t.code : null}>
      <img className="bgimg" src="assets/moments/moment-07-drums.jpg" alt="" style={{ objectPosition: '50% 42%' }} />
      <div className="scrim" style={{ background: 'linear-gradient(180deg,rgba(11,36,31,.7) 0%,rgba(11,36,31,.46) 24%,rgba(11,36,31,.92) 64%,#08201c 100%)' }} />
      <div className="keyline" />
      <div className="body" style={{ padding: '256px 80px 424px', alignItems: 'center', textAlign: 'center' }}>
        <LockBand lang={t.lg} scale={2.2} h={152} />
        <div className="eyebrow26" style={{ marginTop: 40 }}>{t.eyebrow}</div>
        <div style={{ flex: 1 }} />
        <h2 className="title26" style={{ fontSize: 104, maxWidth: 860 }}>{t.title}</h2>
        <div className="script26" style={{ fontSize: 66, marginTop: 26 }}>{t.script}</div>
        <FlourishDivider width={380} color="rgba(227,192,113,.72)" style={{ marginTop: 40 }} />
        <div className="lede26" style={{ fontSize: 34, marginTop: 30, maxWidth: 780 }}>{t.note}</div>
        <div style={{ flex: 1 }} />
        <div className="eyebrow26" style={{ fontSize: 26 }}>{t.line}</div>
        <div className="lede26" style={{ fontSize: 28, marginTop: 18, color: 'rgba(244,234,212,.7)' }}>{t.cta}</div>
      </div>
    </Frame>
  );
}

function App14() {
  return (
    <Chrome title="Master 14 · Closing thank-you Reel" format="Instagram Reels / Stories · 9:16 · 1080×1920" natW={2208}>
      {({ safe, cb, code }) => ['en', 'es'].map(k => (
        <Col key={k} label={L14[k].lang}>
          <ThanksFrame t={L14[k]} safe={safe} cb={cb} code={code} />
        </Col>
      ))}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App14 />);