/* TOT26 · Master 11 — Live "today's offers" Story, 1080×1920. Operator template, all inventory fields blank. */
const L11 = {
  en: {
    lg: 'en', lang: 'English', code: 'TOT26_utilidad_viajero_9x16_hoy_EN_v1',
    eyebrow: 'Live today', title: 'Today’s offers are live.',
    date: '[DATE]', week: '[THEMED WEEK]',
    head: ['Venue', 'Offer', 'Time', 'Status'],
    rows: [['[CONFIRMED VENUE]', '[LIVE OFFER]', '[HH:MM]', 'Open'], ['[CONFIRMED VENUE]', '[LIVE OFFER]', '[HH:MM]', 'Open'], ['[CONFIRMED VENUE]', '[LIVE OFFER]', '[HH:MM]', 'Few left']],
    foot: 'Show your QR when you arrive.', cta: 'Explore today’s offers', cb: 'Supported by'
  },
  es: {
    lg: 'es', lang: 'Español', code: 'TOT26_utilidad_viajero_9x16_hoy_ES_v1',
    eyebrow: 'Hoy en vivo', title: 'Las ofertas de hoy ya están disponibles.',
    date: '[FECHA]', week: '[SEMANA TEMÁTICA]',
    head: ['Sede', 'Oferta', 'Horario', 'Estado'],
    rows: [['[SEDE CONFIRMADA]', '[OFERTA VIGENTE]', '[HH:MM]', 'Abierto'], ['[SEDE CONFIRMADA]', '[OFERTA VIGENTE]', '[HH:MM]', 'Abierto'], ['[SEDE CONFIRMADA]', '[OFERTA VIGENTE]', '[HH:MM]', 'Últimos lugares']],
    foot: 'Muestra tu QR al llegar.', cta: 'Ver las ofertas de hoy', cb: 'Con el respaldo de'
  }
};

function LiveFrame({ t, safe, cb, code }) {
  return (
    <Frame w={1080} h={1920} safe={safe} cb={cb} cbLabel={t.cb} code={code ? t.code : null} style={{ background: '#0d2b26' }}>
      <div className="keyline" />
      <div className="body" style={{ padding: '256px 80px 424px' }}>
        <LockBand lang={t.lg} scale={2.2} h={152} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 40 }}>
          <span style={{ width: 16, height: 16, borderRadius: '50%', background: 'var(--c26-teal-accent)', boxShadow: '0 0 0 6px rgba(29,107,94,.3)' }} />
          <span className="eyebrow26">{t.eyebrow}</span>
          <span style={{ flex: 1 }} />
          <Ph dark style={{ fontSize: 20 }}>{t.date}</Ph>
        </div>
        <h2 className="title26" style={{ fontSize: 82, marginTop: 22, maxWidth: 820 }}>{t.title}</h2>
        <div style={{ marginTop: 16 }}><Ph dark style={{ fontSize: 20 }}>{t.week}</Ph></div>
        <div style={{ marginTop: 40, background: 'rgba(244,234,212,.05)', border: '1.5px solid rgba(227,192,113,.4)', borderRadius: 4 }}>
          <div style={{ display: 'flex', gap: 18, padding: '20px 26px', borderBottom: '1px solid rgba(227,192,113,.3)' }}>
            {t.head.map((h, i) => (
              <span key={h} style={{ flex: i === 0 ? 1.4 : i === 1 ? 1.6 : .8, fontSize: 19, fontWeight: 800, letterSpacing: '.16em', textTransform: 'uppercase', color: 'rgba(244,234,212,.6)' }}>{h}</span>
            ))}
          </div>
          {t.rows.map((r, i) => (
            <div key={i} style={{ display: 'flex', gap: 18, alignItems: 'center', padding: '26px', borderBottom: i < 2 ? '1px solid rgba(227,192,113,.16)' : 'none' }}>
              <span style={{ flex: 1.4 }}><Ph dark style={{ fontSize: 17 }}>{r[0]}</Ph></span>
              <span style={{ flex: 1.6 }}><Ph dark style={{ fontSize: 17 }}>{r[1]}</Ph></span>
              <span style={{ flex: .8 }}><Ph dark style={{ fontSize: 17 }}>{r[2]}</Ph></span>
              <span style={{ flex: .8, fontSize: 21, fontWeight: 800, letterSpacing: '.1em', textTransform: 'uppercase', color: i === 2 ? '#d4772a' : '#7ac9b4' }}>{r[3]}</span>
            </div>
          ))}
        </div>
        <div style={{ flex: 1 }} />
        <div className="script26" style={{ fontSize: 52 }}>{t.foot}</div>
        <Button variant="gold" size="lg" style={{ marginTop: 30, width: '100%', justifyContent: 'center', fontSize: 30, padding: '28px 0', letterSpacing: '.12em', borderWidth: 2 }}>{t.cta}</Button>
      </div>
    </Frame>
  );
}

function App11() {
  return (
    <Chrome title="Master 11 · Live “today’s offers” Story" format="Instagram Stories · 9:16 · 1080×1920 · operator template" natW={2208}>
      {({ safe, cb, code }) => ['en', 'es'].map(k => (
        <Col key={k} label={L11[k].lang}>
          <LiveFrame t={L11[k]} safe={safe} cb={cb} code={code} />
        </Col>
      ))}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App11 />);