/* TOT26 · Master 01 — Launch Reel / Story cover, 1080×1920. EN + ES. */
const L01 = {
  en: {
    lg: 'en', lang: 'English', code: 'TOT26_lanzamiento_viajero_9x16_pase_EN_v1',
    dates: 'Oct 28 – Nov 27, 2026 · Tulum, México',
    title: 'One pass. A different Tulum every day.',
    script: 'come, celebrate & savor',
    from: 'From', cta: 'Buy your pass',
    trust: 'Secure checkout · Your QR pass arrives by email',
    cb: 'Supported by'
  },
  es: {
    lg: 'es', lang: 'Español', code: 'TOT26_lanzamiento_viajero_9x16_pase_ES_v1',
    dates: '28 oct – 27 nov, 2026 · Tulum, México',
    title: 'Un pase. Un Tulum diferente cada día.',
    script: 'ven, celebra y saborea',
    from: 'Desde', cta: 'Compra tu pase',
    trust: 'Pago seguro · Tu pase con código QR llega por correo',
    cb: 'Con el respaldo de'
  }
};

function LaunchFrame({ 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/hero-catrina.jpg" alt="" style={{ objectPosition: '58% 30%' }} />
      <div className="scrim" style={{ background: 'linear-gradient(180deg,rgba(11,36,31,.7) 0%,rgba(11,36,31,.46) 20%,rgba(11,36,31,.9) 56%,#08201c 100%)' }} />
      <div className="keyline" />
      <div className="body" style={{ padding: '292px 80px 452px', alignItems: 'center', textAlign: 'center' }}>
        <LockBand lang={t.lg} scale={2.2} h={152} />
        <FlourishDivider width={380} color="rgba(227,192,113,.72)" style={{ marginTop: 34 }} />
        <div className="eyebrow26" style={{ marginTop: 28 }}>{t.dates}</div>
        <div style={{ flex: 1 }} />
        <h2 className="title26" style={{ fontSize: 106, maxWidth: 880 }}>{t.title}</h2>
        <div className="script26" style={{ fontSize: 68, marginTop: 26 }}>{t.script}</div>
        <div style={{ flex: 1 }} />
        <div className="money26" style={{ justifyContent: 'center' }}>
          <span className="cur">{t.from}</span>
          <span className="big" style={{ fontSize: 132 }}>$15</span>
          <span className="cur">USD</span>
        </div>
        <Ph dark style={{ marginTop: 18, fontSize: 19 }}>MXN price · pending approval</Ph>
        <Button variant="gold" size="lg" style={{ marginTop: 40, width: 640, justifyContent: 'center', fontSize: 32, padding: '30px 0', letterSpacing: '.12em', borderWidth: 2 }}>{t.cta}</Button>
        <div className="trust26" style={{ marginTop: 30, justifyContent: 'center' }}>{t.trust}</div>
      </div>
    </Frame>
  );
}

function App01() {
  return (
    <Chrome title="Master 01 · Launch Reel cover" format="Instagram Reels / Stories · 9:16 · 1080×1920" natW={2208}>
      {({ safe, cb, code }) => ['en', 'es'].map(k => (
        <Col key={k} label={L01[k].lang}>
          <LaunchFrame t={L01[k]} safe={safe} cb={cb} code={code} />
        </Col>
      ))}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App01 />);