/* TOT26 · Master 12 — Checkout-recovery ad, 1080×1350. */
const L12 = {
  en: {
    lg: 'en', lang: 'English', code: 'TOT26_recuperacion_viajero_4x5_checkout_EN_v1',
    eyebrow: 'Almost yours', title: 'Your Tulum month is still waiting.',
    sub: 'Finish choosing your pass — the price only goes up.',
    label: 'From', cur: 'USD', cta: 'Finish your purchase',
    trust: 'Secure checkout by Stripe · Apple Pay & Google Pay · Your QR pass arrives by email',
    rows: 'One payment. Nothing to renew.', cb: 'Supported by'
  },
  es: {
    lg: 'es', lang: 'Español', code: 'TOT26_recuperacion_viajero_4x5_checkout_ES_v1',
    eyebrow: 'Casi tuyo', title: 'Tu mes en Tulum todavía te espera.',
    sub: 'Termina de elegir tu pase: el precio sólo sube.',
    label: 'Desde', cur: 'USD', cta: 'Termina tu compra',
    trust: 'Pago seguro con Stripe · Apple Pay y Google Pay · Tu pase con código QR llega por correo',
    rows: 'Un solo pago. Nada que renovar.', cb: 'Con el respaldo de'
  }
};

function RecoveryFrame({ t, safe, cb, code }) {
  return (
    <Frame w={1080} h={1350} safeTop={0} safeBottom={130} safeSide={80} safe={safe} cb={cb} cbLabel={t.cb} code={code ? t.code : null}>
      <img className="bgimg" src="assets/moments/moment-01-fish.jpg" alt="" style={{ objectPosition: '50% 40%' }} />
      <div className="scrim" style={{ background: 'linear-gradient(180deg,rgba(11,36,31,.56) 0%,rgba(11,36,31,.44) 26%,rgba(11,36,31,.95) 70%,#08201c 100%)' }} />
      <div className="keyline" />
      <div className="body">
        <LockBand lang={t.lg} scale={2.1} h={144} flush />
        <div style={{ padding: '0 84px 118px', display: 'flex', flexDirection: 'column', flex: 1 }}>
          <div style={{ flex: 1 }} />
          <div className="eyebrow26">{t.eyebrow}</div>
          <h2 className="title26" style={{ fontSize: 92, marginTop: 18, maxWidth: 820 }}>{t.title}</h2>
          <div className="lede26" style={{ fontSize: 34, marginTop: 20, maxWidth: 760 }}>{t.sub}</div>
          <div style={{ marginTop: 38, display: 'flex', alignItems: 'flex-end', gap: 22 }}>
            <div>
              <div className="eyebrow26" style={{ fontSize: 20 }}>{t.label}</div>
              <div className="money26" style={{ marginTop: 8 }}>
                <span className="big" style={{ fontSize: 124 }}>$15</span>
                <span className="cur">{t.cur}</span>
              </div>
            </div>
            <div style={{ flex: 1 }} />
            <div style={{ textAlign: 'right', fontSize: 24, color: 'rgba(244,234,212,.7)', lineHeight: 1.4, maxWidth: 320 }}>{t.rows}</div>
          </div>
          <Button variant="gold" size="lg" style={{ marginTop: 34, width: '100%', justifyContent: 'center', fontSize: 32, padding: '30px 0', letterSpacing: '.12em', borderWidth: 2 }}>{t.cta}</Button>
          <div className="trust26" style={{ marginTop: 22, fontSize: 20, lineHeight: 1.45 }}>{t.trust}</div>
        </div>
      </div>
    </Frame>
  );
}

function App12() {
  return (
    <Chrome title="Master 12 · Checkout-recovery ad" format="Meta Ads · 4:5 · 1080×1350" natW={2208}>
      {({ safe, cb, code }) => ['en', 'es'].map(k => (
        <Col key={k} label={L12[k].lang}>
          <RecoveryFrame t={L12[k]} safe={safe} cb={cb} code={code} />
        </Col>
      ))}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App12 />);