/* TOT26 · Master 03 — Price-step urgency Story, 1080×1920. EN + ES. */
const L03 = {
  en: {
    lg: 'en', lang: 'English', code: 'TOT26_precio_viajero_9x16_urgencia_EN_v1',
    eyebrow: 'September pricing ends soon',
    title: 'The price only goes up.',
    steps: [
      { k: 'August', v: '50% off every pass', s: 'closed' },
      { k: 'September', v: '25% off every pass', s: 'now' },
      { k: 'October 1', v: 'Full price', s: 'next' }
    ],
    now: 'Now', next: 'From October 1',
    rows: [['Day pass', '$15', '$20'], ['Week pass', '$56', '$75'], ['Full festival', '$150', '$200']],
    note: 'Buy today and you keep the September rate. Payment is once — there is nothing to renew. Your pass covers the festival dates whenever you buy it.',
    cta: 'Lock your rate', flag: 'Now', cb: 'Supported by'
  },
  es: {
    lg: 'es', lang: 'Español', code: 'TOT26_precio_viajero_9x16_urgencia_ES_v1',
    eyebrow: 'El precio de septiembre termina pronto',
    title: 'El precio sólo sube.',
    steps: [
      { k: 'Agosto', v: '50% de descuento', s: 'closed' },
      { k: 'Septiembre', v: '25% de descuento', s: 'now' },
      { k: '1 de octubre', v: 'Precio completo', s: 'next' }
    ],
    now: 'Ahora', next: 'Desde el 1 de octubre',
    rows: [['Pase de día', '$15', '$20'], ['Pase semanal', '$56', '$75'], ['Pase completo', '$150', '$200']],
    note: 'Compra hoy y conservas la tarifa de septiembre. Es un solo pago, no hay nada que renovar. Tu pase cubre las fechas del festival, sin importar cuándo lo compres.',
    cta: 'Asegura tu tarifa', flag: 'Ahora', cb: 'Con el respaldo de'
  }
};

function Step({ s, t }) {
  const on = s.s === 'now', done = s.s === 'closed';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 20, padding: '18px 26px',
      background: on ? '#fffaee' : 'transparent', borderBottom: '1px solid rgba(192,138,46,.34)',
      opacity: done ? .45 : 1
    }}>
      <span style={{ width: 16, height: 16, borderRadius: '50%', flex: 'none', background: on ? '#b23226' : 'transparent', border: on ? 'none' : '2px solid rgba(192,138,46,.6)' }} />
      <span style={{ fontSize: 22, fontWeight: 800, letterSpacing: '.2em', textTransform: 'uppercase', color: '#11302a', minWidth: 290 }}>{s.k}</span>
      <span style={{ fontSize: 28, color: '#4a5b52', flex: 1, textDecoration: done ? 'line-through' : 'none' }}>{s.v}</span>
      {on ? <span style={{ fontSize: 20, fontWeight: 800, letterSpacing: '.16em', textTransform: 'uppercase', color: '#fdf3e0', background: '#b23226', padding: '7px 14px', borderRadius: 3 }}>{t.flag}</span> : null}
    </div>
  );
}

function PriceStepFrame({ t, safe, cb, code }) {
  return (
    <Frame w={1080} h={1920} safe={safe} cb={cb} cbLabel={t.cb} code={code ? t.code : null} codeInk={!cb} style={{ background: 'var(--c26-parchment)' }}>
      <img src="assets/flower-deco.png" alt="" style={{ position: 'absolute', top: -110, right: -150, width: 420, mixBlendMode: 'multiply', opacity: .36 }} />
      <img src="assets/flower-deco.png" alt="" style={{ position: 'absolute', bottom: 330, left: -140, width: 360, mixBlendMode: 'multiply', opacity: .24, transform: 'scaleX(-1)' }} />
      <div className="keyline ink" />
      <div className="body" style={{ padding: '278px 80px 440px', alignItems: 'center', textAlign: 'center' }}>
        <LockBand lang={t.lg} scale={2.2} h={152} />
        <div className="eyebrow26 ink" style={{ marginTop: 34 }}>{t.eyebrow}</div>
        <h2 className="title26 ink" style={{ fontSize: 94, marginTop: 16, maxWidth: 840 }}>{t.title}</h2>
        <div style={{ flex: 1 }} />
        <div style={{ width: '100%', border: '1.5px solid var(--c26-gold)', borderRadius: 4, background: 'rgba(255,255,255,.42)', overflow: 'hidden', textAlign: 'left' }}>
          {t.steps.map(s => <Step key={s.k} s={s} t={t} />)}
          <div style={{ display: 'flex', padding: '20px 26px 8px', gap: 20 }}>
            <span style={{ flex: 1 }} />
            <span style={{ width: 190, textAlign: 'right', fontSize: 19, fontWeight: 800, letterSpacing: '.16em', textTransform: 'uppercase', color: '#b23226' }}>{t.now}</span>
            <span style={{ width: 250, textAlign: 'right', fontSize: 19, fontWeight: 800, letterSpacing: '.16em', textTransform: 'uppercase', color: '#8a9a90' }}>{t.next}</span>
          </div>
          {t.rows.map(r => (
            <div key={r[0]} style={{ display: 'flex', alignItems: 'baseline', gap: 20, padding: '14px 26px', borderTop: '1px solid rgba(192,138,46,.2)' }}>
              <span style={{ flex: 1, fontFamily: 'var(--c26-font-title)', fontSize: 36, fontWeight: 700, color: '#11302a' }}>{r[0]}</span>
              <span className="tnum" style={{ width: 190, textAlign: 'right', fontFamily: 'var(--c26-font-title)', fontSize: 46, fontWeight: 700, color: '#11302a', fontVariantNumeric: 'tabular-nums' }}>{r[1]}</span>
              <span className="tnum" style={{ width: 250, textAlign: 'right', fontSize: 30, color: '#8a9a90', textDecoration: 'line-through', fontVariantNumeric: 'tabular-nums' }}>{r[2]}</span>
            </div>
          ))}
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 14, padding: '10px 26px 20px', alignItems: 'center' }}>
            <span style={{ fontSize: 22, fontWeight: 800, letterSpacing: '.14em', color: '#7d8f86' }}>USD</span>
            <Ph style={{ fontSize: 18 }}>MXN column · pending approval</Ph>
          </div>
        </div>
        <div style={{ flex: 1 }} />
        <Button variant="primary" size="lg" style={{ width: 640, justifyContent: 'center', fontSize: 30, padding: '26px 0', letterSpacing: '.12em', border: '2px solid var(--c26-gold)' }}>{t.cta}</Button>
        <div className="lede26 ink" style={{ fontSize: 22, marginTop: 22, maxWidth: 800, lineHeight: 1.45 }}>{t.note}</div>
      </div>
    </Frame>
  );
}

function App03() {
  return (
    <Chrome title="Master 03 · Price-step urgency Story" format="Instagram Stories · 9:16 · 1080×1920" natW={2208}>
      {({ safe, cb, code }) => ['en', 'es'].map(k => (
        <Col key={k} label={L03[k].lang}>
          <PriceStepFrame t={L03[k]} safe={safe} cb={cb} code={code} />
        </Col>
      ))}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App03 />);