/* TOT26 · Master 13 — Google Display retargeting banner set. 5 IAB sizes × EN/ES. */
const L13 = {
  en: {
    lg: 'en', lang: 'English', code: 'TOT26_recuperacion_viajero_display_pase_EN_v1',
    title: 'Your Tulum pass is waiting.', dates: 'Oct 28 – Nov 27, 2026 · Tulum',
    from: 'From', cur: 'USD', cta: 'Finish your purchase', ctaShort: 'Finish purchase'
  },
  es: {
    lg: 'es', lang: 'Español', code: 'TOT26_recuperacion_viajero_display_pase_ES_v1',
    title: 'Tu pase de Tulum te espera.', dates: '28 oct – 27 nov, 2026 · Tulum',
    from: 'Desde', cur: 'USD', cta: 'Termina tu compra', ctaShort: 'Termina tu compra'
  }
};
const SIZES = [[300, 250, 'Medium rectangle'], [336, 280, 'Large rectangle'], [728, 90, 'Leaderboard'], [300, 600, 'Half page'], [160, 600, 'Wide skyscraper']];

function BannerCTA({ label, size = 12 }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center',
      background: 'linear-gradient(180deg,#e3c071,#c08a2e)', border: '1px solid #c08a2e', borderRadius: 3,
      color: '#2f2007', fontFamily: 'var(--c26-font-info)', fontSize: size, fontWeight: 800,
      letterSpacing: '.1em', textTransform: 'uppercase', padding: '9px 14px', lineHeight: 1.1
    }}>{label}</span>
  );
}

function Banner({ t, w, h, name, code }) {
  const wide = w > h * 2, narrow = w <= 180;
  const pad = narrow ? 12 : 16;
  const titleSize = wide ? 22 : narrow ? 20 : w >= 336 ? 28 : 25;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div className="lab" style={{ fontSize: 12, letterSpacing: '.16em' }}>{w}×{h} · {name}</div>
      <div className="frame" style={{ width: w, height: h, background: 'var(--c26-teal)', boxShadow: '0 8px 24px rgba(0,0,0,.4)' }}>
        <div style={{ position: 'absolute', inset: 4, border: '1px solid rgba(227,192,113,.4)' }} />
        <div style={{
          position: 'absolute', inset: 0, padding: pad, display: 'flex',
          flexDirection: wide ? 'row' : 'column', alignItems: wide ? 'center' : 'flex-start',
          gap: wide ? 16 : 10, justifyContent: wide ? 'space-between' : 'flex-start'
        }}>
          <img src="assets/tulum-logo-gold.png" alt="Taste of Tulum" style={{ height: narrow ? 26 : wide ? 34 : 32, width: 'auto', flex: 'none' }} />
          <div style={{ flex: wide ? 1 : 'none' }}>
            <div style={{ fontFamily: 'var(--c26-font-title)', fontWeight: 700, fontSize: titleSize, lineHeight: 1.1, color: 'var(--c26-parchment)', letterSpacing: '-.01em' }}>{t.title}</div>
            {!narrow ? <div style={{ fontFamily: 'var(--c26-font-info)', fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'rgba(227,192,113,.9)', marginTop: 6 }}>{t.dates}</div> : null}
          </div>
          {!wide ? <div style={{ flex: 1 }} /> : null}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 'none', flexDirection: narrow ? 'column' : 'row', alignSelf: narrow ? 'stretch' : 'auto' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, fontVariantNumeric: 'tabular-nums' }}>
              <span style={{ fontFamily: 'var(--c26-font-info)', fontSize: 10, fontWeight: 800, letterSpacing: '.12em', textTransform: 'uppercase', color: 'rgba(244,234,212,.66)' }}>{t.from}</span>
              <span style={{ fontFamily: 'var(--c26-font-title)', fontSize: 26, fontWeight: 700, color: 'var(--c26-parchment)' }}>$15</span>
              <span style={{ fontFamily: 'var(--c26-font-info)', fontSize: 10, fontWeight: 800, letterSpacing: '.12em', color: 'rgba(244,234,212,.66)' }}>{t.cur}</span>
            </div>
            <BannerCTA label={narrow || w < 320 ? t.ctaShort : t.cta} size={narrow ? 10 : 11} />
          </div>
        </div>
      </div>
      {code ? <div style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 10, color: 'rgba(159,181,172,.7)', maxWidth: w }}>{t.code}_{w}x{h}</div> : null}
    </div>
  );
}

function App13() {
  return (
    <Chrome title="Master 13 · Google Display retargeting set" format="Google Display · 5 IAB sizes · checkout recovery" natW={2010} stack>
      {({ code }) => ['en', 'es'].map(k => (
        <Col key={k} label={L13[k].lang}>
          <div style={{ display: 'flex', gap: 34, alignItems: 'flex-end' }}>
            {SIZES.map(([w, h, n]) => <Banner key={w + 'x' + h} t={L13[k]} w={w} h={h} name={n} code={code} />)}
          </div>
        </Col>
      ))}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App13 />);