/* TOT26 · Master 02 — QR how-it-works carousel, 5 × 1080×1350. EN + ES. */
const L02 = {
  en: {
    lg: 'en', lang: 'English', codeBase: 'TOT26_mecanica_viajero_4x5_qr_EN_v1',
    eyebrow: 'How it works',
    cover: 'Buy your pass. Show your QR. Scan. Save. Repeat.',
    steps: [
      { n: '01', t: 'Sign up.', s: 'Your account is your pass.', slot: 'Portal sign-up screenshot' },
      { n: '02', t: 'Discover offers.', s: "The full month's schedule, updated live.", slot: 'Live offers screen' },
      { n: '03', t: 'Show your QR at a participating venue.', s: 'No wristband. Nothing to print.', slot: 'QR scan at venue — approved photo' }
    ],
    endTitle: 'Your phone is your pass.',
    from: 'From', cta: 'See how it works',
    trust: 'Secure checkout · Your QR pass arrives by email',
    cb: 'Supported by'
  },
  es: {
    lg: 'es', lang: 'Español', codeBase: 'TOT26_mecanica_viajero_4x5_qr_ES_v1',
    eyebrow: 'Cómo funciona',
    cover: 'Compra tu pase. Muestra tu QR. Escanea. Ahorra. Repite.',
    steps: [
      { n: '01', t: 'Regístrate.', s: 'Tu cuenta es tu pase.', slot: 'Captura del registro en el portal' },
      { n: '02', t: 'Descubre ofertas.', s: 'El calendario del mes completo, actualizado al día.', slot: 'Pantalla de ofertas del día' },
      { n: '03', t: 'Muestra tu QR en un venue participante.', s: 'Sin pulsera y sin nada que imprimir.', slot: 'Escaneo del QR en sede — foto aprobada' }
    ],
    endTitle: 'Tu teléfono es tu pase.',
    from: 'Desde', cta: 'Mira cómo funciona',
    trust: 'Pago seguro · Tu pase con código QR llega por correo',
    cb: 'Con el respaldo de'
  }
};

const F = { w: 1080, h: 1350, safeTop: 0, safeBottom: 130, safeSide: 80 };

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

function Cover({ t, ...o }) {
  return (
    <Frame {...F} {...o} code={o.code ? t.codeBase + '_01' : null} cbLabel={t.cb}>
      <img className="bgimg" src="assets/restaurant-scene.jpg" alt="" style={{ objectPosition: '50% 55%' }} />
      <div className="scrim" style={{ background: 'linear-gradient(180deg,rgba(11,36,31,.62) 0%,rgba(11,36,31,.42) 40%,rgba(11,36,31,.94) 100%)' }} />
      <div className="keyline" />
      <div className="body" style={{ padding: '84px 92px 118px' }}>
        <LockBand lang={t.lg} scale={2.1} h={144} />
        <div style={{ flex: 1 }} />
        <div className="eyebrow26">{t.eyebrow}</div>
        <h2 className="title26" style={{ fontSize: 92, marginTop: 20, maxWidth: 840 }}>{t.cover}</h2>
        <FlourishDivider width={300} color="rgba(227,192,113,.7)" style={{ marginTop: 34 }} />
        <div style={{ marginTop: 34 }}><Dots i={0} /></div>
      </div>
    </Frame>
  );
}

function StepSlide({ t, s, i, ...o }) {
  return (
    <Frame {...F} {...o} code={o.code ? t.codeBase + '_0' + (i + 1) : 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={146} flush />
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 22, marginTop: 56 }}>
          <span style={{ fontFamily: 'var(--c26-font-title)', fontSize: 76, fontWeight: 700, lineHeight: 1, color: 'var(--c26-gold)' }}>{s.n}</span>
          <span className="eyebrow26 ink" style={{ paddingBottom: 8 }}>{t.eyebrow}</span>
        </div>
        <div style={{ marginTop: 26, height: 660, border: '1.5px solid var(--c26-gold)', background: '#fffaee', padding: 10 }}>
          <Slot id={'m02-' + t.lang.slice(0, 2).toLowerCase() + '-' + s.n} label={s.slot} style={{ height: 640 }} />
        </div>
        <h2 className="title26 ink" style={{ fontSize: 66, marginTop: 44, maxWidth: 820 }}>{s.t}</h2>
        <div className="lede26 ink" style={{ fontSize: 32, marginTop: 18, maxWidth: 780 }}>{s.s}</div>
        <div style={{ flex: 1 }} />
        <Dots i={i} ink />
      </div>
    </Frame>
  );
}

function EndSlide({ t, ...o }) {
  return (
    <Frame {...F} {...o} code={o.code ? t.codeBase + '_05' : null} cbLabel={t.cb}>
      <div className="scrim" style={{ background: 'var(--c26-teal)' }} />
      <img src="assets/flower-deco.png" alt="" style={{ position: 'absolute', bottom: -70, right: -80, width: 470, opacity: .5 }} />
      <div className="keyline" />
      <div className="body" style={{ padding: '92px 92px 118px', alignItems: 'center', textAlign: 'center' }}>
        <LockBand lang={t.lg} scale={2.1} h={144} />
        <div style={{ flex: 1 }} />
        <h2 className="title26" style={{ fontSize: 88, maxWidth: 760 }}>{t.endTitle}</h2>
        <div className="money26" style={{ marginTop: 40, justifyContent: 'center' }}>
          <span className="cur">{t.from}</span>
          <span className="big" style={{ fontSize: 116 }}>$15</span>
          <span className="cur">USD</span>
        </div>
        <Ph dark style={{ marginTop: 16, fontSize: 18 }}>MXN price · pending approval</Ph>
        <Button variant="gold" size="lg" style={{ marginTop: 40, width: 620, justifyContent: 'center', fontSize: 30, padding: '28px 0', letterSpacing: '.12em', borderWidth: 2 }}>{t.cta}</Button>
        <div className="trust26" style={{ marginTop: 28, justifyContent: 'center', fontSize: 21 }}>{t.trust}</div>
        <div style={{ flex: 1 }} />
        <Dots i={4} />
      </div>
    </Frame>
  );
}

function App02() {
  return (
    <Chrome title="Master 02 · QR how-it-works carousel" format="Instagram / Facebook feed · 4:5 · 1080×1350 · 5 slides" natW={2208} stack>
      {({ safe, cb, code }) => ['en', 'es'].map(k => {
        const t = L02[k], o = { safe, cb, code };
        return (
          <Col key={k} label={t.lang}>
            <div style={{ display: 'flex', gap: 48 }}>
              <Cover t={t} {...o} />
              {t.steps.map((s, i) => <StepSlide key={s.n} t={t} s={s} i={i + 1} {...o} />)}
              <EndSlide t={t} {...o} />
            </div>
          </Col>
        );
      })}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App02 />);