/* TOT26 · Master 05 — Pass-comparison carousel, 5 × 1080×1350. */
const L05 = {
  en: {
    lg: 'en', lang: 'English', code: 'TOT26_valor_viajero_4x5_pases_EN_v1',
    eyebrow: 'Choose your pass', cover: 'Which pass fits your trip?',
    lede: 'Three passes. One month of Tulum.',
    now: 'September price', oct: 'October price', cur: 'USD',
    best: 'Best value', end: 'Choose your pass', cta: 'Buy your pass',
    note: 'One payment. Nothing to renew. Your pass covers the festival dates whenever you buy it.',
    cb: 'Supported by'
  },
  es: {
    lg: 'es', lang: 'Español', code: 'TOT26_valor_viajero_4x5_pases_ES_v1',
    eyebrow: 'Elige tu pase', cover: '¿Qué pase se adapta a tu viaje?',
    lede: 'Tres pases. Un mes de Tulum.',
    now: 'Precio de septiembre', oct: 'Precio de octubre', cur: 'USD',
    best: 'Mejor valor', end: 'Elige tu pase', cta: 'Compra tu pase',
    note: 'Un solo pago. Nada que renovar. Tu pase cubre las fechas del festival, sin importar cuándo lo compres.',
    cb: 'Con el respaldo de'
  }
};
const F5 = { w: 1080, h: 1350, safeTop: 0, safeBottom: 130, safeSide: 80 };

function Cover5({ t, ...o }) {
  return (
    <Frame {...F5} {...o} code={o.code ? t.code + '_01' : null} cbLabel={t.cb}>
      <img className="bgimg" src="assets/moments/moment-05-white-fan.jpg" alt="" style={{ objectPosition: '50% 38%' }} />
      <div className="scrim" style={{ background: 'linear-gradient(180deg,rgba(11,36,31,.58) 0%,rgba(11,36,31,.36) 34%,rgba(11,36,31,.94) 100%)' }} />
      <div className="keyline" />
      <div className="body" style={{ padding: '0 84px 118px' }}>
        <LockBand pad={84} lang={t.lg} scale={2.1} h={144} flush />
        <div style={{ flex: 1 }} />
        <div className="eyebrow26">{t.eyebrow}</div>
        <h2 className="title26" style={{ fontSize: 92, marginTop: 20, maxWidth: 800 }}>{t.cover}</h2>
        <div className="script26" style={{ fontSize: 54, marginTop: 22 }}>{t.lede}</div>
        <div style={{ marginTop: 34 }}><Dots5 i={0} /></div>
      </div>
    </Frame>
  );
}

function Dots5({ i, ink }) {
  return <div className={'dots' + (ink ? ' ink' : '')}>{[0, 1, 2, 3, 4].map(n => <i key={n} className={n === i ? 'on' : ''} />)}</div>;
}

