/* TOT26 · Master 04 — QR how-it-works Reel, 1080×1920 · cover + 3 beats. */
const L04 = {
  en: {
    lg: 'en', lang: 'English', code: 'TOT26_mecanica_viajero_9x16_qr_EN_v1',
    eyebrow: 'How it works', cta: 'See how it works',
    cover: 'Buy your pass. Show your QR. Scan. Save. Repeat.',
    beats: [
      { n: '01', t: 'Buy your pass.', s: 'Choose Day, Week or Full Festival.', img: 'assets/moments/moment-03-cafe.jpg' },
      { n: '02', t: 'Show your QR.', s: 'It arrives by email. Nothing to print.', img: 'assets/moments/moment-01-fish.jpg' },
      { n: '03', t: 'Scan. Save. Repeat.', s: 'At every participating venue, all month.', img: 'assets/moments/moment-02-beach-eat.jpg' }
    ],
    note: 'Your phone is your pass.'
  },
  es: {
    lg: 'es', lang: 'Español', code: 'TOT26_mecanica_viajero_9x16_qr_ES_v1',
    eyebrow: 'Cómo funciona', cta: 'Mira cómo funciona',
    cover: 'Compra tu pase. Muestra tu QR. Escanea. Ahorra. Repite.',
    beats: [
      { n: '01', t: 'Compra tu pase.', s: 'Elige Day, Week o Full Festival.', img: 'assets/moments/moment-03-cafe.jpg' },
      { n: '02', t: 'Muestra tu QR.', s: 'Llega por correo. Nada que imprimir.', img: 'assets/moments/moment-01-fish.jpg' },
      { n: '03', t: 'Escanea. Ahorra. Repite.', s: 'En cada venue participante, todo el mes.', img: 'assets/moments/moment-02-beach-eat.jpg' }
    ],
    note: 'Tu teléfono es tu pase.'
  }
};

function ReelCover({ t, ...o }) {
  return (
    <Frame w={1080} h={1920} {...o} code={o.code ? t.code + '_01' : null} cbLabel={t.lg === 'es' ? 'Con el respaldo de' : 'Supported by'}>
      <img className="bgimg" src="assets/moments/moment-04-candles.jpg" alt="" style={{ objectPosition: '50% 42%' }} />
      <div className="scrim" style={{ background: 'linear-gradient(180deg,rgba(11,36,31,.66) 0%,rgba(11,36,31,.4) 26%,rgba(11,36,31,.92) 68%,#08201c 100%)' }} />
      <div className="keyline" />
      <div className="body" style={{ padding: '256px 80px 424px', alignItems: 'center', textAlign: 'center' }}>
        <LockBand lang={t.lg} scale={2.2} h={152} />
        <div className="eyebrow26" style={{ marginTop: 42 }}>{t.eyebrow}</div>
        <div style={{ flex: 1 }} />
        <h2 className="title26" style={{ fontSize: 104, maxWidth: 880 }}>{t.cover}</h2>
        <FlourishDivider width={360} color="rgba(227,192,113,.72)" style={{ marginTop: 40 }} />
        <div className="script26" style={{ fontSize: 60, marginTop: 26 }}>{t.note}</div>
        <div style={{ flex: 1 }} />
        <Button variant="gold" size="lg" style={{ width: 640, justifyContent: 'center', fontSize: 30, padding: '28px 0', letterSpacing: '.12em', borderWidth: 2 }}>{t.cta}</Button>
      </div>
    </Frame>
  );
}

function Beat({ t, b, i, ...o }) {
  return (
    <Frame w={1080} h={1920} {...o} code={o.code ? t.code + '_0' + (i + 2) : null} cbLabel={t.lg === 'es' ? 'Con el respaldo de' : 'Supported by'}>
      <img className="bgimg" src={b.img} alt="" style={{ objectPosition: '50% 40%' }} />
      <div className="scrim" style={{ background: 'linear-gradient(180deg,rgba(11,36,31,.5) 0%,rgba(11,36,31,.3) 30%,rgba(11,36,31,.94) 66%,#08201c 100%)' }} />
      <div className="keyline" />
      <div className="body" style={{ padding: '256px 80px 424px' }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          {[0, 1, 2].map(n => <span key={n} style={{ height: 6, flex: 1, background: n <= i ? '#e3c071' : 'rgba(227,192,113,.26)' }} />)}
        </div>
        <div style={{ flex: 1 }} />
        <span style={{ fontFamily: 'var(--c26-font-title)', fontSize: 132, fontWeight: 700, lineHeight: 1, color: '#e3c071' }}>{b.n}</span>
        <h2 className="title26" style={{ fontSize: 96, marginTop: 22, maxWidth: 860 }}>{b.t}</h2>
        <div className="lede26" style={{ fontSize: 36, marginTop: 22, maxWidth: 760 }}>{b.s}</div>
        <div style={{ flex: 1 }} />
        <Lock scale={1.7} />
      </div>
    </Frame>
  );
}

function App04() {
  return (
    <Chrome title="Master 04 · QR how-it-works Reel" format="Instagram Reels · 9:16 · 1080×1920 · cover + 3 beats" natW={2208} stack>
      {({ safe, cb, code }) => ['en', 'es'].map(k => {
        const t = L04[k], o = { safe, cb, code };
        return (
          <Col key={k} label={t.lang}>
            <div style={{ display: 'flex', gap: 48 }}>
              <ReelCover t={t} {...o} />
              {t.beats.map((b, i) => <Beat key={b.n} t={t} b={b} i={i} {...o} />)}
            </div>
          </Col>
        );
      })}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App04 />);