function PassSlide({ t, p, i, hero, ...o }) {
  return (
    <Frame {...F5} {...o} code={o.code ? t.code + '_0' + (i + 2) : null} codeInk={!o.cb} cbLabel={t.cb} style={{ background: 'var(--c26-parchment)' }}>
      <div className="keyline ink" />
      <div className="body" style={{ padding: '0 84px 116px' }}>
        <LockBand pad={84} lang={t.lg} scale={2.1} h={144} flush />
        <div style={{ marginTop: 54, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <span className="eyebrow26 ink">{p.s}</span>
          {hero ? <span style={{ fontSize: 22, fontWeight: 800, letterSpacing: '.18em', textTransform: 'uppercase', color: '#11302a', background: 'var(--c26-gold-bright)', border: '1px solid var(--c26-gold)', borderRadius: 3, padding: '8px 14px' }}>{t.best}</span> : null}
        </div>
        <h2 className="title26 ink" style={{ fontSize: 88, marginTop: 14 }}>{p.n}</h2>
        <div style={{ marginTop: 44, borderTop: '1.5px solid var(--c26-line)', borderBottom: '1.5px solid var(--c26-line)', padding: '34px 0', display: 'flex', alignItems: 'flex-end', gap: 26 }}>
          <div>
            <div className="eyebrow26 ink" style={{ fontSize: 20 }}>{t.now}</div>
            <div className="money26" style={{ marginTop: 10 }}>
              <span className="big ink" style={{ fontSize: 148 }}>{p.now}</span>
              <span className="cur ink">{t.cur}</span>
            </div>
          </div>
          <div style={{ flex: 1 }} />
          <div style={{ textAlign: 'right' }}>
            <div className="eyebrow26 ink" style={{ fontSize: 20, color: '#8a9a90' }}>{t.oct}</div>
            <div className="tnum" style={{ fontFamily: 'var(--c26-font-title)', fontSize: 62, color: '#8a9a90', textDecoration: 'line-through', marginTop: 8, fontVariantNumeric: 'tabular-nums' }}>{p.oct}</div>
          </div>
        </div>
        <div className="lede26 ink" style={{ fontSize: 34, marginTop: 34, maxWidth: 780 }}>{p.d}</div>
        <div style={{ flex: 1 }} />
        <Ph style={{ fontSize: 18, marginBottom: 26 }}>MXN price · pending approval</Ph>
        <Dots5 i={i + 1} ink />
      </div>
    </Frame>
  );
}

function End5({ t, ...o }) {
  const rows = PRICES[t.lg];
  return (
    <Frame {...F5} {...o} code={o.code ? t.code + '_05' : null} cbLabel={t.cb}>
      <div className="scrim" style={{ background: 'var(--c26-teal)' }} />
      <img src="assets/flower-deco.png" alt="" style={{ position: 'absolute', bottom: -80, left: -90, width: 440, opacity: .42 }} />
      <div className="keyline" />
      <div className="body" style={{ padding: '0 84px 118px' }}>
        <LockBand pad={84} lang={t.lg} scale={2.1} h={144} flush />
        <div style={{ flex: 1 }} />
        <h2 className="title26" style={{ fontSize: 84 }}>{t.end}</h2>
        <div style={{ marginTop: 34 }}>
          {rows.map(p => (
            <div key={p.n} style={{ display: 'flex', alignItems: 'baseline', gap: 18, padding: '20px 0', borderTop: '1px solid rgba(227,192,113,.3)' }}>
              <span style={{ flex: 1, fontFamily: 'var(--c26-font-title)', fontSize: 42, color: 'var(--c26-parchment)' }}>{p.n}</span>
              <span className="tnum" style={{ fontFamily: 'var(--c26-font-title)', fontSize: 52, color: '#e3c071', fontVariantNumeric: 'tabular-nums' }}>{p.now}</span>
              <span style={{ fontSize: 24, fontWeight: 800, letterSpacing: '.12em', color: 'rgba(244,234,212,.6)' }}>{t.cur}</span>
            </div>
          ))}
        </div>
        <Button variant="gold" size="lg" style={{ marginTop: 40, width: '100%', justifyContent: 'center', fontSize: 30, padding: '28px 0', letterSpacing: '.12em', borderWidth: 2 }}>{t.cta}</Button>
        <div className="trust26" style={{ marginTop: 26, fontSize: 22, lineHeight: 1.45 }}>{t.note}</div>
        <div style={{ flex: 1 }} />
        <Dots5 i={4} />
      </div>
    </Frame>
  );
}

function App05() {
  return (
    <Chrome title="Master 05 · Pass-comparison carousel" format="Instagram / Facebook feed · 4:5 · 1080×1350 · 5 slides" natW={2208} stack>
      {({ safe, cb, code }) => ['en', 'es'].map(k => {
        const t = L05[k], o = { safe, cb, code };
        return (
          <Col key={k} label={t.lang}>
            <div style={{ display: 'flex', gap: 48 }}>
              <Cover5 t={t} {...o} />
              {PRICES[k].map((p, i) => <PassSlide key={p.n} t={t} p={p} i={i} hero={i === 2} {...o} />)}
              <End5 t={t} {...o} />
            </div>
          </Col>
        );
      })}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App05 />);